/* ═══════════════════════════════════════════════════════════════
   «نوار» — إعادة تصميم كاملة على خلفية سوداء خالصة #000 (شرط المضيف 18 سبتمبر 2026: «background لونه أسود بالضبط… احترافية عالية
   ومريحة بصرياً»). تُحمَّل آخر شي فوق app.css + calm.css + pro.css، والوضع الداكن مفروض من theme.js.

   مبادئ الراحة البصرية على الأسود:
   - الخلفية #000 بالضبط، والأسطح ترتفع بدرجات رمادية قريبة جداً (#0a0a0b → #111214 → #17181b) — العمق بالحدود لا بالظلال.
   - النص ليس أبيض صافياً (#f2f3f5) لأن الأبيض الخالص على الأسود يتعب العين؛ الثانوي #a9adb8 والخافت #8b909d (تباين ≥ 6:1).
   - لون واحد للفعل (التركوازي نفسه #2cc4b3) يظهر كتوهج خفيف فقط عند المهم — لا مساحات ملوّنة كبيرة.
   - حدود 1px شبه شفافة + لمعة علوية داخلية دقيقة تعطي إحساس «زجاج مطفي».
   - شبكة «بنتو» 12 عموداً للرئيسية: بطاقة بطل + مؤشرات برسوم مصغّرة + قوائم.
   ⚠️ لا letter-spacing سالب (يكسر العربي). أي تعديل مظهر جديد يُضاف هنا.
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="calm"], html[data-skin="calm"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0a0a0b; --surface-2: #111214; --surface-3: #17181b;
  --border: #1b1c20; --border-strong: #2a2c32; --hairline: 1px solid var(--border);
  --text: #f2f3f5; --text-2: #a9adb8; --text-3: #8b909d;
  --primary: #2cc4b3; --primary-strong: #5ad8c9; --primary-soft: rgba(44,196,179,.12); --primary-soft-2: rgba(44,196,179,.22); --on-primary: #03120f;
  --booked-bg: #2cc4b3; --booked-text: #03120f; --free-bg: #0a0a0b;
  --weekend-bg: rgba(242,198,109,.10); --weekend-text: #f2c66d;
  --discount: #2cc4b3; --danger: #ff7a80; --danger-soft: rgba(255,122,128,.12); --warn: #f2c66d; --warn-soft: rgba(242,198,109,.12);
  --success: #3fd39a; --success-soft: rgba(63,211,154,.12); --info-soft: rgba(120,160,255,.12);
  --shadow-sm: none; --shadow-md: 0 12px 40px -12px rgba(0,0,0,.9); --shadow-lg: 0 30px 90px -20px rgba(0,0,0,1);
  --ring: 0 0 0 3px rgba(44,196,179,.28);
  --radius: 18px; --radius-sm: 12px; --cell-radius: 12px; --topbar-h: 64px;
  --sheen: inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-skin="calm"] body { background: #000; color: var(--text); font-size: 15px; }
html[data-skin="calm"] ::selection { background: rgba(44,196,179,.35); color: #fff; }
html[data-skin="calm"] #theme-toggle, html[data-skin="calm"] #menu-skin { display: none; }   /* الأسود شرط — لا تبديل */

