/* ===== تصاميم الموقع الاختيارية: الحالي هو الرسمي، والأربعة يختارها المستخدم من زر 🎨 (للوضع النهاري) ===== */
html.sd-1:not([data-theme="dark"]){--bg:#F7F3E8;--surface:#FFFDF8;--surface-2:#F6F1E3;--border:#E6DCC3;--text:#14286A;--muted:#4A5785;--faint:#9A8F70;--ink:#14286A;--ink-deep:#0E1D52;--ink-soft:#F1E7CC;--radius:14px;--display:"Reem Kufi","Almarai",sans-serif}
html.sd-1:not([data-theme="dark"]) .sidebar{background:#14286A;color:#EEF2FF;border:0}
html.sd-1:not([data-theme="dark"]) .sidebar .nav a,html.sd-1:not([data-theme="dark"]) .sidebar .brand span,html.sd-1:not([data-theme="dark"]) .sidebar .nav-group{color:#C9D2F0}
html.sd-1:not([data-theme="dark"]) .sidebar .brand b{color:#fff;font-family:"Reem Kufi"}
html.sd-1:not([data-theme="dark"]) .nav a:hover{background:rgba(255,255,255,.08);color:#fff}
html.sd-1:not([data-theme="dark"]) .nav a.active{background:#C9A24B;color:#14286A;box-shadow:none}
html.sd-1:not([data-theme="dark"]) .card{border-top:3px solid #C9A24B;box-shadow:none}
html.sd-1:not([data-theme="dark"]) .page-head h1,html.sd-1:not([data-theme="dark"]) .card-head h3{font-family:"Reem Kufi",Almarai;color:#14286A}
html.sd-1:not([data-theme="dark"]) .tile{background:#FFFDF8;border-inline-start:4px solid #C9A24B}
html.sd-1:not([data-theme="dark"]) .topbar{background:rgba(247,243,232,.9)}
html.sd-2:not([data-theme="dark"]){--bg:#EEF1F7;--surface:#fff;--surface-2:#E9EDF5;--border:#D6DCE8;--text:#0F1F52;--muted:#56607E;--ink:#0F1F52;--ink-deep:#081338;--ink-soft:#E3E8F4;--radius:6px;--radius-sm:4px}
html.sd-2:not([data-theme="dark"]) .sidebar{background:#0F1F52;border:0}
html.sd-2:not([data-theme="dark"]) .sidebar .nav a,html.sd-2:not([data-theme="dark"]) .sidebar .brand span,html.sd-2:not([data-theme="dark"]) .sidebar .nav-group{color:#AEB9DA}
html.sd-2:not([data-theme="dark"]) .sidebar .brand b{color:#fff}
html.sd-2:not([data-theme="dark"]) .nav a{border-radius:0!important}
html.sd-2:not([data-theme="dark"]) .nav a:hover{background:rgba(255,255,255,.06);color:#fff}
html.sd-2:not([data-theme="dark"]) .nav a.active{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset -4px 0 0 #3FA9F5}
html.sd-2:not([data-theme="dark"]) .topbar{background:#fff;border-bottom:3px solid #0F1F52}
html.sd-2:not([data-theme="dark"]) .card{box-shadow:none;border-radius:6px}
html.sd-2:not([data-theme="dark"]) .card-head{border-bottom:1px solid var(--border);padding-bottom:10px}
html.sd-2:not([data-theme="dark"]) .tile{border-radius:6px}
html.sd-2:not([data-theme="dark"]) .tile .t-ic{border-radius:4px}
html.sd-3:not([data-theme="dark"]){--bg:#F1F7F5;--surface:#fff;--surface-2:#E6F1EE;--border:#D3E5E0;--text:#0E2E2A;--muted:#4D6B66;--ink:#0F7C74;--ink-deep:#0A5C56;--ink-soft:#DDF0EC;--radius:18px}
html.sd-3:not([data-theme="dark"]) .sidebar{background:#fff;border-left:1px solid #D3E5E0}
html.sd-3:not([data-theme="dark"]) .nav a.active{background:#0F7C74;color:#fff;box-shadow:0 6px 16px rgba(15,124,116,.25)}
html.sd-3:not([data-theme="dark"]) .topbar{background:linear-gradient(90deg,#0F7C74,#16968C);border:0}
html.sd-3:not([data-theme="dark"]) .topbar .search,html.sd-3:not([data-theme="dark"]) .topbar .icon-btn,html.sd-3:not([data-theme="dark"]) .topbar select,html.sd-3:not([data-theme="dark"]) .topbar .user-chip{background:rgba(255,255,255,.92);border-color:transparent}
html.sd-3:not([data-theme="dark"]) .card{box-shadow:0 2px 10px rgba(15,124,116,.07);border-color:#E0EEEA}
html.sd-3:not([data-theme="dark"]) .tile .t-ic{border-radius:50%}
html.sd-4:not([data-theme="dark"]){--bg:#F8F8FC;--surface:#fff;--surface-2:#F2F1FA;--border:#ECEBF5;--text:#1E1B3A;--muted:#6B6890;--ink:#5B4BDB;--ink-deep:#3F31B5;--ink-soft:#EEEBFF;--radius:22px;--shadow:0 8px 30px rgba(60,50,140,.08)}
html.sd-4:not([data-theme="dark"]) .sidebar{background:#fff;border:0;box-shadow:0 0 0 1px #ECEBF5}
html.sd-4:not([data-theme="dark"]) .nav a{border-radius:14px}
html.sd-4:not([data-theme="dark"]) .nav a.active{background:#EEEBFF;color:#5B4BDB;box-shadow:none}
html.sd-4:not([data-theme="dark"]) .topbar{background:rgba(248,248,252,.8);border:0}
html.sd-4:not([data-theme="dark"]) .search{border-radius:30px;border-color:#ECEBF5}
html.sd-4:not([data-theme="dark"]) .card{border:0;box-shadow:var(--shadow)}
html.sd-4:not([data-theme="dark"]) .tile{border:0;box-shadow:0 4px 18px rgba(60,50,140,.07);border-radius:20px}
html.sd-4:not([data-theme="dark"]) .icon-btn,html.sd-4:not([data-theme="dark"]) .user-chip{border-radius:14px;border-color:#ECEBF5}
/* شارة «جديد» في القائمة الداكنة: لونها كان لون القائمة نفسه فلا تظهر */
html.sd-1:not([data-theme="dark"]) .sidebar .nav a:not(.active) .tag{color:#C9A24B}
html.sd-2:not([data-theme="dark"]) .sidebar .nav a:not(.active) .tag{color:#8FC8F5}
html.sd-1:not([data-theme="dark"]) .sidebar .user-chip,html.sd-2:not([data-theme="dark"]) .sidebar .user-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html.sd-1:not([data-theme="dark"]) .sidebar .user-chip .u-name,html.sd-2:not([data-theme="dark"]) .sidebar .user-chip .u-name{color:#fff}
html.sd-1:not([data-theme="dark"]) .sidebar .user-chip *,html.sd-2:not([data-theme="dark"]) .sidebar .user-chip *{color:#D5DCF2}
html.sd-1:not([data-theme="dark"]) .lh-mini{background:linear-gradient(135deg,#14286A,#24408F);box-shadow:none;border-bottom:4px solid #C9A24B}
html.sd-2:not([data-theme="dark"]) .lh-mini{background:#0F1F52;box-shadow:none;border-radius:6px}
html.sd-3:not([data-theme="dark"]) .lh-mini{background:linear-gradient(135deg,#0A5C56,#0F7C74 60%,#1FA39A);box-shadow:0 10px 26px rgba(15,124,116,.25)}
html.sd-4:not([data-theme="dark"]) .lh-mini{background:linear-gradient(135deg,#3F31B5,#5B4BDB 60%,#7B6CF6);box-shadow:0 10px 26px rgba(91,75,219,.25);border-radius:22px}
/* بطاقة الباقة أسفل القائمة الجانبية: بألوان القائمة في كل التصاميم والوضعين */
.sb-plan { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-top: 20px; font-size: 12.5px; }
.sb-plan b { color: var(--text); }
.sb-plan .sb-plan-t { margin: 4px 0 10px; color: var(--muted); }
html.sd-1:not([data-theme="dark"]) .sb-plan, html.sd-2:not([data-theme="dark"]) .sb-plan { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
html.sd-1:not([data-theme="dark"]) .sb-plan b, html.sd-2:not([data-theme="dark"]) .sb-plan b { color: #fff; }
html.sd-1:not([data-theme="dark"]) .sb-plan .sb-plan-t, html.sd-2:not([data-theme="dark"]) .sb-plan .sb-plan-t { color: #AEB9DA; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.skin-opt { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 10px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: start; }
.skin-opt.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.skin-prev { display: grid; grid-template-columns: 34% 1fr; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.skin-prev i { display: block; } .skin-prev .sp-main { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.skin-prev .sp-bar { height: 10px; border-radius: 4px; } .skin-prev .sp-card { flex: 1; border-radius: 5px; }