/* ═══════════════ العمق والحياة (18 سبتمبر 2026 — «صار ميت الموقع، وضّح العمق… نبي شي تفاعلي») ═══════════════
   تُحمَّل بعد noir.css. العمق على الأسود يجي من ثلاث طبقات:
   (1) سطح بتدرّج عمودي خفيف — أعلاه أفتح،  (2) حافة علوية «مضاءة» بتدرّج داخل الحدود،  (3) ضوء يتبع المؤشر (fx.js يضبط --mx/--my).
   الخلفية تبقى #000 بالضبط؛ التوهج المحيطي طبقة زخرفية شفافة فوقها. ومعها: حركة الأيقونات، لمعة الأزرار، خط الأرقام، لوحة الأوامر. */
html[data-skin="calm"], html[data-skin="calm"][data-theme="dark"] {
  --border: #212228; --border-strong: #33353d;
  --surface-grad: linear-gradient(180deg, #131418 0%, #0c0c0e 55%, #09090a 100%);
  --edge-grad: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 38%, rgba(255,255,255,.02));
  --num-font: "Num", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html[data-skin="calm"] .shell { position: relative; isolation: isolate; }
html[data-skin="calm"] .shell::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 460px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 78% 0%, rgba(44,196,179,.085), transparent 70%), radial-gradient(40% 80% at 12% 0%, rgba(120,140,255,.05), transparent 70%);
}

