/* ============================================================ جلود الهوية — كل جلد يُعيد تعريف رموز app.css نفسها. لا تُعدَّل أي وحدة عرض: تغيير قيمة الرمز يغيّر البرنامج كلّه. يُختار الجلد بـ ويُحفظ في ul-skin. وُلِّد من اتجاهات لجنة الهوية بعد التحقّق من نِسَب التباين حسابيًّا. ============================================================ */ /* ══════════ مُرَبَّع — MURABBAʿ — Square Kufic ══════════ ultraws is built from the square Kufic module — a 4px cell whose stroke equals its void — so that every rule, marker, meter and badge in the app is a count of cells rather than a drawn ornament; colour is reduced to warm iron-gall ink and one turquoise (the painted door of a Najd */ :root[data-skin="murabba"]{ /* أسطح: نورة الجدار — ليست كريمًا، بل بياض جيري بارد */ --bg:#E8EAE1; --surface:#FCFCF8; --surface-2:#F3F4EC; --surface-3:#EAECE1; /* الحبر: جدار الطين في الظل (حبر العفص) */ --ink:#1B1510; --ink-2:#2C2318; --ink-3:#463726; --text:#241C15; --muted:#67604F; --muted-2:#877F6D; --line:#DBDDD0; --line-2:#C6C9B7; /* اللكنة: فيروز الباب النجدي — الاسم باقٍ، والمادة تغيّرت */ --brass:#06687C; --brass-2:#0E8FA8; --brass-soft:#D3EBF0; /* الدلالات: ستّ درجات لونية بينها ٤٥° على الأقل */ --emerald:#1C6A33; --emerald-soft:#DCEBDD; --danger:#B01B10; --danger-soft:#F8DFDA; --warn:#6E5A00; --warn-soft:#F3EBC6; --info:#3131AE; --info-soft:#E1E1F7; --violet:#9418B4; --violet-soft:#F3DBF6; /* أنصاف الأقطار: كتلة مقصوصة الحافة، لا صحيفة بلا انحناء */ --r-xs:2px; --r-sm:3px; --r:4px; --r-lg:6px; --r-xl:8px; /* الظلال: السجلّ مطبوع لا طافٍ */ --sh-1:0 1px 0 rgba(27,21,16,.05); --sh-2:0 6px 18px rgba(27,21,16,.10); --sh-3:0 18px 44px rgba(27,21,16,.20); --sh-brass:0 6px 18px rgba(6,104,124,.22); --sidebar-1:#1F1810; --sidebar-2:#14100B; --topbar-bg:rgba(252,252,248,.86); /* الوحدة المربّعة + نقش الكوفي (حدّه = فراغه) */ --unit:4px; --kufi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='%230E8FA8'%3E%3Crect width='20' height='4'/%3E%3Crect width='4' height='20'/%3E%3Crect x='8' y='8' width='12' height='4'/%3E%3Crect x='8' y='8' width='4' height='12'/%3E%3Crect x='8' y='16' width='16' height='4'/%3E%3C/g%3E%3C/svg%3E"); font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; } [data-theme="dark"][data-skin="murabba"]{ /* الجدار ليلًا: أسود دافئ، لا أزرق */ --bg:#100D0A; --surface:#191510; --surface-2:#221D16; --surface-3:#2C251C; --ink:#F5F2E9; --ink-2:#DED8CA; --ink-3:#C5BDAC; --text:#EEEBE1; --muted:#A79D8B; --muted-2:#7F7664; --line:#2C2519; --line-2:#3E3527; --brass:#3EBDD4; --brass-2:#7BD8E6; --brass-soft:rgba(62,189,212,.13); /* ١٣٪ لا ١٥٪: عند ١٥٪ سقط info وviolet دون ٤.٥:١ فوق surface-2 */ --emerald:#55CD7A; --emerald-soft:rgba(85,205,122,.13); --danger:#FF6E68; --danger-soft:rgba(255,110,104,.13); --warn:#ECCB38; --warn-soft:rgba(236,203,56,.13); --info:#9797FA; --info-soft:rgba(151,151,250,.13); --violet:#DC7BF5; --violet-soft:rgba(220,123,245,.13); --sidebar-1:#1A1610; --sidebar-2:#0D0B08; --topbar-bg:rgba(25,21,16,.86); --sh-1:0 1px 0 rgba(0,0,0,.5); --sh-2:0 6px 18px rgba(0,0,0,.5); --sh-3:0 18px 44px rgba(0,0,0,.6); --sh-brass:0 6px 18px rgba(62,189,212,.18); } :root[data-skin="murabba"] h1,:root[data-skin="murabba"] h2,:root[data-skin="murabba"] h3,:root[data-skin="murabba"] h4,:root[data-skin="murabba"] h5,:root[data-skin="murabba"] .sidebar .brand b,:root[data-skin="murabba"] .stat .num,:root[data-skin="murabba"] .btn{ font-family:'Space Grotesk','Noto Kufi Arabic',sans-serif;letter-spacing:0} :root[data-skin="murabba"] h1,:root[data-skin="murabba"] h2,:root[data-skin="murabba"] h3,:root[data-skin="murabba"] h4,:root[data-skin="murabba"] h5{font-weight:700;line-height:1.5} :root[data-skin="murabba"] .page-head .ph-title h1{font-size:26px;letter-spacing:0} :root[data-skin="murabba"] .tbl th{letter-spacing:0;font-size:12px} :root[data-skin="murabba"] .mono,:root[data-skin="murabba"] .stat .num{font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace; font-variant-numeric:tabular-nums;letter-spacing:-.02em} :root[data-skin="murabba"] .sidebar::after,:root[data-skin="murabba"] .welcome-band::before{ background-image:var(--kufi);background-size:24px 24px;opacity:.10} :root[data-skin="murabba"] .sidebar::after{-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%); mask-image:linear-gradient(180deg,#000,transparent 55%)} :root[data-skin="murabba"] .sidebar{background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2))} :root[data-skin="murabba"] .welcome-band{background:var(--sidebar-1);border-radius:var(--r-xl)} :root[data-skin="murabba"] .welcome-band h1{color:#FCFCF8} :root[data-skin="murabba"] .welcome-band p{color:#C0B7A4} :root[data-skin="murabba"] .nav-item{border-radius:var(--r-sm)} :root[data-skin="murabba"] .nav-item.active{background:rgba(62,189,212,.12)} :root[data-skin="murabba"] .nav-item.active::before{width:var(--unit);height:var(--unit);border-radius:0; inset-inline-start:0;background:var(--brass-2);box-shadow: 0 calc(var(--unit)*-2) 0 var(--brass-2),0 calc(var(--unit)*2) 0 var(--brass-2)} :root[data-skin="murabba"] .ph-rule>i{width:var(--unit);height:var(--unit);border-radius:0;transform:none;background:var(--brass)} :root[data-skin="murabba"] .ph-rule>span{letter-spacing:0;color:var(--muted)} :root[data-skin="murabba"] .ph-rule::after{height:var(--unit);opacity:.35;background:repeating-linear-gradient( to left,var(--brass) 0 var(--unit),transparent 0 calc(var(--unit)*2))} :root[data-skin="murabba"] .card,:root[data-skin="murabba"] .stat{border-radius:var(--r-lg);box-shadow:var(--sh-1)} :root[data-skin="murabba"] .tbl thead tr{box-shadow:inset 0 -2px 0 var(--brass)} :root[data-skin="murabba"] .tbl tbody tr:hover{box-shadow:inset -3px 0 0 var(--brass)} :root[data-skin="murabba"] .badge,:root[data-skin="murabba"] .chip{border-radius:var(--r-xs);font-variant-numeric:tabular-nums} :root[data-skin="murabba"] .btn,:root[data-skin="murabba"] .input,:root[data-skin="murabba"] .select{border-radius:var(--r)} :root[data-skin="murabba"] .btn-brass{background:var(--brass);color:#FFF;box-shadow:var(--sh-brass)} :root[data-skin="murabba"] [data-theme="dark"] .btn-brass{color:#06202A} :root[data-skin="murabba"] .stat .num{font-size:34px} :root[data-skin="murabba"] .kufi-meter{--total:30;--used:0;--fill:var(--brass);--c:calc(100%/var(--total)); display:block;height:12px;width:100%;min-width:calc(var(--total)*var(--unit)); background:linear-gradient(to left,var(--fill) 0 calc(var(--used)*var(--c)),var(--line-2) 0); -webkit-mask:repeating-linear-gradient(to left,#000 0 calc(var(--c) - 3px),transparent 0 var(--c)); mask:repeating-linear-gradient(to left,#000 0 calc(var(--c) - 3px),transparent 0 var(--c))} :root[data-skin="murabba"] .kufi-meter.soon{--fill:var(--warn)} :root[data-skin="murabba"] .kufi-meter.late{--fill:var(--danger)} :root[data-skin="murabba"] [dir=ltr] .kufi-meter{ background:linear-gradient(to right,var(--fill) 0 calc(var(--used)*var(--c)),var(--line-2) 0); -webkit-mask:repeating-linear-gradient(to right,#000 0 calc(var(--c) - 3px),transparent 0 var(--c)); mask:repeating-linear-gradient(to right,#000 0 calc(var(--c) - 3px),transparent 0 var(--c))} /* ══════════ مِداد وخَتْم — Midād & Seal ══════════ ultraws is a legal register kept in warm carbon ink on limewashed Najdi plaster, in which exactly one deep sealing-wax carmine is permitted to claim authority — so the direction is executed wrongly the moment a second carmine object competes for the eye on a screen, the moment ca */ :root[data-skin="seal"]{ /* ــ الأسطح: جصّ نجدي (الحقل) وورق دافئ (البطاقات) ــ */ --bg:#EDF0E3; --surface:#FFFDFA; --surface-2:#F5F5EF; --surface-3:#EEEDE5; /* ــ المِداد: كربون دافئ — ليس كحليًّا ــ */ --ink:#231C18; --ink-2:#352C27; --ink-3:#4A3F3A; --text:#332C28; --muted:#6F6761; --muted-2:#736B64; --line:#DAD7D0; --line-2:#CAC6BE; /* ــ الخَتْم: شمع أحمر داكن. الاسم بقي، الجوهر تغيّر ــ */ --brass:#8E132B; --brass-2:#D44D56; --brass-soft:#FBEBD8; /* ــ الأصبغة: علبة ألوان مخطوط — لا أزرق في النظام كله ــ */ --emerald:#427337; --emerald-soft:#E3F3DF; --danger:#C03D07; --danger-soft:#FFE6DE; --warn:#935B00; --warn-soft:#FFEED1; --info:#06707E; --info-soft:#D7F4F7; --violet:#69429F; --violet-soft:#F0E9FF; /* ــ هندسة سجلّ: ضيّقة، وغير صفرية ــ */ --r-xs:3px; --r-sm:5px; --r:8px; --r-lg:10px; --r-xl:14px; --sh-1:0 1px 0 rgba(35,28,24,.05), 0 1px 2px rgba(35,28,24,.06); --sh-2:0 4px 14px rgba(35,28,24,.09); --sh-3:0 16px 40px rgba(35,28,24,.18); --sh-brass:0 1px 0 rgba(142,19,43,.55), 0 6px 16px rgba(142,19,43,.20); --sidebar-1:#1B1411; --sidebar-2:#2D2420; --topbar-bg:rgba(255,253,250,.86); /* ــ إضافات لازمة: زرّ الخَتْم، حِبر القائمة، والتسطير ــ */ --seal:#8E132B; --on-seal:#FFFDFA; --nav-ink:#B6B0A8; --nav-dim:#989189; --tick:repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 7px); --font-display:'Noto Kufi Arabic','IBM Plex Sans Arabic',system-ui,sans-serif; --font-body:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif; --font-num:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,monospace; font-family:var(--font-body); } [data-theme="dark"][data-skin="seal"]{ /* محبرة، لا لوح رمادي مزرقّ: كل الأسطح على تدرّج 48–55 وتشبّع ≤ .013 */ --bg:#140F0C; --surface:#1E1916; --surface-2:#29221E; --surface-3:#352D29; --ink:#F6F3ED; --ink-2:#DBD7D0; --ink-3:#BFBAB3; --text:#EAE6DF; --muted:#A8A29A; --muted-2:#9A938C; --line:#38312D; --line-2:#4E4641; --brass:#EF7462; --brass-2:#F9A870; --brass-soft:rgba(239,116,98,.18); --emerald:#86C47F; --emerald-soft:rgba(134,196,127,.18); --danger:#F67B64; --danger-soft:rgba(246,123,100,.18); --warn:#E7AF5C; --warn-soft:rgba(231,175,92,.18); --info:#70C0C9; --info-soft:rgba(112,192,201,.18); --violet:#B69AE9; --violet-soft:rgba(182,154,233,.18); --sidebar-1:#0E0907; --sidebar-2:#1C1512; --topbar-bg:rgba(20,15,12,.88); /* الخَتْم يبقى شمعًا مضغوطًا في الليل أيضًا — لا يتحوّل إلى مرجاني */ --seal:#C33242; --on-seal:#FFFFFF; --nav-ink:#B6B0A8; --nav-dim:#989189; --sh-1:0 1px 0 rgba(0,0,0,.5); --sh-2:0 4px 14px rgba(0,0,0,.5); --sh-3:0 16px 40px rgba(0,0,0,.6); --sh-brass:0 1px 0 rgba(0,0,0,.6), 0 6px 16px rgba(195,50,66,.28); } :root[data-skin="seal"] h1,:root[data-skin="seal"] h2,:root[data-skin="seal"] h3,:root[data-skin="seal"] h4,:root[data-skin="seal"] h5,:root[data-skin="seal"] .stat .num,:root[data-skin="seal"] .sheet-bar .s-title,:root[data-skin="seal"] .sidebar .seal,:root[data-skin="seal"] .appbar .seal{ font-family:var(--font-display);font-weight:700;letter-spacing:0} :root[data-skin="seal"] .sidebar .brand b,:root[data-skin="seal"] .appbar .brand b{font-family:var(--font-body);font-weight:700;letter-spacing:0} :root[data-skin="seal"] .mono,:root[data-skin="seal"] .stat .num,:root[data-skin="seal"] .tbl td,:root[data-skin="seal"] .badge{font-variant-numeric:tabular-nums} :root[data-skin="seal"] .ph-rule{--w:34px;height:7px;margin-top:12px;color:var(--line-2);background:var(--tick);position:relative} :root[data-skin="seal"] .ph-rule::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w); background:var(--brass);box-shadow:var(--sh-brass)} :root[data-skin="seal"] .page-head{margin-bottom:26px} :root[data-skin="seal"] .sidebar{background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2));color:var(--nav-ink); border-inline-start:2px solid var(--brass)} :root[data-skin="seal"] .sidebar .nav-group span,:root[data-skin="seal"] .sidebar .brand small,:root[data-skin="seal"] .sidebar .side-user .info small{color:var(--nav-dim)} :root[data-skin="seal"] .nav-item{border-radius:var(--r-xs);color:var(--nav-ink)} :root[data-skin="seal"] .nav-item.active{background:rgba(255,255,255,.05);color:#fff} :root[data-skin="seal"] .nav-item.active::before{inset-inline-start:-8px;top:0;height:100%;width:3px;transform:none; border-radius:0;background:var(--brass-2);box-shadow:none} :root[data-skin="seal"] .topbar{box-shadow:inset 0 -3px 0 -2px var(--brass)} :root[data-skin="seal"] .card,:root[data-skin="seal"] .stat{border-radius:var(--r)} :root[data-skin="seal"] .stat{border-top:3px solid var(--line-2)} :root[data-skin="seal"] .stat.is-seal{border-top-color:var(--brass)} :root[data-skin="seal"] .tbl th{color:var(--ink);border-bottom:2px solid var(--ink);font-weight:600} :root[data-skin="seal"] .tbl tbody tr:hover{background:color-mix(in oklab,var(--brass) 7%,var(--surface))} :root[data-skin="seal"] .badge{border-radius:var(--r-xs);padding:3px 9px} :root[data-skin="seal"] .b-brass{box-shadow:inset 0 0 0 1px var(--brass);font-weight:700} :root[data-skin="seal"] .btn-brass{background:var(--seal);color:var(--on-seal);border-radius:var(--r-sm)} :root[data-skin="seal"] .btn-brass:hover{background:var(--brass-2);color:var(--ink)} :root[data-skin="seal"] .welcome-band{position:relative;padding:22px 26px 28px;border-radius:var(--r);overflow:hidden; color:#fff;background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2))} :root[data-skin="seal"] .welcome-band::after{content:"";position:absolute;inset-inline:0;bottom:0;height:7px; color:rgba(255,255,255,.30);background:var(--tick);border-inline-start:104px solid var(--brass)} :root[data-skin="seal"] [data-theme="dark"] .welcome-band{background:linear-gradient(180deg,var(--surface-2),var(--surface))} /* ══════════ الشَّفَق — SHAFAQ — Riyadh Light ══════════ ultraws is built from الشَّفَق — the exact colour sequence of Riyadh dusk (bleached dry daylight → long amber on Najdi mud brick → hot rose → indigo night) used as an operating scale for TIME, in which indigo-violet is the neutral ground and amber-ochre is the only accent; the li */ /* ============================================================ ultraws — «الشَّفَق» SHAFAQ / Riyadh Light نهار جافّ عالٍ · عنبر طويل · ليل نيليّ بنفسجيّ ============================================================ */ :root{ /* الأسطح — ظلّ الجصّ البنفسجيّ، وصفحة مشمسة دافئة */ --bg:#F1EFFB; --surface:#FFFCF8; --surface-2:#F5F3FF; --surface-3:#EBE9FB; /* الحبر — نيليّ بنفسجيّ عميق: لا أسود ولا كحليّ */ --ink:#1E143D; --ink-2:#2F2654; --ink-3:#463C6D; --text:#332E4A; --muted:#68657C; --muted-2:#908DA2; /* غير نصّيّ فقط: حدود الحقول والأيقونات */ --line:#DFDDEC; --line-2:#CDCADE; /* العنبر — ضوء الغروب على الطين النجديّ (الاسم نحاس، الجوهر عنبر) */ --brass:#B34E00; /* نصّ وحدّ — يجتاز 4.5:1 */ --brass-2:#F18D14; /* تعبئة وضوء */ --brass-soft:#FFECD6; /* الدلالات السبع */ --emerald:#007A5C; --emerald-soft:#DCF9ED; /* يشمّ إلى 168° بعيداً عن أخضر الجهات */ --danger:#BC2729; --danger-soft:#FFE9E6; --warn:#826A00; --warn-soft:#FCF2CD; --info:#0D6ABB; --info-soft:#E2F2FF; --violet:#B61F70; --violet-soft:#FFE8F1; /* وردة الشفق، لا بنفسج */ /* الشفق — للتوقيع وحده، لا يُستعمل في شارة أو زرّ */ --dusk-rose:#E94482; --dusk-night:#341C5D; /* الشكل — أضيق: أداة، لا فقاعة */ --r-xs:6px; --r-sm:8px; --r:11px; --r-lg:14px; --r-xl:20px; /* الظلال بنفسجيّة لا سوداء */ --sh-1:0 1px 2px rgba(30,20,61,.07), 0 1px 3px rgba(30,20,61,.05); --sh-2:0 6px 18px rgba(30,20,61,.10); --sh-3:0 18px 44px rgba(30,20,61,.20); --sh-brass:0 8px 22px rgba(179,78,0,.28); /* الكروم — السماء رأسيّاً: أغمق عند السمت */ --sidebar-1:#120B30; --sidebar-2:#371F55; --topbar-bg:rgba(255,252,248,.86); --sidebar-w:268px; --topbar-h:68px; --ease:cubic-bezier(.4,0,.2,1); font-family:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif; } /* ============================================================ الوضع الليليّ — سماء نجد بعد الغروب بعشرين دقيقة البنفسجيّ محايد، والعنبر هو اللكنة. لا تدرّج على الخلفيّة. ============================================================ */ [data-theme="dark"][data-skin="shafaq"]{ --bg:#0F0B23; --surface:#1F1C37; --surface-2:#2B2744; --surface-3:#383353; --text:#E5E4F5; --ink:#F4F3FE; --ink-2:#D6D5E8; --ink-3:#BCBBD1; --muted:#A9A8C0; --muted-2:#83829A; --line:#383551; --line-2:#514E6E; --brass:#FFA54B; --brass-2:#FFC66E; --brass-soft:rgba(255,165,75,.22); --emerald:#54D5AB; --emerald-soft:rgba(84,213,171,.22); --danger:#FD8379; --danger-soft:rgba(253,131,121,.22); --warn:#E6C45A; --warn-soft:rgba(230,196,90,.22); --info:#7BBBFD; --info-soft:rgba(123,187,253,.22); --violet:#FD82B8; --violet-soft:rgba(253,130,184,.22); --dusk-rose:#FC5C95; --dusk-night:#3C2566; --sidebar-1:#07031C; --sidebar-2:#271140; --topbar-bg:rgba(31,28,55,.86); --sh-1:0 1px 2px rgba(0,0,0,.50); --sh-2:0 6px 18px rgba(0,0,0,.50); --sh-3:0 18px 44px rgba(0,0,0,.60); --sh-brass:0 8px 22px rgba(255,165,75,.22); } /* يُحذف السطر القديم الذي يعيد تدرّج .btn-primary الكحليّ */ [data-theme="dark"][data-skin="shafaq"] .btn-primary{background:var(--ink);color:#12102A} [data-theme="dark"][data-skin="shafaq"] ::-webkit-scrollbar-thumb{background:#514E6E} [data-theme="dark"][data-skin="shafaq"] .flash{background:var(--surface)} :root[data-skin="shafaq"] .stat .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} :root[data-skin="shafaq"] .sidebar .brand b{letter-spacing:-.02em} :root[data-skin="shafaq"] .nav-group span,:root[data-skin="shafaq"] .tbl th,:root[data-skin="shafaq"] .badge,:root[data-skin="shafaq"] .chip{letter-spacing:0;text-transform:none;font-size:12px} :root[data-skin="shafaq"] .page-head .ph-rule{height:3px;border-radius:2px;margin-top:14px; background:linear-gradient(to left,var(--brass-2) 0,var(--dusk-rose) 58%,var(--dusk-night) 100%)} :root[data-skin="shafaq"] .dusk{--t:1;height:4px;border-radius:2px;background-repeat:no-repeat;background-size:500% 100%; background-position:calc(var(--t) * 100%) center; background-image:linear-gradient(to right,var(--dusk-night) 0,var(--dusk-night) 10%, var(--dusk-rose) 24%,var(--brass) 44%,var(--brass-2) 60%,var(--brass-2) 100%)} :root[data-skin="shafaq"] .progress > i{background:var(--brass-2)} :root[data-skin="shafaq"] .nav-item.active::before{inset-inline-start:-12px;width:9px;height:18px;border-radius:0; background:var(--brass-2);box-shadow:none;clip-path:polygon(100% 0,0 50%,100% 100%)} :root[data-skin="shafaq"] .sidebar .seal{border-radius:10px;background:var(--brass-2);color:#2A1400; clip-path:polygon(0 22%,12% 22%,12% 0,29% 0,29% 22%,71% 22%,71% 0,88% 0,88% 22%,100% 22%,100% 100%,0 100%)} :root[data-skin="shafaq"] .tl-node.done{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:none} :root[data-skin="shafaq"] .timeline::before{background:linear-gradient(var(--brass-2),var(--line))} :root[data-skin="shafaq"] .sidebar{color:#D9D2EF;background: radial-gradient(420px 200px at 50% 104%,rgba(241,141,20,.30),transparent 68%), linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2))} :root[data-skin="shafaq"] .nav-item{color:#D9D2EF;border-radius:var(--r-sm)} :root[data-skin="shafaq"] .sidebar .nav-group span,:root[data-skin="shafaq"] .side-user .info small,:root[data-skin="shafaq"] .sidebar .brand small{color:#ABA0C9} :root[data-skin="shafaq"] .nav-item.active{background:linear-gradient(90deg,rgba(241,141,20,.20),rgba(241,141,20,.02))} :root[data-skin="shafaq"] .welcome-band{border-radius:var(--r-lg);color:#fff;background: radial-gradient(520px 220px at 96% 130%,rgba(241,141,20,.42),transparent 66%), linear-gradient(105deg,var(--sidebar-1),var(--sidebar-2))} :root[data-skin="shafaq"] .badge.b-brass{background:transparent;color:var(--brass); border:1px solid var(--brass);box-shadow:inset 0 0 0 2px var(--brass-soft)} :root[data-skin="shafaq"] .btn-brass{background:var(--brass-2);color:#2A1400;border-color:var(--brass)} :root[data-skin="shafaq"] [data-theme="dark"] .btn-brass{background:var(--brass);color:#17100A;border-color:var(--brass-2)} :root[data-skin="shafaq"] .btn-primary{background:var(--ink);color:var(--surface)} :root[data-skin="shafaq"] .tbl th{border-bottom:2px solid var(--line-2)} :root[data-skin="shafaq"] .input,:root[data-skin="shafaq"] .select,:root[data-skin="shafaq"] textarea.input,:root[data-skin="shafaq"] .search input{border-color:var(--muted-2)} :root[data-skin="shafaq"] .input:focus,:root[data-skin="shafaq"] .select:focus,:root[data-skin="shafaq"] textarea.input:focus,:root[data-skin="shafaq"] .search input:focus{ border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)} :root[data-skin="shafaq"] a:focus-visible,:root[data-skin="shafaq"] button:focus-visible,:root[data-skin="shafaq"] .nav-item:focus-visible{outline:2px solid var(--brass);outline-offset:2px} :root[data-skin="shafaq"] .field .hint{color:var(--muted)} :root[data-skin="shafaq"] ::selection{background:var(--brass-soft);color:var(--ink)} /* ══════════ طِينٌ ونِيلَة — Clay & Indigo — الفائز بحكم اللجنة ══════════ ultraws is a lime-washed Najdi wall: a warm sun-baked mud field carrying bright lime-plaster panels, structured by triangular wall-perforations, with exactly one saturated colour in the entire product — the indigo of a Najdi door — reserved for the primary action and the final ju */ :root[data-skin="clay"]{ /* ————— أسطح: الطين حقل، النورة لوح ————— */ --bg:#D9C9B2; --surface:#FCFAF6; --surface-2:#F2EBDF; --surface-3:#E9E0CF; /* ————— حبر الطين المحروق ————— */ --ink:#23190F; --ink-2:#3B2A19; --ink-3:#5A4429; --text:#2C2016; --muted:#584936; --muted-2:#7F6E58; --line:#E4D9C6; --line-2:#C9B99E; /* ————— النِيلة: باب نجدي — اللون المشبع الوحيد في النظام ————— */ --brass:#2A3CBC; --brass-2:#7C8CF5; --brass-soft:#E2E4FB; /* ————— دلالات ————— */ --emerald:#0D6A48; --emerald-soft:#D9EEE3; --danger:#AE1032; --danger-soft:#FADCE2; /* شمع الختم الأحمر */ --warn:#855607; --warn-soft:#F6E4BE; /* زعفران */ --info:#086880; --info-soft:#D6EDF3; /* أزرق البئر — مُبعَد عن النيلة عمداً */ --violet:#86258E; --violet-soft:#F3DCF5; /* ————— هندسة: فتحات نجدية لا زوايا مستديرة ————— */ --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; /* ————— ظلال دافئة، لا زرقاء ————— */ --sh-1:0 1px 0 rgba(35,25,15,.05), 0 1px 2px rgba(35,25,15,.07); --sh-2:0 8px 22px rgba(35,25,15,.10); --sh-3:0 22px 50px rgba(35,25,15,.20); --sh-brass:0 8px 20px rgba(42,60,188,.26); /* ————— الجدار ————— */ --sidebar-1:#2E1C11; --sidebar-2:#150E09; --topbar-bg:rgba(252,250,246,.86); --sidebar-w:268px; --topbar-h:68px; --ease:cubic-bezier(.4,0,.2,1); font-family:'Noto Sans Arabic',system-ui,'Segoe UI',sans-serif; } [data-theme="dark"][data-skin="clay"]{ /* فحم دافئ — لا أسود مزرقّ */ --bg:#0E0B07; --surface:#1D1712; --surface-2:#272019; --surface-3:#332A20; --ink:#FBF3E6; --ink-2:#E0D2BC; --ink-3:#C3B199; --text:#EFE4D3; --muted:#A8957A; --muted-2:#96856C; --line:#31281B; --line-2:#463A2A; --brass:#93A2FF; --brass-2:#B3BCFF; --brass-soft:rgba(147,162,255,.16); --emerald:#45C892; --emerald-soft:rgba(69,200,146,.16); --danger:#F27184; --danger-soft:rgba(242,113,132,.16); --warn:#E3AC3E; --warn-soft:rgba(227,172,62,.16); --info:#52C3E0; --info-soft:rgba(82,195,224,.16); --violet:#E381EA; --violet-soft:rgba(227,129,234,.16); --sh-1:0 1px 0 rgba(0,0,0,.5); --sh-2:0 8px 22px rgba(0,0,0,.55); --sh-3:0 22px 50px rgba(0,0,0,.70); --sh-brass:0 8px 22px rgba(147,162,255,.22); /* الجدار لا ينقلب — يُرفع درجة فقط ليقف أمام الليل */ --sidebar-1:#33200F; --sidebar-2:#1C1209; --topbar-bg:rgba(29,23,18,.86); } :root[data-skin="clay"] h1,:root[data-skin="clay"] h2,:root[data-skin="clay"] h3,:root[data-skin="clay"] h4,:root[data-skin="clay"] h5,:root[data-skin="clay"] .sidebar .brand b,:root[data-skin="clay"] .appbar .brand b,:root[data-skin="clay"] .sheet-bar .s-title{ font-family:'Changa','Noto Sans Arabic',sans-serif;font-weight:700;letter-spacing:0} :root[data-skin="clay"] .stat .num,:root[data-skin="clay"] .mono,:root[data-skin="clay"] .tbl td.num,:root[data-skin="clay"] .chip .num{font-family:'IBM Plex Sans Arabic',sans-serif; font-variant-numeric:tabular-nums;letter-spacing:0} :root[data-skin="clay"] .nav-group span{letter-spacing:0;text-transform:none} :root[data-skin="clay"] .ph-rule{--days:1;--of:1;flex:1 0 100%;order:9;height:9px;margin-top:14px; background:conic-gradient(from 135deg at 50% 0,var(--brass) 0 90deg,var(--line-2) 0) 0 0/18px 9px repeat-x; -webkit-mask:linear-gradient(to left,#000 0 calc(var(--days)/var(--of)*100%),rgba(0,0,0,.22) 0); mask:linear-gradient(to left,#000 0 calc(var(--days)/var(--of)*100%),rgba(0,0,0,.22) 0)} :root[data-skin="clay"] .sidebar::before{content:"";position:absolute;inset-inline:0;top:0;height:12px;opacity:.3;z-index:1; background:conic-gradient(from 135deg at 50% 0,#F0DFC4 0 90deg,transparent 0) 0 0/20px 12px repeat-x} :root[data-skin="clay"] .welcome-band{position:relative;overflow:hidden;padding:24px 24px 30px;border-radius:var(--r-lg); color:#F3E6D2;border:1px solid var(--line-2); background:linear-gradient(115deg,var(--sidebar-1),var(--sidebar-2))} :root[data-skin="clay"] .welcome-band h1,:root[data-skin="clay"] .welcome-band h2,:root[data-skin="clay"] .welcome-band h3{color:#fff} :root[data-skin="clay"] .welcome-band::after{content:"";position:absolute;inset-inline:0;bottom:0;height:13px;opacity:.62; background:conic-gradient(from -45deg at 50% 100%,var(--brass-2) 0 90deg,transparent 0) 0 0/20px 13px repeat-x} :root[data-skin="clay"] .nav-item.active::before{width:0;height:0;background:none;box-shadow:none;border-radius:0; border-block:9px solid transparent;border-inline-start:9px solid var(--brass-2)} :root[data-skin="clay"] .topbar,:root[data-skin="clay"] .card .card-head,:root[data-skin="clay"] .tbl th{border-bottom:2px solid var(--line-2)} :root[data-skin="clay"] .tbl td:first-child{border-inline-start:3px solid transparent} :root[data-skin="clay"] .tbl tbody tr:hover td:first-child{border-inline-start-color:var(--brass)} :root[data-skin="clay"] .stat{overflow:hidden} :root[data-skin="clay"] .stat::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px; background:var(--brass);opacity:.9} :root[data-skin="clay"] .badge{border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:var(--r-xs)} :root[data-skin="clay"] .badge.b-brass,:root[data-skin="clay"] .btn-brass{background:var(--brass);background-image:none; color:var(--surface);border-color:var(--brass)} :root[data-skin="clay"] .avatar{color:#EBDCC5} /* ═══ ألوان علامة الرقعة في كل جلد ═══ */ :root[data-skin="clay"]{--mark-bg:#2A3CBC;--mark-fg:#FCFAF6} [data-theme="dark"][data-skin="clay"]{--mark-bg:#93A2FF;--mark-fg:#0E0B07} :root[data-skin="murabba"]{--mark-bg:#06687C;--mark-fg:#FCFCF8} [data-theme="dark"][data-skin="murabba"]{--mark-bg:#31B6D1;--mark-fg:#0D1113} :root[data-skin="seal"]{--mark-bg:#8E132B;--mark-fg:#FFFDFA} [data-theme="dark"][data-skin="seal"]{--mark-bg:#D44D56;--mark-fg:#140F0C} :root[data-skin="shafaq"]{--mark-bg:#221C43;--mark-fg:#E8A33D} [data-theme="dark"][data-skin="shafaq"]{--mark-bg:#E8A33D;--mark-fg:#171233} /* ══════════════════════════════════════════════════════════════ «الصحيفة» — SAHIFA. تغييرُ أسلوبٍ لا لون. الأسلوب القديم: صناديق بيضاء تطفو على رماديّ، ومربّعات باهتة تحمل رسومًا، وشارات ورديّة مستديرة. هذا مظهر لوحات ٢٠١٨، ولذلك قرأه الناس «قالبًا». الأسلوب الجديد: لا صناديق أصلًا. صحيفةٌ واحدة، تفصلها خيوط شعرية، والهرم من حجم الحرف لا من الإطارات. الأرقام ضخمة خفيفة كصحيفة اقتصادية، والشارات محاطة بخطّ لا مملوءة بلون، والأزرار كبسولات. لونٌ واحد: زمرّد عميق مائل للأزرق — غنيّ، وليس أخضر الجهات الحكومية. ══════════════════════════════════════════════════════════════ */ :root[data-skin="sahifa"]{ --font-display:'Readex Pro'; --font-body:'IBM Plex Sans Arabic'; --bg:#F7F6F3; --surface:#FDFCFA; --surface-2:#F2F1EC; --surface-3:#EBE9E3; --ink:#0F0F0E; --ink-2:#1C1B19; --ink-3:#33322E; --text:#1C1B19; --muted:#6B6963; --muted-2:#8B8880; --line:#E6E3DC; --line-2:#D3CFC6; --brass:#0A5F4B; --brass-2:#0E7D63; --brass-soft:#E2EFEA; --emerald:#0A5F4B; --emerald-soft:#E2EFEA; --danger:#B02A17; --danger-soft:#F8E7E3; --warn:#8A6206; --warn-soft:#F6EEDC; --info:#1F4E79; --info-soft:#E5EDF4; --violet:#4B3A8C; --violet-soft:#E9E6F3; --sidebar-1:#141412; --sidebar-2:#1F1E1B; --topbar-bg:rgba(247,246,243,.88); --mark-bg:#0A5F4B; --mark-fg:#FDFCFA; --on-accent:#FFFFFF; --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:12px; --sh-1:none; --sh-2:0 10px 30px rgba(15,15,14,.07); --sh-3:0 24px 60px rgba(15,15,14,.14); --sh-brass:none; } [data-theme="dark"][data-skin="sahifa"]{ --bg:#0D0D0C; --surface:#141413; --surface-2:#1A1A18; --surface-3:#222220; --ink:#F4F3F0; --ink-2:#E2E0DC; --ink-3:#C5C3BD; --text:#EAE8E4; --muted:#9A978F; --muted-2:#7C7A73; --line:#242422; --line-2:#33322E; --brass:#3FBF9B; --brass-2:#5FD3B3; --brass-soft:#0D2B24; --emerald:#3FBF9B; --emerald-soft:#0D2B24; --danger:#E5705C; --danger-soft:#2B1512; --warn:#D2A03B; --warn-soft:#28200C; --info:#6FA3D4; --info-soft:#131E29; --violet:#9587DE; --violet-soft:#1A1730; --sidebar-1:#0A0A09; --sidebar-2:#131312; --topbar-bg:rgba(13,13,12,.88); --mark-bg:#3FBF9B; --mark-fg:#0A0A09; --on-accent:#07130F; } /* ── ١) الصناديق تختفي: الصحيفة سطحٌ واحد تفصله خيوط ── */ :root[data-skin="sahifa"] .card{background:transparent;border:0;border-radius:0;box-shadow:none; border-top:1px solid var(--line);padding-top:4px} :root[data-skin="sahifa"] .card-head{border-bottom:0;padding:22px 0 10px} :root[data-skin="sahifa"] .card-body,:root[data-skin="sahifa"] .card-p{padding:6px 0 26px} :root[data-skin="sahifa"] .card-head h3{font-size:13px;font-weight:600;letter-spacing:.6px;color:var(--muted)} :root[data-skin="sahifa"] .card-head h3::before{display:none} /* ── ٢) الأرقام تصير عناوين: لا مربّعات ولا رسوم داخلها ── */ :root[data-skin="sahifa"] .grid.g-4{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} :root[data-skin="sahifa"] .stat{background:transparent;border:0;border-radius:0;box-shadow:none; padding:26px 24px;border-inline-start:1px solid var(--line)} :root[data-skin="sahifa"] .stat:first-child{border-inline-start:0} :root[data-skin="sahifa"] .stat:hover{transform:none;box-shadow:none} :root[data-skin="sahifa"] .stat .icn{display:none} /* المربّعات الباهتة تُحذف نهائيًا */ :root[data-skin="sahifa"] .stat .num{font-size:52px;font-weight:300;letter-spacing:-2.5px;line-height:1} :root[data-skin="sahifa"] .stat .lbl{font-size:12.5px;letter-spacing:.4px;margin-top:10px;color:var(--muted)} :root[data-skin="sahifa"] .stat::after,:root[data-skin="sahifa"] .stat::before{display:none} /* ── ٣) الشارة محاطة بخطّ لا مملوءة بلون وردي ── */ :root[data-skin="sahifa"] .badge{background:transparent;border:1px solid currentColor;border-radius:4px; padding:2px 9px;font-size:11.5px;font-weight:600;opacity:.95} :root[data-skin="sahifa"] .badge .d{display:none} :root[data-skin="sahifa"] .chip{background:transparent;border:1px solid var(--line-2);border-radius:4px} /* ── ٤) الجدول يتنفّس: خطّ حبريّ تحت الترويسة وصفوف عالية ── */ :root[data-skin="sahifa"] .table-wrap{border-radius:0} :root[data-skin="sahifa"] .tbl thead tr{box-shadow:none} :root[data-skin="sahifa"] .tbl th{background:transparent;border-bottom:1.5px solid var(--ink); padding:12px 16px 10px;font-size:11.5px;letter-spacing:.5px} :root[data-skin="sahifa"] .tbl td{padding:19px 16px;border-bottom:1px solid var(--line)} :root[data-skin="sahifa"] .tbl tbody tr:hover{background:transparent;box-shadow:inset -2px 0 0 var(--brass)} /* ── ٥) الترويسة تحريرية: حرف خفيف ضخم بدل عنوان سميك صغير ── */ :root[data-skin="sahifa"] .page-head .ph-title h1{font-size:44px;font-weight:300;letter-spacing:-1.6px;line-height:1.25} :root[data-skin="sahifa"] .page-head .ph-title p{font-size:14px;margin-top:8px} :root[data-skin="sahifa"] .ph-rule{margin-bottom:22px} :root[data-skin="sahifa"] .ph-rule > i{width:5px;height:5px;border-radius:0;background:var(--brass)} :root[data-skin="sahifa"] .ph-rule::after{background:var(--line-2);height:1px} :root[data-skin="sahifa"] .welcome-band{background:var(--sidebar-1);border-radius:12px} :root[data-skin="sahifa"] .welcome-band::before{opacity:.10} /* ── ٦) الأزرار كبسولات: حادّة الحرف، بلا تدرّج ولا توهّج ── */ :root[data-skin="sahifa"] .btn{border-radius:999px;font-weight:600;padding:11px 20px} :root[data-skin="sahifa"] .btn-brass{background:var(--brass);color:var(--on-accent);box-shadow:none} :root[data-skin="sahifa"] .btn-brass:hover{background:var(--brass-2);transform:none} :root[data-skin="sahifa"] .btn-ghost{background:transparent;border-color:var(--line-2)} :root[data-skin="sahifa"] .btn-primary{background:var(--ink);color:var(--bg);box-shadow:none} :root[data-skin="sahifa"] .icon-btn{border-radius:999px;background:transparent} /* ── ٧) التنقّل: حرفٌ أوضح، ومؤشّر خطّي لا كتلة ملوّنة ── */ :root[data-skin="sahifa"] .nav-item{border-radius:0;padding:11px 14px;font-size:14px} :root[data-skin="sahifa"] .nav-item.active{background:transparent;color:#fff} :root[data-skin="sahifa"] .nav-item.active::before{inset-inline-start:0;top:0;height:100%;width:2px; transform:none;border-radius:0;background:var(--brass-2);box-shadow:none} :root[data-skin="sahifa"] .sidebar::after{display:none} :root[data-skin="sahifa"] .nav-group::after{background:var(--line);opacity:.10} :root[data-skin="sahifa"] .input,:root[data-skin="sahifa"] .select,:root[data-skin="sahifa"] textarea.input{border-radius:8px} /* ══ «الصحيفة» — تصحيح المقياس بعد جواب المالك: «هادئ وأبيض ودقيق» ══ الأدوات الاحترافية (Linear/Things) لا تستعمل حروفًا ضخمة — بل حرفًا صغيرًا دقيقًا، وسطورًا متقاربة، وفراغًا سخيًّا عند الأطراف. ما نشرتُه (٥٢/٤٤ بكسل) كان مظهرًا تحريريًّا لمجلّة، وهو نقيض «الدقيق». */ :root[data-skin="sahifa"]{ --font-display:'IBM Plex Sans Arabic'; } :root[data-skin="sahifa"] body{font-size:14px;line-height:1.55} :root[data-skin="sahifa"] .page-head .ph-title h1{font-size:21px;font-weight:600;letter-spacing:-.3px;line-height:1.4} :root[data-skin="sahifa"] .page-head .ph-title p{font-size:12.5px;margin-top:3px} :root[data-skin="sahifa"] .page-head{margin-bottom:16px} :root[data-skin="sahifa"] .ph-rule{margin-bottom:14px} :root[data-skin="sahifa"] .stat{padding:16px 18px} :root[data-skin="sahifa"] .stat .num{font-size:26px;font-weight:600;letter-spacing:-.6px} :root[data-skin="sahifa"] .stat .lbl{font-size:12px;margin-top:4px} :root[data-skin="sahifa"] .card-head{padding:16px 0 8px} :root[data-skin="sahifa"] .card-head h3{font-size:12.5px;letter-spacing:.2px} :root[data-skin="sahifa"] .card-body,:root[data-skin="sahifa"] .card-p{padding:4px 0 18px} :root[data-skin="sahifa"] .tbl th{font-size:11px;padding:9px 14px 8px} :root[data-skin="sahifa"] .tbl td{padding:11px 14px;font-size:13px} :root[data-skin="sahifa"] .badge{font-size:10.5px;padding:1px 7px} :root[data-skin="sahifa"] .nav-item{font-size:13.5px;padding:8px 14px;margin:1px 0} :root[data-skin="sahifa"] .nav-group span{font-size:10px;letter-spacing:.9px} :root[data-skin="sahifa"] .btn{font-size:13px;padding:8px 16px} :root[data-skin="sahifa"] .btn-sm{font-size:12px;padding:6px 12px} :root[data-skin="sahifa"] .content{padding:22px 26px 40px} :root[data-skin="sahifa"] .meta-row{font-size:12.5px;margin:4px 0} :root[data-skin="sahifa"] .cell-sub{font-size:11.5px} :root[data-skin="sahifa"] .cell-strong{font-weight:600} :root[data-skin="sahifa"] .input,:root[data-skin="sahifa"] .select{font-size:13px;padding:8px 12px} /* عيب صنعة: رقم القضية ينكسر سطرين — الأرقام لا تُقطَّع أبدًا */ :root[data-skin="sahifa"] .tbl .mono,:root[data-skin="sahifa"] .mono{white-space:nowrap;font-variant-numeric:tabular-nums}