/* المخطط التنظيمي — مكونات إضافية مبنية على متغيرات manbij-ds.css فقط. للموبايل أولاً. */

[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
.t-h1, .t-h2, .t-h3, .t-h4 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
main section[id] { scroll-margin-top: var(--header-h); }

/* ═════════ أرقام الترويسة ═════════ */
.plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--space-8); text-align: start; }
@media (min-width: 640px) { .plan-stats { grid-template-columns: repeat(4, 1fr); } }
.plan-stats .stat-card { background: var(--bg-surface); }

/* ═════════ عارض المخطط ═════════ */
.card.plan-card { padding: 0; overflow: hidden; }
.plan-toolbar { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
@media (min-width: 992px) { .plan-toolbar { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); } }
.plan-toolbar__title { display: flex; align-items: center; gap: var(--space-3); }
.plan-toolbar__title .card__title { margin: 0; }
.chip-row { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); padding-block: 2px; }
.chip-row::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .chip-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; justify-content: flex-end; } }
.chip-row .btn { flex: none; }

.plan-viewer { position: relative; height: 62vh; min-height: 360px; max-height: 760px; overflow: hidden; background: var(--white); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
@media (min-width: 992px) { .plan-viewer { height: 72vh; } }
.plan-viewer.is-dragging { cursor: grabbing; }
.plan-viewer:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.plan-layer { position: absolute; inset: 0; }
.plan-layer img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.plan-tile { opacity: 0; transition: opacity .2s; }
.plan-tile.is-loaded { opacity: 1; }

.plan-ctrls { position: absolute; inset-inline-end: var(--space-3); bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); z-index: 3; }
.plan-ctrls .btn { background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.plan-zoom { position: absolute; inset-inline-end: var(--space-3); top: var(--space-3); z-index: 3; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 13px; font-weight: 700; }

.plan-minimap { position: absolute; inset-inline-start: var(--space-3); bottom: var(--space-3); z-index: 3; display: none; width: 180px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-surface); box-shadow: var(--shadow-xs); overflow: hidden; cursor: pointer; }
@media (min-width: 640px) { .plan-minimap { display: block; } }
.plan-minimap img { display: block; width: 100%; height: auto; }
.plan-minimap__view { position: absolute; left: 0; top: 0; border: 2px solid var(--forest-500); background: rgba(35, 132, 119, .1); border-radius: 2px; pointer-events: none; }

.plan-hint { position: absolute; left: 50%; top: var(--space-3); z-index: 4; transform: translateX(-50%); max-width: calc(100% - 120px); padding: 6px 14px; border-radius: var(--radius-pill); background: var(--forest-900); color: var(--white); font-size: 13px; line-height: 1.6; text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.plan-hint.is-visible { opacity: .94; }

/* العلامات */
.plan-marker { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 2px solid var(--gold-500); border-radius: 50%; background: var(--forest-900); color: var(--white); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); transition: background-color .2s; }
.plan-marker:hover, .plan-marker.is-active { background: var(--forest-500); }
.plan-marker:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.plan-pop { position: absolute; left: 0; top: 0; z-index: 4; width: max-content; max-width: min(280px, calc(100% - 32px)); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-lg); pointer-events: none; }
.plan-pop__title { display: block; color: var(--text-heading); font-size: 15px; font-weight: 700; line-height: 1.6; }
.plan-pop__text { display: block; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }

.plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 13px; }

/* ملء الشاشة */
.plan-card.is-expanded { position: fixed; inset: 0; z-index: calc(var(--z-drawer) + 10); display: flex; flex-direction: column; border: 0; border-radius: 0; }
.plan-card.is-expanded .plan-viewer { flex: 1; height: auto; max-height: none; }
body.plan-locked { overflow: hidden; }