/* ─── الأسطح الرئيسية: تدرّج + حافة مضاءة ─── */
html[data-skin="calm"][data-theme="dark"] :is(.tile, .card, .kpi, .month-card) {
  border: 1px solid transparent; position: relative;
  background: var(--surface-grad) padding-box, var(--edge-grad) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 28px 60px -38px #000;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .25s ease;
}
/* ضوء يتبع المؤشر */
html[data-skin="calm"][data-theme="dark"] :is(.tile, .card, .kpi, .month-card, .row, .sys-item, .wk)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(90,216,201,.11), transparent 65%);
}
html[data-skin="calm"][data-theme="dark"] :is(.tile, .card, .kpi, .month-card, .row, .sys-item, .wk):hover::after { opacity: 1; }
html[data-skin="calm"][data-theme="dark"] :is(.row, .sys-item, .wk) { position: relative; overflow: hidden; }
/* القابل للضغط يرتفع وتضيء حافته بالتركوازي */
html[data-skin="calm"][data-theme="dark"] :is(.tile[role="button"], .kpi[style*="cursor"]):hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #17181d 0%, #0e0e11 60%, #0a0a0c 100%) padding-box, linear-gradient(180deg, rgba(90,216,201,.45), rgba(255,255,255,.05) 45%, rgba(255,255,255,.02)) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -36px rgba(44,196,179,.35);
}
/* البطل والمؤشر الرئيسي: توهج فوق التدرّج */
html[data-skin="calm"][data-theme="dark"] .hero, html[data-skin="calm"][data-theme="dark"] .kpi.primary {
  background: radial-gradient(120% 130% at 100% 0%, rgba(44,196,179,.34), transparent 56%) padding-box, radial-gradient(90% 90% at 0% 100%, rgba(44,196,179,.12), transparent 60%) padding-box, var(--surface-grad) padding-box,
              linear-gradient(180deg, rgba(90,216,201,.65), rgba(44,196,179,.18) 45%, rgba(44,196,179,.08)) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 90px -46px rgba(44,196,179,.75);
}
html[data-skin="calm"][data-theme="dark"] .hero.free {
  background: radial-gradient(120% 130% at 100% 0%, rgba(242,198,109,.24), transparent 56%) padding-box, var(--surface-grad) padding-box, linear-gradient(180deg, rgba(242,198,109,.55), rgba(242,198,109,.10) 45%, rgba(242,198,109,.05)) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 90px -50px rgba(242,198,109,.55);
}
/* الطبقة الثانية (داخل البطاقات) أفتح من سطحها بوضوح */
html[data-skin="calm"][data-theme="dark"] :is(.row, .sys-item, .wk) { background: linear-gradient(180deg, #17181c, #111215); border: 1px solid #26272e; }
html[data-skin="calm"][data-theme="dark"] :is(.row, .sys-item, .wk):hover { background: linear-gradient(180deg, #1d1e24, #15161a); border-color: #3a3c45; }
html[data-skin="calm"][data-theme="dark"] .wk { transition: transform .18s ease, border-color .15s ease, background .15s ease; }
html[data-skin="calm"][data-theme="dark"] .wk:hover { transform: translateY(-2px); }
html[data-skin="calm"][data-theme="dark"] .wk.booked { background: linear-gradient(165deg, rgba(44,196,179,.26), rgba(44,196,179,.07)); border-color: rgba(44,196,179,.4); }
html[data-skin="calm"][data-theme="dark"] .cell:not(.booked):not(.weekend) { background: linear-gradient(180deg, #17181c, #111215); border-color: #26272e; }
html[data-skin="calm"][data-theme="dark"] th { background: linear-gradient(180deg, #16171b, #111215); }
html[data-skin="calm"][data-theme="dark"] .nav-item.active { background: linear-gradient(180deg, #17181c, #0f1012); border-color: #26272e; }

/* ─── الأيقونات: حجم طبقي + حركة عند المرور ─── */
html[data-skin="calm"][data-theme="dark"] :is(.tile-ico, .kpi-ico) {
  background: linear-gradient(180deg, #1c1d22, #121316); border: 1px solid #2a2c33; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 14px -8px #000;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), color .2s ease, box-shadow .25s ease;
}
html[data-skin="calm"][data-theme="dark"] :is(.tile, .kpi):hover :is(.tile-ico, .kpi-ico) { transform: translateY(-1px) rotate(-6deg) scale(1.06); color: var(--primary-strong); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 0 18px -4px rgba(44,196,179,.7); }
html[data-skin="calm"] :is(.nav-ico svg, .bb-item svg, .icon-btn svg) { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
html[data-skin="calm"] :is(.nav-item:hover .nav-ico svg, .bb-item:hover svg) { transform: translateY(-1px) scale(1.1); }
html[data-skin="calm"] .icon-btn:hover svg { transform: rotate(-8deg) scale(1.06); }
html[data-skin="calm"] #refresh:hover svg { transform: rotate(180deg); transition-duration: .5s; }
html[data-skin="calm"] .row:hover > svg:last-child { transform: translateX(-3px); } html[data-skin="calm"] .row > svg:last-child { transition: transform .2s ease; color: var(--text-3); }

/* ─── شرائح بطاقة البطل ─── */
html[data-skin="calm"] .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-skin="calm"] .chip-soft { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #e6fffb;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; font-family: var(--num-font); }
html[data-skin="calm"] .hero.free .chip-soft { color: var(--text); }
html[data-skin="calm"] .chip-ico { width: 14px; height: 14px; opacity: .85; flex: none; }

/* ─── الأزرار ─── */
html[data-skin="calm"][data-theme="dark"] .btn-primary { position: relative; overflow: hidden; background: linear-gradient(180deg, #3ad6c4, #1fae9f); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -12px rgba(44,196,179,.9); }
html[data-skin="calm"][data-theme="dark"] .btn-primary::before { content: ""; position: absolute; inset: 0; transform: translateX(120%); background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transition: transform .6s ease; }
html[data-skin="calm"][data-theme="dark"] .btn-primary:hover::before { transform: translateX(-120%); }
html[data-skin="calm"][data-theme="dark"] .btn-ghost { background: linear-gradient(180deg, #1a1b20, #121316); border-color: #2a2c33; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }
html[data-skin="calm"][data-theme="dark"] .hero-actions .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }

/* ─── الأرقام بخط Inter (لاتيني فقط عبر unicode-range — العربي يبقى Plex) ─── */
html[data-skin="calm"] :is(.tile-value, .kpi .value, .ring-num, .wk .p, td.num, .num, .money, .month-stats, .cell .p, .trend, .hero-guest span, .row-sub, .mono) {
  font-family: var(--num-font); font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
}
html[data-skin="calm"] .tile-value { font-size: 32px; font-weight: 700; }

/* ─── دخول متدرّج (fx.js يضيف .fx-in و--fx-delay) ─── */
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="calm"] .view > *:not(:has(canvas)) { animation: none; }
  html[data-skin="calm"] .fx-in { animation: fx-in .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--fx-delay, 0ms); }
}
@keyframes fx-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }

/* ─── لوحة الأوامر Ctrl+K ─── */
html[data-skin="calm"] .pal-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: start center; padding: 12vh 16px 0; animation: fx-fade .15s ease both; }
html[data-skin="calm"] .pal { width: min(560px, 100%); border-radius: 18px; border: 1px solid transparent; overflow: hidden;
  background: linear-gradient(180deg, #15161a, #0b0b0d) padding-box, linear-gradient(180deg, rgba(90,216,201,.5), rgba(255,255,255,.06) 40%, rgba(255,255,255,.03)) border-box;
  box-shadow: 0 40px 120px -20px #000, 0 0 80px -30px rgba(44,196,179,.5); animation: fx-in .22s cubic-bezier(.2,.7,.2,1) both; }
html[data-skin="calm"] .pal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #202127; }
html[data-skin="calm"] .pal-ico { width: 20px; height: 20px; color: var(--primary); flex: none; }
html[data-skin="calm"] .pal-input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 16px; min-width: 0; box-shadow: none !important; }
html[data-skin="calm"] .pal-input::placeholder { color: var(--text-3); }
html[data-skin="calm"] .pal-list { max-height: 46vh; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
html[data-skin="calm"] .pal-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-2); font: inherit; font-size: 14.5px; cursor: pointer; text-align: start; }
html[data-skin="calm"] .pal-item small { color: var(--text-3); font-size: 12px; }
html[data-skin="calm"] .pal-item.on { background: linear-gradient(180deg, #1b1c21, #131417); border-color: #2a2c33; color: var(--text); box-shadow: inset -2px 0 0 var(--primary); }
html[data-skin="calm"] .pal-empty { padding: 22px; text-align: center; color: var(--text-3); }
html[data-skin="calm"] .pal-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid #202127; color: var(--text-3); font-size: 12px; flex-wrap: wrap; }
html[data-skin="calm"] kbd { font-family: var(--num-font); font-size: 11px; padding: 2px 6px; border-radius: 6px; background: #1a1b20; border: 1px solid #2c2e36; border-bottom-width: 2px; color: var(--text-2); margin-inline-end: 3px; }

@media (max-width: 720px) {
  html[data-skin="calm"] .pal-scrim { padding-top: 8vh; }
  html[data-skin="calm"] .pal-foot span:last-child { display: none; }
  html[data-skin="calm"] .tile-value { font-size: 24px; }
  html[data-skin="calm"] .shell::before { height: 300px; }
}
@media (prefers-reduced-motion: reduce) { html[data-skin="calm"] :is(.tile, .kpi, .wk, .tile-ico, .kpi-ico) { transition: none; } }