/* ===== ثيمات البرنامج: كل ثيم له ألوانه وخطه وشكل قائمته =====
   data-skin = اسم الثيم ، data-layout = شكل القائمة (sidebar | topbar | rail | floating) */

/* ---------- أشكال القائمة ---------- */

/* 1) شريط علوي بدل القائمة الجانبية */
:root[data-layout="topbar"] .app { flex-direction: column; }
:root[data-layout="topbar"] .sidebar { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 2px; padding: 6px 12px; flex-shrink: 0; }
:root[data-layout="topbar"] .brand { border: 0; margin: 0; margin-inline-end: 8px; padding: 0 4px; }
:root[data-layout="topbar"] .brand > div:last-child { display: none; }
:root[data-layout="topbar"] .sidebar a { padding: 7px 9px; white-space: nowrap; font-size: 12.5px; gap: 5px; }
:root[data-layout="topbar"] .user-box { padding: 6px 9px; font-size: 12px; }
:root[data-layout="topbar"] .user-box .link { display: none; }
:root[data-layout="topbar"] .user-box .ub-act .link { display: inline; }
:root[data-layout="topbar"] .sidebar-foot { margin: 0; margin-inline-start: auto; display: flex; gap: 6px; align-items: center; padding: 0; }
:root[data-layout="topbar"] #userBox { display: flex; gap: 6px; }
:root[data-layout="topbar"] .user-box { margin: 0; white-space: nowrap; }
:root[data-layout="topbar"] .types-mini, :root[data-layout="topbar"] .clock { display: none; }
:root[data-layout="topbar"] .pos { height: calc(100vh - 36px - var(--topbar-h, 60px)); }