/* ═════════ نظام ضابطة البناء ═════════ */
.reg-tools { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
@media (min-width: 992px) { .reg-tools { flex-direction: row; align-items: center; justify-content: space-between; } }
.reg-tools .input-icon { width: 100%; }
@media (min-width: 992px) { .reg-tools .input-icon { max-width: 320px; } }
.reg-tools__end { display: flex; gap: var(--space-2); align-items: center; }
.filter-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips .btn { flex: none; }
@media (min-width: 992px) { .filter-chips { flex-wrap: wrap; overflow: visible; } .reg-tools__end { flex: none; } }
.filter-chips .btn[aria-pressed="true"] { background: var(--forest-50); border-color: var(--forest-500); color: var(--forest-700); }
.filter-chips__count { margin-inline-start: 4px; color: var(--text-muted); font-weight: 400; }

.zone-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .zone-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 992px) { .zone-grid { grid-template-columns: repeat(3, 1fr); } }
.card.zone-card { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4); text-align: start; font: inherit; color: inherit; cursor: pointer; }
.zone-card__sym { flex: none; width: 88px; height: 34px; border: 1px solid var(--border-color); border-radius: var(--radius-xs); background: var(--white); object-fit: cover; }
.zone-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zone-card__name { margin: 0; color: var(--text-heading); font-size: 16px; font-weight: 700; line-height: 1.6; }
.zone-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zone-card__arrow { flex: none; color: var(--text-muted); }
.zone-empty { grid-column: 1 / -1; padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); font-size: 14.5px; border: 1.5px dashed var(--border-color); border-radius: var(--radius-lg); }

/* الجدول */
.reg-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); }
.reg-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.reg-table th, .reg-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); text-align: center; vertical-align: middle; }
.reg-table th { position: sticky; top: 0; background: var(--bg-subtle); color: var(--text-heading); font-weight: 700; font-size: 13px; }
.reg-table thead tr:first-child th { border-bottom-color: var(--border-color); }
.reg-table td:first-child, .reg-table th:first-child { text-align: start; }
.reg-table td.reg-table__note { min-width: 260px; text-align: start; color: var(--text-secondary); font-size: 13px; }
.reg-table tbody tr { cursor: pointer; transition: background-color .15s; }
.reg-table tbody tr:hover { background: var(--forest-50); }
.reg-table__zone { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; font-weight: 700; color: var(--text-heading); }
.reg-table__zone img { width: 64px; height: 24px; border: 1px solid var(--border-color); border-radius: 4px; object-fit: cover; }
.reg-table .is-dash { color: var(--text-muted); }

/* نافذة التفاصيل */
.zone-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-drawer); color: var(--text-primary); }
.zone-dialog::backdrop { background: rgba(4, 38, 35, .45); }
.zone-dialog[open] { animation: zone-in .22s ease-out; }
@keyframes zone-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.zone-dialog__head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.zone-dialog__head .zone-card__sym { width: 104px; height: 40px; }
.zone-dialog__head .card__title-group { flex: 1; min-width: 0; }
.zone-dialog__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.zone-dialog__body .data-list { margin-bottom: var(--space-4); }
.zone-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ═════════ حاسبة البناء ═════════ */
.calc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 992px) { .calc-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--space-4); }
.calc-figures .stat-card { background: var(--bg-surface); }
.calc-figures .stat-card__value { font-size: 26px; }
.calc-result .alert + .alert { margin-top: var(--space-3); }
.calc-result .alert { margin-bottom: var(--space-4); }

/* ═════════ عن المخطط ═════════ */
.notes-list { margin: 0; padding: 0; list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: var(--space-4); }
.notes-list li { position: relative; padding-inline-start: 44px; color: var(--text-primary); font-size: 15.5px; line-height: 1.9; counter-increment: n; }
.notes-list li::before { content: counter(n); position: absolute; inset-inline-start: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--forest-100); color: var(--forest-700); font-weight: 700; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .plan-tile, .plan-hint, .zone-dialog[open] { transition: none; animation: none; }
}

