/* نفس مكونات /positions (إعادة استخدام الأصناف — بلا مساس بملف positions.php) */
    :root { --cyan:#00d2ff; }
    body { font-family:'Tajawal',sans-serif; background:#000000; color:#fff; margin:0; padding:0; overflow-x:hidden; }
    .content-container { max-width:1120px; margin:150px auto 100px; padding:48px;
        background:rgba(255,255,255,0.03); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
        border-radius:30px; border:1px solid rgba(255,255,255,0.08);
        box-shadow:0 40px 100px rgba(0,0,0,0.6); position:relative; z-index:1; }
    .doc-eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; color:rgba(0,210,255,0.8); font-size:12px; font-weight:800; letter-spacing:2px; margin-bottom:14px; }
    .doc-eyebrow::before,.doc-eyebrow::after { content:''; width:44px; height:1px; background:linear-gradient(90deg,transparent,rgba(0,210,255,0.55)); }
    .doc-eyebrow::after { background:linear-gradient(90deg,rgba(0,210,255,0.55),transparent); }
    h1 { font-size:clamp(26px,5vw,40px); font-weight:900; text-align:center; margin-bottom:12px;
        background:linear-gradient(135deg,#fff 30%,#00d2ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        filter:drop-shadow(0 0 30px rgba(0,210,255,0.35)); }
    .brand-desc { text-align:center; font-size:clamp(14px,2.3vw,16.5px); color:rgba(255,255,255,0.62); line-height:2; margin-bottom:8px; max-width:860px; margin-inline:auto; }
    .toc { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:34px; }
    .toc a { font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:999px; padding:4px 12px; text-decoration:none; }
    .toc a:hover { color:#00d2ff; border-color:rgba(0,210,255,0.35); }
    h2 { color:#00d2ff; font-size:20px; font-weight:900; margin:52px 0 10px; display:flex; align-items:center; gap:13px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
    h2 .num { min-width:40px; height:30px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,210,255,0.08); border:1px solid rgba(0,210,255,0.35); border-radius:9px; font-size:12.5px; color:#7dd3fc; letter-spacing:1px; }
    h3 { color:#fff; font-size:16px; font-weight:800; margin:20px 0 8px; }
    .sec-lead { color:rgba(255,255,255,0.62); font-size:14px; margin:0 0 14px; line-height:2; }
    .card { background:rgba(255,255,255,0.01); border:1px solid rgba(255,255,255,0.05); border-radius:22px; padding:20px 24px; margin:14px 0; }
    .guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:13px; margin:16px 0; }
    .guide-card { background:rgba(255,255,255,.025); border:1px solid rgba(0,210,255,.15); border-radius:18px; padding:18px; }
    .guide-card h3 { color:#7dd3fc; margin:0 0 8px; }
    .guide-card p { color:rgba(255,255,255,.76); line-height:1.9; margin:0; font-size:13.5px; }
    .flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; counter-reset:flow; margin:16px 0; }
    .flow-step { counter-increment:flow; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; line-height:1.85; color:rgba(255,255,255,.78); }
    .flow-step::before { content:counter(flow); display:flex; width:28px; height:28px; border-radius:50%; align-items:center; justify-content:center; color:#00d2ff; background:rgba(0,210,255,.1); margin-bottom:9px; font-weight:900; }
    .role-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:14px; margin:16px 0; }
    .role-card { background:linear-gradient(135deg,rgba(0,210,255,0.05),rgba(255,255,255,0.01)); border:1px solid rgba(0,210,255,0.16); border-radius:20px; padding:18px 20px; display:flex; flex-direction:column; }
    .role-card header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
    .role-card header i { width:40px; height:40px; min-width:40px; background:rgba(0,210,255,0.1); border:1px solid rgba(0,210,255,0.3); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#00d2ff; font-size:15px; }
    .role-card h3 { margin:0; font-size:15.5px; line-height:1.5; }
    .role-card p { margin:0; font-size:13.5px; color:rgba(255,255,255,0.78); line-height:1.95; }
    .policy-list { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:9px; }
    .policy-list li { position:relative; padding-right:24px; line-height:1.9; font-size:13.8px; color:rgba(255,255,255,0.82); }
    .policy-list li::before { content:'✦'; position:absolute; right:0; color:#00d2ff; font-size:10.5px; top:7px; }
    .policy-list li b { color:#fff; }
    .tag { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 11px; font-size:12px; font-weight:800; }
    .tag.live { background:rgba(52,211,153,0.1); border:1px solid rgba(52,211,153,0.35); color:#6ee7b7; }
    .tag.ref { background:rgba(251,191,36,0.09); border:1px solid rgba(251,191,36,0.3); color:#fcd34d; }
    .impact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:16px 0; }
    .impact-card { background:linear-gradient(135deg,rgba(0,210,255,0.07),rgba(255,255,255,0.01)); border:1px solid rgba(0,210,255,0.2); border-radius:20px; padding:20px; text-align:center; }
    .impact-card .v { font-size:34px; font-weight:900; color:#00d2ff; }
    .impact-card .l { font-size:14px; font-weight:800; color:#fff; margin-top:6px; }
    .impact-card .n { font-size:12px; color:rgba(255,255,255,0.55); margin-top:6px; line-height:1.9; }
    .notice { background:rgba(251,191,36,0.05); border:1px solid rgba(251,191,36,0.22); border-right:4px solid #fbbf24; border-radius:8px 18px 18px 8px; padding:13px 16px; font-size:13px; color:rgba(255,255,255,0.8); line-height:2; margin:13px 0; }
    .legal { background:rgba(167,139,250,0.05); border:1px solid rgba(167,139,250,0.22); border-right:4px solid #a78bfa; border-radius:8px 18px 18px 8px; padding:13px 16px; font-size:12.8px; color:rgba(255,255,255,0.75); line-height:2; margin:13px 0; }
    a { color:#00d2ff; }
    .xlinks { display:flex; flex-wrap:wrap; gap:9px; margin-top:10px; }
    .xlinks a { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:9px 15px; color:rgba(255,255,255,0.75); font-size:13px; font-weight:700; text-decoration:none; transition:all .25s ease; }
    .xlinks a:hover { color:#00d2ff; border-color:rgba(0,210,255,0.35); transform:translateY(-1px); }
    .cta-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
    .cta { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#00d2ff,#7c3aed); color:#fff; border-radius:16px; padding:13px 24px; font-weight:800; font-size:14.5px; text-decoration:none; }
    .btn-ghost { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(0,210,255,0.4); color:#7dd3fc; background:rgba(0,210,255,0.05); border-radius:16px; padding:13px 24px; font-weight:800; font-size:14.5px; text-decoration:none; }
    .btn-ghost:hover { background:rgba(0,210,255,0.1); }
    .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
    th { text-align:right; color:#00d2ff; font-weight:800; font-size:11.8px; padding:11px 9px; border-bottom:2px solid rgba(0,210,255,0.25); background:rgba(0,210,255,0.04); }
    td { padding:10px 9px; border-bottom:1px solid rgba(255,255,255,0.05); color:rgba(255,255,255,0.8); line-height:1.75; vertical-align:top; }
    tr:last-child td { border-bottom:none; }
    .jf { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
    .jf .full { grid-column:1 / -1; }
    .jf label { display:block; font-size:12.5px; font-weight:800; color:#fff; margin-bottom:6px; }
    .jf input,.jf select,.jf textarea { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:#fff; padding:11px 14px; font-size:13.5px; font-family:inherit; }
    .jf select option { background:#111; }
    .jf button[type=submit] { grid-column:1 / -1; background:linear-gradient(135deg,#00d2ff,#7c3aed); color:#fff; border:none; border-radius:14px; padding:14px; font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; }
    .flash-ok { background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.35); color:#6ee7b7; border-radius:12px; padding:11px 16px; font-size:13px; margin:12px 0; }
    .flash-err { background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.35); color:#ff9d97; border-radius:12px; padding:11px 16px; font-size:13px; margin:12px 0; }
    details.gov { border:1px solid rgba(255,255,255,0.08); border-radius:14px; margin:8px 0; background:rgba(255,255,255,0.015); }
    details.gov summary { cursor:pointer; padding:13px 16px; font-weight:800; font-size:14px; color:#fff; list-style:none; }
    details.gov summary::-webkit-details-marker { display:none; }
    details.gov .gov-body { padding:0 16px 14px; font-size:13.5px; color:rgba(255,255,255,0.72); line-height:2; }
    @media (max-width:900px) {
        * { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
        .content-container { padding:24px 15px; margin:100px 12px 60px; border-radius:20px; }
        .card, .role-card { padding:15px 14px; border-radius:16px; }
        h2 { font-size:17px; }
        .jf { grid-template-columns:1fr; }
    }

/* ===== P2 Professional layer — tokens + a11y + mobile ===== */
:root{
    --tp-cyan:#00d2ff; --tp-purple:#7c3aed; --tp-green:#34d399; --tp-amber:#fbbf24; --tp-red:#fb7185;
    --tp-bg:#000000; --tp-radius:20px; --tp-focus:0 0 0 3px rgba(0,210,255,.45);
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:none; box-shadow:var(--tp-focus); border-radius:10px;
}
@media(max-width:900px){
    *:not(.content-container){backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
    .content-container{background:rgba(8,12,22,.97)}
}
@supports (backdrop-filter:blur(14px)){
    @media(max-width:900px){
        .content-container{background:rgba(255,255,255,0.05);backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important}
    }
}
#csub-flash.flash-ok{border-color:rgba(52,211,153,.35)}
#csub-flash.flash-err{border-color:rgba(251,113,133,.35)}