/* ─── الهيكل: شريط علوي أسود زجاجي + قائمة جانبية بلا صندوق ─── */
html[data-skin="calm"][data-theme="dark"] .topbar { background: rgba(0,0,0,.72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: var(--hairline); }
html[data-skin="calm"] .topbar-inner, html[data-skin="calm"] .shell { max-width: 1480px; }
html[data-skin="calm"][data-theme="dark"] .brand-mark { background: linear-gradient(150deg, #2cc4b3, #0f8f83); color: #03120f; border-radius: 11px; box-shadow: 0 0 0 1px rgba(44,196,179,.35), 0 8px 24px -8px rgba(44,196,179,.6); }
html[data-skin="calm"][data-theme="dark"] .brand-mark svg { stroke: #03120f; }
html[data-skin="calm"][data-theme="dark"] .icon-btn, html[data-skin="calm"][data-theme="dark"] .user-btn { background: var(--surface); border: var(--hairline); box-shadow: var(--sheen); color: var(--text-2); }
html[data-skin="calm"][data-theme="dark"] .icon-btn:hover, html[data-skin="calm"][data-theme="dark"] .user-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
html[data-skin="calm"] .mock-flag { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(242,198,109,.25); }

html[data-skin="calm"][data-theme="dark"] .sidenav { background: transparent; border: 0; box-shadow: none; padding: 4px 0; gap: 2px; }
html[data-skin="calm"][data-theme="dark"] .nav-section-title { color: var(--text-3); font-size: 11.5px; font-weight: 600; padding: 14px 12px 6px; }
html[data-skin="calm"][data-theme="dark"] .nav-item { color: var(--text-2); border-radius: 10px; padding: 9px 12px; font-weight: 500; position: relative; border: 1px solid transparent; }
html[data-skin="calm"][data-theme="dark"] .nav-item:hover { background: var(--surface); color: var(--text); }
html[data-skin="calm"][data-theme="dark"] .nav-item.active { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: var(--sheen); }
html[data-skin="calm"][data-theme="dark"] .nav-item.active::before { content: ""; position: absolute; inset-inline-start: -1px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--primary); box-shadow: 0 0 12px var(--primary); }
html[data-skin="calm"][data-theme="dark"] .nav-ico { background: transparent; color: inherit; }
html[data-skin="calm"][data-theme="dark"] .nav-item.active .nav-ico { background: var(--primary-soft); color: var(--primary); }
html[data-skin="calm"][data-theme="dark"] .nav-sub-item { color: var(--text-3); border-radius: 8px; }
html[data-skin="calm"][data-theme="dark"] .nav-sub-item:hover { color: var(--text); background: var(--surface); }
html[data-skin="calm"][data-theme="dark"] .nav-sub-item.active { color: var(--primary); background: var(--primary-soft); }
html[data-skin="calm"][data-theme="dark"] .nav-sep { background: var(--border); }
html[data-skin="calm"][data-theme="dark"] .nav-foot { background: var(--surface); border: var(--hairline); box-shadow: var(--sheen); border-radius: 14px; }
html[data-skin="calm"][data-theme="dark"] .subtabs { background: var(--surface); border: var(--hairline); }
html[data-skin="calm"][data-theme="dark"] .subtab { color: var(--text-2); }
html[data-skin="calm"][data-theme="dark"] .subtab:hover { background: var(--surface-2); color: var(--text); }
html[data-skin="calm"][data-theme="dark"] .subtab.active { background: var(--primary); color: var(--on-primary); }
html[data-skin="calm"][data-theme="dark"] .bottombar { background: rgba(0,0,0,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: var(--hairline); }
html[data-skin="calm"][data-theme="dark"] .bb-item { color: var(--text-3); }
html[data-skin="calm"][data-theme="dark"] .bb-item.active { color: var(--primary); background: var(--primary-soft); }

/* ─── العناوين ─── */
html[data-skin="calm"] .view-head h1 { font-size: 27px; font-weight: 700; line-height: 1.25; }
html[data-skin="calm"] .view-head + .view > p.muted:first-child { color: var(--text-3); }

/* ─── الأسطح: بطاقات ومؤشرات وجداول ─── */
html[data-skin="calm"][data-theme="dark"] .card, html[data-skin="calm"][data-theme="dark"] .kpi, html[data-skin="calm"][data-theme="dark"] .month-card {
  background: var(--surface); border: var(--hairline); box-shadow: var(--sheen); border-radius: var(--radius);
  transition: border-color .18s ease, background .18s ease;
}
html[data-skin="calm"][data-theme="dark"] .card:hover, html[data-skin="calm"][data-theme="dark"] .kpi:hover { border-color: var(--border-strong); }
html[data-skin="calm"][data-theme="dark"] .kpi .value { color: var(--text); }
html[data-skin="calm"][data-theme="dark"] .kpi .label, html[data-skin="calm"][data-theme="dark"] .kpi .delta { color: var(--text-2); }
html[data-skin="calm"][data-theme="dark"] .kpi.primary {
  background: radial-gradient(130% 150% at 100% 0%, rgba(44,196,179,.26), transparent 58%), var(--surface);
  border-color: rgba(44,196,179,.38); box-shadow: var(--sheen), 0 0 0 1px rgba(44,196,179,.08), 0 24px 60px -34px rgba(44,196,179,.55);
}
html[data-skin="calm"][data-theme="dark"] .kpi.primary .value { color: #fff; }
html[data-skin="calm"][data-theme="dark"] .kpi.primary .label, html[data-skin="calm"][data-theme="dark"] .kpi.primary .delta { color: #bfeee8; }
html[data-skin="calm"][data-theme="dark"] .kpi-ico { background: var(--surface-3); color: var(--primary); border: var(--hairline); }
html[data-skin="calm"][data-theme="dark"] .kpi.primary .kpi-ico { background: rgba(44,196,179,.18); color: #d9fffa; border-color: rgba(44,196,179,.35); }

html[data-skin="calm"][data-theme="dark"] .table-wrap { background: var(--surface); border: var(--hairline); }
html[data-skin="calm"][data-theme="dark"] th { background: var(--surface-2); color: var(--text-3); border-bottom: var(--hairline); }
html[data-skin="calm"][data-theme="dark"] td { border-color: var(--border); color: var(--text); }
html[data-skin="calm"][data-theme="dark"] tbody tr:hover td { background: var(--surface-2); }
html[data-skin="calm"][data-theme="dark"] tfoot td { background: var(--surface-2); border-top: 1px solid var(--border-strong); }

html[data-skin="calm"][data-theme="dark"] .row { background: var(--surface-2); border: var(--hairline); }
html[data-skin="calm"][data-theme="dark"] .row:hover { background: var(--surface-3); border-color: var(--border-strong); }
html[data-skin="calm"][data-theme="dark"] .row-icon { background: var(--surface-3); color: var(--text); border: var(--hairline); }
html[data-skin="calm"][data-theme="dark"] .row-icon.success { background: var(--success-soft); color: var(--success); }
html[data-skin="calm"][data-theme="dark"] .row-icon.warn { background: var(--warn-soft); color: var(--warn); }
html[data-skin="calm"][data-theme="dark"] .row-icon.primary { background: var(--primary-soft); color: var(--primary); }
html[data-skin="calm"][data-theme="dark"] .note { background: var(--surface); border-inline-start: 3px solid var(--primary); color: var(--text-2); }
html[data-skin="calm"][data-theme="dark"] .empty { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); }
html[data-skin="calm"][data-theme="dark"] .skeleton { background: linear-gradient(90deg, #0a0a0b 25%, #15161a 50%, #0a0a0b 75%); background-size: 200% 100%; }

/* شارات */
html[data-skin="calm"][data-theme="dark"] .badge { border: 1px solid transparent; }
html[data-skin="calm"][data-theme="dark"] .badge.success { background: var(--success-soft); color: var(--success); border-color: rgba(63,211,154,.22); }
html[data-skin="calm"][data-theme="dark"] .badge.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(255,122,128,.22); }
html[data-skin="calm"][data-theme="dark"] .badge.warn, html[data-skin="calm"][data-theme="dark"] .badge.weekend { background: var(--warn-soft); color: var(--warn); border-color: rgba(242,198,109,.22); }
html[data-skin="calm"][data-theme="dark"] .badge.primary, html[data-skin="calm"][data-theme="dark"] .badge.info { background: var(--primary-soft); color: var(--primary-strong); border-color: rgba(44,196,179,.25); }
html[data-skin="calm"][data-theme="dark"] .badge.neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }

/* أزرار وحقول */
html[data-skin="calm"][data-theme="dark"] .btn-primary { background: var(--primary); color: var(--on-primary); border-color: transparent; box-shadow: 0 8px 24px -12px rgba(44,196,179,.8); }
html[data-skin="calm"][data-theme="dark"] .btn-primary:hover:not(:disabled) { background: var(--primary-strong); }
html[data-skin="calm"][data-theme="dark"] .btn-ghost { background: var(--surface-2); border: var(--hairline); color: var(--text); }
html[data-skin="calm"][data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); }
html[data-skin="calm"][data-theme="dark"] .field-input input, html[data-skin="calm"][data-theme="dark"] .field-input select,
html[data-skin="calm"][data-theme="dark"] .field-input textarea, html[data-skin="calm"][data-theme="dark"] .input { background: #050506; border: 1px solid var(--border-strong); color: var(--text); }
html[data-skin="calm"][data-theme="dark"] .panel, html[data-skin="calm"][data-theme="dark"] .menu, html[data-skin="calm"][data-theme="dark"] .modal, html[data-skin="calm"][data-theme="dark"] .dialog { background: #08080a; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
html[data-skin="calm"][data-theme="dark"] .scrim, html[data-skin="calm"][data-theme="dark"] .nav-scrim { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
html[data-skin="calm"][data-theme="dark"] .menu-item:hover { background: var(--surface-2); }
html[data-skin="calm"][data-theme="dark"] .toast { background: #0d0e10; border: 1px solid var(--border-strong); color: var(--text); }

/* التقويم */
html[data-skin="calm"][data-theme="dark"] .cell { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
html[data-skin="calm"][data-theme="dark"] .cell:hover { border-color: var(--border-strong); background: var(--surface-3); box-shadow: none; }
html[data-skin="calm"][data-theme="dark"] .cell.booked { background: linear-gradient(160deg, #2cc4b3, #159c8e); color: #03120f; border-color: transparent; }
html[data-skin="calm"][data-theme="dark"] .cell.weekend:not(.booked) { background: var(--weekend-bg); color: var(--weekend-text); border-color: rgba(242,198,109,.18); }
html[data-skin="calm"][data-theme="dark"] .cell.today { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--primary); }

/* ═══════════════ الرئيسية: شبكة بنتو ═══════════════ */
html[data-skin="calm"] .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
html[data-skin="calm"] .b-3 { grid-column: span 3; } html[data-skin="calm"] .b-4 { grid-column: span 4; }
html[data-skin="calm"] .b-5 { grid-column: span 5; } html[data-skin="calm"] .b-7 { grid-column: span 7; }
html[data-skin="calm"] .b-8 { grid-column: span 8; } html[data-skin="calm"] .b-12 { grid-column: span 12; }
html[data-skin="calm"] .b-r2 { grid-row: span 2; }

html[data-skin="calm"] .tile {
  position: relative; overflow: hidden; background: var(--surface); border: var(--hairline); box-shadow: var(--sheen);
  border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  transition: border-color .18s ease, transform .18s ease;
}
html[data-skin="calm"] .tile[role="button"] { cursor: pointer; }
html[data-skin="calm"] .tile[role="button"]:hover { border-color: var(--border-strong); transform: translateY(-1px); }
html[data-skin="calm"] .tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html[data-skin="calm"] .tile-label { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13px; font-weight: 500; }
html[data-skin="calm"] .tile-ico { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--surface-3); border: var(--hairline); color: var(--primary); flex: none; }
html[data-skin="calm"] .tile-value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums lining-nums; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
html[data-skin="calm"] .tile-value small { font-size: 13px; font-weight: 500; color: var(--text-3); }
html[data-skin="calm"] .tile-sub { color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
html[data-skin="calm"] .tile-sub b { color: var(--text-2); font-weight: 600; }
html[data-skin="calm"] .tile-title { font-size: 15.5px; font-weight: 700; color: var(--text); }
html[data-skin="calm"] .tile .spark { position: relative; height: 46px; margin: 2px -6px -6px; }
html[data-skin="calm"] .tile .ring-wrap { position: relative; width: 92px; height: 92px; flex: none; }
html[data-skin="calm"] .tile .ring-wrap .ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-skin="calm"] .trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
html[data-skin="calm"] .trend { white-space: nowrap; }
html[data-skin="calm"] .trend.up { color: var(--success); background: var(--success-soft); }
html[data-skin="calm"] .trend.down { color: var(--danger); background: var(--danger-soft); }
html[data-skin="calm"] .trend.flat { color: var(--text-2); background: var(--surface-2); }

/* بطاقة البطل — حالة الليلة */
html[data-skin="calm"] .hero {
  padding: 24px; gap: 16px; justify-content: space-between; min-height: 250px;
  background: radial-gradient(120% 130% at 100% 0%, rgba(44,196,179,.30), transparent 56%), radial-gradient(90% 90% at 0% 100%, rgba(44,196,179,.10), transparent 60%), var(--surface);
  border-color: rgba(44,196,179,.36); box-shadow: var(--sheen), 0 30px 80px -40px rgba(44,196,179,.6);
}
html[data-skin="calm"] .hero.free {
  background: radial-gradient(120% 130% at 100% 0%, rgba(242,198,109,.20), transparent 56%), var(--surface); border-color: rgba(242,198,109,.30);
  box-shadow: var(--sheen), 0 30px 80px -44px rgba(242,198,109,.45);
}
html[data-skin="calm"] .hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #bfeee8; }
html[data-skin="calm"] .hero.free .hero-kicker { color: var(--warn); }
html[data-skin="calm"] .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: noir-pulse 2.2s infinite; }
@keyframes noir-pulse { 0% { box-shadow: 0 0 0 0 rgba(44,196,179,.55); } 70% { box-shadow: 0 0 0 10px rgba(44,196,179,0); } 100% { box-shadow: 0 0 0 0 rgba(44,196,179,0); } }
html[data-skin="calm"] .hero-state { font-size: 40px; font-weight: 700; line-height: 1.1; color: #fff; }
html[data-skin="calm"] .hero-guest { display: flex; align-items: center; gap: 12px; }
html[data-skin="calm"] .hero-avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 17px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; flex: none; }
html[data-skin="calm"] .hero-guest strong { display: block; font-size: 15.5px; color: #fff; }
html[data-skin="calm"] .hero-guest span { font-size: 12.5px; color: #bfeee8; }
html[data-skin="calm"] .hero.free .hero-guest span { color: var(--text-2); }
html[data-skin="calm"] .hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-skin="calm"] .hero-actions .btn { min-height: 36px; font-size: 13px; }
html[data-skin="calm"] .hero-actions .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
html[data-skin="calm"] .hero-actions .btn-ghost:hover { background: rgba(255,255,255,.12) !important; }

/* قوائم داخل البلاطات */
html[data-skin="calm"] .tile .list { gap: 8px; }
html[data-skin="calm"] .tile .row { padding: 10px 12px; }
html[data-skin="calm"] .seg { display: inline-flex; background: var(--surface-2); border: var(--hairline); border-radius: 10px; padding: 3px; gap: 2px; }
html[data-skin="calm"] .seg button { border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
html[data-skin="calm"] .seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: var(--sheen); }

/* شريط الأسبوع */
html[data-skin="calm"] .weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
html[data-skin="calm"] .wk { border: var(--hairline); background: var(--surface-2); border-radius: 12px; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: start; color: var(--text); font: inherit; min-width: 0; transition: border-color .15s ease, background .15s ease; }
html[data-skin="calm"] .wk:hover { border-color: var(--border-strong); background: var(--surface-3); }
html[data-skin="calm"] .wk .d { font-size: 12px; color: var(--text-3); font-weight: 600; }
html[data-skin="calm"] .wk .p { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-skin="calm"] .wk .g { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] .wk.booked { background: linear-gradient(165deg, rgba(44,196,179,.22), rgba(44,196,179,.06)); border-color: rgba(44,196,179,.35); }
html[data-skin="calm"] .wk.booked .d { color: var(--primary-strong); }
html[data-skin="calm"] .wk.weekend:not(.booked) .d { color: var(--warn); }
html[data-skin="calm"] .wk.today { box-shadow: 0 0 0 1px var(--primary); }

/* حالة النظام */
html[data-skin="calm"] .sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
html[data-skin="calm"] .sys-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: var(--hairline); cursor: pointer; color: var(--text); font: inherit; text-align: start; min-width: 0; }
html[data-skin="calm"] .sys-item:hover { border-color: var(--border-strong); background: var(--surface-3); }
html[data-skin="calm"] .sys-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); flex: none; }
html[data-skin="calm"] .sys-dot.bad { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
html[data-skin="calm"] .sys-dot.idle { background: var(--text-3); box-shadow: none; }
html[data-skin="calm"] .sys-item strong { font-size: 13.5px; display: block; }
html[data-skin="calm"] .sys-item span { font-size: 12px; color: var(--text-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── استجابة ─── */
@media (max-width: 1180px) {
  html[data-skin="calm"] .b-3, html[data-skin="calm"] .b-4 { grid-column: span 6; }
  html[data-skin="calm"] .b-5, html[data-skin="calm"] .b-7, html[data-skin="calm"] .b-8 { grid-column: span 12; }
  html[data-skin="calm"] .b-r2 { grid-row: auto; }
}
@media (max-width: 720px) {
  html[data-skin="calm"] .bento { gap: 10px; }
  html[data-skin="calm"] .b-3, html[data-skin="calm"] .b-4 { grid-column: span 6; }
  html[data-skin="calm"] .tile { padding: 14px 15px; border-radius: 16px; }
  html[data-skin="calm"] .tile-value { font-size: 23px; }
  html[data-skin="calm"] .hero { min-height: 0; padding: 18px; }
  html[data-skin="calm"] .trend .long { display: none; }
  html[data-skin="calm"] .tile-label { font-size: 12.5px; gap: 7px; }
  html[data-skin="calm"] .tile-ico { width: 26px; height: 26px; padding: 6px; }
  html[data-skin="calm"] .hero-state { font-size: 32px; }
  html[data-skin="calm"] .weekstrip { grid-template-columns: repeat(7, 86px); overflow-x: auto; padding-bottom: 4px; }
  html[data-skin="calm"] .tile .ring-wrap { width: 72px; height: 72px; }
  html[data-skin="calm"] .view-head h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { html[data-skin="calm"] .pulse { animation: none; } html[data-skin="calm"] .tile { transition: none; } }