.relay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.relay-channel{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:100px;border:1px solid var(--line,#cdd5e2);border-radius:18px;background:var(--raised,var(--paper,#fff));color:var(--ink,#172b3a);font:inherit;overflow-wrap:anywhere}.relay-channel.is-on{border-color:var(--teal,var(--brand,#126b66));background:var(--teal-soft,var(--soft,#e2f4ef))}.relay-channel.is-on strong{color:var(--teal,var(--brand,#126b66))}.relay-channel:disabled,.legacy-live .relay-channel:disabled{opacity:1;cursor:not-allowed;border-style:dashed}.relay-sensors{display:flex;gap:10px;flex-wrap:wrap}.relay-sensors span{border:1px solid var(--line,#cdd5e2);padding:10px;border-radius:12px}.relay-settings input:not([type=checkbox]),.relay-settings select,[data-relay-program-form] input:not([type=checkbox]),[data-relay-program-form] select{width:100%;padding:10px;font:inherit;border:1px solid var(--line,#cdd5e2);border-radius:9px;background:var(--raised,var(--paper,#fff));color:var(--ink,#172b3a)}.relay-settings fieldset,[data-relay-program-form] fieldset{min-width:0;border:1px solid var(--line,#cdd5e2);border-radius:12px;padding:12px;margin:12px 0}.relay-settings label,[data-relay-program-form] label{display:block;margin:10px 0}.relay-program-list{display:grid;gap:12px;margin:16px 0}.relay-settings details{margin:12px 0;padding:12px;border:1px solid var(--line,#cdd5e2);border-radius:12px}@media(min-width:800px){.relay-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

[data-relay-automatic-form] fieldset{min-width:0;border:1px solid var(--line,#cdd5e2);border-radius:12px;margin:12px 0;padding:12px}[data-relay-automatic-form] label{display:block;margin:10px 0}[data-relay-automatic-form] input:not([type=checkbox]),[data-relay-automatic-form] select{box-sizing:border-box;width:100%;min-width:0;padding:10px;border:1px solid var(--line,#cdd5e2);border-radius:9px;background:var(--raised,#fff);color:var(--ink,#172b3a)}.relay-automatic-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* Physical channel order: top-left first; Persian labels keep their own direction. */
.relay-grid{direction:ltr}.relay-grid>.relay-channel{direction:rtl}.relay-grid[data-channel-count="1"]{grid-template-columns:minmax(0,1fr)}.relay-grid[data-channel-count="2"],.relay-grid[data-channel-count="3"],.relay-grid[data-channel-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Approved power design (10% smaller than 96px): touch switches only; relay/alarm tiles stay unchanged. */
.relay-grid>.relay-channel.touch-power{align-items:center;gap:16px;min-height:168px;padding:16px 8px;border:0;border-radius:0;background:transparent;color:var(--ink,#172b3a);text-align:center;box-shadow:none}
.relay-grid>.touch-power .touch-power-icon{display:block;width:86.4px;height:86.4px;max-width:100%;fill:none;stroke:var(--touch-power-off,#8190a5);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:stroke .18s ease}
.relay-grid>.touch-power.is-on .touch-power-icon{stroke:var(--touch-power-on,#07853f)}
.relay-grid>.touch-power small{color:var(--muted,#647783)}
.relay-grid>.touch-power[data-state=unknown] .touch-power-icon{stroke-dasharray:3 3}
@media(prefers-reduced-motion:reduce){.relay-grid>.touch-power .touch-power-icon{transition:none}}

/* Saturated green ON and quieter gray OFF, scoped to touch switches. */
.touch-switch-grid{--touch-power-on:#07853f;--touch-power-off:#8190a5}
.legacy-live .touch-switch-grid{--touch-power-on:#22df70;--touch-power-off:#667187}
[data-theme=light] .legacy-live .touch-switch-grid{--touch-power-on:#07853f;--touch-power-off:#8190a5}

/* Shared tactile actuator language. Geometry never changes with reported state. */
.relay-grid{--actuator-on:#07853f;--actuator-off:#8190a5}
.legacy-live .relay-grid{--actuator-on:#22df70;--actuator-off:#667187}
[data-theme=light] .legacy-live .relay-grid{--actuator-on:#07853f;--actuator-off:#8190a5}
.relay-grid>.relay-channel.touch-power,.relay-grid>.relay-channel.slide-control{align-items:center;justify-content:center;min-height:132px;padding:12px 6px;gap:12px;border:0;background:transparent;box-shadow:none;text-align:center}
.relay-grid>.touch-power .touch-power-icon{width:86.4px;height:86.4px;stroke:var(--actuator-off);stroke-width:2.2;filter:drop-shadow(0 2px 1px #0003) drop-shadow(0 -1px 0 #ffffff70)}
.relay-grid>.touch-power.is-on .touch-power-icon{stroke:var(--actuator-on)}
.touch-power .power-center{stroke-width:1.8}
.relay-grid>.relay-channel>span:last-of-type{font-weight:700;line-height:1.65;max-width:100%;overflow-wrap:anywhere}
.relay-slider{display:block;position:relative;direction:ltr;width:108px;height:54px;flex:none;border:3px solid var(--actuator-off);border-radius:32px;color:var(--actuator-off);background:linear-gradient(145deg,var(--paper,#fff),var(--raised,#eef1f7));box-shadow:inset 0 2px 4px #0002,0 2px 3px #0002}
.relay-thumb{position:absolute;top:4px;left:4px;width:40px;height:40px;border:3px solid currentColor;border-radius:50%;background:linear-gradient(145deg,var(--paper,#fff),var(--raised,#eef1f7));box-shadow:0 2px 3px #0003,inset 0 1px 1px #fff8;transition:transform .18s ease}
.relay-contact{position:absolute;right:10px;top:0;display:grid;place-items:center;width:38px;height:48px;font:800 16px/1 Arial,sans-serif}
.is-on>.relay-slider{border-color:var(--actuator-on);color:var(--actuator-on)}
.is-on>.relay-slider>.relay-thumb{transform:translateX(54px)}
.is-on>.relay-slider>.relay-contact{right:auto;left:10px}
[data-state=unknown]>.relay-slider{border-style:dashed}
.relay-channel:focus-visible .relay-slider,.touch-power:focus-visible .touch-power-icon{outline:3px solid var(--focus,#355bd0);outline-offset:5px;border-radius:32px}
.relay-sensors:empty{display:none}
.relay-sensors{justify-content:center;margin:12px 0;font-weight:700;color:var(--teal,#096b61)}
.relay-sensors strong{font-size:1.08em;font-weight:800}
.relay-program-list .smart-card{display:grid;gap:12px;align-content:start;line-height:1.9}
.relay-program-list .smart-card>p,.relay-program-list .location-tag{margin:0}
.relay-program-list .smart-card>button{justify-self:start;min-width:100px}
.relay-settings form label,[data-relay-program-form] label{display:grid;gap:8px;line-height:1.8}
.relay-settings label.check{display:flex;align-items:center;gap:10px}
.relay-settings form button,[data-relay-program-form] button{margin-top:8px;min-height:44px}
@media(prefers-reduced-motion:reduce){.relay-thumb{transition:none}}