/* 2) قائمة ضيقة بالأيقونات تفتح لما الماوس يعدي عليها */
:root[data-layout="rail"] .app { padding-inline-start: 72px; }
:root[data-layout="rail"] .sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 72px; z-index: 45; transition: width .18s ease, box-shadow .18s; overflow: hidden; }
:root[data-layout="rail"] .sidebar:hover { width: 250px; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
:root[data-layout="rail"] .sidebar a { white-space: nowrap; }
:root[data-layout="rail"] .sidebar:not(:hover) a { font-size: 0; justify-content: center; padding: 11px 0; }
:root[data-layout="rail"] .sidebar:not(:hover) a span { font-size: 21px; }
:root[data-layout="rail"] .sidebar:not(:hover) .brand { justify-content: center; }
:root[data-layout="rail"] .sidebar:not(:hover) .brand > div:last-child,
:root[data-layout="rail"] .sidebar:not(:hover) .sidebar-foot { display: none; }

/* 3) قائمة وصفحة عائمين بحواف دائرية */
:root[data-layout="floating"] .app { padding: 12px; gap: 12px; }
:root[data-layout="floating"] .sidebar { border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
:root[data-layout="floating"] main { border-radius: 22px; }
:root[data-layout="floating"] .pos { height: calc(100vh - 60px); }

/* ---------- 2) الليلي الذهبي ---------- */
:root[data-skin="midnight"] {
  --font: 'El Messiri'; --bg: #0c0e13; --panel: #151922; --text: #efe8d8; --muted: #a39b88; --line: #262b36;
  --primary: #d6ad4a; --primary-soft: #3a2f16; --on-primary: #1a1405; --success: #4fbf7f; --success-soft: #133021;
  --danger: #ef6a6a; --danger-soft: #3b1a1a; --warn: #f0a947; --warn-soft: #3a2a12;
  --side: #07080b; --side-text: #c9bfa6; --side-hover: #171a21; --side-strong: #f5d98f; --side-link: #d6ad4a;
  --surface-2: #1b202b; --hover: #1a1e28; --surface-3: #232937; --input-border: #353c4b; --label: #d8cfb9; --axis: #3b4252;
  --radius: 14px; --shadow: 0 2px 10px rgba(0, 0, 0, .45); color-scheme: dark;
}
:root[data-skin="midnight"] .card, :root[data-skin="midnight"] .stat { border-color: #2d2716; }
:root[data-skin="midnight"] .page-head h1 { color: #f5d98f; }
:root[data-skin="midnight"] .sidebar a.active { box-shadow: 0 0 0 1px #f5d98f55 inset; }

/* ---------- 3) الأبيض البسيط (شريط علوي) ---------- */
:root[data-skin="minimal"] {
  --font: 'IBM Plex Sans Arabic'; --bg: #ffffff; --panel: #ffffff; --text: #111111; --muted: #6f6f6f; --line: #e9e9e9;
  --primary: #111111; --primary-soft: #f2f2f2; --on-primary: #ffffff;
  --side: #ffffff; --side-text: #555555; --side-hover: #f3f3f3; --side-strong: #111111; --side-link: #111111;
  --surface-2: #fafafa; --hover: #fafafa; --surface-3: #f0f0f0; --input-border: #dddddd; --label: #333333; --axis: #dddddd;
  --radius: 8px; --r-sm: 6px; --r-nav: 6px; --shadow: none;
}
:root[data-skin="minimal"] .sidebar { border-bottom: 1px solid #ececec; }
:root[data-skin="minimal"] .sidebar a.active { background: #111; color: #fff; }
:root[data-skin="minimal"] .card, :root[data-skin="minimal"] .stat { border-color: #ececec; }
:root[data-skin="minimal"] .page-head h1 { font-weight: 700; letter-spacing: -.3px; }

/* ---------- 4) الزمردي (قائمة أيقونات) ---------- */
:root[data-skin="emerald"] {
  --font: 'Tajawal'; --bg: #eef6f2; --panel: #ffffff; --text: #10271f; --muted: #5b7469; --line: #d6e7df;
  --primary: #0f8a5f; --primary-soft: #dcf2e8; --success: #15803d;
  --side: #0b3b2c; --side-text: #b7d8ca; --side-hover: #145240; --side-strong: #ffffff; --side-link: #7ee2b8;
  --surface-2: #f3faf6; --hover: #f5fbf8; --input-border: #c7ddd2;
  --radius: 14px; --r-sm: 10px; --r-nav: 12px;
}
:root[data-skin="emerald"] body { font-size: 15.5px; }

/* ---------- 5) الوردي الناعم (عائم) ---------- */
:root[data-skin="rose"] {
  --font: 'Almarai'; --bg: #fdf1f5; --panel: #ffffff; --text: #3d1a2b; --muted: #936b7d; --line: #f6d9e5;
  --primary: #d63384; --primary-soft: #fde2ee; --success: #16a34a;
  --side: #ffffff; --side-text: #8a3b62; --side-hover: #fdeaf2; --side-strong: #b0226a; --side-link: #d63384;
  --surface-2: #fff7fa; --hover: #fff8fb; --surface-3: #fdeef4; --input-border: #f2cddd; --label: #6b2e4b; --axis: #f2cddd;
  --radius: 20px; --r-sm: 14px; --r-nav: 14px; --shadow: 0 6px 20px rgba(214, 51, 132, .08);
}
:root[data-skin="rose"] .btn { border-radius: 30px; }
:root[data-skin="rose"] .welcome { background: linear-gradient(135deg, #f472b6, #c026d3); }

/* ---------- 6) المحيط الزجاجي (عائم + زجاج) ---------- */
:root[data-skin="ocean"] {
  --font: 'Readex Pro'; --bg: transparent; --panel: rgba(255, 255, 255, .80); --text: #062a33; --muted: #3f6570; --line: rgba(6, 42, 51, .12);
  --primary: #0e7490; --primary-soft: rgba(14, 116, 144, .12);
  --side: rgba(4, 38, 52, .78); --side-text: #b9e6f0; --side-hover: rgba(255, 255, 255, .10); --side-strong: #ffffff; --side-link: #67e8f9;
  --surface-2: rgba(255, 255, 255, .55); --hover: rgba(255, 255, 255, .6); --surface-3: rgba(255, 255, 255, .5); --input-border: rgba(6, 42, 51, .18);
  --radius: 18px; --r-sm: 12px; --shadow: 0 8px 30px rgba(3, 40, 60, .15);
}
:root[data-skin="ocean"] body { background: linear-gradient(135deg, #22d3ee 0%, #0e7490 45%, #134e4a 100%) fixed; }
:root[data-skin="ocean"] .card, :root[data-skin="ocean"] .stat, :root[data-skin="ocean"] .cart, :root[data-skin="ocean"] .p-card,
:root[data-skin="ocean"] .table-wrap, :root[data-skin="ocean"] .modal, :root[data-skin="ocean"] .sidebar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-skin="ocean"] .modal { background: rgba(255, 255, 255, .94); }
:root[data-skin="ocean"] .page-head h1 { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
:root[data-skin="ocean"] .page-head > .muted, :root[data-skin="ocean"] .page-head .muted { color: #e0f7fb; }
:root[data-skin="ocean"] table.table { background: transparent; }

/* ---------- 7) الغروب (شريط علوي ملون) ---------- */
:root[data-skin="sunset"] {
  --font: 'Changa'; --bg: #fff7ed; --panel: #ffffff; --text: #3b1d0c; --muted: #8a6049; --line: #fde0c6;
  --primary: #ea580c; --primary-soft: #ffedd5;
  --side: linear-gradient(90deg, #7c2d12, #c2410c 55%, #f97316); --side-text: #ffe6d3; --side-hover: rgba(255, 255, 255, .15); --side-strong: #ffffff; --side-link: #ffe0b2;
  --side-active: #ffffff; --side-active-text: #c2410c;
  --surface-2: #fffaf4; --hover: #fffaf5; --input-border: #fbd3ad;
  --radius: 12px; --r-sm: 10px;
}
:root[data-skin="sunset"] .sidebar { background: var(--side); }
:root[data-skin="sunset"] .welcome { background: linear-gradient(135deg, #f97316, #db2777); }

/* ---------- 8) البنفسجي الملكي ---------- */
:root[data-skin="royal"] {
  --font: 'Cairo'; --bg: #f5f3ff; --panel: #ffffff; --text: #1e1236; --muted: #6b5f8a; --line: #e4dcfb;
  --primary: #6d28d9; --primary-soft: #ede9fe;
  --side: #2e1065; --side-text: #cfc2f2; --side-hover: #3f1a86; --side-strong: #ffffff; --side-link: #c4b5fd;
  --side-active: linear-gradient(90deg, #7c3aed, #a855f7);
  --surface-2: #faf8ff; --hover: #fbfaff; --input-border: #d9cff7;
  --radius: 16px; --r-sm: 11px; --r-nav: 30px; --shadow: 0 4px 16px rgba(76, 29, 149, .08);
}
:root[data-skin="royal"] .sidebar a.active { background: var(--side-active); box-shadow: 0 6px 18px rgba(124, 58, 237, .45); }

/* ---------- 9) الرمادي الاحترافي (مضغوط) ---------- */
:root[data-skin="slate"] {
  --font: 'IBM Plex Sans Arabic'; --bg: #eef1f5; --panel: #ffffff; --text: #0f172a; --muted: #64748b; --line: #dde3ea;
  --primary: #334155; --primary-soft: #e2e8f0;
  --side: #1e293b; --side-text: #cbd5e1; --side-hover: #334155; --side-strong: #ffffff; --side-link: #93c5fd;
  --side-active: #0284c7; /* الأبيض على السماوي الفاتح كان مش واضح */
  --surface-2: #f6f8fa; --hover: #f8fafc; --input-border: #cfd8e3;
  --radius: 4px; --r-sm: 3px; --r-nav: 3px; --shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
:root[data-skin="slate"] body { font-size: 14px; }
:root[data-skin="slate"] .card { padding: 12px; margin-bottom: 10px; }
:root[data-skin="slate"] .table th, :root[data-skin="slate"] .table td { padding: 6px 8px; font-size: 13px; }
:root[data-skin="slate"] .sidebar a { padding: 8px 12px; font-size: 13px; }
:root[data-skin="slate"] .btn { padding: 6px 12px; }

/* ---------- 10) الجريء (حواف سودا وظلال مصمتة) ---------- */
:root[data-skin="brutal"] {
  --font: 'Tajawal'; --bg: #fef6e4; --panel: #ffffff; --text: #111111; --muted: #444444; --line: #111111;
  --primary: #f0437a; --primary-soft: #ffe0ea; --on-primary: #111111; --success: #1f9d55; --success-soft: #c9f5d9; --danger: #e02424; --warn: #e3a008; --warn-soft: #fff1c1;
  --side: #ffd23f; --side-text: #111111; --side-hover: #ffe27a; --side-strong: #111111; --side-link: #111111;
  --side-active: #111111; --side-active-text: #ffd23f;
  --surface-2: #fff9ec; --hover: #fff4d6; --surface-3: #ffeec2; --input-border: #111111; --label: #111111; --axis: #111111;
  --radius: 8px; --r-sm: 6px; --r-nav: 6px; --shadow: 4px 4px 0 #111111;
}
:root[data-skin="brutal"] .sidebar { border-bottom: 3px solid #111; }
:root[data-skin="brutal"] .card, :root[data-skin="brutal"] .stat, :root[data-skin="brutal"] .p-card, :root[data-skin="brutal"] .cart,
:root[data-skin="brutal"] .modal, :root[data-skin="brutal"] .table-wrap, :root[data-skin="brutal"] .type-card { border: 2px solid #111; box-shadow: 4px 4px 0 #111; }
:root[data-skin="brutal"] .btn { border: 2px solid #111; box-shadow: 2px 2px 0 #111; font-weight: 800; }
:root[data-skin="brutal"] .btn:active { transform: translate(2px, 2px); box-shadow: none; }
:root[data-skin="brutal"] .chip { border: 2px solid #111; }
:root[data-skin="brutal"] input, :root[data-skin="brutal"] select, :root[data-skin="brutal"] textarea { border-width: 2px; }
:root[data-skin="brutal"] .page-head h1, :root[data-skin="brutal"] .card h2 { font-family: 'Lalezar', var(--font); font-weight: 400; letter-spacing: .3px; }
:root[data-skin="brutal"] .page-head h1 { font-size: 28px; }

/* ---------- 11) عالي الوضوح (لضعاف النظر والإضاءة القوية) ---------- */
:root[data-skin="contrast"] {
  --font: 'Tajawal'; --bg: #000000; --panel: #0b0b0b; --text: #ffffff; --muted: #d4d4d4; --line: #5a5a5a;
  --primary: #ffd400; --primary-soft: #332b00; --on-primary: #000000; --success: #3ddc84; --success-soft: #0d2e1b; --danger: #ff5c5c; --danger-soft: #3a1010; --warn: #ffb020; --warn-soft: #3a2800;
  --side: #000000; --side-text: #ffffff; --side-hover: #262626; --side-strong: #ffd400; --side-link: #ffd400;
  --surface-2: #151515; --hover: #1a1a1a; --surface-3: #202020; --input-border: #9a9a9a; --label: #ffffff; --axis: #777777;
  --radius: 10px; --shadow: none; color-scheme: dark;
}
:root[data-skin="contrast"] body { font-size: 17px; font-weight: 500; }
:root[data-skin="contrast"] .sidebar { border-inline-end: 2px solid #ffd400; }
:root[data-skin="contrast"] .card, :root[data-skin="contrast"] .stat, :root[data-skin="contrast"] .p-card, :root[data-skin="contrast"] .cart { border: 2px solid #5a5a5a; }
:root[data-skin="contrast"] :focus-visible { outline: 3px solid #ffd400 !important; outline-offset: 2px; }
:root[data-skin="contrast"] .muted { color: #d4d4d4; }

/* ---------- 12) القهوة ---------- */
:root[data-skin="coffee"] {
  --font: 'Noto Kufi Arabic'; --bg: #f5ede3; --panel: #fffaf3; --text: #2e1d12; --muted: #7d6452; --line: #e8d9c6;
  --primary: #7b4a2a; --primary-soft: #f0e1d2; --success: #4d7c0f; --success-soft: #eaf3d6;
  --side: #3b2618; --side-text: #e3cfb8; --side-hover: #4f3322; --side-strong: #fff4e3; --side-link: #e7b98c;
  --side-active: #c08552;
  --surface-2: #fbf4ea; --hover: #fdf7ee; --surface-3: #f3e7d7; --input-border: #dcc6ad; --label: #4a3020; --axis: #dcc6ad;
  --radius: 12px; --shadow: 0 2px 8px rgba(59, 38, 24, .08);
}
:root[data-skin="coffee"] body { font-size: 14px; }

/* ---------- 13) النيون (قائمة أيقونات) ---------- */
:root[data-skin="neon"] {
  --font: 'Noto Kufi Arabic'; --bg: #07070f; --panel: #10101d; --text: #e7e9ff; --muted: #8b8fb8; --line: #232347;
  --primary: #00e5ff; --primary-soft: #062b35; --on-primary: #00161a; --success: #39ff88; --success-soft: #0b2a19; --danger: #ff3d7f; --danger-soft: #33101f; --warn: #ffcc00; --warn-soft: #332a05;
  --side: #05050b; --side-text: #9aa0ff; --side-hover: #15152b; --side-strong: #ffffff; --side-link: #ff3dcb;
  --side-active: #ff3dcb; --side-active-text: #12000d;
  --surface-2: #151527; --hover: #14142a; --surface-3: #1b1b33; --input-border: #2e2e5c; --label: #c7cafc; --axis: #2e2e5c;
  --radius: 12px; --shadow: 0 0 0 1px #1d1d3d, 0 6px 24px rgba(0, 229, 255, .06); color-scheme: dark;
}
:root[data-skin="neon"] body { font-size: 14px; }
:root[data-skin="neon"] .btn-primary, :root[data-skin="neon"] .chip.active { box-shadow: 0 0 14px rgba(0, 229, 255, .55); }
:root[data-skin="neon"] .sidebar a.active { box-shadow: 0 0 16px rgba(255, 61, 203, .6); }
:root[data-skin="neon"] .page-head h1 { color: #00e5ff; text-shadow: 0 0 12px rgba(0, 229, 255, .6); }
:root[data-skin="neon"] .chart-bars .bar-fill { box-shadow: 0 0 10px rgba(0, 229, 255, .5); }

/* ---------- 14) الورقي الكلاسيكي (شريط علوي + خط نسخ) ---------- */
:root[data-skin="paper"] {
  --font: 'Amiri'; --bg: #f3ecdb; --panel: #fffdf5; --text: #2b2418; --muted: #75694f; --line: #dccfae;
  --primary: #8b1e1e; --primary-soft: #f3e1d8; --success: #3f6212; --success-soft: #e7eed2;
  --side: #efe4c8; --side-text: #5a4a2c; --side-hover: #e5d6b1; --side-strong: #2b2418; --side-link: #8b1e1e;
  --side-active: #8b1e1e;
  --surface-2: #faf5e8; --hover: #fbf6ea; --surface-3: #f1e7cf; --input-border: #cdbd97; --label: #3b3120; --axis: #cdbd97;
  --radius: 3px; --r-sm: 3px; --r-nav: 3px; --shadow: none;
}
:root[data-skin="paper"] body { font-size: 17px; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(139, 30, 30, .035) 31px 32px); }
:root[data-skin="paper"] .sidebar { border-bottom: 3px double #b8a57a; }
:root[data-skin="paper"] .card, :root[data-skin="paper"] .stat, :root[data-skin="paper"] .p-card, :root[data-skin="paper"] .cart { border: 1px solid #d3c49f; }
:root[data-skin="paper"] .page-head h1 { font-size: 28px; color: #6b1515; }

/* ---------- معاينة الثيمات في الإعدادات ---------- */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.skin-card { border: 2px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--panel); transition: .12s; }
.skin-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.skin-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.skin-prev { height: 96px; display: flex; gap: 6px; padding: 8px; }
.skin-prev .sp-side { width: 26%; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; }
.skin-prev .sp-side i { display: block; height: 6px; border-radius: 3px; opacity: .55; }
.skin-prev .sp-side i.on { opacity: 1; }
.skin-prev .sp-main { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.skin-prev .sp-card { flex: 1; border-radius: 6px; padding: 6px 8px; font-size: 13px; display: flex; flex-direction: column; justify-content: space-between; }
.skin-prev .sp-btn { height: 12px; width: 55%; border-radius: 4px; }
.skin-prev.top { flex-direction: column; }
.skin-prev.top .sp-side { width: auto; height: 16px; flex-direction: row; padding: 4px; }
.skin-prev.top .sp-side i { width: 18px; height: 100%; }
.skin-prev.rail .sp-side { width: 12%; }
.skin-info { padding: 8px 10px; border-top: 1px solid var(--line); }
.skin-info b { display: block; font-size: 14px; }
.skin-info span { font-size: 12px; color: var(--muted); }

/* ---------- تصميمات Meta Origin العشرة (نفس تصميمات برنامج المصنع والمدرسة) — مولَّدة، بتتبع الفاتح/الداكن ---------- */
:root[data-skin="mo-lotus"] { --font: 'Cairo'; --bg: #f5f5f7; --panel: #ffffff; --text: #1f1f2e; --muted: #8c8c9a; --line: #ececf1; --primary: #7c3aed; --primary-soft: #f3e8ff; --side: #ffffff; --side-text: #1f1f2e; --side-hover: rgba(0,0,0,.05); --side-strong: #1f1f2e; --side-link: #7c3aed; --side-active: #7c3aed; --surface-2: #fafafa; --hover: #fafafa; --input-border: #ececf1; --radius: 14px; --r-sm: 8px; --r-nav: 8px; }
:root[data-skin="mo-lotus"][data-theme="dark"] { --font: 'Cairo'; --bg: #0f0d17; --panel: #1a1726; --text: #ece9f7; --muted: #9a94b3; --line: #2e2942; --primary: #9b6cf6; --primary-soft: #2a1f47; --side: #151220; --side-text: #ece9f7; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #ec4899; --side-active: #9b6cf6; --surface-2: #221e31; --hover: #221e31; --input-border: #2e2942; --radius: 14px; --r-sm: 8px; --r-nav: 8px; }
:root[data-skin="mo-lotus"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-ocean"] { --font: 'Cairo'; --bg: #f0f4f9; --panel: #ffffff; --text: #14213d; --muted: #7d8aa3; --line: #e3e9f2; --primary: #1677ff; --primary-soft: #e6f0ff; --side: #001529; --side-text: #ffffff; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #06b6d4; --side-active: #1677ff; --surface-2: #f7f9fc; --hover: #f7f9fc; --input-border: #e3e9f2; --radius: 12px; --r-sm: 6px; --r-nav: 6px; }
:root[data-skin="mo-ocean"][data-theme="dark"] { --font: 'Cairo'; --bg: #0a1220; --panel: #111c2e; --text: #e3ebf7; --muted: #8193b2; --line: #22324d; --primary: #3c89ff; --primary-soft: #132a4d; --side: #07101d; --side-text: #e3ebf7; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #22d3ee; --side-active: #3c89ff; --surface-2: #16233a; --hover: #16233a; --input-border: #22324d; --radius: 12px; --r-sm: 6px; --r-nav: 6px; }
:root[data-skin="mo-ocean"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-emerald"] { --font: 'Cairo'; --bg: #f1f7f4; --panel: #ffffff; --text: #10261d; --muted: #6f877c; --line: #dfece6; --primary: #059669; --primary-soft: #e3f6ee; --side: linear-gradient(180deg, #064e3b 0%, #065f46 100%); --side-text: #ffffff; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #84cc16; --side-active: #059669; --surface-2: #f6faf8; --hover: #f6faf8; --input-border: #dfece6; --radius: 16px; --r-sm: 10px; --r-nav: 10px; }
:root[data-skin="mo-emerald"][data-theme="dark"] { --font: 'Cairo'; --bg: #0a1511; --panel: #10201a; --text: #e2f2ea; --muted: #86a597; --line: #1f3a2f; --primary: #10b981; --primary-soft: #0f3326; --side: linear-gradient(180deg, #03271e 0%, #053a2c 100%); --side-text: #e2f2ea; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #a3e635; --side-active: #10b981; --surface-2: #152a22; --hover: #152a22; --input-border: #1f3a2f; --radius: 16px; --r-sm: 10px; --r-nav: 10px; }
:root[data-skin="mo-emerald"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-sunset"] { --font: 'Cairo'; --bg: #fbf6f2; --panel: #ffffff; --text: #2b1a10; --muted: #98806f; --line: #f1e6dd; --primary: #ea580c; --primary-soft: #ffedd5; --side: #ffffff; --side-text: #2b1a10; --side-hover: rgba(0,0,0,.05); --side-strong: #2b1a10; --side-link: #ea580c; --side-active: #ea580c; --surface-2: #fdf9f6; --hover: #fdf9f6; --input-border: #f1e6dd; --radius: 18px; --r-sm: 12px; --r-nav: 12px; }
:root[data-skin="mo-sunset"][data-theme="dark"] { --font: 'Cairo'; --bg: #140e0b; --panel: #1f1612; --text: #f6e9df; --muted: #b09683; --line: #3a2a21; --primary: #fb7c3c; --primary-soft: #3a2213; --side: #1a120e; --side-text: #f6e9df; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #f43f5e; --side-active: #fb7c3c; --surface-2: #281d17; --hover: #281d17; --input-border: #3a2a21; --radius: 18px; --r-sm: 12px; --r-nav: 12px; }
:root[data-skin="mo-sunset"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-rose"] { --font: 'Cairo'; --bg: #fdf6f9; --panel: #ffffff; --text: #2d1422; --muted: #a07d8f; --line: #f5e1ea; --primary: #db2777; --primary-soft: #fce7f3; --side: #fff7fa; --side-text: #2d1422; --side-hover: rgba(0,0,0,.05); --side-strong: #2d1422; --side-link: #db2777; --side-active: #db2777; --surface-2: #fef9fb; --hover: #fef9fb; --input-border: #f5e1ea; --radius: 22px; --r-sm: 16px; --r-nav: 16px; }
:root[data-skin="mo-rose"][data-theme="dark"] { --font: 'Cairo'; --bg: #150c11; --panel: #20131a; --text: #f8e8f0; --muted: #b891a4; --line: #3d2531; --primary: #f0529c; --primary-soft: #3d1529; --side: #1a0f15; --side-text: #f8e8f0; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #c084fc; --side-active: #f0529c; --surface-2: #291922; --hover: #291922; --input-border: #3d2531; --radius: 22px; --r-sm: 16px; --r-nav: 16px; }
:root[data-skin="mo-rose"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-graphite"] { --font: 'Cairo'; --bg: #f4f4f5; --panel: #ffffff; --text: #18181b; --muted: #71717a; --line: #e4e4e7; --primary: #27272a; --primary-soft: #f1f1f3; --side: #18181b; --side-text: #fafafa; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #71717a; --side-active: #27272a; --surface-2: #fafafa; --hover: #fafafa; --input-border: #e4e4e7; --radius: 9px; --r-sm: 3px; --r-nav: 3px; }
:root[data-skin="mo-graphite"][data-theme="dark"] { --font: 'Cairo'; --bg: #0c0c0e; --panel: #16161a; --text: #ededf0; --muted: #8e8e98; --line: #2a2a31; --primary: #d4d4d8; --primary-soft: #23232a; --side: #09090b; --side-text: #ededf0; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #a1a1aa; --side-active: #d4d4d8; --surface-2: #1d1d22; --hover: #1d1d22; --input-border: #2a2a31; --radius: 9px; --r-sm: 3px; --r-nav: 3px; }
:root[data-skin="mo-graphite"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-royal"] { --font: 'Cairo'; --bg: #f5f4ef; --panel: #ffffff; --text: #1b2233; --muted: #8a8574; --line: #e7e3d6; --primary: #b7791f; --primary-soft: #fbf1dc; --side: linear-gradient(180deg, #0b1f3a 0%, #13294b 100%); --side-text: #f5e6c4; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #1e3a8a; --side-active: #b7791f; --surface-2: #faf9f5; --hover: #faf9f5; --input-border: #e7e3d6; --radius: 10px; --r-sm: 4px; --r-nav: 4px; }
:root[data-skin="mo-royal"][data-theme="dark"] { --font: 'Cairo'; --bg: #0a0f1a; --panel: #111a2b; --text: #ece6d6; --muted: #9c957f; --line: #243150; --primary: #d69e2e; --primary-soft: #33280f; --side: linear-gradient(180deg, #050d1c 0%, #0b1a33 100%); --side-text: #f0dca8; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #3b5bdb; --side-active: #d69e2e; --surface-2: #172238; --hover: #172238; --input-border: #243150; --radius: 10px; --r-sm: 4px; --r-nav: 4px; }
:root[data-skin="mo-royal"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-mint"] { --font: 'Cairo'; --bg: #eef8f7; --panel: #ffffff; --text: #0f2a2a; --muted: #6a8b89; --line: rgba(13, 148, 136, 0.14); --primary: #0d9488; --primary-soft: rgba(13, 148, 136, 0.1); --side: rgba(255, 255, 255, 0.55); --side-text: #0f2a2a; --side-hover: rgba(0,0,0,.05); --side-strong: #0f2a2a; --side-link: #0d9488; --side-active: #0d9488; --surface-2: rgba(255, 255, 255, 0.6); --hover: rgba(255, 255, 255, 0.6); --input-border: rgba(13, 148, 136, 0.14); --radius: 20px; --r-sm: 14px; --r-nav: 14px; }
:root[data-skin="mo-mint"][data-theme="dark"] { --font: 'Cairo'; --bg: #071514; --panel: #10282a; --text: #dff5f2; --muted: #86a9a5; --line: rgba(45, 212, 191, 0.14); --primary: #2dd4bf; --primary-soft: rgba(45, 212, 191, 0.12); --side: rgba(8, 28, 27, 0.55); --side-text: #dff5f2; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #38bdf8; --side-active: #2dd4bf; --surface-2: rgba(16, 40, 38, 0.55); --hover: rgba(16, 40, 38, 0.55); --input-border: rgba(45, 212, 191, 0.14); --radius: 20px; --r-sm: 14px; --r-nav: 14px; }
:root[data-skin="mo-mint"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-classic"] { --font: 'Cairo'; --bg: #f3f3f3; --panel: #ffffff; --text: #1a1a1a; --muted: #6e6e6e; --line: #e0e0e0; --primary: #0067c0; --primary-soft: #e5f1fb; --side: #f7f7f7; --side-text: #1a1a1a; --side-hover: rgba(0,0,0,.05); --side-strong: #1a1a1a; --side-link: #0067c0; --side-active: #0067c0; --surface-2: #f9f9f9; --hover: #f9f9f9; --input-border: #e0e0e0; --radius: 9px; --r-sm: 3px; --r-nav: 3px; }
:root[data-skin="mo-classic"][data-theme="dark"] { --font: 'Cairo'; --bg: #1c1c1c; --panel: #272727; --text: #f0f0f0; --muted: #a0a0a0; --line: #3a3a3a; --primary: #4ca3ec; --primary-soft: #15324d; --side: #202020; --side-text: #f0f0f0; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #60cdff; --side-active: #4ca3ec; --surface-2: #2e2e2e; --hover: #2e2e2e; --input-border: #3a3a3a; --radius: 9px; --r-sm: 3px; --r-nav: 3px; }
:root[data-skin="mo-classic"] .sidebar a.active { background: var(--side-active); color: #fff; }
:root[data-skin="mo-neon"] { --font: 'Cairo'; --bg: #f0f9fc; --panel: #ffffff; --text: #0b1d2a; --muted: #6b8595; --line: #dcecf2; --primary: #0891b2; --primary-soft: #e0f5fb; --side: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%); --side-text: #e0f7ff; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #8b5cf6; --side-active: #0891b2; --surface-2: #f6fbfd; --hover: #f6fbfd; --input-border: #dcecf2; --radius: 16px; --r-sm: 10px; --r-nav: 10px; }
:root[data-skin="mo-neon"][data-theme="dark"] { --font: 'Cairo'; --bg: #070b18; --panel: #0e1528; --text: #e0f2fe; --muted: #7f93b3; --line: #1f2a47; --primary: #22d3ee; --primary-soft: #0b2e3a; --side: linear-gradient(180deg, #050814 0%, #150f3a 100%); --side-text: #e0f7ff; --side-hover: rgba(255,255,255,.08); --side-strong: #ffffff; --side-link: #a78bfa; --side-active: #22d3ee; --surface-2: #131c33; --hover: #131c33; --input-border: #1f2a47; --radius: 16px; --r-sm: 10px; --r-nav: 10px; }
:root[data-skin="mo-neon"] .sidebar a.active { background: var(--side-active); color: #fff; }