/* ═════════ تبويبا العرض ═════════ */
.plan-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--bg-subtle); align-self: flex-start; }
@media (min-width: 992px) { .plan-tabs { align-self: center; } }
.plan-tabs__btn { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.plan-tabs__btn[aria-selected="true"] { background: var(--bg-surface); color: var(--forest-700); box-shadow: var(--shadow-xs); }
.plan-tabs__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.plan-pane__bar { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.plan-pane__bar .chip-row { justify-content: flex-start; }

/* ═════════ المخطط المُعاد رسمه ═════════
   ألوان الصفات: لوحة خاصة بالمخطط، مأخوذة من ألوان رموز المخطط الأصلي بدرجات أهدأ. */
.zmap-layout {
  --z0: #E7E2D6; --z1: #A8764F; --z2: #86C9D3; --z3: #F2BB73; --z4: #B84A30; --z5: #EE9CAA; --z6: #DE8A63; --z7: #CD86C6; --z8: #A893D6;
  --z9: #E56F72; --z10: #B5302F; --z11: #861C2A; --z12: #F2A3A0;
  --z13: #2F5F9E; --z14: #4C8DCB; --z15: #3A78B8; --z16: #5E9BD3; --z17: #6FA8DA; --z18: #7FB6E2; --z19: #24527F; --z20: #2C8C99; --z21: #1D6B78;
  --z22: #5878A6; --z23: #5878A6; --z24: #6B7C8F; --z25: #7A3443; --z26: #8A6CC4; --z27: #6556A6;
  --z28: #84BD6F; --z29: #5E9E4F; --z30: #4F8A45; --z31: #3C82C4; --z32: #B6D99A;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 992px) { .zmap-layout { grid-template-columns: 1fr 300px; } }
.zmap { position: relative; height: 64vh; min-height: 380px; max-height: 780px; overflow: hidden; background: var(--bg-page); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
@media (min-width: 992px) { .zmap { height: 74vh; } }
.zmap.is-dragging { cursor: grabbing; }
.zmap:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.zmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.zb { stroke: var(--white); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: opacity .2s; }
.zb:hover, .zb.is-hover { stroke: var(--forest-900); stroke-width: 1.6; }
.zb.is-selected { stroke: var(--forest-900); stroke-width: 2.6; }
.zmap.has-focus .zb:not(.is-focus) { opacity: .14; }
.zmap.has-focus .zfac:not(.is-focus) { opacity: .14; }
.zbound { fill: none; stroke: var(--red-700); stroke-width: 1.4; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.zfac { pointer-events: none; }
.zfac circle { fill: var(--white); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.zwidth { display: none; direction: ltr; fill: var(--text-secondary); font-family: var(--font-sans); font-weight: 700; pointer-events: none; paint-order: stroke; stroke: var(--bg-page); stroke-width: .6px; }
.zmap.show-widths .zwidth { display: inline; }
.zroad { fill: var(--forest-900); font-family: var(--font-sans); font-weight: 700; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--bg-page); stroke-linejoin: round; }

.zmap-tip { position: absolute; left: 0; top: 0; z-index: 4; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--forest-900); color: var(--white); font-size: 13.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); }
.zmap-info { position: absolute; inset-inline: var(--space-3); bottom: var(--space-3); z-index: 5; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-lg); }
@media (min-width: 640px) { .zmap-info { inset-inline: auto var(--space-3); inset-inline-start: var(--space-3); max-width: 460px; } }
.zmap-info__sw { flex: none; width: 28px; height: 28px; border-radius: var(--radius-xs); border: 1px solid rgba(0, 0, 0, .08); }
.zmap-info__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zmap-info__name { color: var(--text-heading); font-size: 16px; font-weight: 700; line-height: 1.5; }
.zmap-info__group { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.zmap .plan-ctrls { bottom: var(--space-3); }
.zmap.has-info .plan-ctrls { bottom: 92px; }
@media (min-width: 640px) { .zmap.has-info .plan-ctrls { bottom: var(--space-3); } }

.zmap-legend { border-top: 1px solid var(--border-subtle); padding: var(--space-4); background: var(--bg-surface); }
@media (min-width: 992px) { .zmap-legend { border-top: 0; border-inline-start: 1px solid var(--border-subtle); max-height: 74vh; overflow-y: auto; } }
.zmap-legend__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.zmap-legend__head .card__title { margin: 0; }
.zmap-legend .card__subtitle { margin: 2px 0 var(--space-3); }
.zleg-group + .zleg-group { margin-top: var(--space-4); }
.zleg-group__title { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: 13px; font-weight: 700; }
.zleg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
@media (min-width: 640px) { .zleg-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .zleg-list { grid-template-columns: 1fr; } }
.zleg { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 4px var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font: inherit; font-size: 14px; line-height: 1.5; text-align: start; cursor: pointer; transition: background-color .15s, border-color .15s; }
.zleg:hover { background: var(--bg-subtle); }
.zleg[aria-pressed="true"] { background: var(--forest-50); border-color: var(--forest-500); }
.zleg__sw { flex: none; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .08); }
.zleg__name { flex: 1; min-width: 0; }
.zleg__n { color: var(--text-muted); font-size: 12.5px; }
.zleg-note { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 13px; line-height: 1.8; }
.plan-card.is-expanded .plan-pane:not([hidden]) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.plan-card.is-expanded .zmap-layout { flex: 1; min-height: 0; }
.plan-card.is-expanded .zmap { height: auto; max-height: none; }
@media (min-width: 992px) { .plan-card.is-expanded .zmap-legend { max-height: none; } }
.plan-card.is-expanded .plan-pane .plan-viewer { flex: 1; height: auto; max-height: none; }
@media (max-width: 991.98px) { .plan-card.is-expanded .zmap-legend { display: none; } }

/* ═════════ أين أسكن؟ ═════════ */
.zfind { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--forest-50); }
.zfind__intro .card__title { margin: 0; }
.zfind__intro .card__subtitle { margin: 0; }
.zfind > .btn { width: 100%; }
.zfind__or { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: 13px; }
.zfind__or::before, .zfind__or::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.zfind__field { margin: 0; }
.zfind__field .input { background: var(--bg-surface); }
.zfind__msg { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--warning-border); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--text-primary); font-size: 14px; line-height: 1.7; }
.zfind__privacy { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }
@media (min-width: 992px) {
  .zfind { grid-template-columns: minmax(200px, 1fr) auto auto minmax(300px, 1.3fr); align-items: center; column-gap: var(--space-5); padding: var(--space-4) var(--space-5); }
  .zfind > .btn { width: auto; }
  .zfind__or { flex-direction: column; height: 100%; }
  .zfind__or::before, .zfind__or::after { width: 1px; height: auto; min-height: 10px; }
  .zfind__field .field__label { margin-bottom: 4px; }
  .zfind__msg, .zfind__privacy { grid-column: 1 / -1; }
}
.plan-card.is-expanded .zfind { display: none; }
.zloc__acc { fill: rgba(35, 132, 119, .16); stroke: var(--forest-500); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.zloc__dot { fill: var(--forest-500); stroke: var(--white); stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.zloc__halo { fill: none; stroke: var(--forest-500); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; animation: zloc-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes zloc-pulse { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .zloc__halo { animation: none; opacity: 0; } }

/* ═════════ الهاتف (أقل من 640px): المخطط بعرض الشاشة، وبطاقات الصفات مضغوطة ═════════
   أُضيف عند دمج الصفحة في البوابة: البطاقة الكبيرة كانت تحيط المخطط بهامش 20px فيضيق،
   وبطاقة كل صفة كانت تلتف عموديًا (نحو 180px لكل منها، 35 بطاقة). */
@media (max-width: 639.98px) {
  .card.plan-card { padding: 0; overflow: hidden; }
  .plan-toolbar, .zfind, .zmap-legend, .plan-foot { border-radius: 0; }
  .zmap { height: 62vh; min-height: 360px; }
  .plan-viewer { height: 62vh; min-height: 360px; }
  .zmap-legend { padding: var(--space-4) var(--space-3); max-height: 55vh; overflow-y: auto; }
  .zleg { min-height: 36px; padding: 2px 6px; font-size: 13px; line-height: 1.4; }
  .zone-grid { gap: var(--space-2); }
  .zone-grid .card.zone-card { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3); }
  .zone-grid .zone-card__sym { width: 64px; height: 26px; }
  .zone-grid .zone-card__name { font-size: 15px; line-height: 1.5; }
  .plan-stats { gap: var(--space-2); }
}

/* لون كل صفة في دليل الألوان، بأصناف لا بـ style داخل الصفحة: سياسة أمان البوابة (CSP) تمنع الثاني. */
.zsw-0 { background: var(--z0); }
.zsw-1 { background: var(--z1); }
.zsw-2 { background: var(--z2); }
.zsw-3 { background: var(--z3); }
.zsw-4 { background: var(--z4); }
.zsw-5 { background: var(--z5); }
.zsw-6 { background: var(--z6); }
.zsw-7 { background: var(--z7); }
.zsw-8 { background: var(--z8); }
.zsw-9 { background: var(--z9); }
.zsw-10 { background: var(--z10); }
.zsw-11 { background: var(--z11); }
.zsw-12 { background: var(--z12); }
.zsw-13 { background: var(--z13); }
.zsw-14 { background: var(--z14); }
.zsw-15 { background: var(--z15); }
.zsw-16 { background: var(--z16); }
.zsw-17 { background: var(--z17); }
.zsw-18 { background: var(--z18); }
.zsw-19 { background: var(--z19); }
.zsw-20 { background: var(--z20); }
.zsw-21 { background: var(--z21); }
.zsw-22 { background: var(--z22); }
.zsw-23 { background: var(--z23); }
.zsw-24 { background: var(--z24); }
.zsw-25 { background: var(--z25); }
.zsw-26 { background: var(--z26); }
.zsw-27 { background: var(--z27); }
.zsw-28 { background: var(--z28); }
.zsw-29 { background: var(--z29); }
.zsw-30 { background: var(--z30); }
.zsw-31 { background: var(--z31); }
.zsw-32 { background: var(--z32); }