/* HomeHub Liquid Glass design system.
 * Functional glass floats above the weather canvas; content uses a thicker,
 * quieter material so text stays readable on every sky state.
 */

/* Önhosztolt megjelenítő- és adatbetűk: a szerver szigorú
 * Content-Security-Policy-je (style-src 'self') blokkolja a Google Fonts
 * CDN-t, ezért a fájlok data: URI-ként, a CSS-be ágyazva élnek — külön
 * hálózati kérés és CSP-kivétel nélkül, offline is működnek.
 * Csak a ténylegesen használt vágat (700/500 súly, latin + latin-ext). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAACmIABAAAAAAX5gAACkoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoIiG69YHIF+BmA/U1RBVFYAhTYRCArjHNFPC4MiAAE2AiQDhkAEIAWHAAeNEgwHGw1UFezYI7BxAAL8f+iiqB2MVH4U5YNTy/7/mqDGkD1oB4CulXDBi6xUo8hODaoiNK1DZdTM1HRPkLh1y0Fsg+WHwT529LXXf3BhFxvS5T2GNuEXi+MjdHFz+Ro46l/+z5vUJ5dOrgUL+ZrKDeMeobFPcgmkuKhKeuDdE4iXzBfRRzRnsxchQBIgTgQiRhzzGBEIHiyYFgmqVVqHb2q0DpXve0WM/n/bN/H+1X7sGSJVtBKiRyKUJJYSJAjNp4t/M3mmZ7pE1GDbu2eG0gBKtjTHEIkarM3YrZbsEUlrUJXO7OwBk7BspIN/e5lcK5Op28gHYIe66KoAaDwJWf8IC3yAC3RI2TwKU1vXQ116Z2qisx6KwKMgBOSWrTX4IS5NOCzlvV1mpGBzjzhts4hIQ1Bn5JzFTzdWKlySbHxGkNxlrN0eG7uDfRg3xCqMBKQSaECFL4EUbO4PFaWihmlsQc/3nlAR6UDoP9ZKO387tLehlzmUARy1FW8yO3s074gnYXUQBSjMWRWQqCIRjEhF+DgZbwFdpmya7a1WZ+B7OQSXGRlC0NsfLC0HsEvR8d3uHuyt1iQp79M96Fkywb/8DtgaR880fQDI7wBzB9wRlJ8vA9wR1G3KlJm0KarmizLwDF/XPejSneKOCxPa/1vw5P79lTPotk6I4ZErIsudHVlEttS/1o8xNd1t/7fdjgRZoQTJBS+A4+d/CAFDBRAJGCWECCEhQ4LQIAxsSCgBREgIEZNBFFQQDR3EIAoSIwGSJBmSygLJ4IBkyoXkK4QUKYV4VECqVENqNUCadEK6dUN6DUCGjELGTUKWWg5ZaTVkrXWQDTZDttgOmbMHss8ByGFPQY45CTnjLOScc3AuuAjnuptw7rgDZ9EiHAQDJgUGEIJzLrruhpsQ5A4E9CjlwZZf0eUG6u7b9HmBCg+oAAcEDG63HXq8IL7sTwP/q607DBhAtotG/isANLpHzPEKQBQMCYAgLi5IHDICqTAcNGRIXz+GPNkByLXshdR2BnIjhxBAd0XQXRp0FwXd+UF3Tv0P6AeIjx+shyF4SMs2QqDz1ZCBf/RAgjq/ng/gOk8jW3u9dJ45j51POw6xjzkuZX3nRtA+mWN1eHtAe7dbs9u3q9ql7QJc2JqN7STQnv/UeeZ4t2lPPoD2hGfwGUAN39iP+bP55/0taH2zP9z4QbyqV/YdPbEvcI/u3ker6/ceg9WkvX0/Aeuzq/YUaB2q/Vte7dyqY/N0w1ZeZGr5VpoW3lGafcuzU2/uZmwq4qR12Gaa8C/8nv3R/Rog/ZT3eVOPCPe5lV4hnGvBCT+Lj5gVltPpAcnuImwlzBDWsoKJ7BChByBtp8k1zW2yHoKbkENwYCYlG0cwAKQqpAojcEQjkCEGpJD8rV+d7/Ul/mO9S7jW6xtfi3t6al3SfesYt+vGtU+XLl/2zLV6LVtjDCx2NVrx9mjLRqnWbbhYMV26kRQx6ZxLGeLs5Mf9xVrBBKzDb6b7MfyZ/bm/BeUbPuMDvdUvpc/1tVb0Q3CP7u6jXM+Vurif6Dy9V/VPdBnK0T2C9i9e7VzqtHkp1tolc+fyJe0wkVn8doZn4+7g8FM4trFtaR5Qj89XclxZciFQz/UuhEJPRaYqP6xHYlYCIFpmFJM+Redjaf59uxQVCvWZkyHfVcdCIYb8/EYngC82b4zzOomBUZIklHOpATF50Ov6/2/2eQi8qFdici4Ys9Zgio9ZBQ+UDO1py6V6NykSs5oF/sLYBrMaoTdFSI1IKA00IsUp0fE2NmGTgawAl84Cne0tj5p5tWgN2Ok7jqlQ5/qiMDt0dKvlRnfOuvZ6emoDAgqbUZcMd2DlAnYp8u30LG54YIpnIHrkG1vpATErc950RMERWIFjZ1CpQ/b05zqdHKm0gOGXUFj+UkSzZc1/ZClLlsx1wzfSV/u/DmQsvf4hxw/l964v+cD/aNCpjkJLO/K/gqJBh4dXHaAcxQ6en8MKCgMKa47agdudk52y67qc+YSchYVT7sKk0JZaW5qpcW5Hbu2ilt6bS5F6AX3ABB5sYyUrWclMWUKHDzr8N+0J54Ccd5dH7S8FLarN/dvjq/03DWL8VXt3JuYoNNy6AFc2j7RupoAvZuN4OSb8l4fOpg1IW4pO8XmNUyOwJ+cy1ZGyWIgbOnW1kqvF1QZlK7tzByAg1woj/YgOgEggQdDhEIoAEVIUaNARSyLpmLHhjKzlDrk6k0p0u/TjOsqopJYGmmmjgz6GGI+p9ISVr381P2BZYHFgQWBuYFaIFCYMchcILUDoKeXjqCD7infRhhvr/T5i+lh3LPJHgg2eFgDBgA6s2wUP+nv3bJTCAPNukq6IVBzEp8A9uzsHJOa1XPuPriJcpzsCsT99KOrBVodmfKpPb5hj/b3Lla1jHmEV1/A1G7UyJRammEY6UfyiFnSFwsM2b6LRXao7/ve4Cougu7eqjngH/+Wv3AaZLHZwhnmQgaiAEkd6UDM/y4YyE14GqzXFrQwM7jxB27AbnGX44KIqsnUz/JkLNy/byDIz11Cwm1q7VnXRsCPu4Jrmult047SdJfw+LZThRWAwQM+VJIhZA4kVG5my65Y4TQy7uVoYUAks+tRhoktuOos/qP1zzU3whGK//ezJ8dZU3aq8gdvueSjt4WbJ1Cd903R9WQ9APPnTT6YqC+MZMpHLUAZ8BTJjmhegBLVA3YOpL8qUVmEgXneIe5mX4AAoAVP/EvAZmP7XqTP5Mm3yM7reuzvGxKM0UwLwXsyAHdjmle7AOAQ9vI/aGBlqME/VWDP4qtpjUnKmy8tnl6dKq+QU/DfUcqJteq/5LPFfnciueD8j0aiwTr+XqVctOZBpaZpjSbc0ev0vMjXoulzC9Ii39m8w/KDQxJJZXkhLDS7Aw1NeG3b1BRelpW4hUmg9xwHUsfMJxZsbi+d8pixdBIkUT13e8Hzrh8wQOjJQm6fEOLPYW1MoViwdcQq6mRhwGr32Nk+NsW/4ghS/YEiWLsLFqkL6QEwWKqXiEeB5DybGpUcwgV9AMaJOoII2lh9KCkiMg3gmdAhVTgBbpBIBYFzRP2ImzrCzaNcbRhSshrEhtdto88KVH2p7+Cm2jzN0Cnz8lEHttGF49RKr5a/HSP9zZxEuFTVhHSz7EuBQX6B443S5hLZCS00q9FMEbECVQKuCDIiWm0xrOxqh2vnO/gPD3iey/S4Ie4KkxxzWM7XUPze+GEt3gormjluKoN7w3fdCV/O4oD7gBNVn7lHkoCY+FbEgoKb5VTclPQUHagmNhTPDxsM8h+DC1j4FVDZxFEZ6l95DKCrAyJTjHDRuDIPIgCf29CjL/bDC+XpBWWapfqYBsTH4gAVghJCQyWOwKkgeoLsnALwWIK4FVAZPw8iAD7lGlpjjjNDnAbF0QRb9KMQPpANngj3NVIhODZdOgX7oLxxSUBiWQmzJBkgdNcCMZZAUGJvheNbDBlLrWkK1AGD6kj0rNqyUjxas+4mxSclwKETg7lwRhDCNJ0FBBAZiSCIVE9awLbfK1J6Uy6s83c7fv1JAMR4qVWMdDTTSTtdqP0ykRYFbDoAJFCFkc60DBZZyoUC7pRBZ8FIVBAYiCA54gqEkjBwRFTeTlShF5FGAcgWqcIDVCTNHgeoUoF6BGpoDNGnBskR8rSJpVwhvGQJJnf9yP38DWAAMpMQvRyTL5G+5SSCJZi2hEKBDhd2CJwnJFQ6YQ/MLibj4SFkiylE4aRpO1sJBQsq5kEJLBw8VXGiJMEdEaRdSpbMgwgadgPW8v1YnjFwkVm05PoyDBD7++EGGnEhyEVOfxPrFNGAFPIl/zoVBJkwiYAgBrESaIz8bLwy2yWZ+IMEmcDzstxMhMd8OMEHExS9WBfvdp973pkcuOOZph+yz1Yy1xgxoVwdhQjD+grDx8AkIScRKkCxTgWpLtOnQZy1M+axVQBomtYoQ0iEPTpsI/cCJMAh7AfHxkmB4SNrQIW3CIUV7H4KqqgOrEIIRy/6VU+YLYwcKKLmDK4HS3Xx4+KGoUh0MB3ZPK0aEahFrGntG4azqNbWsCinQaGgrCsyk0YTIdb4nTenf9Dcq7xgGW2MtlxCC33Ozj/1RKKDCg16gx8/ttuvoAsZnZ307UIGAAwJoiCMkzHeDQDJR15WYONMwQgwFaX+rRcQbMXWqFIvhOT8WhkUOrG1wW7r9o01cJDiH0f83QCCwwEbbtVcgeg/GZ0teQAB5akqB1V6+wNhSVJJB9okEPB4DrLGf/wUs8+EqgH2ETzruwD/cAY2TawYIQA4xHzA1CgQhwQHjwwGzw/bau3cEATjo1deCMEAH7dTShxBgwtAQIRiIDnYBCAgWdA1AAKIPVIAECo0y4fPA57IlI4IwQib7XA0/RC9eSUpdhoqu+EorR2RHfpRHbTTGROyv5+ul8BKf23mvEQ6P88dJnq0M2w/7LxQK9wtPhYyQF4pCRRgSRoWa0Ba1/Q9A9dsC1EOsCit56Sqq4iqxTJEZeeGOqmiIlthXz9WL4SS7AVdwpJja/C+4o2VhUBgRJoTGTbF8d8PXad+f//+FH5P+++1u/ncX/HcD+PxS8NkJn5E+vPzhFYBPa0ey/9PzIO/PhhoMmLKWz3ZzdjnkhHMuuOeBRx4HoER4SMaiGe8clKP0k0PBRStGcQCaSuAUISpF4hGggr9ygaqQVQtRL1gdmgZBajE0YWnB1IxtCYEOPG342nGF8hLqJtZLqp9EH1m8/DeKMEJpmMoonUlaEwyWirJcpGVirBRnWqxVkqxlsZnRjFQbmD0h3SYms2y2yjQnS759Ch1QYD+NcWk2wisWb7Vk65xzk8N2Gbaw2ybbLi475dgt1x4nnfWMM457ytOOOO2U573ghGcdhqAKggBeA8TVwHdgcDYY5w2gOT8o0wMArgKon4ZLIrXO/TgekZDIC1+1RtB5ibQhGU5Je6oxeIIV2VBhkPTePKs0oyQ2D2ZYFZmUNlK9EmvHQg56p8aTliauEld3Iqiqs+5o1Q3Y4XS8YEMxnFpMnXblJO/dRue68OSCbX3t9+/3w7WX/n3Q/rIG3Xq24uxs3/eW+cvi1FetT27qvZMnvRMMk6xasSoWcxgbrdofl5bezp3e+uVOO+CePd7KPSfi3NngRMXjVq/2IqtjUaLLypXesWPeujVzMvburYntO03t8uTkg7TLcdSp6qZq/3qJrUtynE0ZnFOExsW/7lxQylY0c+10vqfFfOBUJ3vXe7rWWcn8pFUrVjuedLmTx10/NYQBMsCjhCryJYCBQIWnp+1qPodMwQSkBMf1UDZlsiyWoZBDG98mNQiVGxLyYHCWh4zf74gIvCIV5h0MbOKQqZ0NyQlMMliIugghmWESGBCPUAyZbQDvGyjfJWf8ZKdz8FNZKJmXIYcio6+nmuG9ikEDYszCRZVbIHyWGmKPQppNvOn6OgqRQpeciPE0Zbdih+qjkdHD0CarB2MqZJxq68eyZohsGWgVjF/xFyRTU2doGNCYng85slVf7UJKw6eIpfrbjSPKN1YhElj1csp3DBqkpCC2+x9dkEoyiXftD7XO6CeDNImNF6w2cvmHW2sGgYCBF+FTxR2QTI1ZRYqBrWqlcj32DFOkoWPjUT3q+scoqTDQyPJnA/A8sBUt25oSY01/6Z1Jk0HCwGMHq1f38TRoSqhlkdxGnShuukQS0i4Ys79vUo4Bwy8xdF3GlWEUXozZoe7xtVUEzzXs5FXE2xmctWCg6lOo4aMB0DTbpfjaoSzKpOzGyvCbhP0PkK1IEqZRKqVTCryxLNKbKEYfORQAh5bYyCRy+0nVzu7Nx0UYWEMsb3Sr8Sc8LXRbfY4bYAkyyEbq+LGJ62qf2jETSacjHGAKTueV36tNXkLRpIR0aFU8ItInR7AmgcNwWo/rOxAljo8hkmUx9D3zcWxg9QRisK8IGhWWseyp+ZqDn8mfKAwd5UEO5t+fJsWxeGTi4k6XHHEeksNEzB5XOYMJHiJ7Bg2plfhoPEmaaLOJPMaweBJq/s8T6sZBwacK4PVxyzMcsEajKfWZggvcuChi988wFHtrAHzmubFl0iYV1gE5+QqYFrZN0LO7d7ppWr8NYv9MpJsN47yLDNc7ldHhbVQPNnDsKv6ylUr10UjR2/DLb/gDG2ydIlUUt0Dq8chGEid02aDeJ5Lu3IbYpPqmh7IFwe/4emGA2GjVwgmvXrIpPkezmXjC1Q6hTZKAr6M7RH/s2AL0Q2HMv5ZVb1APmYX+CkowELLL7wnxTo+Wh/SEYiVgHr30zq84INnshp5rhsg0GbFPExAw6EnSOd4FM+mHYRRBt0ft2RASBqbmcw3Kig24OdEMlsZS+iiUoEvnzOrXASj8WLP1UH1BcGNVknoG8TqZJK6Z+x2KPnS2QLlKkVihQS1PZenrEikERLXpictAN3+r+JScSb+eQsnkEpJMs7ylhfrNUHwbBBXCZGqoPYLhF1oepi1DIv9aPnh8Y6FImiZbCjIrq02CyKn5EDnkxRfkdYZhydpfEMzHhed4bzqfN3pLpkbtITni+LFPGIUqa+MP5Eole0Uj4Rp7Doap+3Q0DdOpAAq3J2rd8TS+J80Ppg8bkay44aPVORiFIvuedcMQ1mqDVKlrV5lZteFFDKuWjDu0twpaoYmrM6L9IhHSCsCokYNXxXLO+HZ5nSsP9dHRKDL2CQzW1ztl3x5ZwSZQJkvUoFj1Bga7rzXLiirEol0sLR9yQGvIzkhJQkEwZMFkFXQa65GgRRXNtSkr9kCxdCTg8KqXypoZUonbnFpKuJXyNeSQN0M7Rs1cCYQ0gpWbeEQRYrG7egnvTHmfI9xWKp0FWXQKm4MO61eFp0+By93DlO2mWpVtokX/jZeHGgx0ZJJAgkrzXoeWYAumZXjyqGymqQHyPrjjJweQevB0NmoJKpsGZWTUXhp1blrTmyZUhZpQiZRvmp289jYVbrbiv4cxTWuiPezNif0pEk1GUWN2zuiGjdfIITux8b8PzJ9IO86f+SbAJTjwkcNdUHCi9qWHWvvgoLcdVX44fabb7Na73JfJxWGwzmQXNW3+UJCBMiYPZ9KbolQKlIcf7O4IJpMFPCQ73Gu+ffS3R/vpN8/cfHy9fPjwyVP2SGQ8GFrypbm6bNW7Lv6z/PfGzc6La7Y0b9i+oSDp/6suWPrPms3bscuMROdH1gfvXr87iPby4UQz5itTXvt8+Y9ZMEjJHlK53erxQrdmqdvTq7XHV/ItsfJsWCFW2Z8WCVZ9yi9Ky9fV5+ui4+9zbX7jDLygIt3aLBMbE/zJwoJ2YeFp3Nh/JcFpkFVaE9h5n9hCDUf7Dw5ty7bPNLoknSnZufoyps7fN+PDLFv5LwWgno1ujZ5RSH2cwOmb9Wn7d/RvZ7c1tzX59W3rG07yfP985UJl+8IFef5kU/KnMjN93YWqqQLPsD4vpZZnj1Y6BNMRoY1fK+JcBkVDdjLL/cbfKo2R3x423hI4/H4DOkL7JzbPHQF607W6a3984JvxGe0WJ9EGtgyA07fZB8Wk5fvz/FS36aqFmYM85t66xDz/peD0zSikpcaM3MiiowcfJNRkFxWbjwXpHIz1ahMlxjcvHnzwtp2blPQ/V3++nuE1w5Dm2TQ6Mo4u+dC3aaC6/V1QPQokPVrvO5r85Xk6X2ZTzgO38h67QV96IJKkOsHhx8zY1KGOxiJBClE0dFPgupsojm5NXrFqoqA/f/tGl8fW+1FCPVVYpJ4sKO5Vm3ti7dGyWnumvNkZFxvjiJHXZ8ax3DveA119A5mi9fZHtkwHZf30bccpvtNz+shxJcGW8O/HZJLSsybuiSDpDe2LilV7w8am+VGyts/ye6zO6Pg4a1TGAOMciV3oX52MnWJq4jiilC7RuJK/Loun1772K4s7aWWeDajiudSajNjUlNL+yEL3gMFUqlkqCU9NyxUrll9l865lMu8eKeW6VDpHfEp62YRBTTQYd2C+Illt9z89cJ2itTJf31aZVS7Jagygh2TwBTu4Lv+owg3Tq84pOYvype/y9sxs0tMKlRazoZprKu/URjnVO7cR7KhKp8/RR2nLahLgNd+Mr4A7zBp+m+PZEUx8r2qnpFZxMnQ6M6swanZ2fbTQbAqPjjGHC83R6zfNLntiI5xaPGbE5sxiwetvNLHziX7zT7LInp8+7nLWSfXztG/z7lpOYC/n9GiSLy23bN18t5PjT9+OrmSOd9qObHIegb9e+vnm0+stxHWWoz/eeLlr9TEImR+RaHX2KrJl+COfZTQwfzidk0vH/epkLlA0FrHMFKn2/yWTfebX1TEM/qBagFNMTMjPLP6ZTzdk1xj0TfkeCWbHOySTCURjMO211EwpuZne4fhsGyps4D9WhHa2csJ71QQLj5/fD/YVCxUQQ7E2Kix2UV1ymrjJklUfYTRWRSRlHlih0j19iy/Yeu9beRw/c5VK+bgmYpxnE1pecPMFlqDOC+bXn6JgYa6zxI4W5elHKzNs0RkyjeMau/PpEubRmbvY0HbGYa3TJoF+0Tvvvsqm04/Ev9/NkbJ5Nr2Bb4+DLzYvJC5wWqR/TIulmBokGRZpfXqauMXiqo1IS6mUp2Xzu3COnbhcB6Zo4FlyhfJt4a64oszcVL53+rucMe4K1VweS25O6ubpfy4KPDZgxBsDDkhYYj+WK5+35GrfZ0x6jUh69bVMw/5NhJwq9nKjFTpHoo3AiNsq4K8zkRmvZNgTo+JzvLr8AO8Ci/3nhoiIyjpxBuWhRGv19/tqOWUr49e/ErFJxqwVEndPqoV8n8UgHDkQMLHZymGdXK10Gh7LlTi9LkoZ2nQSKJv3Ju51ezKXziww1O0dcaxHKqdFGVPpmVrJnP1/nhepTA/NC/kJWsoMBVh3iVdqA0d0HVrqDC2Gk/nYxgLz4sYNn059Zr938DODy2ws0dpDzIElvPWinDdY2buvPBA5WwzK11i+3SyCeFzd0Kquz2UsblgEc9rLA7CLcUef5ZBFlVdNrqHNYm6DS6/M5+ah78eWwBUGxeBV+u5jNLc1cHDp+0r2LC9NmmOTbTwm+UMb6Cm5g2mWkYoK6/BQSnbuUKp1pKLSNjKUbG9VWLiOmHi+a0gtK+A5YossJfDFJ/WBQZqNDaKWbcFZP7//bfWJbn4cNAjH6H5meWGGIsbf+Iiw/fNYqqJXbK7+eWQJ/+NB2PrRl06JLaK/5s7r0MTG3lLruKH0k9XFDhfdKFmrM0Tb65UOU604zfh0nzz+E5FY/Q2b/sVEyWAW42q8JiY+c4lCeEzQccGCIcLCb3f4wNKCiqbPXKgrNvyhgpxZ0L+yf+U70nAJXXFn1Vex8AulomJsKmyGnK3N1PN3PqRaiN/MxL/eB/O07zQ5VinMLiVvdc7RS+ae8czR7XObl5Fv5W8Lyd52NKh3h/MfOUknlQVUR9g25ciP1UJ9rE0lLcXMBA/L36QptMr1idmJ8t6id2fOVkbkq9mlz1GtmmdnlqUzm1QuU3RxqKiDOx64XnxUIB6m0qgBvVcHg+lUel93Cc7yIJCe68/odoZt2qN0S+b2iufce5QzO4QHufhNPDykUxIrtSaPdLqsL2FjjTElKTcmoizRmtrZm7UgbcJbmrClKkc6zxYe4eAyMtgl2fHU2jCnvyg4s5xV3z4GRwcDt3SMwvLnjJe8RVNdFLiu45N1ReR1Xu3INCW5imFWSow6+Z8WcVNQBaEk15yQlNUjK97VtSvtZoQuS5szXtqSbVdFRBhl5hHQL2Ovm/4qQvwF2WtL4rUDWQOqggLViL1w1JMFJd1aW5yHb4mRZRmWiUnxO4WCgVe4ham5mro8TVTs+VAre4SBE3hSzY0yeJxTTZfNN3JxLeqny+ni7U710yV0wfbs544dN01wnKr0vOReZvvMltC3SJwZmXohcQG403zdlPXljjuds515EZN5pYO6nOQaXkaUws5foeS435bHZuoVda5EVsHpv5RqIy9LO9pEHHi7Dh2k/ROTU6CEZkrVuCG9LEX+pzXu9faPVls5zF8/06pMzPPdk/LWlx2qGuYwJC1LWjpx+Oe441XXw9VGFutRr1L6ROzopPR5q80rd7r7DKllKaJ5HLAfit33+JdC0kghrirfjO8nsXuZG36pUK21KdsEBdEp6pbCvBFdTsFYpKMKmcfE5XMmgTYyX2kotiYIyzc5xIr4gor+vP7GrE2mTWX7TfvgHCW/xJmqVDwrUzUKPqPMr6dz/djsD8N5CTSZnm00pQ0pU5MLWiIsSSWCrTx76CpOYOQeacQuKU//8kmaUSllOL/Lk1Mh1iX/aNPZooXLlNAQqfwg258qwG/AdJFBkhDbGrPkbWn08/rnSqL36Q2lhhuE2Psew328AeZ/C07iF5+p4Bmf8s4HXv1mLVVOH/BtSHETJ8/WFZ6ttbfPZsHZOkiIiWS6tWazroKdlFDGsmi0JnZRTMy0XpHZXCfRmcTSjBh9na/JB3sGPJc80Q+OeG57bh0W4bTyeKse3p4+LbsTSLqzZvpw7PsBfu+DQPyuU6XnoueNw69/Z7jg7q1OW5I1xZRm3915IL1J4EiSlaZkZ7Ssjm36/Kxvkw9khYcKF6bdB90/dvrsGYmWJGOKbc67N72eb0uUFSe7LE2rYuo/Pjm9fhqK/UQFjz7+R7VhyTKG9Is3o6Wpf3oiKZIrSC/bzOdKHPcd3FjqNbsmwkpQVry6yvWv65/DHf92wGtE0gypcNMQa4h5Lo+VB8bcJ2sLx7XtT9YV3p1N5dMbprOCBsmDEFs76LnkSTfa6PI+stHBd2ZX7aimBHZRTnRTAmops5tX3eigBLRTQFkrbBOL2oXCCpGk9Tthq0QkdzB8TCRug1aP6ppYcl2lvi4RXYdJd/CKLHV7M3lQMFLUrPOtbPQ16X0roGTbIJs8ruFkkoGe3rbsPFLAeKOE/YJcupRdmquxhUVGWcP40JOlbNOq2xTKCrXW0xD8UzBtBCH/8zCQ5LD+D5ESMiYyY5MDQuYPr3SSaV69+SHOyAF6e5OqCZLd0Y6HNRTqnDRjwb7OSjSRz8g4I7ieYHjq65UjHP+V/BvpS2HogwZymLjgR36od0cWSsh9HND/Kid/4hXRfUUvof92Oz5uhjynE12rMh92la9W8uHV1w7NVeWHlOLgpaff/ri14nbBzW9N7AK/vH9jFO+Xr9UCrHJ7a4pG79Bm0Me3igbOOGL0Cq3twVwJQH+1+7VDy40W2pvBZoSAtosJgOle4VUnrS57wyl5MR4A7ie6BeII9nnf4RCBUuTULbiPHdaBG0UqHOd0Q3iFiPeu/wBSEP4XQI4cFhngHAEKXdZ6sZrmlsXxIOu5X//zcG34pV80giSV5ryXY61vURXc7ZZL0VPB+czgQHX9Jdetg4wJr3K9Ovye6/Xgr+5oVVNXFt5zEXjueldMhC/wlGnB64T826nQ+oC3xRR4g1D2mr891z3DraPBOULZKxHvnIu6CjqlK9aokPxuTRSe9/a/d4fd9ECIFVzmzst0h+e1sGMOupuvWjpI8m9Ypr3cwFxepsBfFYJ0CYKV8uV6EXlNHl5AMqrlxpERNqZenajtltsw6mFr6MVfpI0Znb/DlzDQJYVC9z9AEB4NCp1hKmQmnnctEd6HPc0XRTuTeC8HoBVruTs5ZD5YE/qW4Hb4BhxrvmQtPPIN0xCcAhchYDXX9OIKeJxQeM+Kgeeueb6mI4cGgXFtD9dPcNUaCHm34wpMDNwgrodrCYWLUQ9C17Rgben6fgj6mi+mEkjhFX9DnnO+ZzsaMq4cAnc0n3fj3wg2uekyIMqufd17R3sBQNzaOyFQL63oYZR5cuHf5xFdAgv+fD921vaSHU9+eDR6v2K66MMf4/sAD44FxgV5c68MYrXgSdtol/hEDmdNiWB7aaAPeNQp+SsWrxoFTtEl7exqc5hQDqTUW5JYCmPJwA/EB4GYsEsp5qT5uHoosTm7jhP/Nu0x8WOvDDU5n1PBZOQjaoRfshq2vwcc85TEE8EqoLYbynKEvvQ8AIcBjSoBGeHNXc3YpuCoKR9A9IgrdtiCDcqTvVKcad2ICPIwCCppdSQ7fXw/UgvRGpP2yh16KYbDyRvgUevRhIVHxjB5HiN9Qe7834kAEsIOXxW6maTmLfHbW/MlPxAj7BHBRn2SX0zJ1mfKu2I2Xv/EMW84iVlkMyCm6dPRc/ITg5flwehcIo9reGovioo/WK+W0uNaIUHFDhWOjbDHgF7Ag0NFqZXWfL5VI3J7LpPsaPImww5lOuU/AF5tHE1UKPD/2P5HgkBZOx+Hij9FP6DebLgKaf8rQqHg56LOkcUgfiC0+YJzeL1Mv3wYG3G9HsdocYzlNxAQzN8p1vnqaMr/JBzuS8CHw6zrAPjs45wfavmvaBzp0xAiDCDAJw37ny0sA/Lgor+Ws5w9h/bY94jIzV7g7Dc05Xdw+jwU2eqIGSLzzJ2sE5lkECQo4oZWP0o+B8I3/zqIzZR+/MC57z4S6XuYs/z11Fu9z9ZktD38poz9PG9jH7AuQ/RNJirfSeEbR+aZJAcT5WeQ+ZYJLT5acTGYgZ8g6HfKoRWT0EHJBeETmoNuSA9JB5lZrbWCu3aDHGN2JexnhcI3zAbU9dIrmc2GxOznqRa0/+mh9iGDWPY5cL3xDFp+Rs19nN0l8jGa0+P9jNC+JqKfo+YL9H0JrZeJelTCGSc8dGE9Q3K5zVkr0apNgxysSwwhMD4XxLFwnL5DymlZk56utw4Br2nmpx7hdYs10hsbeRYOavgDeCqp0YtYc8+LIcU1L05VGrx4OWF5CYpd8RI5DG2GKo7ZFhDAxFReBGRhXgwCMBjJhiAEZiM//nRkYE2denSo1S5SjC59SizRoE+LEo2WaNaiT27eWaK+zhbqFWdEo4C+1r2S6OnPdr0e1KCama7GaaezoM2l7rlsXMx6dECnXatZZLsenbRx3b1bv0aJ4hTsDENa36OWuXZEA+0JLYb16K+4k5dQJB0Dw7l7smZN+nTy9darnIFOIp1o0XQaNBqQQK2ZQZREjSIlalLZ2fSE1yuF16cnvJ4q7NXPX4eJm0uB5OG1MPn7pRaauwzrWbgjFDUZGnV13FqakyIsbwtaWb2KY9L/EsU6l7VMIeXLjQpbUqzvV0enTjscVqvptFuyZtZnfOZrDdOr62J0BMyDA61bRfkv8zVgerfqrsgwreT9F7CdvkrJ3+X2pOpPFK8vjeD+FoKGnjYdRnpMLOw+LhJHKC5eUfgEwooVTkhUHHGf9g8JafFk5CVQUIqgoqahLYmOnkFkKaI6D8SIFVeq+D5XZbWSJFlKth4DdCG7PZTDgdHJucz+YnGF9IYRBkcgy0GVi8Zg+6R8HJ5ArIBEplREpdErZvRZ//JUwmJXyuHy+AKhKI9YIpVVIVcoVeoqNX3BhsO/ZdBgNJmBxc3dw9PL28fXzx9hwlFeECVZUTXdMC2bOa7n96ePVIMm9Pv3nkB75qLryakxW+8sOXVHZ/fX6SV2T7Pd7u0T18h4Z3GNvDNPIMmQKVIKEeTp3AjZb7yUU+zs2gQPJzRGBEmI87mJTiDm8213ASKqAN3Uv5570PtrmfwWbEm2f53HSHtMudx5uziar6z4kdf9ZiJBwu0fhNhQUjTzJZTwYViKyrUTQz1ArtBOcxoocwmkyt6lFa5071aUMvqejgEoIwSgKc890341Yf1PQD/hRIvP+z8iRPmwdubNu4RBnvXoUcO4ox3yIjgVzL3mmJpXw1TBFbbGQAIxKBG5Y3+yqBKJmJROyqhpBvIQKW6IBSycqChRqnm5mvwSNay1TH6HFrbawqQiTmBXuhM791hq9CkxLVVjXlR+C4BQGkQQAYIb3LeSt9Sb+zb4h0+Oh1jm13imPvGFC/OGh/WkEGoN3o5z5Yv/6An+pReU6s7+l8SdPZ7Opbh1qOnTTkNSF97c4I3w7hxiwQW8z4mVWIuVe4CNxBXHBMrJaL3/CCc2eX7QiZYPtrPQ2FFze265RCwCzeSy7dnQTi/yzl1/DYiemZCQrr6dx93zu4H2OCMkC8QyUK3XhYpRao33lf6lEdeHbf9Aj9cm) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --lg-blue: #315ee8;
  --lg-cyan: #24b8d7;
  --lg-solar: #ffb528;
  --lg-success: #0c9f69;
  --lg-danger: #d54755;
  /* Az állapotszöveg külön tokent kap, mert a fenti két szín háttérben,
     szegélyben és folyamatsávban is szerepel — ott jó, szövegként viszont
     egyetlen arculaton sem éri el a vállalt 4,5:1-et. A tinta alapértéke a
     régi szín, így aki nem állítja át, semmit nem vesz észre; az arculatok
     a saját felületükhöz állítják be. */
  --lg-success-ink: var(--lg-success);
  --lg-danger-ink: var(--lg-danger);
  --lg-radius: 24px;
  --lg-control-radius: 14px;
  --lg-blur: 34px;
  --lg-ease: cubic-bezier(.2, .78, .2, 1);
}

/* Setup discovery and developer maintenance */
.wizard-device-tools{display:grid;gap:12px;margin-top:18px}.wizard-device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;max-height:34dvh;overflow:auto;padding:2px}.wizard-device-card{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;padding:11px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:18px;background:color-mix(in srgb,var(--panel) 76%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}.wizard-device-card img{width:64px;height:58px;object-fit:contain;border-radius:13px;background:rgba(255,255,255,.25);padding:5px}.wizard-device-card div{display:grid;gap:3px;min-width:0}.wizard-device-card b,.wizard-device-card span,.wizard-device-card small{overflow:hidden;text-overflow:ellipsis}.wizard-device-card span{color:var(--muted);font-size:.84rem}.wizard-device-card small{font-size:.74rem;white-space:normal}.developer-cache-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:16px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 72%,transparent)}.developer-cache-tools p{margin:4px 0 0}
.wizard-catalog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}.wizard-catalog-head h4{margin:0}.wizard-device-catalog{display:grid;gap:8px;max-height:38dvh;overflow:auto;padding:2px}.wizard-catalog-group{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 74%,transparent);overflow:hidden}.wizard-catalog-group summary{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;cursor:pointer}.wizard-catalog-group>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;padding:0 10px 10px}.wizard-catalog-card{display:grid;grid-template-columns:46px minmax(0,1fr);gap:9px;padding:9px;border-radius:13px;background:color-mix(in srgb,var(--panel) 82%,transparent)}.wizard-catalog-card img{width:46px;height:46px;object-fit:contain}.wizard-catalog-card div{display:grid;gap:2px;min-width:0}.wizard-catalog-card span,.wizard-catalog-card small{font-size:.72rem;color:var(--muted);white-space:normal}
@media(max-width:760px){.wizard-device-grid{grid-template-columns:1fr;max-height:40dvh}.developer-cache-tools{align-items:stretch;flex-direction:column}.developer-cache-tools button{width:100%}}

body:not([data-theme="contrast"]) {
  --green: var(--lg-blue);
  --green-soft: rgba(49, 94, 232, .09);
  --red: var(--lg-danger);
  --glass-ink: #091b2c;
  --glass-muted: #486174;
  --glass-accent: #274fcf;
  --lg-card: rgba(246, 251, 255, .62);
  --lg-card-strong: rgba(249, 252, 255, .78);
  --lg-control: rgba(255, 255, 255, .42);
  --lg-edge: rgba(255, 255, 255, .78);
  --lg-edge-soft: rgba(255, 255, 255, .48);
  --lg-shadow: rgba(14, 42, 76, .24);
  --lg-inner-shadow: rgba(255, 255, 255, .62);
  /* Elmosás nélküli fallbackhez: az üveg átlátszatlan párja. */
  --lg-opaque: #f6fafe;
  color: var(--glass-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

body[data-theme="time"] {
  --glass-ink: var(--live-ink);
  --glass-muted: var(--live-muted);
  --glass-accent: color-mix(in srgb, var(--live-ink) 82%, var(--lg-blue) 18%);
  --lg-card: color-mix(in srgb, var(--live-glass) 94%, transparent);
  --lg-card-strong: color-mix(in srgb, var(--live-glass) 84%, rgba(255, 255, 255, .22));
  --lg-control: color-mix(in srgb, var(--live-glass) 72%, rgba(255, 255, 255, .12));
  --lg-edge: var(--live-glass-line);
  --lg-edge-soft: color-mix(in srgb, var(--live-glass-line) 70%, transparent);
  --lg-shadow: rgba(4, 18, 45, .28);
  --lg-opaque: var(--live-solid, #f6fafe);
}

body:is([data-theme="midnight"], [data-theme="graphite"], [data-theme="carbon"], [data-theme="botanic"]) {
  --glass-ink: #f7faff;
  --glass-muted: #c2cee0;
  --glass-accent: #9eb8ff;
  --lg-card: rgba(13, 27, 51, .62);
  --lg-card-strong: rgba(18, 34, 58, .78);
  --lg-control: rgba(255, 255, 255, .105);
  --lg-edge: rgba(201, 226, 255, .25);
  --lg-edge-soft: rgba(201, 226, 255, .16);
  --lg-shadow: rgba(0, 5, 18, .46);
  --lg-inner-shadow: rgba(255, 255, 255, .15);
  --lg-opaque: #111d31;
}

/* ÉJFÉL — a Carbonhoz hasonlóan sötét kártyaanyag, de az élő ég itt nem
   halványul (ld. .time-sky opacity fent): a kék/napsárga ékkő helyett
   izzó cián a vezérszín. */
body[data-theme="ejfel"] {
  --glass-ink: #eef2fb;
  --glass-muted: #9fb0d0;
  --glass-accent: #6ce1ee;
  --lg-card: rgba(16, 23, 38, .7);
  --lg-card-strong: rgba(20, 28, 46, .82);
  --lg-control: rgba(140, 170, 255, .1);
  --lg-edge: rgba(140, 170, 255, .24);
  --lg-edge-soft: rgba(140, 170, 255, .15);
  --lg-shadow: rgba(0, 4, 16, .55);
  --lg-inner-shadow: rgba(255, 255, 255, .08);
  --lg-opaque: #0d1420;
  --lg-blue: #34c3d6;
  --lg-cyan: #4fd6e0;
  /* Az index.html saját üveg-tokenkészletet is használ (ld. ott a
     data-theme="ejfel" szabályt); e nélkül a kártyák világos üvegként
     maradnának a sötét felületen — ugyanaz az ok, mint a Botanicnál. */
  --bg: #05070c;
  --card: rgba(16, 23, 38, .7);
  --ink: #eef2fb;
  --muted: #9fb0d0;
  --line: rgba(140, 170, 255, .24);
  --green: #4fd6e0;
  --green-soft: rgba(79, 214, 224, .14);
}

html,
body,
.app {
  min-height: 100%;
  min-height: 100dvh;
}

html {
  background-color: var(--live-sky-b, #b8f1e8);
}

body:not([data-theme="contrast"]),
body:not([data-theme="contrast"])[data-weather] {
  background-color: var(--live-sky-b, #b8f1e8);
  background-image: linear-gradient(145deg, var(--live-sky-a, #2f9be8), var(--live-sky-b, #b8f1e8));
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

body:not([data-theme="contrast"]) .app {
  background: transparent !important;
  color: var(--glass-ink) !important;
}

body:not([data-theme="contrast"]) :is(.time-sky, .ambient-weather) {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  min-height: 0 !important;
}

body:not([data-theme="contrast"]) .time-sky {
  opacity: .9 !important;
  filter: saturate(1.12) contrast(1.03);
}

body[data-theme="time"] .time-sky,
body[data-theme="weather"] .time-sky,
body[data-theme="ejfel"] .time-sky {
  opacity: 1 !important;
}

body:is([data-theme="midnight"], [data-theme="graphite"], [data-theme="carbon"], [data-theme="botanic"]) .time-sky {
  opacity: .52 !important;
  filter: saturate(.9) brightness(.55);
}

body:not([data-theme="contrast"]) main {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .16), transparent 24rem),
    linear-gradient(150deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)) !important;
}

/* Floating functional layer: navigation, headers and dialogs. */
body:not([data-theme="contrast"]) :is(
  .app > aside,
  .top,
  .nav,
  .mobile-menu-panel,
  .display-dialog,
  .card-detail-shell,
  .camera-dialog,
  .access-invite-dialog,
  .remote-qr-dialog,
  .server-required-dialog
) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 42%, transparent 70%),
    var(--lg-control) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-inner-shadow),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 18px 50px var(--lg-shadow) !important;
  color: var(--glass-ink) !important;
  -webkit-backdrop-filter: blur(40px) saturate(168%) contrast(1.03) !important;
  backdrop-filter: blur(40px) saturate(168%) contrast(1.03) !important;
}

body:not([data-theme="contrast"]) .app > aside {
  margin: 14px 0 14px 14px;
  border-radius: 30px;
  min-height: calc(100dvh - 28px);
  color: var(--glass-ink) !important;
}

body:not([data-theme="contrast"]) .brand {
  padding: 7px 9px;
  border-radius: 18px;
  transition: background .25s ease, transform .25s var(--lg-ease);
}

body:not([data-theme="contrast"]) .brand:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

body:not([data-theme="contrast"]) .brandmark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .10));
  border-color: var(--lg-edge) !important;
  box-shadow: inset 0 1px 0 #fff9, 0 8px 20px rgba(22, 86, 187, .19);
}

body:not([data-theme="contrast"]) .brandmark::before {
  background: linear-gradient(145deg, var(--lg-cyan), var(--lg-blue));
}

body:not([data-theme="contrast"]) .brandmark::after {
  background: #e8fbff;
}

body:not([data-theme="contrast"]) .brand b {
  color: var(--glass-ink) !important;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.04em;
}

body:not([data-theme="contrast"]) :is(.brand > div span, .app-version, .server-card span) {
  color: var(--glass-muted) !important;
}

body:not([data-theme="contrast"]) .app-version {
  background: rgba(255, 255, 255, .18);
  border-color: var(--lg-edge-soft) !important;
}

body:not([data-theme="contrast"]) .nav {
  gap: 6px;
  padding: 7px;
  border-radius: 22px;
}

body:not([data-theme="contrast"]) .nav a {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--glass-muted) !important;
  font-weight: 680;
  letter-spacing: -.01em;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s var(--lg-ease);
}

body:not([data-theme="contrast"]) .nav a:hover {
  background: rgba(255, 255, 255, .14) !important;
  color: var(--glass-ink) !important;
  transform: translateX(2px);
}

body:not([data-theme="contrast"]) .nav a.active {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .14)),
    color-mix(in srgb, var(--lg-blue) 12%, transparent) !important;
  border-color: var(--lg-edge) !important;
  box-shadow: inset 0 1px 0 #fff9, 0 8px 18px rgba(28, 69, 147, .15) !important;
  color: var(--glass-ink) !important;
}

body:not([data-theme="contrast"]) .navglyph {
  color: var(--glass-accent);
  filter: drop-shadow(0 3px 7px rgba(37, 79, 184, .20));
}

body:not([data-theme="contrast"]) .server-card {
  background: rgba(255, 255, 255, .13) !important;
  border: 1px solid var(--lg-edge-soft);
  color: var(--glass-muted) !important;
}

body:not([data-theme="contrast"]) .server-card b {
  color: var(--glass-ink) !important;
}

body:not([data-theme="contrast"]) .top {
  min-height: 108px;
  padding: 20px 22px;
  border-radius: 28px;
  overflow: hidden;
}

body:not([data-theme="contrast"]) .top::before {
  background: radial-gradient(circle, rgba(255, 181, 40, .72) 0 3px, transparent 4px 15px, rgba(49, 94, 232, .18) 16px 18px, transparent 19px);
  opacity: .55;
}

body:not([data-theme="contrast"]) .top::after {
  border-color: color-mix(in srgb, var(--lg-cyan) 55%, transparent);
}

body:not([data-theme="contrast"]) .top h1 {
  color: var(--glass-ink) !important;
  font-size: clamp(27px, 2.6vw, 38px);
  font-weight: 820;
  letter-spacing: -.055em;
}

body:not([data-theme="contrast"]) :is(.top p, .top time, .header-weather) {
  color: var(--glass-muted) !important;
}

/* Content material: thicker than the floating functional layer. */
body:not([data-theme="contrast"]) .panel {
  position: relative;
  border: 1px solid var(--lg-edge) !important;
  border-radius: var(--lg-radius) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .44), rgba(255, 255, 255, .10) 38%, transparent 68%),
    var(--lg-card) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-inner-shadow),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 20px 52px var(--lg-shadow) !important;
  color: var(--glass-ink) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(145%) contrast(1.02) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(145%) contrast(1.02) !important;
  transition: transform .3s var(--lg-ease), border-color .25s ease, box-shadow .3s ease !important;
  animation: lg-card-in .58s var(--lg-ease) both;
}

body:not([data-theme="contrast"]) .dashboard > .panel:nth-child(2n) { animation-delay: 45ms; }
body:not([data-theme="contrast"]) .dashboard > .panel:nth-child(3n) { animation-delay: 90ms; }

@media (hover: hover) and (pointer: fine) {
  body:not([data-theme="contrast"]) .panel:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .92) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .82),
      0 26px 65px color-mix(in srgb, var(--lg-shadow) 88%, transparent) !important;
  }
}

body:not([data-theme="contrast"]) :is(.pump, .recommendation, .energy-panel, .solax-panel, .greenhess-panel, .weather) {
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--panel-glow, var(--lg-blue)) 24%, transparent), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 46%, transparent 72%),
    var(--lg-card) !important;
}

body:not([data-theme="contrast"]) .pump { --panel-glow: var(--lg-cyan); }
body:not([data-theme="contrast"]) .weather { --panel-glow: var(--lg-solar); }
body:not([data-theme="contrast"]) .recommendation { --panel-glow: #35c58a; }
body:not([data-theme="contrast"]) :is(.energy-panel, .solax-panel) { --panel-glow: var(--lg-blue); }
body:not([data-theme="contrast"]) .greenhess-panel { --panel-glow: #8f69ed; }

body:not([data-theme="contrast"]) .panel :is(h2, h3, b, strong, label, code) {
  color: var(--glass-ink) !important;
}

body:not([data-theme="contrast"]) .panel h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.025em;
}

body:not([data-theme="contrast"]) :is(.panel-subtitle, .tapo-help, .tapo-result, .muted, .message, .status, .notification time, .device-card small, .device-card p, .detail-data-grid span, .detail-data-grid small, .detail-explanation p) {
  color: var(--glass-muted) !important;
}

.device-card {
  grid-template-columns: 68px minmax(0, 1fr) auto;
}

.device-product-image {
  width: 64px;
  height: 64px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 88%, white 12%);
  object-fit: contain;
}

@media (max-width: 760px) {
  .device-card {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .device-product-image {
    width: 56px;
    height: 56px;
  }
}

/* SolaX setup: long CIDR/model/diagnostic text must stay inside the card on
   narrow iPhones, and the primary actions remain full-size touch targets. */
#solaxSetup,
#solaxSetup > div,
#solaxSetup label,
#solaxSetup .location-result > span,
.solax-official-help { min-width: 0; }
#solaxSetup :is(.tapo-help, .tapo-result, small, code),
.solax-official-help { overflow-wrap: anywhere; }
.solax-official-help {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--card) 88%, var(--green) 12%);
}
.solax-official-help p { margin: 6px 0 10px; }
.solax-official-help .actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  #solaxSetup > .actions,
  .solax-official-help .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #solaxSetup > .actions > *,
  .solax-official-help .actions > * { width: 100%; min-width: 0; }
  #solaxSetup .location-result { align-items: stretch; }
}

body:not([data-theme="contrast"]) .card-glyph {
  display: inline-grid;
  place-items: center;
  min-width: 1.25em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-style: normal;
  line-height: 1;
  filter: drop-shadow(0 5px 9px rgba(30, 65, 130, .18));
  transform-origin: center;
  animation: lg-icon-float 3.8s ease-in-out infinite;
}

/* Nested material and data blocks. */
body:not([data-theme="contrast"]) :is(
  .duration-box,
  .consumption,
  .emergency-box,
  .update-safety,
  .notification,
  .energy-metric,
  .energy-chart,
  .solar-node,
  .solax-metrics > div,
  .solax-chart,
  .solax-details,
  .schedule,
  .file-entry,
  .credential,
  .settings-categories button,
  .phase-grid > div,
  .device-card,
  .topic-box,
  .camera-card,
  .rule-core-settings,
  .custom-weather-editor,
  .native-push-setup,
  .access-request-panel,
  .access-role-help,
  .access-created-invite,
  .detail-data-grid > div,
  .detail-explanation,
  .pump-duration-quick,
  .weather-detail-metrics > div,
  .weather-timeline-item,
  .always-on > div,
  .access-item,
  .sensor-metrics > div,
  .tapo-device
) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .05)),
    var(--lg-control) !important;
  border: 1px solid var(--lg-edge-soft) !important;
  border-radius: 17px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 8px 24px rgba(10, 42, 83, .08) !important;
  color: var(--glass-ink) !important;
}

body:not([data-theme="contrast"]) :is(.energy-chart, .solax-chart, .camera-preview) {
  background: linear-gradient(180deg, rgba(240, 249, 255, .42), rgba(240, 249, 255, .16)) !important;
}

body:not([data-theme="contrast"]) .energy-chart .line {
  stroke: var(--lg-blue);
  filter: drop-shadow(0 3px 5px rgba(49, 94, 232, .35));
}

body:not([data-theme="contrast"]) .energy-chart .area { fill: rgba(49, 94, 232, .18); }
body:not([data-theme="contrast"]) .solar-pv-line { stroke: var(--lg-solar); filter: drop-shadow(0 2px 4px rgba(255, 181, 40, .30)); }
body:not([data-theme="contrast"]) .solar-ac-line { stroke: var(--lg-cyan); filter: drop-shadow(0 2px 4px rgba(36, 184, 215, .30)); }

body:not([data-theme="contrast"]) .flow-line {
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(49, 94, 232, .20), var(--lg-cyan), rgba(49, 94, 232, .20));
}

body:not([data-theme="contrast"]) .flow-line i {
  background: #e9fdff;
  box-shadow: 0 0 0 3px rgba(36, 184, 215, .20), 0 0 16px var(--lg-cyan);
}

body:not([data-theme="contrast"]) .weather-icon {
  width: 64px;
  height: 64px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .90), rgba(255, 255, 255, .28) 58%, transparent 61%),
    rgba(255, 255, 255, .18) !important;
  border: 1px solid var(--lg-edge);
  box-shadow: inset 0 1px 0 #fff, 0 14px 32px rgba(255, 176, 35, .22);
  color: var(--lg-solar) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

body:not([data-theme="contrast"]) .weather-now strong {
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 780;
}

body:not([data-theme="contrast"]) .solar-icon {
  color: var(--lg-solar);
  filter: drop-shadow(0 5px 10px rgba(255, 181, 40, .32));
}

body:not([data-theme="contrast"]) .solar-node.inverter .solar-icon {
  color: var(--lg-cyan);
  filter: drop-shadow(0 5px 10px rgba(36, 184, 215, .32));
}

/* Controls use the clearest, most responsive glass.
 *
 * A jelölőnégyzet és a rádiógomb szándékosan kimarad. Az `index.html` saját,
 * rajzolt jelölőnégyzetet ad (`appearance: none` + pipa a `::before`-ban), és
 * a bejelölt állapotot a kitöltés mutatja meg. Az itteni `!important`
 * háttér/keret viszont a `:checked` szabályt is felülírta, ezért a bepipált
 * négyzet pontosan ugyanúgy nézett ki, mint az üres — a fehér pipa eltűnt a
 * világos üvegen. Ez a kizárás adja vissza a látható pipát. */
body:not([data-theme="contrast"]) :is(
  .secondary,
  .smallbtn,
  .display-button,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .choice-grid button,
  .segmented
) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .08)),
    var(--lg-control) !important;
  border: 1px solid var(--lg-edge-soft) !important;
  border-radius: var(--lg-control-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 16px rgba(15, 47, 91, .10) !important;
  color: var(--glass-ink) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

/* A panelen belüli vezérlők már a panel saját üvegén ülnek: a rájuk rakott
   újabb backdrop-filter vizuálisan alig látszik, de minden képkockán újabb
   elmosás-réteget kér. Egy dashboardon ez 100+ réteget jelentett, ettől
   akadt a görgetés és a kártyanyitás a szervertelefonon és tableten. */
body:not([data-theme="contrast"]) .panel :is(
  .secondary,
  .smallbtn,
  .display-button,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .choice-grid button,
  .segmented,
  .weather-icon,
  .energy-chart,
  .solax-chart,
  .camera-preview
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not([data-theme="contrast"]) :is(button, .nav a) {
  -webkit-tap-highlight-color: transparent;
}

body:not([data-theme="contrast"]) button {
  font-weight: 720;
  letter-spacing: -.015em;
  transition: transform .2s var(--lg-ease), box-shadow .2s ease, filter .2s ease, background .2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  body:not([data-theme="contrast"]) button:hover {
    filter: brightness(1.035) saturate(1.06);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70), 0 10px 24px rgba(18, 48, 98, .16) !important;
  }
}

body:not([data-theme="contrast"]) button:active {
  transform: scale(.975) !important;
}

body:not([data-theme="contrast"]) .primary:not(.stop) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 15px !important;
  background: linear-gradient(125deg, #2447c9, var(--lg-blue) 48%, var(--lg-cyan)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 12px 28px rgba(31, 72, 197, .32) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 20, 70, .24);
}

body:not([data-theme="contrast"]) .primary:not(.stop)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -65%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  animation: lg-button-shine 5.5s 1.3s ease-in-out infinite;
  pointer-events: none;
}

body:not([data-theme="contrast"]) :is(.primary.stop, .danger, .smallbtn.delete) {
  background: linear-gradient(135deg, #b62f46, var(--lg-danger)) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}

body:not([data-theme="contrast"]) :is(.settings-categories button.selected, .choice-grid button.selected, .segmented button.selected, .mobile-menu-panel [aria-current="page"]) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .12)),
    color-mix(in srgb, var(--lg-blue) 18%, var(--lg-control)) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), 0 8px 20px rgba(36, 77, 183, .20) !important;
  color: var(--glass-ink) !important;
}

body:not([data-theme="contrast"]) :is(.settings-categories button.selected, .choice-grid button.selected) small {
  color: var(--glass-muted) !important;
}

body:not([data-theme="contrast"]) input[type="range"] {
  /* A DESIGN_SYSTEM.md 44 px-es érintési célpontot vállal. A P04.1 szelet
     a Home Assistant csúszkát javította, ezt a közös szabályt viszont nem —
     az öntözés időtartam-csúszkája ezért maradt 28 px. Nem arculatfüggő:
     minden felületre és minden arculatra érvényes. */
  min-height: 44px;
  accent-color: var(--lg-blue);
}

body:not([data-theme="contrast"]) input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(49, 94, 232, .38), rgba(36, 184, 215, .26));
  box-shadow: inset 0 2px 5px rgba(10, 35, 70, .13);
}

body:not([data-theme="contrast"]) input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #dce8ff);
  box-shadow: 0 5px 13px rgba(29, 65, 146, .28);
  -webkit-appearance: none;
}

body:not([data-theme="contrast"]) :is(.status.ok, .connection:not(.off)) { color: var(--lg-success-ink) !important; }
body:not([data-theme="contrast"]) :is(.status.bad, .connection.off) { color: var(--lg-danger-ink) !important; }
body:not([data-theme="contrast"]) .dot { background: var(--lg-success); box-shadow: 0 0 0 5px rgba(12, 159, 105, .16); }

/* A varázsló nyolc lépéses provisioning-életciklusa és élő keresése. */
.wizard-progress { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.wizard-facts { display: grid; gap: 6px; margin: 18px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }

.wizard-network-list { display: grid; gap: 8px; margin: 18px 0; }
.wizard-network {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--card) 88%, var(--green) 12%);
}
.wizard-network b { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.wizard-scan-head,
.wizard-list-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin: 20px 0 12px;
}
.wizard-scan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wizard-scan-actions .primary { width: auto; margin: 0; }

.wizard-discovery-hero {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center;
  gap: 16px; margin: 22px 0 8px; padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-radius: 22px; background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 16px 36px rgba(13, 42, 75, .10);
}
.wizard-discovery-hero > div:last-child { display: grid; gap: 4px; min-width: 0; }
.wizard-discovery-hero span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.wizard-radar { position: relative; display: grid; place-items: center; width: 66px; aspect-ratio: 1; }
.wizard-radar i { position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--green) 48%, transparent); border-radius: 50%; animation: wizard-radar 2.8s ease-out infinite; }
.wizard-radar i:nth-child(2) { animation-delay: .75s; }
.wizard-radar i:nth-child(3) { animation-delay: 1.5s; }
.wizard-radar b { z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; background: var(--green); color: white; font-size: 19px; box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 35%, transparent); }
@keyframes wizard-radar { 0% { scale: .42; opacity: .9; } 80%, 100% { scale: 1; opacity: 0; } }

.wizard-scan-meter { display: block; width: 100%; height: 8px; margin: 4px 0 12px; overflow: hidden; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--line) 72%, transparent); appearance: none; }
.wizard-scan-meter::-webkit-progress-bar { background: color-mix(in srgb, var(--line) 72%, transparent); border-radius: inherit; }
.wizard-scan-meter::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 58%, #63d8f2)); transition: width .28s ease; }
.wizard-scan-meter::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 58%, #63d8f2)); }

.wizard-scan-steps { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: wizard-scan; }
.wizard-scan-steps > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: color-mix(in srgb, var(--card) 90%, transparent);
}
.wizard-scan-steps > li > small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.wizard-scan-steps > li[data-scan-state="running"] { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 16%, transparent); }
.wizard-scan-steps > li[data-scan-state="done"] .status { color: #1f8050; }
.wizard-scan-steps > li[data-scan-state="failed"] { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.wizard-scan-steps > li[data-scan-state="failed"] .status { color: var(--lg-danger-ink, var(--red)); }
.wizard-scan-steps > li[data-scan-state="cancelled"],
.wizard-scan-steps > li[data-scan-state="skipped"] { opacity: .72; }
.wizard-scan-steps > li.empty { display: block; color: var(--muted); }

/* Gazdag találatkártya: a szerver választ modellfotót vagy őszintén jelölt
 * típusképet. A setup kliens nem találgat termékazonosságot. */
.setup-dialog .wizard-device-grid { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; max-height: none; overflow: visible; }
.setup-dialog .wizard-device-card { grid-template-columns: 116px minmax(0, 1fr); align-items: stretch; gap: 16px; min-height: 154px; padding: 14px; border-color: color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 23px; background: color-mix(in srgb, var(--card) 80%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 14px 34px rgba(15, 41, 70, .10); }
.wizard-device-visual { position: relative; display: grid; place-items: center; min-width: 0; min-height: 116px; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(235,244,247,.46)); }
.setup-dialog .wizard-device-visual img { width: 100%; height: 100%; min-height: 116px; padding: 9px; border: 0; border-radius: 0; background: transparent; object-fit: contain; }
.wizard-device-visual figcaption { position: absolute; left: 7px; bottom: 7px; max-width: calc(100% - 14px); padding: 4px 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.68); border-radius: 999px; background: rgba(17, 38, 53, .70); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(10px); }
.wizard-device-card[data-image-kind="model"] .wizard-device-visual { border-color: color-mix(in srgb, var(--green) 54%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent); }
.setup-dialog .wizard-device-copy { align-content: start; gap: 7px; }
.wizard-device-title { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wizard-device-title > b { font-size: 16px; line-height: 1.18; }
.wizard-device-copy > strong { color: inherit; font-size: 13px; line-height: 1.35; }
.wizard-device-copy > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.46; }
.wizard-device-chips { display: flex !important; flex-wrap: wrap; gap: 5px; }
.wizard-device-chips > span { width: fit-content; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--card) 72%, transparent); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.1; }
.wizard-device-identity { color: color-mix(in srgb, var(--green) 78%, var(--ink)); font-weight: 800; }
.wizard-device-state { justify-self: start; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--line) 55%, transparent); color: var(--ink); font-size: 11px; font-weight: 800; }
.wizard-device-state.ok { background: color-mix(in srgb, var(--green) 20%, transparent); color: #1f8050; }
.wizard-device-state.warn { background: #fff3dd; color: #7a5312; }
.wizard-device-requirements { display: grid; gap: 3px; margin: 4px 0 0; padding-left: 16px; color: var(--muted); font-size: 12px; }

.wizard-dashboard-preview { display: grid; gap: 12px; margin-top: 12px; }
.wizard-preview-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.wizard-preview-tile {
  display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line);
  border-radius: 15px; background: color-mix(in srgb, var(--card) 88%, var(--green) 12%);
}
.wizard-preview-tile > img { width: 50px; height: 50px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.35); object-fit: contain; }
.wizard-preview-tile > div { display: grid; gap: 3px; min-width: 0; }
.wizard-preview-tile small { color: var(--muted); font-size: 12px; }
.wizard-preview-empty {
  display: grid; gap: 8px; justify-items: start; padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius: 18px; background: color-mix(in srgb, var(--card) 90%, transparent);
}
.wizard-preview-empty p { margin: 0; color: var(--muted); font-size: 13px; }

.wizard-catalog-details { margin-top: 20px; }
.wizard-catalog-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 750; }

/* Nulla eszközzel lezárt beállítás: a kezdőlap egyetlen művelettel folytatható. */
.dashboard-empty-state { grid-column: 1 / -1; }
/* Az üres kezdőlap kártya nem lap-szekció (a hidden-jét az eszközlista vezérli), ezért más lapon külön el kell rejteni. */
body:not([data-page="dashboard"]) .dashboard-empty-state { display: none !important; }
.dashboard-empty-state .actions { margin-top: 12px; }
.dashboard-empty-state .primary { width: auto; margin: 0; }

@media (max-width: 760px) {
  .wizard-scan-head, .wizard-list-head { align-items: stretch; flex-direction: column; }
  .wizard-scan-actions > button { flex: 1 1 auto; }
  .wizard-scan-steps > li { grid-template-columns: minmax(0, 1fr); }
  .wizard-discovery-hero { grid-template-columns: 58px minmax(0, 1fr); padding: 13px; border-radius: 19px; }
  .wizard-radar { width: 54px; }
  .setup-dialog .wizard-device-card { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; min-height: 128px; padding: 11px; border-radius: 19px; }
  .wizard-device-visual { min-height: 94px; border-radius: 15px; }
  .setup-dialog .wizard-device-visual img { width: 100%; height: 100%; min-height: 94px; }
  .wizard-device-title { display: grid !important; justify-items: start; }
  .wizard-device-copy > p { font-size: 11px; }
}

@media (max-width: 390px) {
  .setup-dialog .wizard-device-card { grid-template-columns: 74px minmax(0, 1fr); }
  .wizard-device-visual, .setup-dialog .wizard-device-visual img { min-height: 82px; }
  .wizard-device-visual figcaption { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-radar i { animation: none; opacity: .35; }
  .wizard-scan-meter::-webkit-progress-value { transition: none; }
}

/* Setup stays a content canvas; its header, progress and controls float.
 *
 * Ez a világos „Liquid Glass” vászon csak a klasszikus felületé. A next UI
 * varázslójának felületét, tintáját és lépésjelzőjét a `98_next_ui.css` adja a
 * `--next-*` tokenekből, mindkét színsémában: a két réteg keveredése sötét
 * témában világos sávot és világos tintát adott (S4-03). */
body:not([data-theme="contrast"]) .setup-dialog {
  --wizard-ink: #10243a;
  --wizard-muted: #4b6071;
  --wizard-surface: rgba(248, 252, 255, .76);
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 190, 70, .30), transparent 23rem),
    linear-gradient(145deg, var(--live-sky-a, #2f9be8), var(--live-sky-b, #b8f1e8)) !important;
  color: var(--wizard-ink) !important;
}

body:not([data-theme="contrast"]) .setup-dialog :is(.wizard-header, .wizard-progress, .wizard-actions) {
  background: var(--wizard-surface) !important;
  border-color: rgba(255, 255, 255, .58) !important;
  -webkit-backdrop-filter: blur(34px) saturate(155%);
  backdrop-filter: blur(34px) saturate(155%);
}

body:not([data-theme="contrast"]) .setup-dialog :is(.wizard-fullscreen-card, .wizard-callout, .wizard-remote-choices button) {
  background: var(--wizard-surface) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 #fff9, 0 12px 32px rgba(16, 47, 88, .13);
  color: var(--wizard-ink) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}

body:not([data-theme="contrast"]) .setup-dialog :is(.wizard-header h2, .wizard-step h3, .wizard-step h4, .wizard-kicker, label, b, strong, .wizard-step-label) { color: var(--wizard-ink) !important; }
body:not([data-theme="contrast"]) .setup-dialog :is(.wizard-header .muted, .wizard-step > p, .wizard-step .muted, .wizard-step .tapo-help, .wizard-fullscreen-card span, .wizard-fullscreen-card small, .wizard-remote-choices button span, .wizard-device-copy > p, .wizard-device-copy > small, .wizard-preview-tile small) { color: var(--wizard-muted) !important; }
body:not([data-theme="contrast"]) .setup-dialog :is(.wizard-network, .wizard-device-card, .wizard-preview-tile, .wizard-preview-empty, .wizard-scan-steps > li, .wizard-catalog-group) { background: var(--wizard-surface) !important; color: var(--wizard-ink) !important; }
body:not([data-theme="contrast"]) .setup-dialog .wizard-device-state { color: var(--wizard-ink) !important; }
body:not([data-theme="contrast"]) .setup-dialog .wizard-device-state.ok { color: #096642 !important; }
body:not([data-theme="contrast"]) .setup-dialog .wizard-device-state.warn { color: #744608 !important; }
body:not([data-theme="contrast"]) .setup-dialog .wizard-device-identity { color: #075f55 !important; }
body:not([data-theme="contrast"]) .wizard-progress i.current b { background: var(--lg-blue); border-color: var(--lg-blue); box-shadow: 0 0 0 5px rgba(49, 94, 232, .18); }
body:not([data-theme="contrast"]) .wizard-progress i.done b { background: rgba(36, 184, 215, .16); border-color: rgba(36, 184, 215, .55); color: #075b73; }

/* Mobile: a bottom Liquid Glass tab bar with a readable content layer. */
@media (max-width: 760px) {
  body:not([data-theme="contrast"]) .app > aside {
    min-height: 70px !important;
    margin: 0 !important;
    padding: max(13px, env(safe-area-inset-top)) 16px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not([data-theme="contrast"]) .brand {
    max-width: calc(100vw - 95px);
  }

  body:not([data-theme="contrast"]) main {
    padding: 14px max(13px, env(safe-area-inset-right)) calc(118px + env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left)) !important;
  }

  body:not([data-theme="contrast"]) .top {
    min-height: 0;
    margin-bottom: 15px;
    padding: 16px;
    border-radius: 23px;
  }

  body:not([data-theme="contrast"]) .top h1 {
    font-size: 27px;
  }

  body:not([data-theme="contrast"]) .panel {
    padding: 17px;
    border-radius: 22px !important;
  }

  body:not([data-theme="contrast"]) .nav {
    position: fixed !important;
    z-index: 1200 !important;
    inset: auto max(10px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: auto !important;
    min-height: 70px;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 27px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .09)),
      color-mix(in srgb, var(--lg-control) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(42px) saturate(180%) contrast(1.04) !important;
    backdrop-filter: blur(42px) saturate(180%) contrast(1.04) !important;
  }

  body:not([data-theme="contrast"]) .nav a,
  body:not([data-theme="contrast"]) .nav a:not(.active) {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 5px 2px !important;
    font-size: 10px !important;
    text-align: center;
  }

  body:not([data-theme="contrast"]) .nav a:hover {
    transform: none;
  }

  body:not([data-theme="contrast"]) .navglyph {
    margin: 0;
    font-size: 20px !important;
  }

  body:not([data-theme="contrast"]) .mobile-menu-panel {
    top: max(76px, calc(env(safe-area-inset-top) + 62px));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    border-radius: 24px;
  }

  body:not([data-theme="contrast"]) .weather-now {
    align-items: flex-start;
  }

  body:not([data-theme="contrast"]) .weather-now strong {
    font-size: 42px;
  }

  body:not([data-theme="contrast"]) .panel-head {
    min-width: 0;
    flex-wrap: wrap;
  }

  body:not([data-theme="contrast"]) :is(.solax-head-actions, .panel-actions) {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body:not([data-theme="contrast"]) .app > aside {
    margin: 10px 0 10px 10px;
    min-height: calc(100dvh - 20px);
  }
}

/* --- Beállítások kártyanézet ------------------------------------------- */

/* A Beállítások lap kártyarácsra nyílik: egy kártya egy funkció saját
   beállításait és kapcsolatát nyitja meg. A fejléc a rács első eleme marad
   akkor is, ha a megnyitott panel a DOM-ban előrébb áll — így a vissza gomb
   és a megnyitott funkció neve mindig a lap tetején van. */
body[data-page="settings"] #settingsHub { order: -1; }

.settings-card-grid {
  display: grid;
  gap: 16px;
}

/* Az arculat a csoportfejlécre teszi a saját jelét (`.skin-settings-glyph`),
   ezért a fejléc kétoszlopos: a jel balra, a név és a leírás mellé. Jel nélkül
   az első oszlop nulla széles, tehát a szöveg ugyanoda kerül. */
.settings-card-group > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1px 9px;
  margin: 0 0 8px;
}

.settings-card-group > header > .skin-settings-glyph {
  grid-row: 1 / span 2;
  align-self: center;
}

.settings-card-group > header b {
  grid-column: 2;
  font-size: .92rem;
}

.settings-card-group > header small {
  grid-column: 2;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.3;
}

.settings-card-row { align-items: stretch; }

/* A kártya a panel saját állapotjelzőjét is kiírja, ezért megnyitás nélkül
   látszik, melyik integráció nincs bekötve. Az ikon csak az első két sort
   fogja át, tehát az állapotcímke sorában az első oszlop üres maradt, a címke
   pedig a szűkebb szövegoszlopban kapott helyet: a „Beállítás szükséges” és a
   „HomeHub védett tárhely” így néhány képponton múlva levágódott. A teljes sor
   kihasználásával elfér. */
.settings-card-status {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--ink);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-card-icon { font-style: normal; }

/* Az arculatok `overflow-wrap: anywhere` szabálya a kártyanevet szó közepén
   törte el. A kártyanevek rövidek, ezért elég a szóhatáron törni. A kártya
   szövegoszlopánál hosszabb magyar összetett szót (`okoskonnektor`) a lap
   `lang="hu"` beállítása miatt az elválasztás szótaghatáron, kötőjellel
   tördeli — jelöletlen vágás helyett. */
.settings-card b {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

.settings-back {
  justify-self: start;
  margin: 0 0 6px;
}

/* Nyitott kártyánál a rács eltűnik; a fejléc a vissza gombbal és a megnyitott
   funkció nevével marad. */
#settingsHub[data-settings-view="detail"] #settingsCardGrid { display: none; }

@media (max-width: 760px) {
  .settings-card-grid { gap: 13px; }
  .settings-card-status { font-size: .62rem; }
}
/* A hat kötelező komponensállapot közös megjelenése.
 *
 * Egy felület, hat állapot, és mindegyik szövegben is elmondja magát: a
 * `.component-state-name` mindig ott van, akkor is, ha valaki nem látja a
 * színt vagy a jelet.  A szín csak megerősítés, és az arculat tokenjeiből
 * jön — ez a modul nem ismer egyetlen konkrét arculatot sem.
 */

.component-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-left: 3px solid var(--muted);
  border-radius: var(--skin-control-radius, 14px);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  color: var(--ink);
}

.component-state-glyph {
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  font-style: normal;
  line-height: 1;
}

.component-state-copy { display: grid; gap: 3px; min-width: 0; }

/* Ez a sor a jelentés hordozója. Nem díszítés, ezért nem is tüntethető el
   egy szűkebb nézetben. */
.component-state-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.component-state-title { font-size: 15px; overflow-wrap: anywhere; }
.component-state-body { font-size: 13.5px; overflow-wrap: anywhere; }
.component-state-next { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

.component-state-action {
  flex: 0 0 auto;
  align-self: center;
  min-height: 44px;
}

/* A betöltés helyben tartja a szerkezetet, és nem mutat kitalált értéket:
   két semleges sáv áll ott, ahol majd adat lesz. */
.component-state-skeleton { display: grid; gap: 6px; margin-top: 6px; }
.component-state-skeleton > i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
}
.component-state-skeleton > i:last-child { width: 58%; }

/* Az állapot színe a bal élen és a jelen jelenik meg — a szöveg mindig a
   normál tintát viseli, hogy olvasható maradjon. */
.component-state[data-component-state="offline"],
.component-state[data-component-state="partial"] { border-left-color: var(--lg-solar, var(--muted)); }
.component-state[data-component-state="error"] { border-left-color: var(--lg-danger, var(--muted)); }
.component-state[data-component-state="permission-denied"] { border-left-color: var(--lg-danger, var(--muted)); }
.component-state[data-component-state="empty"] { border-left-color: var(--skin-surface-accent, var(--green)); }

.component-state[data-component-state="error"] .component-state-name,
.component-state[data-component-state="permission-denied"] .component-state-name {
  color: var(--lg-danger-ink, var(--muted));
}
.component-state[data-component-state="offline"] .component-state-name,
.component-state[data-component-state="partial"] .component-state-name {
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  /* Rövid, egyszeri visszajelzés — nincs örök pulzálás. */
  .component-state { transition: border-color .15s ease; }
}

@media (max-width: 560px) {
  .component-state { flex-wrap: wrap; }
  .component-state-action { width: 100%; }
}

/* A felületválasztó a Megjelenés párbeszédben. A két lehetőség egyenrangú:
   az új felület nem „jobb”, csak másik — a visszakapcsolás ugyanolyan
   egyszerű, mint az odakapcsolás. */
.ui-mode-choices button { min-height: 44px; }
/* A párosítási képernyő. A lépés állapotát a szöveg mondja ki; a bal él
   színe csak megerősítés, és az arculat tokenjeiből jön. */

.pairing-plan { display: grid; gap: 12px; }

.pairing-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.pairing-answers {
  display: grid;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--skin-control-radius, 14px);
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 40%, transparent);
}

.pairing-answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

.pairing-answer > span { color: var(--muted); font-size: 13px; }
.pairing-answer > b { font-size: 13.5px; overflow-wrap: anywhere; }

.pairing-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.pairing-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-left: 3px solid var(--muted);
  border-radius: var(--skin-control-radius, 14px);
  background: color-mix(in srgb, var(--card) 62%, transparent);
}

.pairing-step-index {
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  font-size: 12px;
  font-weight: 700;
}

.pairing-step-copy { display: grid; gap: 2px; min-width: 0; }
.pairing-step-copy > b { font-size: 14px; overflow-wrap: anywhere; }
.pairing-step-copy > small { color: var(--muted); font-size: 12px; }

.pairing-step[data-pairing-step-state="running"] { border-left-color: var(--skin-surface-accent, var(--green)); }
.pairing-step[data-pairing-step-state="done"] { border-left-color: var(--lg-success-ink, var(--green)); }
.pairing-step[data-pairing-step-state="failed"] { border-left-color: var(--lg-danger-ink, var(--muted)); }

@media (max-width: 560px) {
  .pairing-answer { grid-template-columns: 1fr; gap: 3px; }
}

/* A felderítési kártyán ugyanaz a négy kérdés, szűkebb helyen. A szerkezet
   és a szótár közös a párosítással (`05_pairing_plan.js`); itt csak a
   kártyaméretre hangoljuk, saját komponens nélkül. */

.discovery-answers { margin-top: 10px; font-size: 12.5px; }

.discovery-answers .pairing-answer { padding: 8px 11px; gap: 10px; }
.discovery-answers .pairing-answer > span { font-size: 12px; }
.discovery-answers .pairing-answer > b { font-size: 12.5px; font-weight: 600; }

/* Keskeny kártyán a kérdés a válasz fölé kerül: egymás mellett mindkettő
   olvashatatlanul törne. */
@media (max-width: 700px) {
  .discovery-answers .pairing-answer { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Az alkalmazásváz.
 *
 * Az ugrópont a billentyűzetes használat része, nem feature.
 */

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--skin-control-radius, 14px);
  border: 1px solid var(--skin-surface-accent, var(--green));
  background: var(--lg-opaque, var(--card));
  font-weight: 700;
  text-decoration: none;
  /* Nem `display: none`: a képernyőolvasónak és a Tab-sorrendnek ott kell
     lennie. Csak látványban tűnik el, amíg nincs rajta a fókusz. */
  transform: translateY(calc(-100% - 16px));
  transition: transform .12s ease;
}

.skip-link:focus-visible,
.skip-link:focus { transform: translateY(0); }

/* A közös stíluslap minden `a:not(.primary)` elemre ráteszi a
   `--glass-accent` színt `!important`-tal, és a szelektora specifikusabb,
   mint egy sima osztály — az én `!important`-om ezért először veszített is.
   Az az érték a napszakvászonból származik, és ezen a saját, átlátszatlan
   felületen sötét tintát ad sötét háttérre: a böngészőben mérve
   olvashatatlan. Az ugrópont nem tartalmi hivatkozás, hanem a váz része,
   ezért az azonosítójával kap egyértelmű szabályt. */
#skipToContent { color: var(--ink) !important; }

/* -------------------------------------------------------------------------
 * Érintési célpontok, amiket a P05 napi-feladat végigjárása talált
 *
 * A `DESIGN_SYSTEM.md` 44 px-es preferált érintési felületet vállal. A P04.1
 * szelet a listából ismert vezérlőket javította; ezek az öntözés napi
 * feladatának végigjárásakor derültek ki, böngészőben mérve. Egyik sem
 * arculat- vagy felületfüggő, ezért nincs `data-ui` feltétel rajtuk: az
 * érintési célpont nem lehet annak a függvénye, ki melyik felületet
 * választja.
 * ---------------------------------------------------------------------- */

/* A lenyíló szakaszok fejléce 17 px magas volt. */
body :is(.panel, .dashboard, main) details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* A jelölőnégyzet tényleges célpontja a címke, nem a négyzet: 43,6 px volt. */
body label:is(.checkline, .recommendation-toggle) { min-height: 44px; }

/* A másodlagos gomb 42,7 px-en állt meg. */
body :is(button, a).secondary { min-height: 44px; }

/* A súgógombhoz itt NINCS szabály. A `41_contextual_help.css` már megoldja:
   a `::after` egy ±7 px-es, láthatatlan gyűrű, ami a ~30 px-es kört 44 px-es
   célponttá teszi — de szándékosan csak `(pointer: coarse)` alatt kap
   `pointer-events: auto` értéket, hogy egérrel ne lopjon el kattintást. A
   böngészős mérésem először hibát jelzett, mert finom mutatóval mértem, ahol
   ez a viselkedés helyes. Egy második mechanizmus csak ütközött volna vele. */

/* -------------------------------------------------------------------------
 * A kezdőlap rövid áttekintése (csak az új felületen)
 * ---------------------------------------------------------------------- */

.home-summary-host { margin: 0 0 14px; }

.home-summary[data-home-summary="ok"] {
  display: grid;
  gap: 2px;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-left: 3px solid var(--lg-success-ink, var(--skin-surface-accent, var(--green)));
  border-radius: var(--skin-control-radius, 14px);
  background: color-mix(in srgb, var(--card) 62%, transparent);
}

.home-summary-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-summary[data-home-summary="ok"] > b { font-size: 15px; }
.home-summary[data-home-summary="ok"] > span { font-size: 13px; color: var(--muted); }
/* Refrigerator: capability-driven controls without native prompt dialogs. */
.refrigerator-dashboard {
  grid-column: 1 / -1;
}

.refrigerator-status-body {
  margin-bottom: 18px;
}

#refrigeratorMetrics.refrigerator-metrics {
  display: grid !important;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.refrigerator-metrics .refrigerator-model-image {
  align-self: center;
  width: 104px;
  height: 108px;
  grid-row: auto;
}

.refrigerator-metrics > span {
  display: grid;
  align-content: center;
  min-height: 108px;
}

.refrigerator-metrics > span > b {
  margin: 0 0 5px;
  font-size: clamp(20px, 3vw, 30px);
}

.refrigerator-metrics > span > strong {
  color: var(--ink);
  font-size: 12px;
}

.refrigerator-metrics > span > small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.refrigerator-metrics .refrigerator-door.alert {
  border-color: color-mix(in srgb, var(--red) 58%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--card)) !important;
}

.refrigerator-metrics .refrigerator-door.alert b,
.refrigerator-metrics .refrigerator-door.alert small {
  color: var(--lg-danger-ink, var(--red));
}

.refrigerator-modes {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.refrigerator-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, var(--green) 8%);
  color: var(--muted);
  font-size: 11px;
}

.refrigerator-mode b {
  color: var(--ink);
}

.refrigerator-mode.active {
  border-color: color-mix(in srgb, var(--green) 48%, var(--line));
  background: color-mix(in srgb, var(--green) 13%, var(--card));
  color: var(--green);
}

.refrigerator-updated {
  color: var(--muted);
  font-size: 10px;
}

.refrigerator-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 20px 0 10px;
}

.refrigerator-section-head b,
.refrigerator-section-head small {
  display: block;
}

.refrigerator-section-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.refrigerator-controls {
  display: grid;
  gap: 9px;
}

.refrigerator-control {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, .9fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 92%, var(--green) 8%);
}

.refrigerator-control-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.refrigerator-control-copy > small {
  color: var(--green);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.refrigerator-control-copy > b {
  color: var(--ink);
  font-size: 14px;
}

.refrigerator-control-copy > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.refrigerator-control-input,
.refrigerator-range,
.refrigerator-input {
  min-width: 0;
}

.refrigerator-control-input select,
.refrigerator-input input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
}

.refrigerator-input {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.refrigerator-range > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
}

.refrigerator-range output {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}

.refrigerator-range input {
  width: 100%;
  margin: 9px 0 5px;
}

.refrigerator-range > small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}

.refrigerator-switch {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.refrigerator-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.refrigerator-switch > span {
  position: relative;
  width: 48px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, var(--card));
  transition: background .2s ease;
}

.refrigerator-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px #0003;
  transition: transform .2s ease;
}

.refrigerator-switch input:checked + span {
  background: var(--green);
}

.refrigerator-switch input:checked + span::after {
  transform: translateX(20px);
}

.refrigerator-switch input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--green) 36%, transparent);
  outline-offset: 2px;
}

.refrigerator-apply {
  min-width: 96px;
  min-height: 42px;
}

.refrigerator-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.refrigerator-details summary {
  padding: 13px 2px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.refrigerator-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.refrigerator-detail-grid > span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--card) 94%, var(--green) 6%);
}

.refrigerator-detail-grid small {
  color: var(--muted);
  font-size: 9px;
}

.refrigerator-detail-grid b {
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Browser mode offers a one-time, explicit path to the URL-bar-free PWA. */
.standalone-nudge {
  position: fixed;
  z-index: 2400;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(92px + env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: auto;
  padding: 11px 11px 11px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 38%, var(--line));
  border-radius: 18px;
  /* A `--card` maga is áttetsző, ezért a sáv korábban ~49%-os fedettséggel
     ült a tartalom fölött: a mögötte lévő szöveg átütött és összefolyt vele.
     Egy átlátszatlan alapréteg megtartja az üveg hatást, de olvasható marad. */
  background-color: var(--nudge-base, #f7fbf9);
  background-image: linear-gradient(
    color-mix(in srgb, var(--card) 94%, transparent),
    color-mix(in srgb, var(--card) 94%, transparent)
  );
  color: var(--ink);
  box-shadow: 0 16px 42px #071b2445;
}

body:is([data-theme="midnight"], [data-theme="graphite"], [data-theme="carbon"], [data-theme="botanic"], [data-theme="contrast"]) .standalone-nudge {
  --nudge-base: #10181d;
}

/* Amíg a sáv látszik, a lap alján legyen hely: különben eltakarja az
   utolsó kártyát. */
body.standalone-nudge-visible main {
  padding-bottom: calc(178px + max(0px, var(--standalone-nudge-h, 68px) - 68px) + env(safe-area-inset-bottom)) !important;
}

.standalone-nudge[hidden] {
  display: none !important;
}

.standalone-nudge > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
}

.standalone-nudge b,
.standalone-nudge small {
  display: block;
}

.standalone-nudge small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.standalone-nudge .primary {
  width: auto;
  min-height: 40px;
  margin: 0;
}

/* A gomb egyik közös vezérlőosztályt sem viseli (`.primary`/`.secondary`),
   ezért a kerekítést a böngésző alapértelmezéséről kapta: éles sarkú, szürke
   négyzetként ült a lekerekített üvegsávban a lekerekített „Beállítás” gomb
   mellett. A háttér és a keret a `60_accessibility_responsive.css`-ből jön. */
.standalone-dismiss {
  min-width: 36px;
  min-height: 40px;
  border-radius: var(--lg-control-radius, 14px);
  color: var(--muted);
  font-size: 21px;
}

.standalone-guide {
  width: min(600px, calc(100% - 24px));
  max-height: min(88dvh, 760px);
  overflow: auto;
  background: var(--card);
  color: var(--ink);
}

.standalone-guide::backdrop {
  background: rgba(4, 17, 23, .76);
}

.standalone-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
}

.standalone-guide .panel-head {
  align-items: flex-start;
}

.standalone-guide .panel-head h2,
.standalone-guide .panel-head p {
  margin: 0;
}

.standalone-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--green) 9%, var(--card));
}

.standalone-benefit > span {
  font-size: 26px;
}

.standalone-benefit b,
.standalone-benefit small {
  display: block;
}

.standalone-benefit small {
  margin-top: 3px;
  color: var(--muted);
}

.standalone-guide ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: standalone-step;
}

.standalone-guide li {
  counter-increment: standalone-step;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.standalone-guide li::before {
  content: counter(standalone-step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 850;
}

.standalone-guide li b,
.standalone-guide li span {
  display: block;
}

.standalone-guide li span {
  color: var(--muted);
  font-size: 11px;
}

.standalone-guide .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.standalone-guide .dialog-actions .primary {
  width: auto;
  margin: 0;
}

body[data-display-mode="standalone"] .install-hint {
  display: none !important;
}

@media (max-width: 760px) {
  #refrigeratorMetrics.refrigerator-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .refrigerator-metrics .refrigerator-model-image {
    width: 76px;
    height: 86px;
  }

  .refrigerator-metrics > span {
    min-height: 86px;
  }

  .refrigerator-control {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .refrigerator-apply {
    width: 100%;
  }

  .refrigerator-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .standalone-nudge {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .standalone-nudge > div small {
    display: none;
  }

  .standalone-guide {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .standalone-guide .dialog-actions {
    position: sticky;
    bottom: calc(-18px - env(safe-area-inset-bottom));
    margin: 18px -16px calc(-18px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
  }

  .standalone-guide .dialog-actions > * {
    flex: 1 1 120px;
    min-height: 46px;
  }
}

@media (max-width: 420px) {
  #refrigeratorMetrics.refrigerator-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .refrigerator-metrics .refrigerator-model-image {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .standalone-nudge {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .standalone-nudge > span {
    display: none;
  }

  .standalone-nudge .standalone-dismiss {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@keyframes lg-card-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes lg-icon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}

@keyframes lg-button-shine {
  0%, 72% { left: -65%; opacity: 0; }
  78% { opacity: .8; }
  92%, 100% { left: 125%; opacity: 0; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:not([data-theme="contrast"]) :is(.panel, .top, .nav, .app > aside, dialog, .mobile-menu-panel) {
    background-color: var(--lg-opaque) !important;
    background-image: linear-gradient(
      color-mix(in srgb, var(--lg-card-strong) 94%, transparent),
      color-mix(in srgb, var(--lg-card-strong) 94%, transparent)
    ) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body:not([data-theme="contrast"]) :is(.panel, .top, .nav, .app > aside, dialog, .mobile-menu-panel) {
    background-color: var(--lg-opaque) !important;
    background-image: linear-gradient(
      color-mix(in srgb, var(--lg-card-strong) 94%, transparent),
      color-mix(in srgb, var(--lg-card-strong) 94%, transparent)
    ) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =========================================================================
 * Mobil gyorscsempék
 *
 * A kezdőlap teljes dashboard-paneljei telefonon túl hosszú, egyoszlopos
 * folyamot alkottak. A dedikált előlap két fontos élő értéket mutat; a panel
 * többi része csak a részletes dialógusban jelenik meg. A szelektor közvetlen
 * `.dashboard >` leszármazott, ezért a dialógusba áthelyezett teljes panelt
 * sem magasság, sem overflow nem vágja le.
 * ====================================================================== */
.mobile-card-summary { display: none; }

@media (max-width: 760px) {

  .mobile-card-summary.has-mobile-card-action {
    grid-template-rows: minmax(0, 1fr) 44px;
  }

  .mobile-card-open,
  .mobile-card-action {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--skin-surface-ink, var(--ink));
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-card-open {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    text-align: left;
  }

  .mobile-card-open:focus-visible,
  .mobile-card-action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--skin-surface-accent, var(--green)) 82%, white);
    outline-offset: -4px;
  }

  .mobile-card-open:active { transform: scale(.982); }

  .mobile-card-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .mobile-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--skin-card-edge, var(--line));
    border-radius: 11px;
    background: var(--skin-card-surface, color-mix(in srgb, var(--card) 78%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 19px;
    line-height: 1;
  }

  .mobile-card-heading {
    display: grid;
    align-content: center;
    gap: 1px;
    min-width: 0;
  }

  .mobile-card-title,
  [data-mobile-card-status],
  .mobile-card-fact :is(small, strong) {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-card-title {
    color: var(--skin-surface-ink, var(--ink)) !important;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 850;
    line-height: 1.12;
    /* A rövid magyar eszköznevek se váljanak levágott címkévé a kétoszlopos
       telefonos rácson. A fejlécnek van helye két sorra, ezért itt a tördelés
       informatívabb, mint az ellipszis. */
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  [data-mobile-card-status] {
    color: var(--skin-surface-muted, var(--muted)) !important;
    font-size: clamp(8px, 2.35vw, 10px);
    font-weight: 700;
    line-height: 1.18;
  }

  .mobile-card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    gap: 5px;
    min-width: 0;
    min-height: 0;
  }

  .mobile-card-fact {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    padding: 5px 6px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--skin-card-edge, var(--line)) 70%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--skin-card-surface, var(--card)) 52%, transparent);
  }

  .mobile-card-fact small {
    color: var(--skin-surface-muted, var(--muted)) !important;
    font-size: clamp(8px, 2.2vw, 9.5px);
    font-weight: 750;
    line-height: 1.1;
  }

  .mobile-card-fact strong {
    color: var(--skin-surface-ink, var(--ink)) !important;
    font-size: clamp(12px, 3.5vw, 15px);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -.015em;
  }

  .mobile-card-summary:not(.has-mobile-card-action) .mobile-card-fact :is(small, strong) {
    display: -webkit-box;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mobile-card-turn {
    display: grid;
    place-items: center;
    width: 18px;
    height: 24px;
    border-radius: 999px;
    color: var(--skin-surface-muted, var(--muted)) !important;
    font-size: 20px;
    line-height: 1;
  }

  .mobile-card-action {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border-top: 1px solid color-mix(in srgb, var(--skin-card-edge, var(--line)) 74%, transparent);
    border-radius: 0 0 inherit inherit;
    color: var(--skin-surface-ink, var(--ink)) !important;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
  }

  .mobile-card-action[hidden] { display: none !important; }
  .mobile-card-action:disabled { cursor: not-allowed; opacity: .52; }
  .mobile-card-action:not(:disabled):active { background: color-mix(in srgb, var(--skin-card-surface, var(--card)) 70%, transparent); }

  .mobile-card-action-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-card-toggle-track {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 22px;
    border: 1px solid color-mix(in srgb, var(--skin-card-edge, var(--line)) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--skin-surface-muted, var(--muted)) 26%, transparent);
    transition: background .18s ease, border-color .18s ease;
  }

  .mobile-card-toggle-track i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, white 90%, var(--skin-surface-ink, var(--ink)) 10%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    transition: transform .18s ease;
  }

  .mobile-card-action.is-on .mobile-card-toggle-track {
    border-color: color-mix(in srgb, #24b87b 72%, var(--skin-card-edge, var(--line)));
    background: color-mix(in srgb, #24b87b 72%, transparent);
  }

  .mobile-card-action.is-on .mobile-card-toggle-track i { transform: translateX(16px); }

  .mobile-card-action-icon {
    display: none;
    margin-left: auto;
    font-size: 23px;
    line-height: 1;
  }

  .mobile-card-action[data-mobile-card-action-kind="button"] .mobile-card-toggle-track { display: none; }
  .mobile-card-action[data-mobile-card-action-kind="button"] .mobile-card-action-icon { display: block; }

  .mobile-card-summary[data-mobile-card-state="ok"] .mobile-card-icon {
    border-color: color-mix(in srgb, #24b87b 58%, var(--skin-card-edge, var(--line)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 0 3px rgba(36, 184, 123, .10);
  }

  .mobile-card-summary[data-mobile-card-state="bad"] .mobile-card-icon {
    border-color: color-mix(in srgb, var(--red, #c74747) 68%, var(--skin-card-edge, var(--line)));
  }

  body.card-detail-animating .card-detail-shell {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform-style: preserve-3d;
  }

  #cardDetailStage .mobile-card-summary { display: none !important; }
}

@media (max-width: 360px) {
  .mobile-card-open { gap: 5px; padding: 8px; }
  .mobile-card-head { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 6px; }
  .mobile-card-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 17px; }
  .mobile-card-facts { gap: 4px; }
  .mobile-card-fact { padding: 4px; border-radius: 8px; }
  .mobile-card-action { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-card-summary,
  .mobile-card-open,
  .mobile-card-action,
  .mobile-card-toggle-track,
  .mobile-card-toggle-track i { transition: none !important; }
  .mobile-card-open:active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-theme="contrast"]) :is(.panel, .card-glyph, .primary::before) {
    animation: none !important;
  }

  body:not([data-theme="contrast"]) :is(.panel, button, .nav a, .brand) {
    transition-duration: .01ms !important;
  }
}

/* iOS és kis érintőkijelző: az aszinkron görgetést ne fogja vissza
   képernyőnyi fixed-gradient, egymásba ágyazott blur és sok animált réteg. */
@media (max-width: 760px) {
  html body[data-render-mode="efficient"] {
    transition: color .2s ease !important;
  }

  html body[data-render-mode="efficient"] :is(
    .panel,
    .top,
    .nav,
    .mobile-menu-panel,
    .display-dialog,
    .card-detail-shell,
    .camera-dialog,
    .setup-dialog,
    .access-invite-dialog,
    .secondary,
    .smallbtn,
    .display-button,
    input,
    select,
    textarea,
    .segmented
  ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body[data-render-mode="efficient"] :is(
    .panel, .top, .nav, .mobile-menu-panel, .card-detail-shell,
    .display-dialog, .camera-dialog, .setup-dialog, .access-invite-dialog
  ) {
    background-color: var(--lg-opaque) !important;
    background-image: linear-gradient(
      color-mix(in srgb, var(--lg-card-strong) 94%, transparent),
      color-mix(in srgb, var(--lg-card-strong) 94%, transparent)
    ) !important;
  }

  html body[data-render-mode="efficient"] :is(
    .panel,
    .card-glyph,
    .primary::before,
    .time-stars i,
    .time-sun,
    .time-moon,
    .ambient-weather *,
    .weather-icon,
    .header-weather b
  ) {
    animation: none !important;
  }

  html body[data-render-mode="efficient"] :is(.ambient-particles, .wind-line, .cloud-two) {
    display: none !important;
  }

  html body[data-render-mode="efficient"] .camera-dialog-actions {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  html body[data-render-mode="efficient"] .camera-dialog-actions :is(.secondary, .primary) {
    min-height: 48px;
    min-width: 0;
    padding-inline: 8px;
  }
}
/* =========================================================================
 * 0.13 · Lapos témák: Papír, Északi, Karbon
 *
 * Ugyanazt a szerkezetet használják, mint az üveg témák, de a felületek
 * átlátszatlanok és nincs `backdrop-filter`. Ettől letisztultabbak, és
 * lényegesen kevesebbet dolgozik a GPU – a szervertelefonon és a régebbi
 * táblagépeken ez a leggyorsabb megjelenítés.
 * ====================================================================== */
body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) {
  --lg-blur: 0px;
  --lg-radius: 18px;
  --lg-control-radius: 12px;
  --green: var(--flat-accent);
  --green-soft: color-mix(in srgb, var(--flat-accent) 12%, transparent);
  --bg: var(--flat-bg);
  --card: var(--flat-card);
  --ink: var(--flat-ink);
  --muted: var(--flat-muted);
  --line: var(--flat-line);
  --glass-ink: var(--flat-ink);
  --glass-muted: var(--flat-muted);
  --glass-accent: var(--flat-accent);
  --lg-card: var(--flat-card);
  --lg-card-strong: var(--flat-card);
  --lg-control: var(--flat-control);
  --lg-edge: var(--flat-line);
  --lg-edge-soft: var(--flat-line);
  --lg-shadow: var(--flat-shadow);
  --lg-inner-shadow: transparent;
  --lg-opaque: var(--flat-card);
  background: var(--flat-bg) !important;
}

body[data-theme="paper"] {
  /* Meleg, papírszerű világos felület. */
  --flat-bg: #f2efe9;
  --flat-card: #ffffff;
  --flat-control: #f6f4ef;
  --flat-ink: #1f2422;
  --flat-muted: #6b7370;
  --flat-line: #e2ddd3;
  --flat-accent: #2f7d55;
  --flat-shadow: rgba(41, 37, 28, .10);
}

body[data-theme="nordic"] {
  /* Hűvös, skandináv világosszürke. */
  --flat-bg: #eef1f5;
  --flat-card: #ffffff;
  --flat-control: #f4f6f9;
  --flat-ink: #101822;
  --flat-muted: #5b6675;
  --flat-line: #dde3ea;
  --flat-accent: #2f6bd8;
  --flat-shadow: rgba(16, 33, 56, .10);
}

body[data-theme="carbon"] {
  /* Mély, semleges sötét – OLED-barát, éjszakára. */
  --flat-bg: #0b0d10;
  --flat-card: #15191e;
  --flat-control: #1c2128;
  --flat-ink: #eef2f7;
  --flat-muted: #97a3b0;
  --flat-line: #262c34;
  --flat-accent: #4d9bff;
  --flat-shadow: rgba(0, 0, 0, .55);
}

/* Minden felület átlátszatlan, elmosás nélkül. */
body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) :is(
  .panel,
  .top,
  .nav,
  .app > aside,
  .mobile-menu-panel,
  dialog,
  .card-detail-shell,
  .standalone-nudge
) {
  background-color: var(--flat-card) !important;
  background-image: none !important;
  border: 1px solid var(--flat-line) !important;
  box-shadow: 0 1px 2px var(--flat-shadow), 0 8px 24px var(--flat-shadow) !important;
  color: var(--flat-ink) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) main {
  background: none !important;
}

body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) :is(
  .secondary,
  .smallbtn,
  .display-button,
  input,
  select,
  textarea,
  .choice-grid button,
  .segmented,
  .duration-box,
  .consumption,
  .settings-categories button
) {
  background-color: var(--flat-control) !important;
  background-image: none !important;
  border: 1px solid var(--flat-line) !important;
  box-shadow: none !important;
  color: var(--flat-ink) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) :is(
  .primary,
  .choice-grid button.selected,
  .segmented button.selected,
  .settings-categories button.selected,
  .display-button.selected
) {
  background-color: var(--flat-accent) !important;
  background-image: none !important;
  border-color: var(--flat-accent) !important;
  color: #fff !important;
}

/* A kiválasztott gomb másodlagos sora is a kiemelt háttéren ül: sötét
   szöveggel olvashatatlan lenne. */
body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) :is(
  .primary,
  .choice-grid button.selected,
  .segmented button.selected,
  .settings-categories button.selected,
  .display-button.selected
) :is(small, span, b, i) {
  color: rgba(255, 255, 255, .82) !important;
}

/* A letisztult témákhoz nem tartozik animált égbolt és lebegő részecske.
   A `.weather-scene` világos színátmenete eddig kimaradt a listából, ezért az
   időjárás-kártya a sötét témákban is világos foltként ült a felületen. */
body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) :is(
  .time-sky,
  .ambient-weather,
  .time-stars,
  .ambient-particles,
  .weather-scene
) {
  display: none !important;
}

body:is([data-theme="paper"], [data-theme="nordic"], [data-theme="carbon"],
  [data-theme="neon"], [data-theme="sunset"]) :is(
  .panel,
  .card-glyph,
  .primary::before
) {
  animation: none !important;
}

/* A világos témákra tervezett, beégetett halvány „chipek” a Karbon témában
   világos foltként ütnének el, sötét szöveggel vagy sötét háttéren világos
   szöveggel. Itt kapják meg a sötét párjukat. */
body:is([data-theme="carbon"], [data-theme="neon"]) :is(
  .header-weather,
  .log-kind,
  .detail-data-grid > div,
  .detail-explanation,
  .balance-grid > div,
  .device-status-metrics > span,
  .greenhess-accounting,
  .accounting-difference strong,
  .one-time-secret,
  .invite-replacement,
  .invite-error,
  .tailscale-diagnostics > div,
  .weather-icon,
  .solar-node,
  .solax-metrics > div,
  .phase-grid > div,
  .energy-metric,
  .energy-chart,
  .solax-chart,
  .solax-details,
  .update-safety,
  .device-icon,
  .topic-box,
  .notification,
  .schedule,
  .file-entry,
  .credential,
  .days label,
  .mower-discovery,
  .recommendation-preview,
  .guide-card,
  [class*="role-badge"]
) {
  background: var(--flat-control) !important;
  border-color: var(--flat-line) !important;
  color: var(--flat-ink) !important;
}

body:is([data-theme="carbon"], [data-theme="neon"]) :is(.recommendation-copy, .tapo-help, .panel-subtitle, .muted) {
  color: var(--flat-muted) !important;
}

body:is([data-theme="carbon"], [data-theme="neon"]) :is(.notification.warn, .invite-replacement, .accounting-difference strong) {
  border-color: color-mix(in srgb, var(--lg-solar) 45%, var(--flat-line)) !important;
}

body:is([data-theme="carbon"], [data-theme="neon"]) :is(.notification.bad, .invite-error, .emergency-box, .file-trash, .smallbtn.delete, .danger) {
  background: color-mix(in srgb, var(--lg-danger) 16%, var(--flat-control)) !important;
  border-color: color-mix(in srgb, var(--lg-danger) 42%, var(--flat-line)) !important;
  color: var(--flat-ink) !important;
}

/* =========================================================================
 * Érintőméretek telefonon. A lenyíló `summary` sorok 17 px magasak voltak, a
 * súgó- és jelölőnégyzet-területek 18–32 px: ezek ujjal alig találhatók el.
 * A minimum 44 px az Apple és a Google által is ajánlott érintőméret.
 * ====================================================================== */
@media (max-width: 760px) {
  main summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }

  main input[type="range"] {
    /* 40 px volt, telefonon is — pedig épp ott számít a legtöbbet. A
       DESIGN_SYSTEM.md 44 px-et vállal, és ezt a P05 napi-feladat
       végigjárása mérte ki az öntözés időtartam-csúszkáján. */
    min-height: 44px !important;
  }

  main label:has(> input[type="checkbox"]),
  main label:has(> input[type="radio"]),
  main .checkline,
  main .notify-options label {
    min-height: 44px;
  }

  main :is(input[type="checkbox"], input[type="radio"]) {
    width: 22px;
    height: 22px;
    flex: none;
  }

}

/* =========================================================================
 * 0.14.1 · Három új külső: Neon terminál, Naplemente, Botanikus
 *
 * Nem csak színcsere: mindhárom más formanyelvet visz.
 *   · Neon terminál – éles sarkok, vékony világító kontúr, sötét vezérlőpult.
 *   · Naplemente – meleg papírszín, nagy lekerekítés, keret helyett lágy árnyék.
 *   · Botanikus – megtartja a folyékony üveget, de mély kerti zöldben.
 * A Neon és a Naplemente a lapos témák gépezetére ül (nincs `backdrop-filter`,
 * ezért a szervertelefonon is olcsó), a Botanikus a sötét üveg tokenkészletre.
 * ====================================================================== */
body[data-theme="neon"] {
  --flat-bg: #05080b;
  --flat-card: #0a1015;
  --flat-control: #101a20;
  --flat-ink: #dff9f0;
  --flat-muted: #74968f;
  --flat-line: #1b3b39;
  --flat-accent: #00e2a0;
  --flat-shadow: rgba(0, 0, 0, .66);
  --lg-radius: 7px;
  --lg-control-radius: 5px;
}

/* Vezérlőpult-érzet: éles sarkok és egyetlen halvány fénycsík a kontúron. */
body[data-theme="neon"] :is(
  .panel,
  .top,
  .nav,
  .app > aside,
  .mobile-menu-panel,
  dialog,
  .card-detail-shell
) {
  border-radius: 7px !important;
  border-color: color-mix(in srgb, var(--flat-accent) 26%, var(--flat-line)) !important;
  box-shadow: 0 0 0 1px rgba(0, 226, 160, .06), 0 10px 30px var(--flat-shadow) !important;
}

body[data-theme="neon"] :is(.secondary, .smallbtn, .primary, input, select, textarea, .segmented, .choice-grid button) {
  border-radius: 5px !important;
  letter-spacing: .02em;
}

body[data-theme="neon"] :is(.status, .camera-live, .log-kind, [class*="role-badge"], .header-weather) {
  border-radius: 3px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* A mérőszámok fix szélességű számjegyekkel nem ugrálnak frissítéskor. */
body[data-theme="neon"] :is(.metric b, .energy-metric b, .solax-metrics b, .balance-grid b, output, .device-status-metrics b) {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

body[data-theme="neon"] .primary {
  color: #04140f !important;
  text-shadow: none;
}

body[data-theme="sunset"] {
  --flat-bg: #fdf2e6;
  --flat-card: #fffaf4;
  --flat-control: #f8ecdf;
  --flat-ink: #3b2a1f;
  --flat-muted: #8d7466;
  --flat-line: #f0dfcc;
  --flat-accent: #cf5f2b;
  --flat-shadow: rgba(120, 74, 38, .14);
  --lg-radius: 26px;
  --lg-control-radius: 18px;
}

/* Keret helyett lágy árnyék: a kártyák inkább lebegnek, mint dobozolnak. */
body[data-theme="sunset"] :is(
  .panel,
  .top,
  .nav,
  .app > aside,
  .mobile-menu-panel,
  dialog,
  .card-detail-shell
) {
  border-radius: 26px !important;
  border-color: transparent !important;
  box-shadow: 0 2px 4px var(--flat-shadow), 0 18px 44px var(--flat-shadow) !important;
}

body[data-theme="sunset"] :is(.secondary, .smallbtn, .primary, input, select, textarea, .segmented, .choice-grid button, .duration-box) {
  border-radius: 18px !important;
  border-color: transparent !important;
}

/* A jelölőnégyzet és a rádiógomb keret nélkül eltűnne a meleg papírszínből. */
body[data-theme="sunset"] :is(input[type="checkbox"], input[type="radio"]) {
  border-radius: 6px !important;
  border-color: color-mix(in srgb, var(--flat-accent) 45%, var(--flat-line)) !important;
}

body[data-theme="sunset"] input[type="radio"] { border-radius: 50% !important; }

body[data-theme="sunset"] :is(.camera-preview, .weather-icon, .device-icon, .energy-chart, .solax-chart) {
  border-radius: 20px !important;
}

body[data-theme="sunset"] :is(h1, h2, .metric b, .energy-metric b) { letter-spacing: -.012em; }

body[data-theme="botanic"] {
  --lg-blue: #4fbf7f;
  --lg-cyan: #8fe0a8;
  --glass-ink: #f1fbf2;
  --glass-muted: #b4d3ba;
  --glass-accent: #b9edc2;
  /* Az index.html saját üveg-tokenkészletet is használ; enélkül a kártyák
     világos üvegként maradnának a sötétzöld háttéren. */
  --glass-surface: rgba(13, 39, 26, .58);
  --glass-strong: rgba(18, 48, 33, .74);
  --glass-edge: rgba(190, 236, 200, .26);
  --glass-shadow: rgba(2, 17, 9, .48);
  --lg-card: rgba(13, 39, 26, .58);
  --lg-card-strong: rgba(18, 48, 33, .74);
  --lg-control: rgba(233, 255, 238, .10);
  --lg-edge: rgba(190, 236, 200, .26);
  --lg-edge-soft: rgba(190, 236, 200, .15);
  --lg-shadow: rgba(2, 17, 9, .48);
  --lg-inner-shadow: rgba(233, 255, 238, .14);
  --lg-opaque: #12301f;
  --bg: #071710;
  --card: rgba(13, 39, 26, .58);
  --ink: #f1fbf2;
  --muted: #b4d3ba;
  --line: rgba(190, 236, 200, .26);
  --green: #6cd394;
  --green-soft: rgba(108, 211, 148, .14);
}

/* Kerti mélyzöld: a nap felőli sarok melegebb, hogy ne legyen lapos a felület. */
html body[data-theme="botanic"],
html body[data-theme="botanic"] .app {
  background:
    radial-gradient(120% 90% at 82% 0%, #1d5136 0%, transparent 58%),
    radial-gradient(120% 110% at 0% 100%, #0c2b1c 0%, transparent 62%),
    #071710 !important;
  background-attachment: fixed !important;
}

/* A napszakos égboltot a saját háttér váltja ki; a kék réteg itt hamis lenne. */
body[data-theme="botanic"] :is(.time-sky, .time-stars, .ambient-weather, .weather-scene) {
  display: none !important;
}

/* Az index.html beégetett `#3e6750` javaslatszövege sötétzöld kártyán 2,5:1
   kontrasztot adott. A világos témákra szabott, beégetett halvány színek itt
   kapják meg a sötét párjukat. */
body[data-theme="botanic"] :is(.recommendation-copy, .tapo-help, .panel-subtitle, .muted, .tv-limit, .camera-status) {
  color: var(--glass-muted) !important;
}

body[data-theme="botanic"] :is(
  .recommendation,
  .guide-card,
  .notification,
  .schedule,
  .device-card,
  .topic-box,
  .energy-metric,
  .energy-chart,
  .solax-chart,
  .solax-details,
  .detail-data-grid > div,
  .detail-explanation,
  .balance-grid > div,
  .device-status-metrics > span,
  .weather-icon,
  .device-icon,
  .days label,
  .credential,
  .file-entry,
  .mower-discovery,
  .recommendation-preview,
  [class*="role-badge"]
) {
  background: var(--lg-control) !important;
  background-image: none !important;
  border-color: var(--lg-edge-soft) !important;
  color: var(--glass-ink) !important;
}

/* A rézszín csak a kiemelt műveleten jelenik meg, hogy legyen egy meleg pont. */
body[data-theme="botanic"] .primary:not(.stop) {
  background: linear-gradient(125deg, #b96a35, #c98346 48%, #d99a5c) !important;
  border-color: rgba(255, 226, 200, .38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, .34), 0 12px 28px rgba(60, 30, 10, .38) !important;
  color: #fff8f1 !important;
  text-shadow: none;
}

/* =========================================================================
 * 0.14.1 · Dashboard kamerarács
 *
 * A kártyán egytől négy kamerakép fér el. A csempék száma és a bennük látható
 * kamera a böngészőben marad, ezért két eszközön eltérő lehet – ez szándékos:
 * a falitáblán más kép kell, mint a telefonon.
 * ====================================================================== */
.dashboard-camera-tiles {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  grid-template-columns: 1fr;
}

.dashboard-camera-tiles[data-tiles="2"],
.dashboard-camera-tiles[data-tiles="3"],
.dashboard-camera-tiles[data-tiles="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-camera-tile {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.dashboard-camera-tile .camera-preview { cursor: zoom-in; }

.dashboard-camera-tile figcaption {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-camera-tile figcaption b,
.dashboard-camera-tile figcaption small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
}

.dashboard-camera-tile figcaption small { color: var(--muted); font-size: .64rem; }

/* A csempénkénti kameraváltó csak a képen ül, hogy ne foglaljon külön sort. */
.camera-tile-switch {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}

.camera-tile-switch .smallbtn {
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
}

@media (pointer: coarse), (max-width: 760px) {
  .camera-tile-switch .smallbtn { min-width: 40px; min-height: 40px; }
}

/* Egy csempénél a régi, szélesebb arány marad; többnél 16:9 fér el jobban. */
.dashboard-camera-tiles:not([data-tiles="1"]) .dashboard-camera-preview {
  aspect-ratio: 16 / 9;
}

@media (max-width: 520px) {
  .dashboard-camera-tiles[data-tiles="2"],
  .dashboard-camera-tiles[data-tiles="3"],
  .dashboard-camera-tiles[data-tiles="4"] {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
 * 0.14.1 · Súgóbuborék önálló rétegben
 *
 * A buborék korábban a súgókör `::after` pszeudó-eleme volt, és három helyen
 * ütközött önmagával:
 *   1. a kártyák `overflow`-ja és `backdrop-filter`-e levágta vagy saját
 *      befoglaló dobozzá tette, ezért telefonon elcsúszva jelent meg;
 *   2. az `index.html` három külön `@media` blokkja egymásnak ellentmondó
 *      `left/right/position` értéket adott ugyanannak a dobozhoz;
 *   3. az érintőfelületet növelő szabály ugyanezt a pszeudó-elemet írta felül
 *      `content: ""`-tal, ezért telefonon üres doboz jelent meg szöveg helyett.
 * A szöveg mostantól egyetlen, a `body`-ra akasztott rétegben van, amit a
 * `82_events_*.js` fragmentumok pozicionálják. Itt csak a régi buborékot
 * semlegesítjük, és a
 * pszeudó-elem visszakapja az eredeti feladatát: nagyobb érintőfelület.
 * ====================================================================== */
.info-tip::after,
.info-tip:is(:hover, :focus, :focus-visible, .open)::after {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  bottom: -7px !important;
  left: -7px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  translate: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none;
  z-index: 0 !important;
}

/* Ujjal a 30 px-es kör kicsi; a láthatatlan gyűrűvel 44 px lesz a találati
   felület. Egérrel nem kap extra területet, hogy ne lopjon el kattintást. */
@media (pointer: coarse) {
  .info-tip::after,
  .info-tip:is(:hover, :focus, :focus-visible, .open)::after {
    pointer-events: auto;
  }
}

/* A nyíl a rétegen van, a súgókörön nem kell. */
.info-tip::before,
.info-tip:is(:hover, :focus, :focus-visible, .open)::before {
  content: none !important;
  display: none !important;
}

.info-tip-layer {
  position: fixed;
  z-index: 2147483000;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  background: #102d25;
  color: #fff;
  font: 400 13px/1.42 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 14px 40px rgba(4, 16, 12, .46);
  pointer-events: none;
  animation: info-tip-in .16s cubic-bezier(.2, .72, .2, 1);
}

.info-tip-layer .info-tip-body {
  max-height: min(52dvh, 360px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 11px 13px;
  border-radius: inherit;
  pointer-events: auto;
}

.info-tip-layer[hidden] { display: none !important; }

/* A nyíl vízszintes helyét a JS adja, hogy pontosan a súgókörre mutasson. */
.info-tip-layer::after {
  content: "";
  position: absolute;
  left: var(--info-tip-arrow, 50%);
  bottom: -5px;
  width: 10px;
  height: 10px;
  translate: -50% 0;
  rotate: 45deg;
  background: #102d25;
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.info-tip-layer.tip-below::after {
  top: -5px;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Ha a buborék nem fért el sem fölé, sem alá, nem mutat sehova: a hazug
   nyíl helyett inkább nincs nyíl. */
.info-tip-layer.no-arrow::after { display: none; }

@keyframes info-tip-in {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .info-tip-layer { animation: none; }
}

body[data-theme="contrast"] .info-tip-layer {
  background: #000;
  color: #fff;
  border: 2px solid #fff;
}

body[data-theme="contrast"] .info-tip-layer::after {
  background: #000;
  border-color: #fff;
}

/* =========================================================================
 * 0.11 · Otthon lap (Home Assistant entitások)
 * A meglévő Liquid Glass tokenekre épül, hogy minden témában együtt mozogjon
 * a többi panellel. Saját színt csak az állapotsávhoz vezet be.
 * ====================================================================== */

.ha-panel { display: grid; gap: 14px; grid-column: 1 / -1; align-content: start; }
.ha-panel .panel-subtitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ha-panel .panel-actions { flex: 0 0 auto; }
.ha-panel #haState { white-space: nowrap; }
.ha-badge {
  font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--lg-solar) 26%, transparent);
  color: color-mix(in srgb, var(--glass-ink, var(--ink)) 78%, var(--lg-solar) 22%);
}
.ha-search { display: block; }
.ha-search input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: var(--lg-control-radius, 14px);
  background: var(--lg-control, var(--card));
  color: inherit; font: inherit;
}
.ha-search input::placeholder { color: var(--glass-muted, var(--muted)); }

.ha-stage { display: grid; gap: 20px; }
.ha-group { display: grid; gap: 10px; }
.ha-group h3 {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--glass-muted, var(--muted));
}
.ha-group h3 span { font-size: 1rem; }
.ha-group h3 em {
  font-style: normal; margin-left: auto; font-size: .74rem;
  font-variant-numeric: tabular-nums; opacity: .75;
}
.ha-grid {
  display: grid; gap: 10px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.ha-entity {
  --ha-tone: var(--glass-muted, var(--muted));
  display: grid; gap: 11px; padding: 13px 14px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 18px;
  background: var(--lg-card, var(--card));
  box-shadow: inset 0 1px 0 var(--lg-inner-shadow, rgba(255, 255, 255, .3));
  position: relative; overflow: hidden;
  transition: border-color .2s var(--lg-ease), transform .2s var(--lg-ease);
}
.ha-entity::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--ha-tone); opacity: .85;
}
.ha-entity.ha-tone-active { --ha-tone: var(--lg-solar); }
.ha-entity.ha-tone-idle { --ha-tone: color-mix(in srgb, var(--glass-muted, var(--muted)) 45%, transparent); }
.ha-entity.ha-tone-reading { --ha-tone: var(--lg-cyan); }
.ha-entity.ha-tone-offline { --ha-tone: var(--lg-danger); }
.ha-entity.ha-tone-offline { opacity: .62; }
.ha-entity.is-busy { animation: ha-busy 1.1s var(--lg-ease) infinite; }
@keyframes ha-busy { 50% { opacity: .58; } }
@media (prefers-reduced-motion: reduce) {
  .ha-entity, .ha-entity.is-busy { animation: none; transition: none; }
}

.ha-entity > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.ha-entity header div { display: grid; gap: 2px; min-width: 0; }
.ha-entity header b {
  font-size: .92rem; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.ha-entity header small { font-size: .72rem; color: var(--glass-muted, var(--muted)); }
.ha-state {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--ha-tone) 20%, transparent);
  color: color-mix(in srgb, var(--ha-tone) 72%, var(--glass-ink, var(--ink)));
  font-variant-numeric: tabular-nums;
}

.ha-controls { display: grid; gap: 9px; }
.ha-controls:has(.ha-button) { grid-auto-flow: row; }

.ha-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ha-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ha-switch b { font-size: .78rem; font-weight: 650; color: var(--glass-muted, var(--muted)); }
.ha-switch-track {
  position: relative; width: 46px; height: 27px; flex: 0 0 auto;
  border-radius: 999px; background: color-mix(in srgb, var(--glass-muted, var(--muted)) 30%, transparent);
  border: 1px solid var(--lg-edge-soft, var(--line));
  transition: background .22s var(--lg-ease);
}
.ha-switch-track i {
  position: absolute; top: 2px; left: 2px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(9, 27, 44, .3);
  transition: transform .22s var(--lg-ease);
}
.ha-switch input:checked + .ha-switch-track { background: var(--lg-solar); }
.ha-switch input:checked + .ha-switch-track i { transform: translateX(19px); }
.ha-switch input:focus-visible + .ha-switch-track {
  outline: 3px solid color-mix(in srgb, var(--lg-blue) 55%, transparent); outline-offset: 2px;
}
.ha-switch input:disabled + .ha-switch-track { opacity: .5; }

.ha-button {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: var(--lg-control-radius, 14px);
  background: var(--lg-control, #eff4f0);
  color: inherit; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .18s var(--lg-ease), transform .12s var(--lg-ease);
}
.ha-button:hover:not(:disabled) { background: color-mix(in srgb, var(--lg-blue) 14%, var(--lg-control, #eff4f0)); }
.ha-button:active:not(:disabled) { transform: scale(.97); }
.ha-button:disabled { opacity: .5; cursor: progress; }
.ha-button-warn { color: color-mix(in srgb, var(--lg-danger) 82%, var(--glass-ink, var(--ink))); }
.ha-controls:has(.ha-button + .ha-button) { display: flex; flex-wrap: wrap; gap: 7px; }
.ha-controls:has(.ha-button + .ha-button) .ha-button { flex: 1 1 auto; }
.ha-controls:has(.ha-button + .ha-button) .ha-slider,
.ha-controls:has(.ha-button + .ha-button) .ha-choice { flex: 1 1 100%; }

.ha-slider { display: grid; gap: 5px; }
.ha-slider > span {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .74rem; font-weight: 650; color: var(--glass-muted, var(--muted));
}
.ha-slider output { font-variant-numeric: tabular-nums; color: var(--glass-ink, var(--ink)); }
.ha-slider input[type="range"] { width: 100%; accent-color: var(--lg-solar); min-height: 44px; }

.ha-choice { display: grid; gap: 5px; }
.ha-choice > span { font-size: .74rem; font-weight: 650; color: var(--glass-muted, var(--muted)); }
.ha-choice select {
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: var(--lg-control-radius, 14px);
  background: var(--lg-control, var(--card)); color: inherit; font: inherit; font-size: .82rem;
}

.ha-empty {
  display: grid; gap: 10px; justify-items: start; padding: 22px;
  border: 1px dashed var(--lg-edge-soft, var(--line)); border-radius: 18px;
  background: color-mix(in srgb, var(--lg-card, var(--card)) 70%, transparent);
}
.ha-empty b { font-size: .95rem; }
.ha-empty p { margin: 0; color: var(--glass-muted, var(--muted)); font-size: .85rem; max-width: 62ch; }
.ha-empty button { width: auto; margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A távoli módok egy rejtett legördülőben voltak, ezért telefonon úgy tűnt,
   mintha a Cloudflare opciók hiányoznának. A select akadálymentes tartalék
   marad, a három tényleges választás mindig látható kártya. */
.remote-native-mode {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

.remote-mode-choices {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 8px;
}

.remote-mode-choices button {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 78px;
  padding: 13px;
  text-align: left;
  color: var(--glass-ink);
  background: var(--lg-control);
  border: 1px solid var(--lg-edge);
  border-radius: 15px;
}

.remote-mode-choices button span {
  color: var(--glass-muted);
  font-size: 12px;
  line-height: 1.35;
}

.remote-mode-choices button[aria-pressed="true"] {
  border-color: var(--lg-blue);
  box-shadow: inset 0 0 0 1px var(--lg-blue), 0 8px 24px rgba(53, 124, 255, .16);
}

.remote-output-panel {
  display: grid;
  gap: 12px;
  margin: 16px 0 10px;
  padding: 15px;
  min-width: 0;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 17px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

.remote-output-panel[data-state="ready"] {
  border-color: color-mix(in srgb, var(--lg-green, var(--green)) 48%, var(--lg-edge-soft, var(--line)));
}

.remote-output-panel[data-state="error"] {
  border-color: color-mix(in srgb, var(--lg-danger, var(--red)) 45%, var(--lg-edge-soft, var(--line)));
}

.remote-output-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.remote-output-head > div { display: grid; gap: 3px; min-width: 0; }
.remote-output-head b { font-size: .96rem; }
.remote-output-head span:not(.role-badge),
.remote-output-panel > small { color: var(--glass-muted, var(--muted)); line-height: 1.4; }

.remote-output-url {
  display: block;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--lg-card, var(--card)) 84%, transparent);
  color: var(--glass-ink, var(--ink));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.75rem, 2.7vw, .88rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-decoration: none;
}

.remote-output-url:not([aria-disabled="true"]):hover { border-color: var(--lg-blue); }
.remote-output-url[aria-disabled="true"],
#openRemoteResult[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.remote-output-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.remote-output-actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding-inline: 9px;
  text-align: center;
  line-height: 1.2;
}

.remote-history-panel {
  display: grid;
  gap: 12px;
  margin: 10px 0 16px;
  padding: 15px;
  min-width: 0;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 17px;
  background: color-mix(in srgb, var(--lg-card, var(--card)) 82%, transparent);
}

.remote-history-head,
.remote-history-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.remote-history-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.remote-history-head b { font-size: .96rem; }
.remote-history-head span,
.remote-history-notice,
.remote-history-time,
.remote-history-state {
  color: var(--glass-muted, var(--muted));
  line-height: 1.4;
}

.remote-history-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 78%, transparent);
  font-size: .82rem;
}

.remote-history-toolbar,
.remote-history-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.remote-history-toolbar { justify-content: flex-end; }
.remote-history-toolbar :is(button, a),
.remote-history-actions :is(button, a) { margin: 0; }

.remote-history-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.remote-history-list > .empty { margin: 4px 0; }

.remote-history-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 84%, transparent);
}

.remote-history-item.is-current {
  border-color: color-mix(in srgb, var(--lg-green, var(--green)) 46%, var(--lg-edge-soft, var(--line)));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--lg-green, var(--green)) 72%, transparent);
}

.remote-history-state {
  min-width: 0;
  text-align: right;
  font-size: .78rem;
}

.remote-history-url {
  display: block;
  min-width: 0;
  color: var(--glass-ink, var(--ink));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.73rem, 2.6vw, .84rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-decoration: none;
}

a.remote-history-url:hover { color: var(--lg-blue); }
.remote-history-url-invalid { color: var(--lg-danger, var(--red)); }
.remote-history-time { font-size: .78rem; }

.developer-url {
  display: block;
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 82%, transparent);
  color: var(--glass-ink, var(--ink));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.developer-health {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.developer-health > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 78%, transparent);
  color: var(--glass-muted, var(--muted));
  font-size: .75rem;
}

.developer-health b {
  color: var(--glass-ink, var(--ink));
  font-size: .84rem;
  overflow-wrap: anywhere;
}

.developer-health[data-state="ready"] > span {
  border-color: color-mix(in srgb, var(--lg-green, var(--green)) 35%, var(--lg-edge-soft, var(--line)));
}

.developer-credentials {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 8px;
  margin: 13px 0 8px;
}

.developer-credentials > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.developer-credentials span {
  color: var(--glass-muted, var(--muted));
  font-size: .76rem;
}

.developer-actions { align-items: stretch; }
.developer-actions > :is(a, button) { min-height: 42px; }

.developer-embed-notice {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-left: 3px solid color-mix(in srgb, var(--lg-blue) 52%, transparent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 64%, transparent);
}

.developer-terminal-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, #07111e 90%, var(--lg-card, var(--card)));
}

.developer-terminal-panel[hidden] { display: none; }

.developer-terminal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: #f4f8ff;
}

.developer-terminal-head > div { display: grid; gap: 3px; }
.developer-terminal-head small { color: #aebbd0; }

#developerFrame {
  display: block;
  width: 100%;
  min-height: clamp(360px, 62vh, 720px);
  border: 0;
  border-radius: 11px;
  background: #060b12;
}

.developer-terminal-panel > .tapo-help { color: #b7c3d5; }
.developer-terminal-panel > .smallbtn { justify-self: start; }

@media (max-width: 760px) {
  .remote-mode-choices { grid-template-columns: 1fr; }
  .remote-mode-choices button { min-height: 64px; }
  .remote-output-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .remote-output-head { align-items: stretch; flex-direction: column; }
  .remote-output-head .role-badge { justify-self: start; }
  .remote-history-head { align-items: stretch; flex-direction: column; }
  .remote-history-toolbar { justify-content: stretch; }
  .remote-history-toolbar > button { flex: 1 1 150px; min-height: 42px; }
  .remote-history-actions > :is(button, a) { flex: 1 1 105px; min-height: 40px; }
  .developer-health { grid-template-columns: minmax(0, 1fr); }
  .developer-credentials { grid-template-columns: minmax(0, 1fr); }
  .developer-actions > :is(a, button) { flex: 1 1 140px; }
  #developerFrame { min-height: 56vh; }
}

@media (max-width: 360px) {
  .remote-output-actions { grid-template-columns: minmax(0, 1fr); }
  .remote-history-item-head { align-items: stretch; flex-direction: column; }
  .remote-history-state { text-align: left; }
  .remote-history-actions > :is(button, a) { flex-basis: 100%; }
}

@media (max-width: 760px) {
  .ha-grid { grid-template-columns: 1fr; }
  .ha-entity { border-radius: 16px; }
}

/* FN-21: alvó vagy lejárat nélküli magas jogú kulcs figyelmeztetése. */
.access-item-warning {
  border-color: color-mix(in srgb, var(--lg-danger, var(--red)) 45%, var(--lg-edge-soft, var(--line)));
}
.access-key-warning {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  font-size: .86rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--lg-danger, var(--red)) 78%, var(--glass-ink, currentColor));
}
.access-key-warning > span::before { content: "! "; font-weight: 700; }
/* =========================================================================
 * 0.11 · Felületi finomítások
 * Csak konkrét, látható hibákat és apró csiszolást végez; a Liquid Glass
 * alapréteget nem írja felül.
 * ====================================================================== */

/* A verziócímke a márkasorban levágódott, mert a `margin-left:auto` a szűk
 * oldalsávban kiszorította. Saját sorba kerül, így mindig teljesen látszik. */
.brand { flex-wrap: wrap; row-gap: 4px; }
.brand > div { min-width: 0; }
.app-version {
  margin-left: auto; flex: 0 0 auto; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .app-version { margin-left: 0; }
}

/* Számoszlopok egy vonalban: a mérőszámok azonos szélességű számjegyeket kapnak,
 * így frissítéskor nem ugrál a kártya. */
.device-status-metrics b,
.detail-data-grid b,
.metric b,
.energy-metrics b,
output { font-variant-numeric: tabular-nums; }

/* Egységes, jól látható billentyűzetfókusz mindenhol. A korábbi alapértelmezett
 * körvonal több üveg felületen alig látszott. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lg-blue) 60%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* A kártyák finoman megemelkednek mutatóeszközzel; érintésen nincs hatás. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .panel { transition: transform .22s var(--lg-ease), box-shadow .22s var(--lg-ease); }
  .panel:hover { transform: translateY(-1px); }
}

/* Üres állapotok: eddig sima szürke szöveg volt, most saját, nyugodt felület. */
.empty {
  display: block; padding: 16px 18px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--lg-edge-soft, var(--line)) 80%, transparent);
  background: color-mix(in srgb, var(--lg-card, var(--card)) 55%, transparent);
  color: var(--glass-muted, var(--muted)); font-size: .85rem;
}

/* Görgetősávok a panelek belsejében: vékonyabb, a témához illő. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--glass-muted, var(--muted)) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-muted, var(--muted)) 40%, transparent);
}
::-webkit-scrollbar-track { background: transparent; }

/* Hosszú eszköz- és entitásnevek ne feszítsék szét a kártyát. */
.ha-entity header b, .panel h2 { overflow-wrap: anywhere; }

/* Mobil elrendezési javítások.
 * 1. A fejlécben a cím és a kapcsolat-kijelző 390 px-en egymásra csúszott,
 *    mert a kapcsolat-doboz fix `inline-size`-a nem fért el a cím mellett.
 * 2. A rögzített alsó menü és az „appként megnyitás” sáv eltakarta az utolsó
 *    kártyákat, mert a tartalom nem hagyott alattuk helyet. */
@media (max-width: 760px) {
  .top { flex-wrap: wrap; row-gap: 6px; }
  .top > div:first-child { flex: 1 1 100%; min-width: 0; }
  #online {
    order: 3; inline-size: 100%; max-inline-size: 100%;
    justify-content: flex-start; padding-top: 0;
  }
  main {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  body:has(#standaloneNudge:not([hidden])) main {
    padding-bottom: calc(186px + max(0px, var(--standalone-nudge-h, 68px) - 68px) + env(safe-area-inset-bottom, 0px));
  }
  /* A lebegő emlékeztető sose lógjon rá az alsó menüre. */
  #standaloneNudge { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* Az Otthon panel fejléce telefonon: a frissítő gomb a cím mellé kerül, nem egy
 * külön, majdnem üres sorba. */
@media (max-width: 760px) {
  .ha-panel .panel-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; gap: 6px 10px;
  }
  .ha-panel .panel-head > div { grid-column: 1; }
  .ha-panel .panel-actions { grid-column: 2; grid-row: 1; display: flex; gap: 6px; }
  .ha-panel #haState { font-size: .68rem; }
}

/* -------------------------------------------------------------------------
 * HomeHub 0.15 skin system
 *
 * A skin intentionally owns structure, navigation, card geometry and type.
 * The data-theme attribute remains an internal palette compatibility layer
 * for older fragments; users choose one of these three complete interfaces.
 * ---------------------------------------------------------------------- */

.display-dialog {
  width: min(760px, calc(100% - 24px));
}

/* iOS efficient rendering: the three identities remain structurally distinct,
 * while expensive blur, background compositing and entry animation stay off. */
body[data-render-mode="efficient"][data-ui="elo"] :is(.panel, .nav, .app > aside, .top) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui="elo"] :is(.panel, .nav, .nav a) { animation: none !important; transition: none !important; }
}

/* Skin chooser desktop geometry; individual previews live in skins.css. */

.skin-workspace { display: none; min-width: 0; }

body[data-ui="elo"] :is(
  main,
  .top,
  .top > *,
  .dashboard,
  .panel,
  .panel-head,
  .panel-head > *,
  .skin-workspace,
  .settings-categories,
  .ha-stage,
  .ha-grid,
  .device-grid,
  .device-card
) {
  min-width: 0;
}

body[data-ui="elo"] :is(
  h1, h2, h3, p, b, strong, small, span, label, output, code
) {
  overflow-wrap: anywhere;
}

body[data-ui="elo"] :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}

body[data-ui="elo"] :is(
  button:not(.info-tip),
  .nav a,
  a.smallbtn,
  a.secondary
) {
  min-height: 44px;
}

/* Data-driven SolaX / GreenHESS flow.  The old left-position animation ran
 * even when values were idle and forced layout on every frame. */
@keyframes homehub-energy-flow {
  0% { opacity: 0; transform: translate3d(-115%, 0, 0); }
  16% { opacity: .9; }
  84% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(320%, 0, 0); }
}

@keyframes homehub-energy-flow-reverse {
  0% { opacity: 0; transform: translate3d(320%, 0, 0); }
  16% { opacity: .9; }
  84% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(-115%, 0, 0); }
}

:is(.solax-panel, .greenhess-panel) .flow-line {
  contain: paint;
  overflow: hidden;
}

:is(.solax-panel, .greenhess-panel) .flow-line i {
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  border-radius: inherit;
  opacity: .18;
  transform: translate3d(0, 0, 0);
  animation: none !important;
  animation-play-state: paused !important;
}

/* The html/body prefix deliberately outranks the legacy
 * `.solax-panel:not(.is-producing) .flow-line i` pause rule: PV and AC are
 * independent data channels. */
html body :is(
  .solax-panel.is-pv-flowing .solax-pv-flow,
  .solax-pv-flow.is-pv-flowing,
  .solax-panel.is-ac-flowing .solax-ac-flow,
  .solax-ac-flow.is-ac-flowing,
  .greenhess-panel.is-importing .grid-import,
  .grid-import.is-importing
) i {
  animation: homehub-energy-flow 1.55s linear infinite !important;
  animation-play-state: running !important;
}

html body :is(
  .greenhess-panel.is-exporting .grid-export,
  .grid-export.is-exporting
) i {
  animation: homehub-energy-flow 1.55s linear infinite !important;
  animation-play-state: running !important;
}

body[data-render-mode="efficient"] :is(
  .dashboard > .panel
) {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui="elo"] :is(
    .dashboard > .panel
  ) {
    animation: none !important;
    transition: none !important;
  }

  :is(.solax-panel, .greenhess-panel) .flow-line i {
    animation: none !important;
    opacity: .55;
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------
 * HomeHub 0.17 personality, motion and overflow hardening
 *
 * The three remaining skins share semantics only. Their glyph treatment and
 * entrance choreography are deliberately different and use compositor-safe
 * opacity/transform animation. Decorative glyphs are injected with
 * aria-hidden by 13_skin_personality.js.
 * ---------------------------------------------------------------------- */

body[data-ui="elo"] :is(
  .app,
  aside,
  main,
  .top,
  .top > *,
  .dashboard,
  .panel,
  .panel > *,
  .panel-head,
  .panel-head > *,
  .compact-grid,
  .recommendation-grid,
  .device-grid,
  .device-card,
  .device-card > *,
  .access-item,
  .access-item > *,
  .access-key-actions,
  .access-request-actions,
  .file-entry-wrap,
  .file-entry,
  .file-entry > *,
  .activity-tools,
  .activity-logs,
  .log,
  .settings-categories,
  .settings-categories button,
  .wizard-catalog-head,
  .wizard-catalog-group,
  .wizard-catalog-card,
  .wizard-device-card,
  .ha-entity,
  .ha-entity > header,
  .card-detail-header,
  .card-detail-header > *
) {
  min-width: 0;
}

body[data-ui="elo"] :is(
  h1, h2, h3, h4, p, b, strong, small, span, label, code, output,
  .status, .panel-subtitle, .tapo-help, .message, .log
) {
  overflow-wrap: break-word;
  word-break: normal;
}

body[data-ui="elo"] :is(input, select, textarea, button) { max-width: 100%; }

body[data-ui="elo"] .panel-head {
  align-items: flex-start;
  flex-wrap: wrap;
  /* A részletgomb helyét a fejléc tartja fenn, hogy a cím soha ne fusson alá. */
  position: relative;
  padding-right: 52px;
}

/* A `.card-detail` eddig sima flex-elem volt `margin-left: auto` értékkel:
   amint a fejléc tördelt — például egy keskeny oszlopban ülő panelen —, a
   gomb külön sorba esett, és ott tolódott jobbra.  A gomb a kártya jobb
   felső sarkához tartozik, ezért a fejléchez rögzítjük.  Széles panelen ez
   ugyanoda esik, mint eddig; keskenyen viszont nem csúszik el. */
body[data-ui="elo"] .panel-head > .card-detail {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
}

body[data-ui="elo"] .panel-head > div:first-child,
body[data-ui="elo"] .panel-head > h2 {
  flex: 1 1 12rem;
  min-width: 0;
}

body[data-ui="elo"] .panel-head > :is(.status, .card-state) {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  text-align: end;
}

body[data-ui="elo"] .panel-head :is(
  .panel-actions,
  .solax-head-actions,
  .device-head-actions,
  .camera-switch
) {
  min-width: 0;
  flex-wrap: wrap;
}

.page-glyph,
.card-glyph,
.skin-settings-glyph,
.skin-step-glyph,
.action-glyph {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  transform-origin: center;
}

body[data-ui="elo"] .top h1 {
  display: flex;
  align-items: center;
  gap: .38em;
  min-width: 0;
  max-width: 100%;
}

.page-glyph {
  inline-size: 1.42em;
  block-size: 1.42em;
  border-radius: .48em;
  font-size: .72em;
}

body[data-ui="elo"] .panel h2 {
  max-width: 100%;
  line-height: 1.25;
}

.card-glyph {
  inline-size: 1.7em;
  block-size: 1.7em;
  min-width: 1.7em !important;
  border-radius: .58em;
  font-size: .88em;
}

.display-button,
.wizard-step h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.action-glyph { inline-size: 1.2em; block-size: 1.2em; }

.settings-categories button {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 9px;
}

.skin-settings-glyph {
  grid-row: 1 / span 2;
  align-self: center;
  inline-size: 2.1em;
  block-size: 2.1em;
  border-radius: .72em;
}

.settings-categories button small { grid-column: 2; }
.wizard-step h3 { display: flex; }
.skin-step-glyph { inline-size: 1.5em; block-size: 1.5em; font-size: .72em; }

/* Full labels remain readable: no silent ellipsis for device identity, setup,
 * access or activity data. */
.device-card > div,
.wizard-device-card > div,
.wizard-catalog-card > div,
.access-item > div:first-child,
.file-entry > b,
.log > p { min-width: 0; }

.device-card :is(b, span, small, p),
.wizard-device-card :is(b, span, small),
.wizard-catalog-card :is(b, span, small),
.access-item :is(b, small),
.file-entry :is(b, small),
.activity-logs .log p,
.card-detail-header h2 {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.schedule small,
.schedule-outcome { white-space: normal; overflow: visible; text-overflow: clip; }
.wizard-catalog-head,
.wizard-catalog-group summary { flex-wrap: wrap; }
.wizard-catalog-group summary > * { min-width: 0; }

.irrigation-rule-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

body[data-ui="elo"][data-page="settings"] #irrigationRulesSettings {
  grid-column: 1 / -1 !important;
}

.ha-button,
.ha-choice select,
.refrigerator-apply,
.refrigerator-control select,
.local-appliance-card .smallbtn,
.access-item select { min-height: 44px; }

@media (max-width: 760px) {
  .recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule { align-items: start; }
  .schedule-actions { flex-wrap: wrap; }
  .wizard-catalog-group > div { grid-template-columns: minmax(0, 1fr); }
  .navtext {
    display: -webkit-box !important;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.05;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  html body[data-ui="elo"] .nav .navtext[data-mobile-label]::after {
    font-size: min(calc(12px * var(--ui-font-scale, 1)), 3vw);
  }
}

@media (max-width: 420px) {
  .display-dialog .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .display-dialog .panel-head > div:first-child { grid-column: 1; grid-row: 1; }
  .display-dialog #closeDisplay { grid-column: 2; grid-row: 1; }
  html body[data-ui="elo"]:not([data-view="wallboard"]) .dashboard .panel-head > .status {
    display: inline-flex;
  }
  body[data-ui="elo"] .dashboard .panel-head > :is(.status, .card-state) {
    flex: 1 1 100%;
    justify-content: flex-start;
    text-align: start;
  }
  body[data-ui="elo"] .dashboard .panel-head > :is(.solax-head-actions, .panel-actions, .camera-switch, .device-head-actions) {
    justify-content: flex-start;
  }
  .device-card { grid-template-columns: 56px minmax(0, 1fr); }
  .device-card > :is(button, .secondary, .smallbtn, .card-state) {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }
  .ha-entity > header { flex-wrap: wrap; }
  .ha-state { flex: 1 1 100%; width: fit-content; white-space: normal; }
  .wizard-device-card { grid-template-columns: 52px minmax(0, 1fr); gap: 9px; }
  .wizard-device-card img { width: 52px; height: 52px; }
  .wizard-catalog-head { align-items: flex-start; }
  .wizard-catalog-head .status { flex: 1 1 100%; }
  .file-entry-wrap { grid-template-columns: minmax(0, 1fr); }
  .file-trash { min-height: 44px; }
  .access-key-actions,
  .access-request-actions { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .recommendation-grid { grid-template-columns: minmax(0, 1fr); }
  .schedule { grid-template-columns: minmax(0, 1fr); }
  .schedule :is(time, div, .schedule-actions) { grid-column: 1; grid-row: auto; }
  .schedule-actions > * { flex: 1 1 100%; min-height: 44px; }
}

/* Continuous data flow remains available in normal mode, but every skin
 * obeys both the explicit efficient mode and the OS motion preference. */
html body[data-render-mode="efficient"] :is(
  .dashboard > .panel,
  .page-glyph,
  .card-glyph,
  .skin-settings-glyph,
  .skin-step-glyph
) {
  animation: none !important;
  transition: none !important;
}

html body[data-render-mode="efficient"] :is(
  .solax-panel.is-pv-flowing .solax-pv-flow,
  .solax-pv-flow.is-pv-flowing,
  .solax-panel.is-ac-flowing .solax-ac-flow,
  .solax-ac-flow.is-ac-flowing,
  .greenhess-panel.is-importing .grid-import,
  .grid-import.is-importing,
  .greenhess-panel.is-exporting .grid-export,
  .grid-export.is-exporting
) i {
  animation: none !important;
  animation-play-state: paused !important;
  opacity: .55;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[data-ui="elo"] :is(
    .dashboard > .panel,
    .page-glyph,
    .card-glyph,
    .skin-settings-glyph,
    .skin-step-glyph
  ) {
    animation: none !important;
    transition: none !important;
  }

  html body :is(
    .solax-panel.is-pv-flowing .solax-pv-flow,
    .solax-pv-flow.is-pv-flowing,
    .solax-panel.is-ac-flowing .solax-ac-flow,
    .solax-ac-flow.is-ac-flowing,
    .greenhess-panel.is-importing .grid-import,
    .grid-import.is-importing,
    .greenhess-panel.is-exporting .grid-export,
    .grid-export.is-exporting
  ) i {
    animation: none !important;
    animation-play-state: paused !important;
    opacity: .55;
    transform: none !important;
  }
}

.integration-manager {
  display: grid;
  gap: 18px;
}

.integration-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.integration-summary > span,
.integration-state-row > span {
  border: 1px solid color-mix(in srgb, var(--line, #fff) 64%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 34%, transparent);
  border-radius: 14px;
}

.integration-summary > span {
  min-width: 0;
  padding: 12px;
  display: grid;
  gap: 2px;
  color: var(--muted, currentColor);
}

.integration-summary b {
  color: var(--text, currentColor);
  font-size: clamp(18px, 2vw, 26px);
}

.integration-entry-grid,
.integration-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.integration-entry-card,
.integration-catalog-card {
  min-width: 0;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line, #fff) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface, #fff) 30%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, #fff 40%, transparent);
}

.integration-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.integration-card-head > span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #36bcca) 24%, transparent);
}

.integration-card-head > div {
  min-width: 0;
  display: grid;
}

.integration-card-head b,
.integration-card-head small,
.integration-entry-card p,
.integration-catalog-card p {
  overflow-wrap: anywhere;
}

.integration-state-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.integration-state-row > span {
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 750;
  color: var(--text, currentColor);
}

.integration-entry-card[data-state="connected"] .integration-live-dot {
  background: #18bd83;
  box-shadow: 0 0 0 6px color-mix(in srgb, #18bd83 18%, transparent);
}

.integration-entry-card[data-state="error"] .integration-live-dot {
  background: #e45f5f;
}

.integration-live-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: var(--muted, #8590a0);
}

.integration-entry-error {
  margin: 0;
  color: var(--danger, #b83232);
  font-weight: 700;
}

.integration-entry-actions {
  align-items: stretch;
}

.integration-entry-actions > button {
  flex: 1 1 120px;
}

.integration-catalog-card[data-installed="false"] {
  opacity: .68;
}

.integration-flow-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: min(820px, calc(100dvh - 24px));
  padding: 0;
  overflow: auto;
  color: var(--text, #172238);
  border: 1px solid color-mix(in srgb, var(--line, #fff) 70%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface, #eef8ff) 90%, transparent);
  box-shadow: 0 24px 80px rgb(0 0 0 / .3);
}

.integration-flow-dialog::backdrop {
  background: rgb(4 12 28 / .58);
  backdrop-filter: blur(7px);
}

.integration-flow-shell {
  padding: clamp(16px, 3vw, 28px);
  display: grid;
  gap: 16px;
}

.integration-flow-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.integration-flow-fields > label:not(.checkline) {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.integration-flow-fields input,
.integration-flow-fields select {
  width: 100%;
  min-width: 0;
}

.integration-secret-saved {
  color: #138b65;
  font-weight: 750;
}

.integration-marketplace {
  min-width: 0;
}

.integration-market-tools,
.integration-market-install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.integration-market-tools label,
.integration-market-install label:not(.checkline) {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.integration-market-install {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-market-install .checkline,
.integration-market-install .primary {
  align-self: stretch;
}

.marketplace-driver .integration-market-actions {
  margin-top: auto;
}

.integration-catalog-source-editor {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line, #fff) 70%, transparent);
  border-radius: 16px;
}

.integration-source-list {
  display: grid;
  gap: 8px;
  margin-block: 10px;
}

.integration-source-row {
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line, #fff) 62%, transparent);
  border-radius: 14px;
}

.integration-source-row > div:first-child {
  min-width: 0;
  display: grid;
}

.integration-source-row small {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .integration-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-entry-grid,
  .integration-catalog-grid,
  .integration-flow-fields {
    grid-template-columns: 1fr;
  }

  .integration-entry-card,
  .integration-catalog-card {
    padding: 13px;
    border-radius: 16px;
  }

  .integration-market-tools,
  .integration-market-install {
    grid-template-columns: 1fr;
  }

  .integration-source-row {
    align-items: stretch;
    flex-direction: column;
  }

  .integration-entry-actions > button {
    flex-basis: calc(50% - 6px);
  }
}
/* =========================================================================
 * 0.18.0 · Célzott reszponzív, kontraszt- és akadálymentességi javítások
 * ====================================================================== */

/* A fejléc díszrétegeit vágja, de ne hozzon létre programozható scroll
 * containert: dialógus utáni fókusz-visszaadáskor így nem tolódik el. */
html body[data-ui="elo"] .top {
  overflow: clip;
}

/* Az eszköznevek és a műveletgombok között mindig maradjon használható
 * szövegterület a tablet-töréspont két oldalán is. */
.device-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (max-width: 520px) {
  .greenhess-metrics { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 420px) {
  .standalone-nudge { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .pump-body {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 11px;
  }
  .irrigation-visual { width: 92px; height: 96px; }
  .pump-copy .value { font-size: 20px; line-height: 1.16; overflow-wrap: anywhere; }

  /* A három energia-csomópont 80 px körüli szélességű. A 44 px-es súgógomb
   * ne növelje meg a címke sorát és ne lógjon ki a jobb szélső kártyából. */
  .solar-node { position: relative; }
  .solar-node .metric-help-label {
    display: block !important;
    width: 100%;
    padding-inline: 2px;
    text-align: center;
  }
  .solar-node .metric-help-label > .info-tip {
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media (max-width: 360px) {
  body[data-ui="elo"] .settings-categories { grid-template-columns: minmax(0, 1fr); }
  html body[data-ui="elo"] .nav .navtext[data-mobile-label] {
    display: block !important;
    overflow: visible;
    white-space: nowrap !important;
    -webkit-line-clamp: unset;
  }
  html body[data-ui="elo"] .nav .navtext[data-mobile-label]::after {
    font-size: min(calc(12px * var(--ui-font-scale, 1)), 3.5vw);
    white-space: nowrap;
  }
}

/* Ujjal a látható 30 px-es súgókör is valódi 44 px-es gomb. A belső
 * pszeudóelem megtartja a korábbi optikai méretet. */
@media (pointer: coarse), (max-width: 760px) {
  .smallbtn,
  .camera-tile-switch .smallbtn {
    min-width: 44px;
    min-height: 44px !important;
  }

  .info-tip,
  .pump-duration-quick .info-tip {
    box-sizing: border-box;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-color: transparent !important;
  }

  .info-tip::after,
  .info-tip:is(:hover, :focus, :focus-visible, .open)::after {
    inset: 7px !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    color: inherit !important;
    pointer-events: none;
  }

  :is(.checkline, .notify-options > label, .days label, .pump-duration-quick > label) { min-height: 44px; }

  /* Inline linkre a CSS min-height nem hat; flex elemként a súgólinkek
   * tényleges érintési felülete is eléri a 44 px-t. */
  a.smallbtn,
  .text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
  }
}

@media (pointer: coarse) {
  .rule a[href="#beallitasok"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.standalone-dismiss {
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent) !important;
  background: color-mix(in srgb, var(--ink) 10%, var(--nudge-base, #f7fbf9)) !important;
  color: var(--ink) !important;
}

/* A rendszer mozgáscsökkentési kérése teljesen leállítja a dekoratív
 * időjárás- és napszak-animációt; a korábbi szabály csak lelassította. */
@media (prefers-reduced-motion: reduce) {
  html body :is(
    .ambient-weather *, .weather-icon, .header-weather b,
    .time-sun, .time-moon, .time-stars i, .top::before, .top::after
  ) {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------- Automatika
   Szkriptek, ütemezések és segédek. A kártyák ugyanazt az üveg-nyelvet
   követik, mint az Otthon lap entitáskártyái, hogy a két lap ne tűnjön két
   külön alkalmazásnak. */
.automation-stage {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.automation-grid {
  display: grid;
  gap: 11px;
  align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.automation-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 15px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 18px;
  background: var(--lg-card, var(--card));
  box-shadow: inset 0 1px 0 var(--lg-inner-shadow, rgba(255, 255, 255, .3));
  position: relative;
  overflow: hidden;
}

.automation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lg-blue);
  opacity: .7;
}

.automation-card.is-busy { animation: ha-busy 1.1s var(--lg-ease) infinite; }

.automation-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.automation-card > header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.automation-card > header b { font-size: .98rem; }
.automation-card > header small { color: var(--muted); font-size: .76rem; }

.automation-note {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.automation-next { margin: 0; font-size: .84rem; }

.automation-steps {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .8rem;
}

.automation-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}

.automation-card-actions .primary,
.automation-card-actions .secondary { width: auto; margin: 0; padding: 7px 13px; }
.automation-card-actions .checkline { margin: 0; font-size: .8rem; }

.smallbtn.danger {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  color: var(--lg-danger-ink, var(--red));
}

/* Segédvezérlők — a sorban álló gomb/mező hármas mindenhol egyforma. */
.automation-controls { display: grid; gap: 8px; }

.helper-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.helper-inline .smallbtn { min-width: 42px; }
.helper-value { min-width: 54px; font-size: 1.05rem; text-align: center; }
.helper-number { width: 96px; padding: 7px 9px; }
.helper-inline em { color: var(--muted); font-size: .8rem; font-style: normal; }

.helper-widget-stage {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.helper-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, var(--card)) 74%, transparent);
}

.helper-strip > div { display: grid; gap: 1px; min-width: 0; }
.helper-strip small { color: var(--muted); font-size: .72rem; }
.helper-strip.is-busy { opacity: .58; }

/* Futásnapló */
.automation-run {
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, var(--card)) 72%, transparent);
  overflow: hidden;
}

.automation-run summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  cursor: pointer;
}

.automation-run summary em {
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
  margin-right: auto;
}

.run-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 14px 12px 32px;
  font-size: .82rem;
}

.run-step-error { color: var(--lg-danger-ink, var(--red)); }
.run-step-skipped { color: var(--muted); }

/* Szerkesztő párbeszédek */
.automation-dialog {
  width: min(680px, 94vw);
  max-height: 88dvh;
  padding: 20px;
  border: 1px solid var(--lg-edge, var(--line));
  border-radius: var(--lg-radius);
  background: var(--lg-card-strong, var(--card));
  color: var(--ink);
}

.automation-dialog-stage {
  display: grid;
  gap: 12px;
  max-height: 62dvh;
  overflow: auto;
  padding: 2px;
}

.automation-dialog-stage label { display: grid; gap: 4px; }
.automation-dialog-stage label small { color: var(--muted); font-size: .74rem; }
.automation-dialog-stage textarea { resize: vertical; }

.editor-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.editor-head h4 { margin: 0; font-size: .92rem; }

/* Lépéssor-építő */
.step-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-row {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel, var(--card)) 70%, transparent);
}

.step-row-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.step-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
  font-size: .8rem;
  font-weight: 700;
}

.step-kind { flex: 1 1 auto; min-width: 0; margin: 0; }
.step-row-tools { display: flex; gap: 5px; }
.step-summary { margin: 0; color: var(--muted); font-size: .76rem; }

.step-fields {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Nap- és időpont-kijelölés */
.automation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.automation-chips-dense .automation-chip { min-width: 38px; padding: 6px 8px; }

.automation-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel, var(--card)) 78%, transparent);
  color: var(--ink);
  font-size: .84rem;
}

.automation-chip.selected {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 13%, var(--card));
  color: var(--green);
  font-weight: 600;
}

.automation-chip button {
  padding: 0 2px;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}

.automation-preview { display: grid; gap: 6px; font-size: .84rem; }
.automation-preview ul { display: grid; gap: 3px; margin: 0; padding-left: 20px; }
.automation-preview .empty { color: var(--muted); font-style: normal; }

@media (max-width: 760px) {
  .automation-grid { grid-template-columns: 1fr; }
  .automation-card { border-radius: 16px; }
  .automation-dialog { width: 96vw; padding: 15px; }
  .automation-dialog-stage { max-height: 68dvh; }
  .step-fields, .editor-grid { grid-template-columns: 1fr; }
  .automation-card-actions .primary { flex: 1 1 100%; }
}

/* ------------------------------------------- Kereső, kedvencek, összefoglaló */
.search-overlay {
  width: min(640px, 94vw);
  max-height: 84dvh;
  padding: 18px;
  border: 1px solid var(--lg-edge, var(--line));
  border-radius: var(--lg-radius);
  background: var(--lg-card-strong, var(--card));
  color: var(--ink);
}

.search-field { display: block; margin: 12px 0 10px; }

.search-field input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, var(--card)) 82%, transparent);
  color: var(--ink);
  font-size: 1.02rem;
}

.search-results {
  display: grid;
  gap: 6px;
  max-height: 56dvh;
  overflow: auto;
  padding: 2px;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 13px;
}

.search-result:hover { border-color: var(--line); background: color-mix(in srgb, var(--green) 6%, transparent); }

.search-open {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 8px 10px;
  background: none;
  color: var(--ink);
  text-align: left;
}

.search-open > span:last-child { display: grid; gap: 1px; min-width: 0; }
.search-open b { font-size: .95rem; }
.search-open small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--green) 13%, transparent);
  color: var(--green);
}

.search-pin { color: var(--muted); }
.search-pin.selected { border-color: color-mix(in srgb, var(--lg-solar) 60%, transparent); color: var(--lg-solar); }

.favorite-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}

.favorite-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4px 3px 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel, var(--card)) 78%, transparent);
}

.favorite-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 4px 7px 12px;
  background: none;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 600;
}

.favorite-chip .smallbtn { min-width: 32px; padding: 5px 7px; }

/* Összefoglaló — vizuális rendszerkép, nem nyers eseménylista. */
.digest-widget {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  /* Az állapotjelek (címke, szekció-ikon, figyelmeztető mérőszám) saját
   * tintája. Világos felületen sötét, sötéten világos árnyalat, hogy a
   * 4,5:1 kontraszt mindkét megjelenésben teljesüljön (S1-01). */
  --digest-info-ink: #104f61;
  --digest-warn-ink: #5b3100;
}

html body[data-theme="midnight"] .digest-widget,
html body[data-theme="graphite"] .digest-widget {
  --digest-info-ink: #9fd8e8;
  --digest-warn-ink: #f0c079;
}

/* Klasszikus felület (homehub.ui=classic, a „Megszokott” visszaállás): nincs
 * Next színséma, és a skinek mindig `data-theme="time"`-ot adnak, így a fenti
 * sötét felülírás itt soha nem érvényes, a rögzített sötét tinta viszont a
 * sötét kártyás skinek (Soft Signal, Bento Pulse, Grafit, éjszakai Fluxline)
 * felületén 1,0–1,4:1 kontrasztot adott. Itt a címke és az ikon a skin saját
 * felületi tintáját kapja, vagyis ugyanazt, amellyel a kártya többi szövege is
 * olvasható; a Next felület tokenjei érintetlenek (S1-01). */
html body[data-ui="elo"] .digest-widget {
  --digest-info-ink: var(--skin-surface-ink, #104f61);
  --digest-warn-ink: var(--skin-surface-ink, #5b3100);
}

.digest-panel-head { align-items: center; }

.digest-title-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.digest-title-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--skin-focus, var(--green)) 44%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .72), transparent 30%),
    color-mix(in srgb, var(--skin-focus, var(--green)) 18%, var(--card));
  color: var(--skin-focus, var(--green));
  font-size: 22px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .44), 0 9px 24px color-mix(in srgb, var(--skin-focus, var(--green)) 18%, transparent);
}

.digest-title-cluster h2 { margin-block: 2px 0; }

.digest-kicker,
.digest-eyebrow {
  display: block;
  color: var(--skin-focus, var(--green));
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.digest-actions {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) repeat(2, 44px);
  align-items: center;
  gap: 8px;
  /* A Next UI mezőmagasságát (`--next-field-height`) a választó is ebből veszi:
   * így a választó és a két ikon-gomb egyforma, 44 px magas. */
  --next-field-height: 44px;
}
.digest-actions :is(select, button) { min-height: 44px; }
.digest-widget select { padding: 7px 10px; border-radius: 12px; }

/* UI-18: a Next UI általános `#attekintes > .panel > .panel-head .panel-actions`
 * szabálya `display: flex !important` + `flex-wrap: wrap`; ebben a `width: 100%`
 * választó és ikon-gombok egyenként külön, teljes szélességű sorba törtek (telefonon
 * két üres, 328 px széles sáv csak egy apró ikonnal). Az Összefoglaló műveletsora itt
 * visszakapja a rácsot: a választó kitölti a sort, a Nyomtatás és a Frissítés pedig
 * egy-egy 44×44 px-es, jól látható ikon-gomb mellette — minden szélességen (a 99_*
 * Next UI-fájlok érintetlenek, ezért itt nagyobb fajsúlyú, `!important` szabály kell). */

.digest-stage {
  display: grid;
  gap: clamp(11px, 1.4vw, 17px);
  min-width: 0;
  margin-top: 8px;
}

.digest-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
  padding: clamp(17px, 2.4vw, 26px);
  border: 1px solid color-mix(in srgb, var(--skin-focus, var(--green)) 38%, var(--line));
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--skin-focus, var(--green)) 18%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--skin-focus, var(--green)) 12%, var(--card)), color-mix(in srgb, var(--card) 72%, transparent));
  box-shadow: inset 0 1px rgba(255, 255, 255, .28);
}

.digest-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45% auto -45% -22%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg);
}

.digest-state-warn {
  border-color: color-mix(in srgb, #b87312 52%, var(--line));
  background:
    radial-gradient(circle at 88% 10%, rgba(184, 115, 18, .18), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, #b87312 10%, var(--card)), color-mix(in srgb, var(--card) 74%, transparent));
}

.digest-hero-copy { display: grid; gap: 6px; min-width: 0; }
.digest-headline { margin: 0; color: var(--ink); font-size: clamp(1.15rem, 2.3vw, 1.72rem); font-weight: 780; line-height: 1.18; letter-spacing: -.025em; }
.digest-hero-copy > small { color: var(--muted); font-size: .78rem; }

.digest-health {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: min(230px, 100%);
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--skin-focus, var(--green)) 32%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 74%, transparent);
}

.digest-health-orb {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #16745b;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
  box-shadow: 0 0 0 6px rgba(22, 116, 91, .10);
}

.digest-state-warn .digest-health-orb { background: #794100; box-shadow: 0 0 0 6px rgba(121, 65, 0, .12); }
.digest-health > div { display: grid; gap: 2px; min-width: 0; }
.digest-health small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.digest-health b { color: var(--ink); font-size: .88rem; line-height: 1.2; }

.digest-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.digest-stat-card {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

.digest-stat-card > span {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--skin-focus, var(--green)) 14%, var(--card));
  color: var(--skin-focus, var(--green));
  font-size: 18px;
  font-weight: 850;
}

.digest-stat-alert > span { background: rgba(121, 65, 0, .13); color: var(--digest-warn-ink); }
.digest-stat-card > div { display: grid; gap: 1px; min-width: 0; }
.digest-stat-card small { color: var(--muted); font-size: .67rem; }
.digest-stat-card b { color: var(--ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1; }
.digest-stat-card b i { color: inherit; font-size: .66rem; font-style: normal; font-weight: 700; }
.digest-stat-card em { overflow: hidden; color: var(--muted); font-size: .65rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.digest-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 13px;
  padding: 8px 11px;
  border-block: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--muted);
  font-size: .72rem;
}

.digest-legend > b { margin-right: 3px; color: var(--ink); }
.digest-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.digest-legend i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; }
.digest-legend-calm { background: #16745b; }
.digest-legend-info { background: #17647a; }
.digest-legend-warn { background: #794100; }

.digest-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  align-items: start;
  gap: 11px;
}

.digest-section {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: color-mix(in srgb, var(--panel, var(--card)) 72%, transparent);
}

.digest-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #17647a;
}

.digest-section.digest-warn::before { background: #794100; }
.digest-section-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.digest-section-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(23, 100, 122, .13); color: var(--digest-info-ink); font-size: 19px; }
.digest-warn .digest-section-icon { background: rgba(121, 65, 0, .13); color: var(--digest-warn-ink); }
.digest-section-head > div { min-width: 0; }
.digest-section-head small { display: block; margin: 0 0 2px; color: var(--muted); font-size: .59rem; font-weight: 850; letter-spacing: .09em; }
.digest-section h3 { margin: 0; color: var(--ink); font-size: .96rem; line-height: 1.2; }

.digest-tone-label {
  align-self: start;
  padding: 4px 7px;
  border: 1px solid rgba(23, 100, 122, .34);
  border-radius: 999px;
  background: rgba(23, 100, 122, .12);
  color: var(--digest-info-ink);
  font-size: .62rem;
  font-weight: 800;
  white-space: nowrap;
}

.digest-warn .digest-tone-label { border-color: rgba(121, 65, 0, .42); background: rgba(121, 65, 0, .13); color: var(--digest-warn-ink); }
.digest-section ul { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.digest-section li { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: 8px; color: var(--ink); font-size: .82rem; line-height: 1.42; }
.digest-section li > i { width: 6px; height: 6px; margin-top: .47em; border-radius: 50%; background: #17647a; box-shadow: 0 0 0 4px rgba(23, 100, 122, .08); }
.digest-warn li > i { background: #794100; box-shadow: 0 0 0 4px rgba(121, 65, 0, .09); }
.digest-section footer { margin: 10px 0 0 16px; color: var(--muted); font-size: .7rem; font-weight: 700; }

.digest-clear {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(22, 116, 91, .32);
  border-radius: 19px;
  background: rgba(22, 116, 91, .08);
}

.digest-clear > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: #16745b; color: #fff; font-size: 22px; font-weight: 900; }
.digest-clear h3, .digest-clear p { margin: 0; }
.digest-clear p { margin-top: 3px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
/* T1-05: sikertelen betöltés. Semleges (nem zöld, nem riasztó) kártya, a
 * szöveg a felület saját tintáját kapja, így a kontraszt a témával együtt marad. */
.digest-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--ink);
}
.digest-error h3, .digest-error p { margin: 0; }
.digest-error p { margin-top: 3px; color: var(--ink); font-size: .8rem; line-height: 1.4; }
.digest-error button { min-height: 44px; }
.favorite-chip.stale { border-style: dashed; }
.favorite-detail { display: block; font-size: .68rem; font-weight: 600; }
.digest-meta { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: .74rem; }

/* S1-01: az állapotjelek ne vesszék el a saját színüket. A régi
 * `body[data-theme="time"] .panel span:not(...)` szabály (0,4,2) minden
 * panelbeli `span`-t halvány szürkére fest, a skinek `.digest-tone-label`
 * szabálya (0,2,2) pedig a sötét megjelenésben is sötét tintát kényszerít.
 * Mindkettőt csak a `.panel`-lel megerősített, `!important` szabály győzi le;
 * az általános muted-szabály (91) kivétel-listája ugyanezeket az osztályokat
 * kihagyja, így nem írja vissza a színt. */
html body[data-ui="elo"] .panel :is(.digest-health-orb, .digest-clear > span) {
  color: #fff !important;
  text-shadow: none;
}

html body[data-ui="elo"] .panel :is(.digest-tone-label, .digest-section-icon) {
  color: var(--digest-info-ink) !important;
}

html body[data-ui="elo"] .panel :is(
  .digest-warn .digest-tone-label,
  .digest-warn .digest-section-icon,
  .digest-stat-alert > span
) {
  color: var(--digest-warn-ink) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .digest-title-icon { animation: digestIconFloat 4.8s ease-in-out infinite; }
  .digest-health-orb { animation: digestStatusPulse 2.8s ease-in-out infinite; }
  .digest-hero::before { animation: digestHeroSweep 8s ease-in-out infinite; }
  .digest-section { animation: digestSectionIn .44s both; animation-delay: calc(var(--digest-index, 0) * 70ms); }
}

@keyframes digestIconFloat { 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes digestStatusPulse { 50% { transform: scale(1.045); filter: brightness(1.08); } }
@keyframes digestHeroSweep { 0%, 46% { translate: -120% 0; } 72%, 100% { translate: 420% 0; } }
@keyframes digestSectionIn { from { opacity: 0; transform: translateY(8px); } }

@container (max-width: 720px) {
  .digest-panel-head { align-items: flex-start; }
  .digest-actions { width: 100%; }
  .digest-hero { grid-template-columns: minmax(0, 1fr); }
  .digest-health { width: 100%; }
  .digest-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 430px) {
  .digest-title-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 14px; }
  .digest-title-cluster { align-items: flex-start; gap: 9px; }
  .digest-kicker { font-size: 8.5px; }
  .digest-stat-card { grid-template-columns: 34px minmax(0, 1fr); padding: 9px; }
  .digest-stat-card > span { width: 34px; height: 34px; border-radius: 11px; }
  .digest-section-head { grid-template-columns: 38px minmax(0, 1fr); }
  .digest-section-icon { width: 38px; height: 38px; }
  .digest-tone-label { grid-column: 2; justify-self: start; }
  .digest-legend > b { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .digest-widget :is(.digest-title-icon, .digest-health-orb, .digest-section),
  .digest-widget .digest-hero::before { animation: none !important; }
}

/* Indítócím (webhook) */
.hook-qr {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.hook-qr img { width: min(190px, 52vw); height: auto; }
.hook-qr small { color: #5a6a76; font-size: .74rem; text-align: center; }

.hook-warning { border-color: color-mix(in srgb, var(--lg-danger) 45%, var(--line)) !important; background: color-mix(in srgb, var(--lg-danger) 7%, var(--card)) !important; }
.hook-usage { color: var(--muted); font-size: .78rem; }
.hook-guides { display: grid; gap: 6px; }

.hook-guide {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel, var(--card)) 74%, transparent);
  overflow: hidden;
}

.hook-guide summary { display: flex; align-items: center; gap: 9px; padding: 10px 13px; cursor: pointer; font-weight: 600; }
.hook-guide ol { display: grid; gap: 5px; margin: 0; padding: 0 14px 12px 34px; font-size: .84rem; }

/* Jelenlét */
.candidate-list {
  display: grid;
  gap: 6px;
  max-height: 30dvh;
  overflow: auto;
  padding: 2px;
}

.candidate {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel, var(--card)) 76%, transparent);
  color: var(--ink);
  text-align: left;
}

.candidate small { color: var(--muted); font-size: .74rem; }
.candidate.selected { border-color: var(--green); background: color-mix(in srgb, var(--green) 11%, var(--card)); }

/* Címkék */
.automation-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.automation-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  font-size: .72rem;
  font-weight: 600;
}

.quiet-hours { display: grid; gap: 8px; margin-top: 12px; }

@media (max-width: 760px) {
  .search-overlay { width: 96vw; padding: 14px; }
  .search-results { max-height: 62dvh; }
  .favorite-open { padding-left: 10px; }
}

/* Nyomtatás: csak az összefoglaló kerüljön papírra. */
@media print {
  body[data-printing="digest"] :is(aside, .top, .nav, .weather-scene, .time-sky, #brightnessShade) { display: none !important; }
  body[data-printing="digest"] main > .dashboard > *:not(#digestWidget) { display: none !important; }
  body[data-printing="digest"] #digestWidget {
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body[data-printing="digest"] .panel-actions { display: none !important; }
}

/* --- Jelenlét: kezdőlapi jelzés ---------------------------------------- */

/* A jelenlét saját lapot kapott, mert a személyek, az utolsó észlelés és a
   hozzájuk kötött szkriptek nem férnek el egy csempén. A kezdőlapon egyetlen
   kérdés marad: hányan vannak itthon. */
.presence-indicator {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
  line-height: 1;
  white-space: nowrap;
}

.presence-indicator[hidden] { display: none; }

.presence-indicator-glyph { font-size: .95rem; }

.presence-indicator b {
  font-variant-numeric: tabular-nums;
  font-size: .92rem;
}

.presence-indicator[data-presence-state="home"] {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 16%, var(--card));
}

.presence-indicator:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--green) 70%, transparent);
}

@media (max-width: 760px) {
  .presence-indicator { padding: 4px 9px 4px 7px; font-size: .76rem; }
}
.pwa-offline-banner {
  position: fixed;
  z-index: 10020;
  inset: max(8px, env(safe-area-inset-top)) 50% auto auto;
  transform: translateX(50%);
  max-width: calc(100vw - 24px);
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, #f59e0b 58%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-solid, #111827) 90%, #f59e0b);
  color: var(--text, #fff);
  box-shadow: 0 12px 30px rgb(0 0 0 / .22);
  font-weight: 800;
  text-align: center;
}

.mobile-pwa-setup .mobile-pwa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-block: 14px;
}

.mobile-feature-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent));
  border-radius: var(--radius-small, 18px);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / .1), 0 10px 25px rgb(0 0 0 / .08);
}

.mobile-feature-card > div:first-child { display: flex; align-items: center; gap: 9px; }
.mobile-feature-card h3 { margin: 0; }
.mobile-feature-card p { overflow-wrap: anywhere; }
.mobile-feature-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mobile-tag-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mobile-tag-secret { margin: 12px 0; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 14px; }
.mobile-tag-secret code { display: block; margin-block: 8px; padding: 9px; overflow-wrap: anywhere; user-select: all; }
.mobile-record-list { display: grid; gap: 8px; margin-block: 10px; }
.mobile-record-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--panel) 72%, transparent); }
.mobile-record-list article > div { min-width: 0; }
.mobile-record-list small { display: block; opacity: .76; overflow-wrap: anywhere; }

@media (max-width: 850px) {
  .mobile-pwa-setup .mobile-pwa-grid,
  .mobile-tag-form { grid-template-columns: 1fr; }
  .mobile-feature-card { padding: 13px; }
  .mobile-record-list article { align-items: flex-start; }
  .pwa-offline-banner { border-radius: 14px; font-size: .82rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .pwa-offline-banner { animation: mobile-offline-arrive .24s ease-out; }
  @keyframes mobile-offline-arrive { from { opacity: 0; transform: translate(50%, -10px); } }
}
/* ---------------------------------------------------------------------------
 * Napelemtöbblet-vezérlés
 * A panel egyetlen kérdésre válaszol: mennyi energia menne most feleslegesen a
 * hálózatra. Ezért a nagy szám és a felosztó sáv van elöl, a szabályok pedig
 * külön párbeszédben — a napi használatban nem kell hozzájuk nyúlni.
 * ------------------------------------------------------------------------- */
.surplus-panel .panel-actions { flex-wrap: wrap; gap: 8px; }

.surplus-hero {
  display: grid;
  gap: 14px;
  align-items: center;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  margin-top: 6px;
  padding: 15px 16px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--lg-solar) 22%, transparent), transparent 62%),
    var(--lg-card, var(--card));
  box-shadow: inset 0 1px 0 var(--lg-inner-shadow, rgba(255, 255, 255, .3));
}

.surplus-hero-value { display: grid; gap: 2px; min-width: 0; }
.surplus-hero-value small { color: var(--muted); font-size: .76rem; letter-spacing: .01em; }

.surplus-hero-value b {
  font-size: clamp(1.9rem, 5.4vw, 2.6rem);
  font-weight: 660;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.surplus-hero-value .tapo-help { margin: 2px 0 0; font-size: .75rem; }

.surplus-flow-wrap { min-width: 0; }

.surplus-flow {
  display: flex;
  gap: 4px;
  min-height: 62px;
  overflow: hidden;
  border-radius: 14px;
}

.surplus-flow-part {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lg-control) 90%, transparent);
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
  flex-grow: 1;
  transition: flex-basis .6s var(--lg-ease);
}

.surplus-flow-part b {
  font-size: .71rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--muted);
  /* A keskeny szakasz felirata inkább törjön két sorba, mint hogy „Hálózatra
   * m…” maradjon belőle: a felosztás akkor olvasható, ha mind a három szakasz
   * neve kiderül. */
  overflow-wrap: anywhere;
}

.surplus-flow-part em {
  font-style: normal;
  font-size: .92rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.surplus-flow-house { background: color-mix(in srgb, var(--lg-blue) 16%, var(--lg-control)); }
.surplus-flow-managed { background: color-mix(in srgb, var(--lg-success) 22%, var(--lg-control)); }
.surplus-flow-spare { background: color-mix(in srgb, var(--lg-solar) 26%, var(--lg-control)); }

.surplus-decision {
  margin: 10px 0 0;
  font-size: .86rem;
  color: var(--glass-ink, var(--ink));
}

.surplus-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: 10px;
}

.surplus-fact {
  display: grid;
  gap: 1px;
  padding: 9px 11px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--lg-control) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
}

.surplus-fact small { color: var(--muted); font-size: .72rem; }
.surplus-fact b { font-size: .96rem; font-variant-numeric: tabular-nums; }

/* Fogyasztókártya: a futó állapotot a bal szegély színe mondja el. */
.surplus-card {
  display: grid;
  gap: 9px;
  align-content: start;
  position: relative;
  overflow: hidden;
  padding: 14px 15px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 18px;
  background: var(--lg-card, var(--card));
  box-shadow: inset 0 1px 0 var(--lg-inner-shadow, rgba(255, 255, 255, .3));
}

.surplus-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lg-blue);
  opacity: .5;
}

.surplus-card.is-running::before { background: var(--lg-solar); opacity: 1; }
.surplus-card.is-off { opacity: .62; }

.surplus-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.surplus-card > header div { display: grid; gap: 2px; min-width: 0; }
.surplus-card > header b { font-size: .96rem; }
.surplus-card > header small { color: var(--muted); font-size: .75rem; }
.surplus-card small { color: var(--muted); font-size: .74rem; }
.surplus-note { margin: 0; font-size: .82rem; color: var(--muted); }

.surplus-wait {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lg-solar) 26%, transparent);
  font-size: .74rem;
  font-weight: 560;
}

.surplus-budget {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--lg-control) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
}

.surplus-budget span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--lg-success);
  transition: width .5s var(--lg-ease);
}

/* Három állású kapcsoló: többlet szerint / mindig be / kikapcsolva. */
.surplus-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lg-control) 74%, transparent);
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
}

.surplus-mode {
  padding: 7px 6px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 560;
  transition: background .18s var(--lg-ease), color .18s var(--lg-ease);
}

.surplus-mode.selected {
  background: var(--lg-card-strong, var(--card));
  color: var(--glass-ink, var(--ink));
  box-shadow: 0 1px 4px var(--lg-shadow, rgba(0, 0, 0, .12));
}

.surplus-mode:disabled { opacity: .5; }

.surplus-history-wrap { margin-top: 8px; }

.surplus-history {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.surplus-history li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lg-control) 74%, transparent);
  font-size: .8rem;
}

.surplus-history li span { color: var(--muted); font-size: .76rem; text-align: right; }
.surplus-history li em { grid-column: 1 / -1; font-style: normal; color: var(--muted); font-size: .75rem; }

@media (max-width: 760px) {
  .surplus-hero { grid-template-columns: 1fr; }
  .surplus-flow { min-height: 56px; }
  .surplus-modes { grid-template-columns: 1fr; }
}

/* --- Szivattyú energia: a szivattyú kártya hátoldala -------------------- */

/* A pumpaenergia korábban külön dashboard-widget volt, pedig ugyanarról az
   eszközről szól, mint a szivattyú kártya, és ugyanabból a P110 mérésből
   dolgozik. Két csempe versengett egy helyért, és a felhasználónak kellett
   összepárosítania őket. Most a szivattyú kártya megfordítva mutatja. */
.pump-energy-face {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pump-energy-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.pump-energy-head h3 { margin: 0; font-size: .95rem; }

.pump-energy-head small {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.3;
}

.energy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
  gap: 8px;
}

.energy-metric {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 58%, transparent);
}

.energy-metric span {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.25;
}

.energy-metric b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.energy-chart svg { width: 100%; height: auto; }

.energy-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .energy-grid { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); }
  .energy-metric b { font-size: .92rem; }
}

/* A SolaX kapcsolati diagnosztika sorában a cím és a hibakód egymás mellé
   került, elválasztás nélkül — így „192.168.0.203transport_busy” látszott.
   A részlet külön sorba kerül, hogy a cím és az ok is olvasható maradjon. */
.solax-probe-detail {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
 * Légtisztító és levegőminőség
 * A sávszínek az európai levegőminőségi index (EAQI) hat kategóriáját követik,
 * ezért egy „Gyenge” ugyanazt a narancsot kapja itt is, mint bárhol máshol.
 * ------------------------------------------------------------------------- */
:root {
  --aq-good: #17a673;
  --aq-fair: #74bf3f;
  --aq-moderate: #e8bb1f;
  --aq-poor: #ef8a2a;
  --aq-bad: #de4f43;
  --aq-severe: #a0429e;
}

.local-appliance-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.air-card {
  --aq-color: var(--muted);
  display: grid;
  gap: 11px;
  align-content: start;
  position: relative;
  overflow: hidden;
  padding: 15px 16px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 20px;
  background: var(--lg-card, var(--card));
  box-shadow: inset 0 1px 0 var(--lg-inner-shadow, rgba(255, 255, 255, .3));
}

.air-card[data-band="good"] { --aq-color: var(--aq-good); }
.air-card[data-band="fair"] { --aq-color: var(--aq-fair); }
.air-card[data-band="moderate"] { --aq-color: var(--aq-moderate); }
.air-card[data-band="poor"] { --aq-color: var(--aq-poor); }
.air-card[data-band="bad"] { --aq-color: var(--aq-bad); }
.air-card[data-band="severe"] { --aq-color: var(--aq-severe); }

.air-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--aq-color);
}

.air-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.air-card > header div { display: grid; gap: 2px; min-width: 0; }
.air-card > header b { font-size: .98rem; }
.air-card > header small { color: var(--muted); font-size: .75rem; }

.air-hero {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.air-ring { width: 84px; height: 84px; }
.air-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.air-ring-track { stroke: color-mix(in srgb, var(--lg-control) 88%, transparent); }
.air-ring-value { stroke: var(--aq-color); transition: stroke-dasharray .6s var(--lg-ease); }

.air-ring-number {
  fill: var(--glass-ink, var(--ink));
  font-size: 20px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

.air-ring-unit { fill: var(--muted); font-size: 9px; }

.air-ring-empty {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  background: color-mix(in srgb, var(--lg-control) 80%, transparent);
}

.air-hero-text { display: grid; gap: 3px; min-width: 0; }
.air-hero-text b { font-size: .92rem; color: var(--aq-color); }
.air-hero-text p { margin: 0; font-size: .8rem; color: var(--muted); }

.air-trend {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lg-control) 78%, transparent);
  font-size: .73rem;
  color: var(--muted);
}

.air-trend[data-direction="worsening"] { background: color-mix(in srgb, var(--aq-poor) 26%, transparent); color: var(--glass-ink, var(--ink)); }
.air-trend[data-direction="improving"] { background: color-mix(in srgb, var(--aq-good) 24%, transparent); color: var(--glass-ink, var(--ink)); }

/* Hatlépcsős skála: az aktuális sáv kiemelve, a többi halvány vezetősáv. */
.air-scale { display: flex; gap: 3px; }

.air-scale-step {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  opacity: .22;
  transition: opacity .3s var(--lg-ease), transform .3s var(--lg-ease);
}

.air-scale-step[data-band="good"] { background: var(--aq-good); }
.air-scale-step[data-band="fair"] { background: var(--aq-fair); }
.air-scale-step[data-band="moderate"] { background: var(--aq-moderate); }
.air-scale-step[data-band="poor"] { background: var(--aq-poor); }
.air-scale-step[data-band="bad"] { background: var(--aq-bad); }
.air-scale-step[data-band="severe"] { background: var(--aq-severe); }
.air-scale-step[data-active="true"] { opacity: 1; transform: scaleY(1.6); }

.air-spark-wrap { display: grid; gap: 2px; margin: 0; }

.air-spark-wrap figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: .71rem;
}

.air-spark { width: 100%; height: 34px; }
.air-spark-line { fill: none; stroke: var(--aq-color); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.air-spark-fill { fill: color-mix(in srgb, var(--aq-color) 16%, transparent); stroke: none; }

.air-metrics {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.air-metric {
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lg-control) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
}

.air-metric small { color: var(--muted); font-size: .7rem; }
.air-metric b { font-size: .88rem; font-variant-numeric: tabular-nums; }
.air-metric[data-band="poor"], .air-metric[data-band="bad"], .air-metric[data-band="severe"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aq-poor) 55%, transparent);
}

.air-filter { display: grid; gap: 4px; }
.air-filter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.air-filter-head small { color: var(--muted); font-size: .74rem; }
.air-filter-head b { font-size: .86rem; font-variant-numeric: tabular-nums; }

.air-filter-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--lg-control) 72%, transparent);
}

.air-filter-bar span { display: block; height: 100%; border-radius: 999px; background: var(--lg-success); }
.air-filter[data-tone="warn"] .air-filter-bar span { background: var(--aq-poor); }
.air-filter[data-tone="bad"] .air-filter-bar span { background: var(--aq-bad); }
.air-filter-note { color: var(--muted); font-size: .73rem; }

.air-controls {
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--lg-edge-soft, var(--line));
}

.air-actions { display: flex; flex-wrap: wrap; gap: 7px; }
/* A bekapcsoló művelet kiemelt: telefonon egy pillantással látszik, melyik
 * gomb indítja el a készüléket. */
.air-action.primary-tint {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--glass-accent, var(--green));
  font-weight: 580;
}

.air-control { display: grid; gap: 5px; }
.air-control > small { color: var(--muted); font-size: .74rem; }
.air-control-switch { justify-content: flex-start; }

.air-choice {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lg-control) 74%, transparent);
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
}

.air-choice-item {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: .77rem;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .18s var(--lg-ease), color .18s var(--lg-ease);
}

.air-choice-item.selected {
  background: var(--lg-card-strong, var(--card));
  color: var(--glass-ink, var(--ink));
  box-shadow: 0 1px 4px var(--lg-shadow, rgba(0, 0, 0, .12));
}

.air-vacuum-facts { margin: 0; font-size: .84rem; color: var(--muted); }

@media (max-width: 760px) {
  .local-appliance-cards { grid-template-columns: 1fr; }
  .air-hero { grid-template-columns: 70px minmax(0, 1fr); }
  .air-ring { width: 70px; height: 70px; }
  .air-choice { flex-wrap: wrap; }
  .air-choice-item { flex: 1 1 44%; }
}

/* ---------------------------------------------------------------------------
 * Szkriptek — kártya, idővonal és lépéspaletta
 * A lépések csoportszíne (folyamat / otthon / energia / kert / üzenet) végig
 * ugyanaz: a kártyán, a szerkesztőben és a palettán is. Így egy szkriptről
 * olvasás nélkül is látszik, mit csinál.
 * ------------------------------------------------------------------------- */
:root {
  --step-flow: #6b7ce8;
  --step-home: #21a6c4;
  --step-energy: #f0a825;
  --step-garden: #2fa06b;
  --step-message: #b565d8;
}

[data-group="flow"] { --step-color: var(--step-flow); }
[data-group="home"] { --step-color: var(--step-home); }
[data-group="energy"] { --step-color: var(--step-energy); }
[data-group="garden"] { --step-color: var(--step-garden); }
[data-group="message"] { --step-color: var(--step-message); }

.script-search { margin: 8px 0 0; }
.script-search input { width: 100%; }
.script-filters { margin-top: 8px; }
.script-filters:empty { display: none; }

.script-card.is-off { opacity: .6; }

.script-card > header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.script-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lg-blue) 16%, var(--lg-control));
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
  font-size: 1rem;
}

/* Idővonal: a bal oldali vezetővonal köti össze a lépéseket. */
.script-timeline {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 2px;
  list-style: none;
}

.script-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  position: relative;
  padding-bottom: 2px;
}

.script-step::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: -6px;
  width: 1px;
  background: var(--lg-edge-soft, var(--line));
}

.script-step:last-child::after { display: none; }

.script-step-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--step-color, var(--lg-blue)) 28%, var(--lg-control));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step-color, var(--lg-blue)) 50%, transparent);
  font-size: .82rem;
  color: var(--glass-ink, var(--ink));
}

.script-step div { display: grid; gap: 1px; min-width: 0; }
.script-step b { font-size: .8rem; font-weight: 600; }
.script-step small { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }

.script-more > summary {
  padding: 5px 2px;
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
}

.script-more > .script-timeline { margin-top: 6px; }

/* Szerkesztő: a lépés fejlécében a típus gomb, nem legördülő lista. */
.step-row { border-left: 3px solid color-mix(in srgb, var(--step-color, var(--lg-blue)) 60%, transparent); }

.step-kind-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  padding: 6px 10px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--step-color, var(--lg-blue)) 12%, var(--lg-control));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step-color, var(--lg-blue)) 30%, transparent);
  color: var(--glass-ink, var(--ink));
  text-align: left;
}

.step-kind-button b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-kind-button em { margin-left: auto; color: var(--muted); font-size: .72rem; font-style: normal; }
.step-kind-icon { font-size: .92rem; }

/* Beágyazott feltétel: külön keretben, hogy elváljon a lépés saját mezőitől. */
.condition-box {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 11px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--lg-control) 62%, transparent);
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
}

.condition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.condition-head b { font-size: .84rem; }
.condition-head select { width: auto; min-width: 160px; max-width: 60%; }

.condition-fields {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* A rácsos elrendezés alapértelmezett `min-width: auto`-ja a hosszú
 * választólistát kitolja a saját oszlopából, és rácsúszik a szomszédjára.
 * Ez a két szabály tartja a mezőket a helyükön a lépéseknél és a
 * feltételeknél is. */
.condition-fields > *,
.step-fields > * { min-width: 0; }

.condition-fields :is(input, select, textarea),
.step-fields :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.entity-data-fields {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--step-color, var(--lg-blue)) 8%, var(--lg-control));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step-color, var(--lg-blue)) 24%, transparent);
}

.entity-data-fields > b { font-size: .78rem; }
.entity-data-fields > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 8px;
}
.entity-command-hint { grid-column: 1 / -1; }

.condition-weekdays { display: grid; gap: 5px; grid-column: 1 / -1; }
.condition-weekdays > small { color: var(--muted); font-size: .74rem; }

/* Lépéspaletta */
.step-palette { width: min(640px, 96vw); }
#stepPaletteStage { display: grid; gap: 14px; }
.palette-group { display: grid; gap: 8px; }
.palette-group-head { display: grid; gap: 1px; }
.palette-group-head b { font-size: .86rem; }
.palette-group-head small { color: var(--muted); font-size: .75rem; }

.palette-items {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.palette-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--lg-card, var(--card));
  box-shadow: inset 0 0 0 1px var(--lg-edge-soft, var(--line));
  text-align: left;
  transition: transform .16s var(--lg-ease), box-shadow .16s var(--lg-ease);
}

.palette-item:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step-color, var(--lg-blue)) 55%, transparent),
    0 4px 12px var(--lg-shadow, rgba(0, 0, 0, .12));
}

.palette-item span { display: grid; gap: 1px; min-width: 0; }
.palette-item b { font-size: .85rem; }
.palette-item small { color: var(--muted); font-size: .74rem; }

.palette-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--step-color, var(--lg-blue)) 18%, var(--lg-control));
  font-size: .95rem;
}

@media (max-width: 760px) {
  .palette-items { grid-template-columns: 1fr; }
  .condition-fields { grid-template-columns: 1fr; }
  .condition-head { align-items: stretch; flex-direction: column; }
  .condition-head select { max-width: none; width: 100%; }
}
/* ---------------------------------------------------------------------------
 * Jelölőnégyzet — a bepipált állapotnak látszania kell
 *
 * Az `index.html` saját, rajzolt jelölőnégyzetet ad (`appearance: none` + pipa
 * a `::before`-ban), a bejelölést pedig a kitöltés mutatja. Ezt viszont több,
 * generikus `input`-ra húzott témaszabály is felülírta `!important`-tal (üveg
 * háttér, `--glass-edge` keret, „time” téma), és mivel a `:checked` szabály
 * nem volt `!important`, a bepipált négyzet pontosan úgy nézett ki, mint az
 * üres — a fehér pipa beleveszett a világos üvegbe.
 *
 * Ez a blokk a bejelölt és a be nem jelölt állapotot is kimondja, elég magas
 * fajsúllyal ahhoz, hogy minden téma mellett érvényes maradjon. A kontraszt
 * témát szándékosan kihagyja: ott az `index.html` fekete-fehér változata a
 * helyes, és oda egyik generikus üvegszabály sem nyúl bele.
 * ------------------------------------------------------------------------- */
body:not([data-theme="contrast"]) :is(
  input[type="checkbox"],
  input[type="radio"]
):not([role="switch"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-grid !important;
  place-content: center;
  flex: 0 0 21px;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  padding: 0 !important;
  border: 1.5px solid color-mix(in srgb, var(--glass-muted, var(--muted)) 62%, transparent) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--glass-ink, var(--ink)) 9%, transparent) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07) !important;
  cursor: pointer;
  /* Egy 21×21-es négyzeten az elmosás nem látszik, de minden képkockán újabb
     réteget kérne — egy beállításlapon ez tucatnyi fölösleges réteg. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition:
    background .16s var(--lg-ease),
    border-color .16s var(--lg-ease),
    box-shadow .16s var(--lg-ease),
    transform .12s var(--lg-ease);
}

body:not([data-theme="contrast"]) input[type="radio"]:not([role="switch"]) {
  border-radius: 50% !important;
}

body:not([data-theme="contrast"]) :is(
  input[type="checkbox"],
  input[type="radio"]
):not([role="switch"])::before {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .14s cubic-bezier(.2, .9, .3, 1.35);
}

body:not([data-theme="contrast"]) :is(
  input[type="checkbox"],
  input[type="radio"]
):not([role="switch"]):checked {
  border-color: var(--green) !important;
  background: var(--green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent) !important;
}

body:not([data-theme="contrast"]) :is(
  input[type="checkbox"],
  input[type="radio"]
):not([role="switch"]):checked::before {
  transform: rotate(45deg) scale(1);
}

body:not([data-theme="contrast"]) :is(
  input[type="checkbox"],
  input[type="radio"]
):not([role="switch"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent);
  outline-offset: 2px;
}

body:not([data-theme="contrast"]) :is(
  input[type="checkbox"],
  input[type="radio"]
):not([role="switch"]):disabled {
  cursor: not-allowed;
  opacity: .48;
}

/* Az `.ha-switch` rejtett vezérlője továbbra is rejtett marad: a látható
   kapcsolót a mellette álló `.ha-switch-track` rajzolja. */
body:not([data-theme="contrast"]) .ha-switch input[type="checkbox"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

@media (pointer: coarse) {
  body:not([data-theme="contrast"]) :is(
    input[type="checkbox"],
    input[type="radio"]
  ):not([role="switch"]) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex-basis: 24px;
  }
}

/* A large widget rule previously converted grid metrics to flex, scattering
 * values across unequal rows. Size changes now reveal content without changing
 * the component's own layout model. */
[data-widget-mode="large"] .panel-subtitle { display: block !important; }
[data-widget-mode="large"] .device-status-metrics { display: grid !important; }
[data-widget-mode="large"] .weather-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard :is(.digest-widget, .favorites-widget, .presence-widget, .helper-widget) :is(
  .panel-head,
  .panel-actions,
  .digest-stage,
  .favorite-stage,
  .helper-widget-stage,
  .helper-strip,
  .favorite-chip,
  .digest-section
) { min-width: 0; max-width: 100%; }

.dashboard .digest-widget .panel-actions {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) repeat(2, 42px);
  align-items: center;
}

.dashboard .digest-widget .panel-actions :is(select, button) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}

.favorite-chip { max-width: 100%; }
.favorite-open { min-width: 0; overflow-wrap: anywhere; }
.digest-section :is(h4, li, small),
.helper-strip :is(b, small) { overflow-wrap: anywhere; }

@media (max-width: 760px) {

  .dashboard .helper-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .dashboard .helper-strip > :is(.helper-inline, button, select) {
    max-width: 100%;
    justify-self: end;
  }

  .dashboard .favorite-stage { display: grid; grid-template-columns: minmax(0, 1fr); }
  .dashboard .favorite-chip { display: grid; grid-template-columns: minmax(0, 1fr) 40px; width: 100%; }
  .dashboard .favorite-open { justify-content: flex-start; text-align: left; }
}

@media (max-width: 420px) {
  .dashboard .digest-widget .panel-actions { width: 100%; }
  .dashboard .digest-widget .panel-head > div:first-child { flex-basis: 100%; }
  .dashboard .helper-strip { grid-template-columns: minmax(0, 1fr); }
  .dashboard .helper-strip > :is(.helper-inline, button, select) { justify-self: stretch; width: 100%; }
}

/* Appearance dialog and shared form-control geometry.
 *
 * The legacy inline stylesheet still supplies a safe no-JS fallback. This
 * late component layer owns the enhanced dialog so its controls remain
 * aligned with large text, Safari time inputs and every supported skin. */

/* Author-level layout rules must never override the native closed-dialog
 * state. In particular, `.display-dialog { display: grid; }` would otherwise
 * leave the Appearance dialog in the document flow after `close()`. */
html body dialog:not([open]) { display: none !important; }

body[data-ui="elo"] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  box-sizing: border-box;
  font: inherit;
  line-height: 1.25;
}

html body[data-ui="elo"] .display-dialog[open] {
  --display-accent: #087f83;
  --display-accent-ink: #f5ffff;
  --display-ink: #133947;
  --display-muted: #506f7a;
  --display-edge: rgba(45, 133, 151, .24);
  --display-surface: rgba(239, 252, 253, .92);
  --display-section: rgba(255, 255, 255, .40);
  --display-control: rgba(255, 255, 255, .58);
  --display-track: rgba(34, 89, 106, .16);
  --display-radius: 26px;
  --display-card-radius: 18px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(760px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: clamp(15px, 2.2vw, 22px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--display-edge) !important;
  border-radius: var(--display-radius) !important;
  background: var(--display-surface) !important;
  color: var(--display-ink) !important;
  box-shadow: 0 28px 80px rgba(8, 32, 47, .28) !important;
  /* The legacy glass layer applies a 28px backdrop filter to every dialog.
   * Safari and Chromium can retain that composited layer for a frame after
   * close(), leaving the three skin previews painted below the app header.
   * This surface is already effectively opaque, so a separate blur is both
   * unnecessary and the source of the transient ghost image. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-align: start;
}

html body[data-ui="elo"] .display-dialog::backdrop {
  background: rgba(5, 16, 28, .58);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body[data-ui="elo"] .display-dialog > .display-dialog-head,
html body[data-ui="elo"] .display-dialog > .display-section-brightness,
html body[data-ui="elo"] .display-dialog > .display-section-night,
html body[data-ui="elo"] .display-dialog > .fullscreen-button {
  grid-column: 1 / -1;
}

html body[data-ui="elo"] .display-dialog .display-dialog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin: 0;
  padding: 1px 2px 4px;
}

html body[data-ui="elo"] .display-dialog .display-dialog-head > div { min-width: 0; }
html body[data-ui="elo"] .display-dialog .display-dialog-head h2 {
  margin: 0;
  color: var(--display-ink) !important;
  font-size: clamp(1.25rem, calc(1.3rem * var(--ui-font-scale, 1)), 1.65rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  overflow-wrap: normal;
}

html body[data-ui="elo"] .display-dialog .display-dialog-head p {
  margin: 5px 0 0;
  color: var(--display-muted) !important;
  font-size: clamp(.74rem, calc(.76rem * var(--ui-font-scale, 1)), .9rem);
  line-height: 1.35;
}

html body[data-ui="elo"] .display-dialog #closeDisplay {
  min-width: 68px;
  min-height: 42px;
  padding: 8px 13px;
  border-color: var(--display-edge) !important;
  background: var(--display-control) !important;
  color: var(--display-ink) !important;
}

html body[data-ui="elo"] .display-dialog .display-section {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--display-edge);
  border-radius: var(--display-card-radius);
  background: var(--display-section);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

html body[data-ui="elo"] .display-dialog .display-section-choice { min-width: 0; }

html body[data-ui="elo"] .display-dialog .display-section > b,
html body[data-ui="elo"] .display-dialog .display-section-heading > b {
  display: block;
  min-width: 0;
  color: var(--display-ink) !important;
  font-size: clamp(.82rem, calc(.84rem * var(--ui-font-scale, 1)), 1rem);
  line-height: 1.2;
}

html body[data-ui="elo"] .display-dialog .display-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  min-width: 0;
  flex-wrap: wrap;
}

html body[data-ui="elo"] .display-dialog .display-section-heading small {
  min-width: 0;
  color: var(--display-muted) !important;
  font-size: clamp(.68rem, calc(.7rem * var(--ui-font-scale, 1)), .82rem);
  line-height: 1.3;
}

/* Each chooser card keeps its own identity; it no longer inherits the active
 * skin's button fill, which made all three previews identical grey blocks. */

html body[data-ui="elo"] .display-dialog .segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 9px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--display-edge) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--display-track) 72%, transparent) !important;
  box-shadow: inset 0 1px 3px rgba(7, 26, 39, .08) !important;
}

html body[data-ui="elo"] .display-dialog .segmented button {
  box-sizing: border-box;
  min-width: 0;
  min-height: 40px;
  padding: 7px 6px;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--display-muted) !important;
  font-size: clamp(.7rem, calc(.72rem * var(--ui-font-scale, 1)), .86rem);
  line-height: 1.15;
  white-space: normal;
}

html body[data-ui="elo"] .display-dialog .segmented button.selected {
  border-color: color-mix(in srgb, var(--display-accent) 54%, transparent) !important;
  background: var(--display-accent) !important;
  color: var(--display-accent-ink) !important;
  box-shadow: 0 5px 13px color-mix(in srgb, var(--display-accent) 24%, transparent) !important;
}

html body[data-ui="elo"] .display-dialog .brightness-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0 0 8px;
  color: var(--display-ink) !important;
  font-size: clamp(.76rem, calc(.78rem * var(--ui-font-scale, 1)), .94rem);
  line-height: 1.25;
}

html body[data-ui="elo"] .display-dialog .brightness-line :is(b, span) { min-width: 0; }
html body[data-ui="elo"] .display-dialog .brightness-line output {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--display-edge);
  border-radius: 999px;
  background: var(--display-control);
  color: var(--display-ink) !important;
  font: 700 .75rem/1.2 var(--skin-data-font, ui-monospace, monospace);
  white-space: nowrap;
}

html body[data-ui="elo"] .display-dialog .display-hint {
  margin: 7px 0 0;
  color: var(--display-muted) !important;
  font-size: clamp(.66rem, calc(.68rem * var(--ui-font-scale, 1)), .8rem) !important;
  line-height: 1.35;
}

html body[data-ui="elo"] .display-dialog .checkline {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  margin: 3px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--display-edge);
  border-radius: 13px;
  background: var(--display-control);
  color: var(--display-ink) !important;
  font-size: clamp(.72rem, calc(.75rem * var(--ui-font-scale, 1)), .9rem);
  line-height: 1.3;
  cursor: pointer;
}

html body[data-ui="elo"] .display-dialog .night-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 11px;
}

html body[data-ui="elo"] .display-dialog .night-time-grid > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  color: var(--display-muted) !important;
  font-size: clamp(.7rem, calc(.72rem * var(--ui-font-scale, 1)), .85rem);
  font-weight: 700;
}

html body[data-ui="elo"] .display-dialog :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--display-edge) !important;
  border-radius: 12px !important;
  background-color: var(--display-control) !important;
  color: var(--display-ink) !important;
  caret-color: var(--display-accent);
  box-shadow: inset 0 1px 2px rgba(6, 25, 38, .07) !important;
}

html body[data-ui="elo"] .display-dialog input[type="time"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  cursor: text;
}

html body[data-ui="elo"] .display-dialog input[type="time"]::-webkit-date-and-time-value {
  min-height: 1.25em;
  text-align: start;
}

html body[data-ui="elo"] .display-dialog input[type="time"]::-webkit-calendar-picker-indicator {
  min-width: 22px;
  min-height: 22px;
  opacity: .72;
  cursor: pointer;
}

html body[data-ui="elo"] .display-dialog select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-inline-end: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--display-accent) 50%),
    linear-gradient(135deg, var(--display-accent) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

html body[data-ui="elo"] .display-dialog option {
  background: color-mix(in srgb, var(--display-section) 92%, #162234);
  color: var(--display-ink);
}

html body[data-ui="elo"] .display-dialog input[type="range"] {
  --range-progress: 50%;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--display-accent);
}

html body[data-ui="elo"] .display-dialog input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid var(--display-edge);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--display-accent) 0 var(--range-progress), var(--display-track) var(--range-progress) 100%);
  box-shadow: inset 0 1px 3px rgba(5, 25, 35, .14);
}

html body[data-ui="elo"] .display-dialog input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid color-mix(in srgb, var(--display-accent) 72%, white);
  border-radius: 50%;
  background: var(--display-accent-ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--display-accent) 28%, transparent);
  -webkit-appearance: none;
}

html body[data-ui="elo"] .display-dialog input[type="range"]::-moz-range-track {
  height: 7px;
  border: 1px solid var(--display-edge);
  border-radius: 999px;
  background: var(--display-track);
}

html body[data-ui="elo"] .display-dialog input[type="range"]::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--display-accent);
}

html body[data-ui="elo"] .display-dialog input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--display-accent) 72%, white);
  border-radius: 50%;
  background: var(--display-accent-ink);
}

html body[data-ui="elo"] .display-dialog :is(input, select, textarea):focus-visible {
  border-color: var(--display-accent) !important;
  outline: 3px solid color-mix(in srgb, var(--display-accent) 22%, transparent) !important;
  outline-offset: 2px;
}

html body[data-ui="elo"] .display-dialog .fullscreen-button {
  width: 100%;
  min-height: 44px;
  margin: 0;
  border-color: var(--display-edge) !important;
  background: var(--display-control) !important;
  color: var(--display-ink) !important;
}

@media (max-width: 760px) {
  /* Keep the [open] specificity of the desktop contract. Without it the
   * two-column rule above beats this media query and compresses the complete
   * chooser into the left half of the otherwise full-width dialog. */
  html body[data-ui="elo"] .display-dialog[open] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px;
    width: min(calc(100vw - 12px), 620px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    padding: 12px;
    border-radius: 22px !important;
  }

  html body[data-ui="elo"] .display-dialog[open] > *{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  html body[data-ui="elo"] .display-dialog > :is(
    .display-dialog-head,
    .display-section,
    .fullscreen-button
  ) { grid-column: 1; }

  html body[data-ui="elo"] .display-dialog .display-section { padding: 11px; }
  html body[data-ui="elo"] .display-dialog .display-dialog-head h2 { font-size: clamp(1.15rem, 6vw, 1.45rem); }
  html body[data-ui="elo"] .display-dialog .display-section-heading { display: grid; gap: 3px; }
}

@media (max-width: 360px) {
  html body[data-ui="elo"] .display-dialog .night-time-grid { grid-template-columns: minmax(0, 1fr); }
  html body[data-ui="elo"] .display-dialog .segmented button { padding-inline: 3px; }
  html body[data-ui="elo"] .display-dialog #closeDisplay { min-width: 58px; }
}

@media (pointer: coarse) {
  html body[data-ui="elo"] .display-dialog :is(button, input:not([type="range"]), select) { min-height: 46px; }
}

@media (prefers-reduced-transparency: reduce) {
  html body[data-ui="elo"] .display-dialog,
  html body[data-ui="elo"] .display-dialog .display-section{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* Koordinált eszközfelderítés: látható, de minden skin tokenjeit öröklő állapot. */
#homeDevices .device-scan-progress {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 12px 0 16px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  color: var(--muted);
  font-size: clamp(.78rem, .74rem + .15vw, .9rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#homeDevices .device-scan-progress[data-state="working"]::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent);
  animation: device-scan-pulse 1.35s ease-in-out infinite;
}

#homeDevices .device-scan-progress[data-state="ok"] {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--good, #22a06b) 34%, var(--line));
}

#homeDevices .device-scan-progress[data-state="warn"],
#homeDevices .device-scan-progress[data-state="bad"] {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--danger, #d85b61) 38%, var(--line));
}

#homeDevices .device-grid[aria-busy="true"] {
  opacity: .72;
  pointer-events: none;
}

@keyframes device-scan-pulse {
  50% { opacity: .45; transform: scale(.76); }
}

@media (prefers-reduced-motion: reduce) {
  #homeDevices .device-scan-progress::before { animation: none !important; }
}

/* Vezérlőközpont és rendezett alkalmazásnavigáció.
 *
 * Az Eszközök lap a felderítésé, a Vezérlőközpont a napi műveleteké. A két
 * felelősség külön lapot kap, de ugyanazokat a stabil DOM-azonosítókat és
 * eseménykezelőket használja. Ez a réteg csak az elrendezést birtokolja. */

/* -------------------------------------------------------------------------
 * Vezérlőközpont
 * ---------------------------------------------------------------------- */

body[data-ui="elo"][data-page="controls"] .dashboard {
  align-content: start;
}

body[data-ui="elo"][data-page="controls"] :is(#controlCenter, #tvStatus) {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.control-center {
  --control-accent: var(--skin-focus, var(--green));
  --control-tile-surface: color-mix(in srgb, var(--skin-card-surface, var(--card)) 78%, transparent);
  --control-tile-edge: color-mix(in srgb, var(--control-accent) 24%, var(--skin-card-edge, var(--line)));
  overflow: clip;
}

.control-center-head {
  align-items: flex-start;
  margin-bottom: clamp(15px, 2vw, 22px);
}

.control-center-head > div { min-width: 0; }

.control-center-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--control-accent) !important;
  font-family: var(--skin-data-font, ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.control-center-head h2 { margin-block: 0 3px; }

.control-center-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(11px, 1.5vw, 17px);
  min-width: 0;
}

.control-center-group {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 17px);
  border: 1px solid var(--control-tile-edge);
  border-radius: calc(var(--skin-panel-radius, 22px) - 5px);
  background:
    linear-gradient(145deg, color-mix(in srgb, white 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--skin-card-surface, var(--card)) 58%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent);
}

.control-center-group > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.control-center-group > div:first-child > b {
  font-size: clamp(.92rem, 1.25vw, 1.04rem);
  overflow-wrap: break-word;
}

.control-center-group > div:first-child > small {
  font-size: .72rem;
  line-height: 1.35;
}

.control-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

html body[data-ui="elo"] .control-tile {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 10px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 94px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid var(--control-tile-edge) !important;
  border-radius: var(--skin-control-radius, 14px) !important;
  background: var(--control-tile-surface) !important;
  color: var(--skin-surface-ink, var(--ink)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 34%, transparent), 0 8px 22px color-mix(in srgb, var(--control-accent) 8%, transparent) !important;
  text-align: start;
  isolation: isolate;
}

html body[data-ui="elo"] .control-tile::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -24px;
  bottom: -31px;
  width: 76px;
  height: 76px;
  border: 1px solid color-mix(in srgb, var(--control-accent) 18%, transparent);
  border-radius: 50%;
  opacity: .7;
  pointer-events: none;
}

.control-tile > i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--control-accent) 30%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--control-accent) 13%, transparent);
  color: var(--control-accent);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
  font-size: 1.2rem;
  font-style: normal;
  line-height: 1;
}

.control-tile > span {
  display: grid;
  align-self: end;
  gap: 2px;
  min-width: 0;
}

.control-tile > span > b {
  font-size: .83rem;
  line-height: 1.17;
  overflow-wrap: break-word !important;
  word-break: normal;
}

.control-tile > span > small {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  font-size: .66rem;
  line-height: 1.24;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.control-tile > em {
  align-self: start;
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--skin-surface-muted, var(--muted)) 88%, var(--control-accent)) !important;
  font-family: var(--skin-data-font, ui-monospace, monospace);
  font-size: .61rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-center-favorites {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin-top: clamp(11px, 1.5vw, 17px);
  padding: clamp(11px, 1.35vw, 15px);
  border: 1px solid var(--control-tile-edge);
  border-radius: calc(var(--skin-panel-radius, 22px) - 5px);
  background: color-mix(in srgb, var(--skin-card-surface, var(--card)) 54%, transparent);
}

.control-center-favorites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px 14px;
  min-width: 0;
}

.control-center-favorites-head > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.control-center-favorites-head b { font-size: .9rem; }
.control-center-favorites-head small { font-size: .68rem; line-height: 1.3; }

html body[data-ui="elo"] .control-center-favorites-head > button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 7px 11px;
  white-space: nowrap;
}

html body[data-ui="elo"] .control-center-favorites-head > button::before {
  content: "＋";
  margin-right: 3px;
}

html body[data-ui="elo"] .control-center-favorites .favorite-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

html body[data-ui="elo"] .control-center-favorites .favorite-stage > .empty {
  width: 100%;
  margin: 0;
  padding: 7px 2px;
}

html body[data-ui="elo"] .control-center-favorites .favorite-chip {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  width: auto;
  min-width: 0;
  max-width: min(100%, 310px);
  padding: 2px 3px 2px 0;
  border-color: color-mix(in srgb, var(--control-accent) 22%, var(--skin-card-edge, var(--line)));
  background: var(--control-tile-surface);
}

html body[data-ui="elo"] .control-center-favorites .favorite-open {
  min-width: 0;
  min-height: 40px;
  padding: 6px 5px 6px 10px;
  overflow: hidden;
  font-size: .76rem;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-ui="elo"] .control-center-favorites .favorite-chip .smallbtn {
  width: 36px;
  min-width: 36px;
  min-height: 36px !important;
  padding: 4px;
}

@media (hover: hover) and (pointer: fine) {
  html body[data-ui="elo"] .control-tile:hover {
    border-color: color-mix(in srgb, var(--control-accent) 52%, white 12%) !important;
    transform: translateY(-2px);
  }
}

body[data-ui="elo"][data-page="controls"] #tvStatus .tv-limit {
  margin-bottom: 0;
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Csoportosított oldalsáv és mobil fiók
 * ---------------------------------------------------------------------- */

@media (min-width: 761px) {
  html body[data-ui="elo"] .app > aside {
    overflow: hidden;
  }

  html body[data-ui="elo"] .app > aside > .nav {
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--skin-focus, var(--green)) 45%, transparent) transparent;
  }

  html body[data-ui="elo"] .app > aside > .nav::-webkit-scrollbar { width: 5px; }
  html body[data-ui="elo"] .app > aside > .nav::-webkit-scrollbar-track { background: transparent; }
  html body[data-ui="elo"] .app > aside > .nav::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: color-mix(in srgb, var(--skin-focus, var(--green)) 42%, transparent);
  }

  html body[data-ui="elo"] .nav-group-label {
    display: block;
    min-width: 0;
    margin: 9px 9px 1px;
    color: color-mix(in srgb, var(--glass-muted, var(--muted)) 84%, var(--skin-focus, var(--green))) !important;
    font-family: var(--skin-data-font, ui-monospace, monospace);
    font-size: .59rem;
    font-weight: 840;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  html body[data-ui="elo"] .nav-group-label:first-child { margin-top: 2px; }

  html body[data-ui="elo"] .app > aside > .nav > a {
    min-height: 43px;
  }

  html body[data-ui="elo"] .app > aside > .nav .navtext {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body[data-ui="elo"] .app > aside > .server-card {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* Tablet és keskeny notebook: az oldalsáv mellett négy csempe már túl kevés
 * szöveget mutatna. A két funkciócsoport egymás alá kerül, bennük két széles,
 * informatív vezérlő marad egy sorban. */
@media (min-width: 761px) and (max-width: 1100px) {
  .control-center-groups { grid-template-columns: minmax(0, 1fr); }
}

/* A falitábla nézetben a navigáció akkor sem maradhat a body alján, ha egy
 * keskeny/fekvő nézet előzőleg oda portálozta. */
html body[data-view="wallboard"] .nav,
html body[data-view="wallboard"] .mobile-menu-panel,
html body[data-view="wallboard"] #mobileMenuButton {
  display: none !important;
}

/* A fiók a body közvetlen gyereke, ezért magasabb réteg kell neki, mint a
 * szintén fix alsó navigációnak és a régi dialógus-alaprétegnek. */
html body[data-ui="elo"] .mobile-menu-panel {
  z-index: 2600 !important;
  box-sizing: border-box;
  min-width: 0;
}

.mobile-menu-head {
  display: grid;
  gap: 1px;
  padding: 4px 6px 10px;
}

.mobile-menu-head > b { font-size: 1rem; }
.mobile-menu-head > small { color: var(--glass-muted, var(--muted)); font-size: .7rem; }

.mobile-menu-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.mobile-menu-groups > section {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--skin-card-edge, var(--line)) 82%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--skin-card-surface, var(--card)) 52%, transparent);
}

.mobile-menu-groups > section > b {
  padding: 2px 5px 5px;
  color: var(--glass-muted, var(--muted)) !important;
  font-family: var(--skin-data-font, ui-monospace, monospace);
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

html body[data-ui="elo"] .mobile-menu-groups button,
html body[data-ui="elo"] .mobile-menu-tools button {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--skin-surface-ink, var(--ink));
  text-align: start;
}

.mobile-menu-groups button > i,
.mobile-menu-tools button > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--skin-focus, var(--green)) 12%, transparent);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-style: normal;
}

.mobile-menu-groups button > span,
.mobile-menu-tools button > span {
  min-width: 0;
  overflow: hidden;
  font-size: .74rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--skin-card-edge, var(--line)) 72%, transparent);
}

/* -------------------------------------------------------------------------
 * Telefon és alacsony, fekvő érintőkijelző
 * ---------------------------------------------------------------------- */

@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  html body[data-ui="elo"] > .nav,
  html body[data-ui="elo"] .app > aside > .nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body[data-ui="elo"] .nav > :is(.nav-group-label, a.nav-secondary) {
    display: none !important;
  }

  html body[data-ui="elo"] .nav > a:not(.nav-secondary) {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 4px 2px !important;
    text-align: center;
  }

  html body[data-ui="elo"] .nav > a:not(.nav-secondary) .navtext[data-mobile-label] {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    font-size: 0 !important;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  html body[data-ui="elo"] .nav > a:not(.nav-secondary) .navtext[data-mobile-label]::after {
    content: attr(data-mobile-label);
    font-size: clamp(8px, calc(11px * var(--ui-font-scale, 1)), 12px) !important;
    white-space: nowrap;
  }

  html body[data-ui="elo"].mobile-menu-open .nav {
    transform: translate3d(0, calc(100% + 96px + env(safe-area-inset-bottom)), 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body[data-ui="elo"] .mobile-menu-panel {
    inset: auto max(10px, env(safe-area-inset-right)) calc(86px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
  }

  .control-center-groups { grid-template-columns: minmax(0, 1fr); }
  .control-center-group { padding: 11px; }

  .control-center-favorites { padding: 10px; }
  .control-center-favorites-head { align-items: flex-start; }
  html body[data-ui="elo"] .control-center-favorites-head > button { min-height: 44px; }

  html body[data-ui="elo"] .control-center-favorites .favorite-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  /* Az üres állapot egyetlen gyereke a kétoszlopos rács első cellájába esett,
   * így a szöveg a kártya fele szélességébe szorult (7 soros keskeny oszlop).
   * A `width: 100%` a cellára vonatkozik, ezért a teljes sávot ki kell jelölni. */
  html body[data-ui="elo"] .control-center-favorites .favorite-stage > .empty {
    grid-column: 1 / -1;
  }

  html body[data-ui="elo"] .control-center-favorites .favorite-chip {
    width: 100%;
    max-width: 100%;
  }

  html body[data-ui="elo"] .control-center-favorites .favorite-open {
    min-height: 44px;
  }

  .control-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  html body[data-ui="elo"] .control-tile {
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 6px 8px;
    min-height: 102px;
    padding: 9px;
  }

  .control-tile > i {
    width: 35px;
    height: 35px;
    border-radius: 11px;
    font-size: 1rem;
  }

  .control-tile > span > b { font-size: .76rem; }
  .control-tile > span > small { font-size: .61rem; }
  .control-tile > em { grid-column: 1 / -1; font-size: .57rem; }
}

/* Telefon (≤ 420 px): két oszlopban a csempe 110–160 képpont széles, az ikon
 * és a belső margó után a szövegnek 40–90 képpont marad. A címek szó közepén
 * levágódtak („Öntözé”), a leírások betűnként törtek („Hőmé rsékle t”), az
 * állapotsor „Kés…” lett. Egy oszlopban a cím, a leírás és az állapot teljes
 * szóval olvasható. A szabály a 760 px-es blokk után áll, hogy azonos
 * súllyal felülírja annak kétoszlopos rácsát. */
@media (max-width: 420px) {
  .control-tile-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
  .mobile-menu-groups { gap: 6px; }
  .mobile-menu-groups > section { padding: 5px; }
  html body[data-ui="elo"] .mobile-menu-groups button,
  html body[data-ui="elo"] .mobile-menu-tools button { padding-inline: 5px; }
  .mobile-menu-groups button > span,
  .mobile-menu-tools button > span { font-size: .68rem; }

  .control-center { padding-inline: 11px !important; }
  .control-center-head > .status { width: 100%; }
  /* Az egysoros levágás a projekt elsődleges készülékén (360–390 képpont)
     minden csempeleírást szó közepén vágott el („Indítás, leállítá…”). A
     kétsoros korlát a 391 képpont fölötti alapértelmezés, és itt is elfér:
     csempénként egyetlen sorral nő a magasság. */
  .control-tile > span > small { -webkit-line-clamp: 2; }

  .control-center-favorites-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .control-center-favorites-head small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html body[data-ui="elo"] .control-center-favorites-head > button {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
    overflow: hidden;
    font-size: 0;
  }

  html body[data-ui="elo"] .control-center-favorites-head > button::before {
    margin-right: 0;
    font-size: 1.05rem;
  }
}

/* Fekvő telefon: az oldalsáv helyét a fejléc menügombja és az ötfüles alsó
 * sáv veszi át. A kapcsolat állapota a gombokkal azonos sorban marad, így a
 * rövid kijelzőből nem vesz el két teljes fejlécsort. */
@media (pointer: coarse) and (max-height: 520px) and (min-width: 761px) {
  html body[data-ui="elo"] .app {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-ui="elo"] .app > aside { display: none !important; }

  html body[data-ui="elo"] main {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }

  html body[data-ui="elo"] .top {
    grid-template-columns: minmax(180px, .75fr) minmax(280px, 1.25fr) !important;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 8px;
    padding: 8px 10px !important;
  }

  html body[data-ui="elo"] .top h1 { font-size: clamp(19px, 3.2vw, 25px); }
  html body[data-ui="elo"] .top #headerText,
  html body[data-ui="elo"] .top #headerWeather { display: none !important; }

  html body[data-ui="elo"] .top-tools {
    grid-template-columns: repeat(2, 40px) minmax(120px, 1fr) !important;
    gap: 6px !important;
    width: 100%;
  }

  html body[data-ui="elo"] .top-tools :is(#wallClock, #presenceIndicator, #displaySettings, #layoutEdit) {
    display: none !important;
  }

  html body[data-ui="elo"] .top-tools :is(#mobileMenuButton, #openSearch) {
    display: inline-grid !important;
    place-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0 !important;
  }

  html body[data-ui="elo"] .top-tools #online {
    grid-column: 3 !important;
    justify-self: stretch;
    width: 100% !important;
    max-width: none !important;
    padding: 0;
  }

  html body[data-ui="elo"] > .nav {
    position: fixed !important;
    z-index: 1200 !important;
    inset: auto max(10px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    display: grid !important;
    width: auto !important;
    min-height: 62px;
    max-height: 66px;
    margin: 0 !important;
    padding: 5px !important;
    border-radius: 23px !important;
  }

  html body[data-ui="elo"] > .nav > a:not(.nav-secondary) {
    min-height: 50px !important;
  }

  html body[data-ui="elo"] .mobile-menu-panel {
    inset: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    max-height: none !important;
  }

  .mobile-menu-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobile-menu-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-ui="elo"] .control-tile,
  html body[data-ui="elo"] .control-tile::after { transition: none !important; transform: none !important; }
}

@media (forced-colors: active) {
  html body[data-ui="elo"] :is(.control-center-group, .control-tile, .mobile-menu-groups > section) {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
  }
}
.entity-registry-head,.entity-device-title,.entity-device-title>span,.entity-component header,.entity-inline-input{display:flex;align-items:center;gap:10px}.entity-registry-head{justify-content:space-between;margin:16px 0 10px}.entity-registry-head small,.entity-device-title small,.entity-component header small{display:block;color:var(--muted);margin-top:2px}.entity-device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}.entity-device-card{min-width:0;padding:14px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius,18px);background:color-mix(in srgb,var(--panel) 38%,transparent);backdrop-filter:blur(10px)}.entity-device-title{justify-content:space-between}.entity-device-title>span{min-width:0}.entity-device-title i,.entity-component header i{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--accent) 16%,transparent);font-style:normal}.entity-favorite{width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;font-size:20px}/* Az üzembe helyezési életciklus jelzése. A semleges alapszín a lényeg: csak a bizonyított kapcsolat kap zöldet. */.entity-provisioning{flex:0 0 auto;max-width:44%;font-size:11px;font-style:normal;line-height:1.3;text-align:right;color:var(--muted);overflow-wrap:anywhere}.entity-provisioning.ok{color:var(--lg-success-ink)}.entity-provisioning.warn{color:var(--lg-solar)}.entity-provisioning.bad{color:var(--lg-danger-ink)}.entity-device-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.entity-device-meta span{padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--panel) 55%,transparent);color:var(--muted);font-size:12px}.entity-components{display:grid;gap:8px}.entity-component{min-width:0;padding:10px;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:14px;background:color-mix(in srgb,var(--panel) 24%,transparent)}.entity-component header span{min-width:0;flex:1}.entity-component header b,.entity-device-title b{display:block;overflow-wrap:anywhere}.entity-component header em{font-size:11px;font-style:normal}.entity-component header em.ok{color:var(--lg-success-ink)}.entity-component header em.bad{color:var(--lg-danger-ink)}.entity-state-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin:9px 0}.entity-state-values span{min-width:0;padding:7px;border-radius:10px;background:color-mix(in srgb,var(--panel) 30%,transparent)}.entity-state-values small,.entity-state-values b{display:block;overflow-wrap:anywhere}.entity-state-values small{color:var(--muted);font-size:10px}.entity-state-values b{font-size:13px}.entity-controls{display:flex;align-items:end;gap:7px;flex-wrap:wrap}.entity-controls button,.entity-field select,.entity-field input{min-height:44px}.entity-action{flex:1 1 110px}.entity-field{flex:1 1 150px;min-width:0}.entity-field>span:first-child{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.entity-inline-input input{min-width:0;width:100%}.entity-inline-input button{flex:0 0 auto}.entity-read-only{color:var(--muted)}.entity-legacy-inventory{margin-top:14px}.entity-legacy-inventory>summary{cursor:pointer;font-weight:700;padding:10px 0}@media(max-width:760px){.entity-provisioning{max-width:100%;text-align:left}.entity-device-title{flex-wrap:wrap}.entity-device-grid{grid-template-columns:1fr}.entity-device-card{padding:11px}.entity-component{padding:9px}.entity-registry-head{align-items:flex-end}.entity-registry-head small{max-width:220px}.entity-state-values{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Magas kockázatú eszközművelet. A szín önmagában nem jelzés: a gomb felirata
   a szerver címkéje marad, és kattintásra külön megerősítés következik. */
.entity-action.destructive { border-color: var(--lg-danger, var(--red)); }
.entity-action.destructive:focus-visible { outline: 2px solid var(--lg-danger, var(--red)); outline-offset: 2px; }

/* UI-15: a most nem releváns művelet halvány, ha tiltott (pl. már futó
   szivattyú „Indítás” gombja); a magyarázat a gomb title-je és a mező alatti
   szöveg. A leállítás sosem tiltott. */
.entity-action-muted:disabled { opacity: .55; cursor: not-allowed; }
.entity-field-hint { flex: 0 0 100%; color: var(--muted); font-size: 11px; line-height: 1.35; }
.entity-field input[aria-invalid="true"] { border-color: var(--lg-danger, var(--red)); }
.entity-controls { border: 0; padding: 0; margin: 0; min-width: 0; }
.entity-controls:disabled { opacity: .6; }
.entity-freshness { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.entity-freshness[data-freshness-state="stale"] { color: var(--ink); font-weight: 650; }
.entity-freshness[data-freshness-state="fresh"] { color: var(--ink); }
.entity-passport { min-width: 0; margin-top: 12px; border-top: 1px solid var(--line); }
.entity-passport > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 0; cursor: pointer; font-weight: 650; list-style: none; }
.entity-passport > summary::before { content: "▸"; flex: 0 0 auto; }
.entity-passport[open] > summary::before { content: "▾"; }
.entity-passport > summary > span { flex: 1; }
.entity-passport > summary > small { color: var(--muted); font-weight: 400; }
.entity-passport > summary:focus-visible { outline: 2px solid var(--skin-focus, var(--green)); outline-offset: 3px; border-radius: 6px; }
.passport-content { padding: 8px 0; min-width: 0; }
.passport-content h4 { font-size: 13px; margin: 12px 0 7px; }
.passport-facts, .passport-operations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 8px 0; }
.passport-facts > div, .passport-operations > div { min-width: 0; }
.passport-facts dt, .passport-operations dt { color: var(--muted); font-size: 11px; }
.passport-facts dd, .passport-operations dd { margin: 3px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.passport-operations dd small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.passport-evidence, .passport-note, .passport-limits { color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.passport-capability { padding-top: 5px; margin-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.passport-limits { padding-left: 18px; margin: 8px 0; }
.passport-note { margin: 14px 0 0; }
.passport-open { min-height: 44px; margin: 6px 0; }
.passport-dialog { box-sizing: border-box; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 18px; color: var(--ink); background: var(--lg-opaque, var(--bg)); border: 1px solid var(--line); border-radius: 18px; overflow: auto; }
/* Skin dialog rules use !important glass backgrounds; the dense passport
   needs the existing opaque surface and its matching text palette. */
html body[data-ui="elo"] dialog.passport-dialog[open] { background: var(--lg-opaque, var(--bg)) !important; color: var(--ink) !important; }
.passport-dialog::backdrop { background: rgb(0 0 0 / .5); }
.passport-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.passport-dialog-head button { min-height: 44px; }
.passport-dialog > .entity-passport > summary { display: none; }
@media (max-width: 380px) { .passport-facts, .passport-operations { grid-template-columns: 1fr; } }
/* Parancsnyugta (ActionReceipt). Az állapot szövegben is megjelenik, nem csak
   színben: a színvak olvasó és a nagy kontrasztú mód is ugyanazt tudja meg. */
.passport-receipts { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.passport-receipt { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; min-width: 0; }
.passport-receipt-state { font-size: 12px; font-weight: 650; }
.passport-receipt-service { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.passport-receipt small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
/* A meglévő állapotjelzők tokenjei; az „ismeretlen kimenetel” kapja a
   veszélyjelzést, mert az az egyetlen, ami emberi ellenőrzést kíván. A „nem
   ment el” semleges: hiba, de biztonságos, és újrapróbálható. */
.passport-receipt.accepted { border-left-color: var(--lg-success, var(--green)); }
.passport-receipt.failed { border-left-color: var(--ink); }
.passport-receipt.unknown { border-left-color: var(--lg-danger, var(--red)); }
.passport-receipt.pending { border-left-color: var(--line); }
/* A kliensoldali tesztmód állandó, minden skin fölött olvasható jelzése. */
.demo-mode-banner{
  position:fixed;z-index:2147483000;right:max(12px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;
  max-width:min(94vw,560px);padding:8px 9px 8px 13px;border:1px solid rgba(255,255,255,.72);
  border-radius:18px;background:#17213b;color:#fff;box-shadow:0 14px 42px rgba(4,12,28,.38);
  font:600 13px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.demo-mode-banner span{display:grid;gap:2px;min-width:0}.demo-mode-banner b{letter-spacing:.05em}
.demo-mode-banner small{color:#c9d9ef;font-size:11px;font-weight:600;white-space:normal}
.demo-mode-banner button{min-height:44px;margin:0;padding:6px 10px;border:1px solid rgba(255,255,255,.32);
  border-radius:11px;background:rgba(255,255,255,.12);color:#fff;font:700 12px/1 system-ui;cursor:pointer}
.demo-mode-banner button:hover,.demo-mode-banner button:focus-visible{background:#fff;color:#17213b;outline:2px solid #7fe7d8;outline-offset:2px}
body[data-demo-mode="true"] #online .dot{background:#f6c344;box-shadow:0 0 0 5px rgba(246,195,68,.16)}
@media(max-width:760px){
  .demo-mode-banner{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));
    bottom:calc(max(8px,env(safe-area-inset-bottom)) + 74px);justify-content:flex-end;border-radius:15px}
  .demo-mode-banner span{margin-right:auto}.demo-mode-banner small{font-size:10px}
  .demo-mode-banner button{padding-inline:8px}
}
@media(prefers-reduced-motion:no-preference){
  .demo-mode-banner{animation:demo-banner-in .28s ease-out both}
  @keyframes demo-banner-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
/* Elo, futó öntözés: a demó jelzősáv (legfelső réteg) a leállító sáv fölé
   emelkedik, hogy ne takarja a Leállítást és a Vészleállítást. A sáv magassága:
   egy sor kb. 62 px, 380 px alatt két sor kb. 90 px; telefonon az alsó navigáció
   (74 px) fölött, 640 px-től a képernyő alján ül (95_elo_15_stopbar.css). */
@media(max-width:639px){
  body[data-ui="elo"][data-elo-stopbar="on"] .demo-mode-banner{bottom:calc(env(safe-area-inset-bottom) + 74px + 72px)}
}
@media(max-width:380px){
  body[data-ui="elo"][data-elo-stopbar="on"] .demo-mode-banner{bottom:calc(env(safe-area-inset-bottom) + 74px + 100px)}
}
@media(min-width:640px){
  body[data-ui="elo"][data-elo-stopbar="on"] .demo-mode-banner{bottom:calc(env(safe-area-inset-bottom) + 76px)}
}
/* Factory-app inspired device consoles. Capability and command availability
 * still comes from the backend; this module only owns presentation. */

body[data-ui="elo"] .appliance-console {
  --device-accent: var(--skin-focus, #188da4);
  --device-accent-soft: color-mix(in srgb, var(--device-accent) 18%, transparent);
  --device-surface: color-mix(in srgb, var(--skin-card-surface, var(--card)) 82%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body[data-ui="elo"] .mower-console { --device-accent: #35b890; }
body[data-ui="elo"] .laundry-console { --device-accent: #4f91dc; }
body[data-ui="elo"] .refrigerator-console { --device-accent: #58b9d2; }
body[data-ui="elo"] .air-console { --device-accent: #59aeb0; }

body[data-ui="elo"] .appliance-console::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  aspect-ratio: 1;
  inset: -95px -65px auto auto;
  border-radius: 50%;
  background: radial-gradient(circle, var(--device-accent-soft), transparent 68%);
  pointer-events: none;
}

.device-visual-stage {
  display: grid;
  grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  min-height: 150px;
  margin: 10px 0 16px;
  padding: clamp(14px, 2vw, 22px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--device-accent) 38%, var(--skin-card-edge, var(--line)));
  border-radius: clamp(18px, 2.2vw, 28px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--device-accent) 14%, transparent), transparent 62%),
    var(--device-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 32px color-mix(in srgb, var(--device-accent) 10%, transparent);
}

.device-visual-copy { display: grid; gap: 5px; min-width: 0; }
.device-visual-copy small { color: var(--device-accent) !important; font-size: .67rem; font-weight: 900; letter-spacing: .14em; }
.device-visual-copy b { color: var(--skin-surface-ink, var(--ink)); font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.08; overflow-wrap: anywhere; }
.device-visual-copy span { color: var(--skin-surface-muted, var(--muted)); font-size: .8rem; line-height: 1.45; }

.mower-field {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  border-radius: 24px 10px 24px 10px;
  background:
    radial-gradient(circle at 77% 22%, rgba(255,255,255,.42) 0 4px, transparent 5px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.08) 19px 20px),
    linear-gradient(145deg, color-mix(in srgb, var(--device-accent) 60%, #174f3c), color-mix(in srgb, var(--device-accent) 28%, #0c2d23));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.mower-path { position: absolute; inset: 17px 21px; border: 2px dashed rgba(225,255,244,.45); border-radius: 42% 58% 48% 52%; transform: rotate(-7deg); }
.mower-machine { position: absolute; left: 26%; top: 47%; width: 38px; height: 27px; border-radius: 14px 14px 9px 9px; background: #eafcf5; box-shadow: 0 9px 18px rgba(3,34,25,.28); animation: mowerConsoleDrive 6.8s ease-in-out infinite; }
.mower-machine::before, .mower-machine::after { content: ""; position: absolute; bottom: -3px; width: 8px; height: 8px; border-radius: 50%; background: #173b31; }
.mower-machine::before { left: 5px; } .mower-machine::after { right: 5px; }
.mower-machine span { position: absolute; inset: 7px 11px 9px; border-radius: 8px; background: var(--device-accent); }
.mower-dock { position: absolute; right: 12px; bottom: 12px; width: 22px; height: 12px; border: 2px solid rgba(235,255,249,.76); border-top-width: 5px; border-radius: 5px; }

.laundry-machine { display: grid; place-items: center; min-height: 116px; }
.laundry-machine > i { position: relative; width: 94px; height: 106px; border-radius: 21px; background: linear-gradient(145deg, rgba(255,255,255,.82), color-mix(in srgb, var(--device-accent) 22%, #dae7ee)); box-shadow: 0 18px 32px color-mix(in srgb, var(--device-accent) 18%, transparent), inset 0 0 0 1px rgba(255,255,255,.7); }
.laundry-machine > i::before { content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 13px; border-radius: 6px; background: color-mix(in srgb, var(--device-accent) 24%, #273645); }
.laundry-machine > i::after { content: ""; position: absolute; width: 57px; height: 57px; left: 18px; top: 35px; border: 7px solid rgba(31,54,73,.62); border-radius: 50%; background: conic-gradient(from 45deg, #79d9ee, #465dca, #93e4e1, #79d9ee); animation: laundryConsoleSpin 5s linear infinite; }
.laundry-machine span { position: absolute; z-index: 1; width: 35px; height: 35px; left: 30px; top: 47px; border-radius: 45% 55% 58% 42%; background: rgba(235,252,255,.35); animation: laundryWaterSlosh 2.2s ease-in-out infinite; }

.refrigerator-silhouette { position: relative; justify-self: center; width: 74px; height: 118px; border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.82), color-mix(in srgb, var(--device-accent) 25%, #d7e8ec)); box-shadow: 0 18px 34px color-mix(in srgb, var(--device-accent) 18%, transparent); }
.refrigerator-silhouette i { position: absolute; left: 7px; right: 7px; border: 1px solid rgba(47,82,94,.22); border-radius: 8px; }
.refrigerator-silhouette i:first-child { top: 8px; height: 67px; }
.refrigerator-silhouette i:nth-child(2) { bottom: 8px; height: 28px; }
.refrigerator-silhouette i::after { content: ""; position: absolute; right: 7px; top: 7px; width: 3px; height: 18px; border-radius: 99px; background: rgba(42,80,91,.45); }
.refrigerator-silhouette > span { position: absolute; display: grid; place-items: center; left: -11px; top: 38px; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: var(--device-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--device-accent) 16%, transparent); animation: refrigeratorConsoleBreathe 3s ease-in-out infinite; }

body[data-ui="elo"] .appliance-console .device-status-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(190px, .6fr);
  gap: 12px;
  align-items: stretch;
}

body[data-ui="elo"] .appliance-console .status-progress,
body[data-ui="elo"] .appliance-console .device-status-metrics > span,
body[data-ui="elo"] .appliance-console .refrigerator-mode,
body[data-ui="elo"] .air-card {
  border: 1px solid color-mix(in srgb, var(--device-accent) 24%, var(--skin-card-edge, var(--line)));
  background: color-mix(in srgb, var(--device-surface) 90%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

body[data-ui="elo"] .appliance-console .status-progress { padding: 14px; border-radius: 18px; }
body[data-ui="elo"] .appliance-console .status-progress > b { font-size: clamp(1rem, 1.6vw, 1.28rem); }
body[data-ui="elo"] .appliance-console .status-progress > i { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--device-accent) 12%, transparent); }
body[data-ui="elo"] .appliance-console .status-progress > i > em { background: linear-gradient(90deg, var(--device-accent), color-mix(in srgb, var(--device-accent) 52%, #fff)); box-shadow: 0 0 15px var(--device-accent-soft); }
body[data-ui="elo"] .appliance-console .device-status-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
body[data-ui="elo"] .appliance-console .device-status-metrics > span { min-height: 72px; padding: 12px; border-radius: 16px; }
body[data-ui="elo"] .appliance-console .device-status-metrics b { font-size: 1.05rem; }

body[data-ui="elo"] .appliance-console .device-quick-actions,
body[data-ui="elo"] .air-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 9px;
  margin-top: 14px;
}

body[data-ui="elo"] .appliance-console .device-quick-actions button,
body[data-ui="elo"] .air-actions button {
  min-height: 48px;
  border-color: color-mix(in srgb, var(--device-accent) 36%, var(--skin-card-edge, var(--line))) !important;
  border-radius: 15px;
  font-weight: 800;
}

body[data-ui="elo"] .appliance-console .device-quick-actions button:not(.danger-command):hover,
body[data-ui="elo"] .air-actions button:hover { background: var(--device-accent-soft) !important; transform: translateY(-1px); }
body[data-ui="elo"] .appliance-console .device-quick-actions button > span { display:inline-grid; place-items:center; width:23px; height:23px; margin-right:6px; border-radius:8px; color:var(--device-accent); background:var(--device-accent-soft); font-size:.78rem; }

body[data-ui="elo"] .mower-map-wrap { margin-top: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--device-accent) 40%, var(--skin-card-edge, var(--line))); border-radius: 22px; }
body[data-ui="elo"] .mower-device-controls { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--device-accent) 24%, transparent); }
body[data-ui="elo"] .mower-entity-groups { display: grid; gap: 12px; }
body[data-ui="elo"] .mower-entity-groups .ha-group { padding: 12px; border: 1px solid color-mix(in srgb, var(--device-accent) 24%, var(--skin-card-edge, var(--line))); border-radius: 18px; background: var(--device-surface); }

body[data-ui="elo"] .refrigerator-console .refrigerator-status-body { grid-template-columns: 1fr; }
body[data-ui="elo"] .refrigerator-console .refrigerator-metrics { grid-template-columns: minmax(90px, .75fr) repeat(3, minmax(0, 1fr)); }
body[data-ui="elo"] .refrigerator-console .refrigerator-controls { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
body[data-ui="elo"] .refrigerator-console .refrigerator-control { border-color: color-mix(in srgb, var(--device-accent) 30%, var(--skin-card-edge, var(--line))); background: var(--device-surface); }

body[data-ui="elo"] .air-console #localApplianceCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; }
body[data-ui="elo"] .air-console .air-card { --device-accent: #56aaa9; padding: clamp(14px, 2vw, 20px); border-radius: 24px; }
body[data-ui="elo"] .air-console .air-hero { border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--device-accent) 12%, transparent), transparent); }
body[data-ui="elo"] .air-console .air-ring-value { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--device-accent) 58%, transparent)); }
body[data-ui="elo"] .air-console .air-control { border-color: color-mix(in srgb, var(--device-accent) 22%, var(--skin-card-edge, var(--line))); }
.air-device-glyph { display:inline-grid; place-items:center; width:27px; height:27px; margin-right:8px; border:1px solid color-mix(in srgb,var(--aq-color) 35%,transparent); border-radius:10px; color:var(--aq-color); background:color-mix(in srgb,var(--aq-color) 12%,transparent); box-shadow:0 0 16px color-mix(in srgb,var(--aq-color) 12%,transparent); vertical-align:middle; animation:airConsoleBreathe 3.4s ease-in-out infinite; }

body[data-ui="elo"] .appliance-console[data-active="true"] .device-visual-stage { border-color: color-mix(in srgb, var(--device-accent) 64%, white 12%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 38px var(--device-accent-soft); }
body[data-ui="elo"] .appliance-console[data-active="false"] :is(.mower-machine, .laundry-machine > i::after) { animation-play-state: paused; }

@keyframes mowerConsoleDrive { 0%,100% { transform: translate(-5px, 8px) rotate(-8deg); } 50% { transform: translate(54px, -21px) rotate(12deg); } }
@keyframes laundryConsoleSpin { to { transform: rotate(360deg); } }
@keyframes laundryWaterSlosh { 0%,100% { transform: rotate(-8deg) translateY(2px); } 50% { transform: rotate(9deg) translateY(-2px); } }
@keyframes refrigeratorConsoleBreathe { 50% { transform: scale(1.08); box-shadow: 0 0 0 11px color-mix(in srgb, var(--device-accent) 9%, transparent); } }
@keyframes airConsoleBreathe { 50% { transform:scale(1.06); box-shadow:0 0 20px color-mix(in srgb,var(--aq-color) 22%,transparent); } }

@media (max-width: 760px) {
  .device-visual-stage { grid-template-columns: 96px minmax(0,1fr); min-height: 128px; padding: 12px; }
  .mower-field { min-height: 94px; }
  .laundry-machine { min-height: 94px; transform: scale(.82); }
  .refrigerator-silhouette { transform: scale(.82); }
  body[data-ui="elo"] .appliance-console .device-status-body { grid-template-columns: 1fr; }
  body[data-ui="elo"] .appliance-console .device-quick-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body[data-ui="elo"] .refrigerator-console .refrigerator-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  body[data-ui="elo"] .refrigerator-console .refrigerator-model-image { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 430px) {
  .device-visual-stage { grid-template-columns: 76px minmax(0,1fr); gap: 10px; }
  .device-visual-copy span { display: none; }
  .mower-field { min-height: 76px; border-radius: 18px 8px; }
  .mower-machine { transform: scale(.8); transform-origin: left center; }
  body[data-ui="elo"] .appliance-console .device-quick-actions { grid-template-columns: 1fr 1fr; }
  body[data-ui="elo"] .appliance-console .device-status-metrics > span { min-height: 64px; padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .mower-machine,
  .laundry-machine > i::after,
  .laundry-machine span,
  .refrigerator-silhouette > span { animation: none !important; }
  .air-device-glyph { animation:none!important; }
}
/* A bounded review surface must remain legible across all skins. */
html body[data-ui="elo"] #executionGrantsDialog[open],
#executionGrantsDialog {
  box-sizing: border-box;
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 20px;
  overflow: auto;
  overflow-wrap: anywhere;
  background: #f8fafc !important;
  color: #172033 !important;
  border: 1px solid #64748b;
}
#executionGrantsDialog :is(h2, h3, h4, b, li, label) { color: #172033 !important; }
#executionGrantsDialog :is(.muted, small, p) { color: #334155 !important; }
#executionGrantsDialog :is(select, input:not([type="checkbox"])) {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 10px;
  background: #fff !important;
  color: #172033 !important;
  border: 1px solid #64748b;
  font-size: 14px;
}
#executionGrantsDialog label.check {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 12px;
  padding-block: 10px;
  cursor: pointer;
}
#executionGrantsDialog input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; margin: 0; }
#executionGrantsDialog button { min-height: 44px; min-width: 44px; }
#executionGrantsDialog button:not(.primary) { background: #e2e8f0 !important; color: #172033 !important; }
#executionGrantsDialog button.primary { background: #1d4ed8 !important; color: #fff !important; }
#executionGrantsDialog .actions { flex-wrap: wrap; }
#executionGrantsDialog .access-item { flex-wrap: wrap; }
#executionGrantsDialog :focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
#executionGrantsDialog::backdrop { background: rgb(0 0 0 / .55); }
/* Irrigation page: one readable control story instead of unrelated form
 * columns. Existing ids and commands remain the interaction contract. */

body[data-ui="elo"][data-page="irrigation"] #attekintes.dashboard {
  align-items: start;
}

body[data-ui="elo"][data-page="irrigation"] #beallitasok.irrigation-workspace {
  --irrigation-accent: color-mix(in srgb, var(--skin-focus, #168da1) 68%, #36b77c);
  grid-column: 1 / span 8 !important;
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(14px, 2vw, 24px);
}

body[data-ui="elo"][data-page="irrigation"] #insights.irrigation-insights {
  grid-column: 9 / -1 !important;
  padding: clamp(14px, 1.7vw, 20px);
}

.irrigation-command-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) minmax(280px,.9fr);
  align-items: center;
  gap: clamp(13px, 2vw, 24px);
  min-width: 0;
  overflow: hidden;
  padding: clamp(15px, 2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--irrigation-accent) 42%, var(--skin-card-edge, var(--line)));
  border-radius: clamp(20px, 2.5vw, 30px);
  background:
    radial-gradient(circle at 8% 22%, color-mix(in srgb, var(--irrigation-accent) 20%, transparent), transparent 30%),
    linear-gradient(130deg, color-mix(in srgb, var(--irrigation-accent) 9%, transparent), transparent 60%),
    color-mix(in srgb, var(--skin-card-surface, var(--card)) 84%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 42px color-mix(in srgb, var(--irrigation-accent) 11%, transparent);
}

.irrigation-command-hero::after { content:""; position:absolute; width:180px; aspect-ratio:1; right:-80px; top:-90px; border:1px solid color-mix(in srgb, var(--irrigation-accent) 26%, transparent); border-radius:50%; box-shadow:0 0 0 26px color-mix(in srgb, var(--irrigation-accent) 5%, transparent),0 0 0 52px color-mix(in srgb, var(--irrigation-accent) 3%, transparent); pointer-events:none; }

.irrigation-orbit { position: relative; display:grid; place-items:center; width:76px; aspect-ratio:1; border:1px solid color-mix(in srgb, var(--irrigation-accent) 44%, transparent); border-radius:50%; background:color-mix(in srgb,var(--irrigation-accent) 12%,transparent); }
.irrigation-orbit::before, .irrigation-orbit::after { content:""; position:absolute; inset:9px; border:1px dashed color-mix(in srgb,var(--irrigation-accent) 58%,transparent); border-radius:50%; animation:irrigationOrbitSpin 9s linear infinite; }
.irrigation-orbit::after { inset:19px; border-style:solid; animation-direction:reverse; animation-duration:6s; }
.irrigation-orbit span { z-index:1; font-size:1.8rem; filter:drop-shadow(0 5px 10px color-mix(in srgb,var(--irrigation-accent) 34%,transparent)); animation:irrigationDropFloat 2.6s ease-in-out infinite; }
.irrigation-orbit i { position:absolute; width:7px; aspect-ratio:1; border-radius:50%; background:var(--irrigation-accent); transform:translate(31px); box-shadow:0 0 12px var(--irrigation-accent); }

.irrigation-hero-copy { min-width:0; }
.irrigation-hero-copy small { color:var(--irrigation-accent)!important; font-size:.66rem; font-weight:900; letter-spacing:.14em; }
.irrigation-hero-copy h2 { margin:4px 0; font-size:clamp(1.35rem,2.6vw,2.15rem); line-height:1; }
.irrigation-hero-copy p { margin:0; color:var(--skin-surface-muted,var(--muted)); font-size:.82rem; line-height:1.45; }

.irrigation-live-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; }
.irrigation-live-facts > span { display:grid; gap:4px; min-width:0; padding:11px; border:1px solid color-mix(in srgb,var(--irrigation-accent) 24%,var(--skin-card-edge,var(--line))); border-radius:14px; background:color-mix(in srgb,var(--skin-card-surface,var(--card)) 76%,transparent); }
.irrigation-live-facts small { color:var(--skin-surface-muted,var(--muted)); font-size:.64rem; }
.irrigation-live-facts b { font-size:.86rem; overflow-wrap:anywhere; }

body[data-ui="elo"][data-page="irrigation"] .irrigation-workspace > .compact-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(12px,1.6vw,20px);
}

.irrigation-command-deck,
.irrigation-profile-deck {
  min-width:0;
  padding:clamp(14px,1.8vw,20px);
  border:1px solid color-mix(in srgb,var(--irrigation-accent) 26%,var(--skin-card-edge,var(--line)));
  border-radius:22px;
  background:color-mix(in srgb,var(--skin-card-surface,var(--card)) 76%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

.irrigation-command-deck .panel-head h2::before { content:"◉"; margin-right:8px; color:var(--irrigation-accent); }
.irrigation-profile-deck .panel-head h2::before { content:"⌁"; margin-right:8px; color:var(--irrigation-accent); }

body[data-ui="elo"] .irrigation-command-deck .duration-box {
  padding:16px;
  border:1px solid color-mix(in srgb,var(--irrigation-accent) 26%,var(--skin-card-edge,var(--line)));
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--irrigation-accent) 11%,transparent),transparent 66%);
}

.irrigation-duration-presets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:12px; }
body[data-ui="elo"] .irrigation-duration-presets button { min-width:0; min-height:44px; padding:7px 5px; border:1px solid color-mix(in srgb,var(--irrigation-accent) 22%,var(--skin-card-edge,var(--line))); border-radius:11px; background:color-mix(in srgb,var(--skin-card-surface,var(--card)) 72%,transparent); color:var(--skin-surface-ink,var(--ink)); font:inherit; font-size:.7rem; font-weight:800; cursor:pointer; }
body[data-ui="elo"] .irrigation-duration-presets button:is(.selected,:hover) { border-color:var(--irrigation-accent); background:color-mix(in srgb,var(--irrigation-accent) 18%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--irrigation-accent) 9%,transparent); }

body[data-ui="elo"] .irrigation-command-deck .consumption { display:grid; gap:5px; margin-top:11px; padding:14px; border-left:3px solid var(--irrigation-accent); border-radius:4px 15px 15px 4px; }
body[data-ui="elo"] .irrigation-command-deck .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body[data-ui="elo"] .irrigation-command-deck .actions > button { width:100%!important; min-height:46px; margin:0!important; }
body[data-ui="elo"] .irrigation-command-deck #start { grid-column:1/-1; }
body[data-ui="elo"] .irrigation-command-deck #emergency { grid-column:1/-1; }

body[data-ui="elo"] .irrigation-profile-deck .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-ui="elo"] .irrigation-profile-deck .head-row { min-width:0; padding:12px; border:1px solid color-mix(in srgb,var(--irrigation-accent) 22%,var(--skin-card-edge,var(--line))); border-radius:16px; background:color-mix(in srgb,var(--skin-card-surface,var(--card)) 74%,transparent); }
body[data-ui="elo"] .irrigation-profile-deck .profile-save { width:100%; min-height:44px; margin-top:10px; }

body[data-ui="elo"][data-page="irrigation"] .irrigation-insights > .compact-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.irrigation-insight-card { position:relative; min-width:0; overflow:hidden; padding:16px; border:1px solid color-mix(in srgb,var(--skin-focus) 24%,var(--skin-card-edge,var(--line))); border-radius:20px; background:color-mix(in srgb,var(--skin-card-surface,var(--card)) 78%,transparent); }
.irrigation-insight-card::after { position:absolute; right:12px; top:12px; display:grid; place-items:center; width:34px; aspect-ratio:1; border-radius:12px; color:var(--skin-focus); background:color-mix(in srgb,var(--skin-focus) 13%,transparent); font-size:1rem; }
.irrigation-insight-card.flow-insight::after { content:"≋"; }
/* S3-14: nincs állandó ✓ dísz; a jelvény valódi elem (.preflight-badge), amely az ellenőrzés eredményét mutatja. */
.irrigation-insight-card.safety-insight::after { content:none; }
.irrigation-insight-card .preflight-badge { position:absolute; right:12px; top:12px; display:grid; place-items:center; width:34px; aspect-ratio:1; border-radius:12px; font-size:1rem; font-weight:800; }
.irrigation-insight-card .preflight-badge[data-state="ok"] { color:var(--green,#1f8a4c); background:color-mix(in srgb,var(--green,#1f8a4c) 14%,transparent); }
.irrigation-insight-card .preflight-badge[data-state="blocked"] { color:var(--red,#c0392b); background:color-mix(in srgb,var(--red,#c0392b) 14%,transparent); }
.irrigation-insight-card .panel-head { padding-right:42px; }

/* S3-02: a mindig látható „Miért (nem) locsol most” kártya. */
.irrigation-why-now { display:grid; gap:10px; min-width:0; margin:0 0 clamp(12px,1.6vw,20px); padding:clamp(14px,1.8vw,20px); border:1px solid color-mix(in srgb,var(--irrigation-accent,var(--skin-focus)) 26%,var(--skin-card-edge,var(--line))); border-radius:22px; background:color-mix(in srgb,var(--skin-card-surface,var(--card)) 76%,transparent); }
.irrigation-why-now-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px; }
.irrigation-why-now-head small { color:var(--irrigation-accent,var(--skin-focus)); font-size:.66rem; font-weight:900; letter-spacing:.14em; }
.irrigation-why-now-head h3 { margin:2px 0 0; font-size:1.05rem; line-height:1.2; }
.irrigation-why-now-verdict { padding:5px 12px; border:1px solid currentColor; border-radius:99px; font-size:.78rem; line-height:1.2; }
.irrigation-why-now[data-tone="ok"] .irrigation-why-now-verdict { color:var(--green,#1f8a4c); }
.irrigation-why-now[data-tone="warn"] .irrigation-why-now-verdict { color:var(--amber,#9a6700); }
.irrigation-why-now[data-tone="bad"] .irrigation-why-now-verdict { color:var(--red,#c0392b); }
.irrigation-why-now[data-tone="info"] .irrigation-why-now-verdict { color:var(--irrigation-accent,var(--skin-focus)); }
.irrigation-why-now-reason { margin:0; font-size:.86rem; line-height:1.45; overflow-wrap:anywhere; }
.irrigation-why-now-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:8px; margin:0; }
.irrigation-why-now-facts > div { min-width:0; padding:10px 12px; border:1px solid var(--skin-card-edge,var(--line)); border-radius:14px; }
.irrigation-why-now-facts dt { color:var(--skin-surface-muted,var(--muted)); font-size:.68rem; }
.irrigation-why-now-facts dd { margin:3px 0 0; font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; }
.irrigation-why-now-note { color:var(--skin-surface-muted,var(--muted)); font-size:.68rem; }
.irrigation-insight-card .tapo-help { line-height:1.5; }
/* 43 px volt: egy pixellel a vállalt 44 alatt. */
.irrigation-insight-card #preflight { width:100%; min-height:44px; margin-top:8px; }

body[data-ui="elo"][data-page="irrigation"] #recommendationSettings.irrigation-recommendation-lab { grid-column:1/-1!important; }
body[data-ui="elo"] .irrigation-recommendation-lab .recommendation-settings-grid { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }

body[data-ui="elo"] .irrigation-workspace[data-active="true"] .irrigation-command-hero { border-color:color-mix(in srgb,var(--irrigation-accent) 76%,#fff 10%); }
body[data-ui="elo"] .irrigation-workspace[data-active="true"] .irrigation-orbit { box-shadow:0 0 28px color-mix(in srgb,var(--irrigation-accent) 30%,transparent); }

@keyframes irrigationOrbitSpin { to { transform:rotate(360deg); } }
@keyframes irrigationDropFloat { 50% { transform:translateY(-5px) scale(1.04); } }

@media (max-width:1180px) {
  body[data-ui="elo"][data-page="irrigation"] #beallitasok.irrigation-workspace,
  body[data-ui="elo"][data-page="irrigation"] #insights.irrigation-insights { grid-column:1/-1!important; }
  .irrigation-command-hero { grid-template-columns:auto minmax(0,1fr); }
  .irrigation-live-facts { grid-column:1/-1; }
  /* S3-06: a bal oldali menüsáv mellett 768–1100 px között a kétoszlopos rács
     a szórófej-sor „Típus” oszlopát 0–35 px-re nyomta; egy oszlop kell. */
  body[data-ui="elo"][data-page="irrigation"] .irrigation-workspace > .compact-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  body[data-ui="elo"][data-page="irrigation"] #beallitasok.irrigation-workspace { padding:12px; }
  .irrigation-command-hero { grid-template-columns:58px minmax(0,1fr); padding:13px; border-radius:22px; }
  .irrigation-orbit { width:54px; }
  .irrigation-orbit span { font-size:1.35rem; }
  .irrigation-live-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .irrigation-live-facts > span { padding:8px; }
  .irrigation-live-facts b { font-size:.72rem; }
  body[data-ui="elo"][data-page="irrigation"] .irrigation-workspace > .compact-grid { grid-template-columns:1fr; }
  .irrigation-duration-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body[data-ui="elo"] .irrigation-command-deck .actions { grid-template-columns:1fr 1fr; }
}

@media (max-width:430px) {
  .irrigation-live-facts { grid-template-columns:1fr 1fr; }
  .irrigation-live-facts > span:first-child { grid-column:1/-1; }
  .irrigation-command-deck,.irrigation-profile-deck { padding:12px; border-radius:18px; }
  body[data-ui="elo"] .irrigation-command-deck .actions { grid-template-columns:1fr; }
  body[data-ui="elo"] .irrigation-command-deck #start,
  body[data-ui="elo"] .irrigation-command-deck #emergency { grid-column:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .irrigation-orbit::before,.irrigation-orbit::after,.irrigation-orbit span { animation:none!important; }
}

/* BA-04: a szögválasztó alatt a fejenkénti vízhozam (a szögtáblából). */
.head-angles .head-flow { display:block; margin-top:2px; font-size:.8rem; color:var(--muted); }
/* -------------------------------------------------------------------------
 * Weather card: live, state-dependent scene instead of a flat grey tile.
 * The shared palette stays legible while each skin may refine its material.
 * ---------------------------------------------------------------------- */
body[data-weather="clear"] #idojaras.weather {
  --weather-card-a: #83d4ff;
  --weather-card-b: #fff0b2;
  --weather-card-orb: #ffd45f;
  --weather-card-ink: #102c43;
  --weather-card-muted: #36576b;
}

body[data-weather="cloudy"] #idojaras.weather {
  --weather-card-a: #a9c8df;
  --weather-card-b: #e9e2f2;
  --weather-card-orb: #fff1b8;
  --weather-card-ink: #1b3045;
  --weather-card-muted: #4e6072;
}

body[data-weather="rain"] #idojaras.weather {
  --weather-card-a: #75aecd;
  --weather-card-b: #c9e6ea;
  --weather-card-orb: #d8f2ff;
  --weather-card-ink: #102e42;
  --weather-card-muted: #365a6c;
}

body[data-weather="storm"] #idojaras.weather {
  --weather-card-a: #7774ab;
  --weather-card-b: #c1afd8;
  --weather-card-orb: #ffe47a;
  --weather-card-ink: #171a38;
  --weather-card-muted: #393a60;
}

body[data-weather="snow"] #idojaras.weather {
  --weather-card-a: #bde9f6;
  --weather-card-b: #f6fbff;
  --weather-card-orb: #ffffff;
  --weather-card-ink: #17334a;
  --weather-card-muted: #4a6478;
}

body[data-weather="fog"] #idojaras.weather {
  --weather-card-a: #c4d5d7;
  --weather-card-b: #eee6d9;
  --weather-card-orb: #fff8dc;
  --weather-card-ink: #263a3f;
  --weather-card-muted: #58696a;
}

body[data-weather="wind"] #idojaras.weather {
  --weather-card-a: #7fd6cc;
  --weather-card-b: #d8f5dc;
  --weather-card-orb: #ffec9e;
  --weather-card-ink: #123b3d;
  --weather-card-muted: #3c6562;
}

body[data-period="night"] #idojaras.weather {
  --weather-card-a: #14284f;
  --weather-card-b: #4d3a70;
  --weather-card-orb: #eef1ff;
  --weather-card-ink: #f6f7ff;
  --weather-card-muted: #d6d9ec;
}

html body[data-ui="elo"] #idojaras.weather {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--weather-card-orb) 82%, transparent) 0 34px, transparent 35px),
    linear-gradient(142deg, var(--weather-card-a, #83d4ff), var(--weather-card-b, #fff0b2)) !important;
  border-color: color-mix(in srgb, var(--weather-card-orb, #fff) 58%, transparent) !important;
  color: var(--weather-card-ink, #102c43) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 16px 38px rgba(24, 64, 86, .18) !important;
}

html body[data-ui="elo"] #idojaras.weather::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -28px;
  right: 0;
  width: 132px;
  height: 132px;
  border: 1px solid color-mix(in srgb, var(--weather-card-orb, #fff) 62%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 42px color-mix(in srgb, var(--weather-card-orb, #fff) 34%, transparent);
  pointer-events: none;
}

html body[data-ui="elo"] #idojaras.weather::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -52px;
  width: 78%;
  height: 94px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  transform: rotate(-7deg);
  pointer-events: none;
}

html body[data-weather="rain"] #idojaras.weather::after,
html body[data-weather="storm"] #idojaras.weather::after {
  right: 12%;
  bottom: 18px;
  width: 112px;
  height: 29px;
  border: 0;
  border-radius: 999px;
  background: rgba(49, 77, 101, .24);
  box-shadow: 43px 8px 0 -8px rgba(49, 77, 101, .20), -34px 11px 0 -10px rgba(70, 99, 121, .18);
  transform: none;
}

html body[data-weather="fog"] #idojaras.weather::after {
  right: 0;
  bottom: 16px;
  width: 74%;
  height: 48px;
  border: 0;
  border-top: 7px double rgba(255, 255, 255, .34);
  border-bottom: 7px double rgba(255, 255, 255, .26);
  border-radius: 50%;
  transform: rotate(-4deg);
}

html body[data-ui="elo"] #idojaras.weather > *:not(.weather-scene) { position: relative; z-index: 1; }
html body[data-ui="elo"] #idojaras.weather > .weather-scene { opacity: .16 !important; mix-blend-mode: soft-light; }

html body[data-ui="elo"] #idojaras.weather :is(h2, strong, b) { color: var(--weather-card-ink) !important; }
html body[data-ui="elo"] #idojaras.weather :is(.panel-subtitle, .weather-now span:not(.weather-icon), .weather-stats span, .weather-meta) {
  color: var(--weather-card-muted) !important;
}

html body[data-ui="elo"] #idojaras.weather .panel-head { border-color: rgba(255, 255, 255, .24); }
html body[data-ui="elo"] #idojaras.weather .smallbtn {
  border: 1px solid rgba(255, 255, 255, .44) !important;
  background: rgba(255, 255, 255, .22) !important;
  color: var(--weather-card-ink) !important;
}

html body[data-ui="elo"] #idojaras.weather .weather-now {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

html body[data-ui="elo"] #idojaras.weather .weather-now > div { min-width: 0; }
html body[data-ui="elo"] #idojaras.weather .weather-now span:not(.weather-icon) {
  display: block;
  margin: 4px 0 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html body[data-ui="elo"] #idojaras.weather .weather-icon {
  border: 1px solid rgba(255, 255, 255, .50);
  background: rgba(255, 255, 255, .24) !important;
  color: var(--weather-card-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 10px 24px rgba(20, 46, 64, .16);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
}

html body[data-ui="elo"] #idojaras.weather .weather-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-color: rgba(255, 255, 255, .34);
}

html body[data-ui="elo"] #idojaras.weather .weather-stats > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 12px;
  background: rgba(255, 255, 255, .15);
}

html body[data-ui="elo"] #idojaras.weather .weather-stats :is(span, b) {
  overflow-wrap: anywhere;
}

html body[data-ui="elo"] #idojaras.weather .weather-meta {
  gap: 8px;
  border-color: rgba(255, 255, 255, .34);
}

html body[data-ui="elo"] #idojaras.weather .weather-meta > :last-child { text-align: right; }
html body[data-ui="elo"] #idojaras.weather .weather-error,
html body[data-ui="elo"] #idojaras.weather .weather-stale { color: #8e2e3b !important; font-weight: 800; }
.weather-meta .weather-warning { display: block; margin-top: 3px; font-weight: 600; white-space: normal; }

@media (max-width: 420px) {
  html body[data-ui="elo"] #idojaras.weather .weather-now { gap: 10px; margin-block: 18px 16px; }
  html body[data-ui="elo"] #idojaras.weather .weather-icon { width: 50px; height: 50px; font-size: 31px; }
  html body[data-ui="elo"] #idojaras.weather .weather-now strong { font-size: 30px; }
  html body[data-ui="elo"] #idojaras.weather .weather-stats { gap: 6px; }
  html body[data-ui="elo"] #idojaras.weather .weather-stats > div { padding: 7px 5px; }
  html body[data-ui="elo"] #idojaras.weather .weather-meta { grid-template-columns: minmax(0, 1fr); }
  html body[data-ui="elo"] #idojaras.weather .weather-meta > :last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-ui="elo"] #idojaras.weather .weather-icon,
  html body[data-ui="elo"] #idojaras.weather .weather-scene,
  html body[data-ui="elo"] #idojaras.weather::before,
  html body[data-ui="elo"] #idojaras.weather::after { animation: none !important; }
}

/* --- Vízjavaslat: miért ennyi és miből ---------------------------------- */

/* A levezetés számozott lista, mert a lépések sorrendje maga a magyarázat:
   fentről lefelé olvasva pontosan az a művelet jön ki, amit a szerver
   számolt. Az érték jobbra igazítva külön oszlop, hogy a mm-ek egymás alatt
   összehasonlíthatók legyenek. */
.recommendation-headline {
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 1.4;
}

.recommendation-reasoning {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: recommendation-step;
}

.recommendation-reasoning li {
  display: grid;
  gap: 2px;
  padding: 8px 10px 8px 34px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 62%, transparent);
  counter-increment: recommendation-step;
}

.recommendation-reasoning li::before {
  content: counter(recommendation-step);
  position: absolute;
  top: 9px;
  left: 9px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 22%, transparent);
  font-size: .68rem;
  font-weight: 700;
}

.recommendation-reasoning li > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  justify-content: space-between;
}

.recommendation-reasoning li b { font-size: .84rem; }

.recommendation-reasoning li > div > span {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.recommendation-reasoning li small,
.recommendation-sources li small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.recommendation-sources {
  display: grid;
  gap: 6px;
  margin: 8px 0 14px;
  padding: 0;
  list-style: none;
}

.recommendation-sources li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 2px 10px;
  padding: 8px 10px;
  border-left: 3px solid color-mix(in srgb, var(--green) 45%, transparent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--card) 50%, transparent);
}

.recommendation-sources li b { font-size: .8rem; }

.recommendation-sources li > span {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.recommendation-sources li small { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .recommendation-reasoning li > div { justify-content: flex-start; }
  .recommendation-sources li { grid-template-columns: minmax(0, 1fr); }
}
/* -------------------------------------------------------------------------
 * Automation starter tiles and multi-date calendar. These components live in
 * the automation fragment, while their visual contract belongs to the shared
 * skin layer. Every grid track can shrink to zero, so long Hungarian labels do
 * not create horizontal scrolling on phones.
 * ---------------------------------------------------------------------- */
.script-starters {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--lg-card, var(--card)) 76%, transparent);
}

.script-starters .editor-head { margin: 0; min-width: 0; flex-wrap: wrap; }

.script-starter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 8px;
  min-width: 0;
}

.script-starter {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
  min-height: 70px;
  padding: 10px 11px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 82%, transparent);
  color: var(--glass-ink, var(--ink));
  text-align: left;
  transition: transform .16s var(--lg-ease, ease), border-color .16s ease, background .16s ease;
}

.script-starter:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
  background: color-mix(in srgb, var(--green) 9%, var(--lg-control, var(--card)));
}

.script-starter:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 44%, transparent);
  outline-offset: 2px;
}

.script-starter > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
  font-size: 18px;
}

.script-starter :is(b, small) { min-width: 0; overflow-wrap: anywhere; }
.script-starter b { align-self: end; font-size: .84rem; }
.script-starter small { align-self: start; color: var(--muted); font-size: .72rem; line-height: 1.35; }

.automation-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: 7px;
}

.automation-presets .smallbtn {
  flex: 1 1 112px;
  min-width: 0;
  min-height: 38px;
  white-space: normal;
}

.schedule-calendar {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--lg-card, var(--card)) 76%, transparent);
  overflow: hidden;
}

.schedule-calendar-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.schedule-calendar-head b {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: capitalize;
}

.schedule-calendar-head .smallbtn {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px;
}

.schedule-calendar-weekdays,
.schedule-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.schedule-calendar-weekdays span {
  min-width: 0;
  padding-block: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
  text-align: center;
}

.schedule-calendar-day {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 78%, transparent);
  color: var(--glass-ink, var(--ink));
  font-variant-numeric: tabular-nums;
}

.schedule-calendar-day span { pointer-events: none; }
.schedule-calendar-day.outside { opacity: .34; }
.schedule-calendar-day:hover { border-color: color-mix(in srgb, var(--green) 42%, var(--line)); }
.schedule-calendar-day.today { border-color: color-mix(in srgb, var(--green) 62%, var(--line)); font-weight: 850; }
.schedule-calendar-day.selected {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 28%, transparent);
}

body[data-theme="contrast"] :is(.script-starters, .schedule-calendar, .script-starter, .schedule-calendar-day) {
  border-color: #fff !important;
  background: #000 !important;
  color: #fff !important;
}

body[data-theme="contrast"] .schedule-calendar-day.selected {
  background: #fff !important;
  color: #000 !important;
}

@media (max-width: 520px) {
  .script-starters,
  .schedule-calendar { padding: 8px; border-radius: 14px; }
  .script-starter-grid { grid-template-columns: minmax(0, 1fr); }
  .schedule-calendar-head { grid-template-columns: 38px minmax(0, 1fr) auto 38px; gap: 4px; }
  .schedule-calendar-head .smallbtn { min-height: 38px; font-size: .72rem; }
  .schedule-calendar-weekdays,
  .schedule-calendar-grid { gap: 3px; }
  .schedule-calendar-day { min-height: 36px; border-radius: 9px; font-size: .78rem; }
}

@media (max-width: 340px) {
  .schedule-calendar-head {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }
  .schedule-calendar-head b { grid-column: 2; grid-row: 1; font-size: .78rem; }
  .schedule-calendar-head [data-calendar-move="-1"] { grid-column: 1; grid-row: 1; }
  .schedule-calendar-head [data-calendar-move="1"] { grid-column: 3; grid-row: 1; }
  .schedule-calendar-head [data-calendar-today] { grid-column: 1 / -1; grid-row: 2; }
  .schedule-calendar-day { min-height: 33px; padding-inline: 1px; }
  .automation-presets .smallbtn { flex-basis: calc(50% - 3px); }
}

@media (prefers-reduced-motion: reduce) {
  .script-starter { transition: none; }
}

/* Kapcsolati diagnosztika: külön, gyorsan frissülő technikai napló. */
.connection-diagnostics {
  grid-column: 1 / -1 !important;
  --panel-glow: #22a9b8;
}

.diagnostic-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(145px, .8fr)) auto;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}

.diagnostic-toolbar > * { min-width: 0; }
.diagnostic-toolbar :is(input, select) { width: 100%; min-height: 44px; }

.diagnostic-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, var(--card)) 72%, transparent);
  color: var(--glass-ink, var(--ink));
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}

.diagnostic-live input { position: absolute; opacity: 0; pointer-events: none; }
.diagnostic-live span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 15%, transparent);
}
.diagnostic-live:has(input:checked) span {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
}

.diagnostic-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
}
.diagnostic-summary p { margin: 0; }
.diagnostic-summary .actions { margin: 0; flex-wrap: wrap; justify-content: flex-end; }

.connection-diagnostic-logs {
  display: grid;
  gap: 8px;
  max-height: min(70dvh, 760px);
  padding: 2px 4px 2px 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.connection-trace {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 12px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--panel, var(--card)) 78%, transparent);
}

.connection-trace-line { display: grid; justify-items: center; min-height: 44px; }
.connection-trace-line::after {
  content: "";
  width: 2px;
  min-height: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 38%, transparent);
}
.connection-trace-line i {
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-bottom: -2px;
  border: 2px solid color-mix(in srgb, var(--panel, var(--card)) 92%, transparent);
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 14%, transparent);
}
.trace-success .connection-trace-line i { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.trace-error .connection-trace-line i { background: var(--lg-danger, #ef5964); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-danger, #ef5964) 18%, transparent); }
.trace-warning .connection-trace-line i { background: #e4a52d; box-shadow: 0 0 0 3px color-mix(in srgb, #e4a52d 18%, transparent); }
.trace-pending .connection-trace-line i { background: var(--lg-blue, #2789ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-blue, #2789ff) 18%, transparent); }

.connection-trace-content { min-width: 0; }
.connection-trace-content > b {
  display: block;
  margin: 5px 0 2px;
  overflow-wrap: anywhere;
  text-transform: none;
}
.connection-trace-content > p { margin: 0; color: var(--glass-ink, var(--ink)); overflow-wrap: anywhere; }
.connection-trace-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; min-width: 0; }
.connection-trace-meta :is(time, span) {
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, var(--card)) 72%, transparent);
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.connection-trace-meta .trace-integration { color: var(--glass-ink, var(--ink)); font-weight: 800; }
.trace-success .trace-outcome { color: var(--green); }
.trace-error .trace-outcome { color: var(--lg-danger, #ef5964); }
.trace-warning .trace-outcome { color: #b57800; }
.trace-pending .trace-outcome { color: var(--lg-blue, #2789ff); }
.connection-trace details { margin-top: 9px; }
.connection-trace summary { cursor: pointer; color: var(--muted); font-size: .74rem; font-weight: 750; }
.connection-trace pre {
  max-width: 100%;
  max-height: 260px;
  margin: 8px 0 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel, var(--card)) 84%, transparent);
  color: var(--glass-ink, var(--ink));
  font: 600 .7rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diagnostic-privacy { margin: 12px 0 0; }

body[data-theme="contrast"] :is(.connection-trace, .diagnostic-live, .connection-trace pre) {
  border-color: #fff !important;
  background: #000 !important;
  color: #fff !important;
}

@media (max-width: 1040px) {
  .diagnostic-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnostic-toolbar #diagnosticSearch { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .connection-diagnostics .panel-actions { width: 100%; justify-content: space-between; }
  .diagnostic-toolbar { grid-template-columns: minmax(0, 1fr); }
  .diagnostic-toolbar #diagnosticSearch { grid-column: auto; }
  .diagnostic-live { justify-content: flex-start; }
  .diagnostic-summary { align-items: stretch; flex-direction: column; }
  .diagnostic-summary .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnostic-summary .actions button { width: 100%; min-width: 0; white-space: normal; }
  .connection-diagnostic-logs { max-height: none; overflow: visible; }
  .connection-trace { grid-template-columns: 14px minmax(0, 1fr); gap: 7px; padding: 10px 10px 10px 6px; }
  .connection-trace-meta :is(time, span) { font-size: .65rem; }
}

@media (max-width: 380px) {
  .diagnostic-summary .actions { grid-template-columns: minmax(0, 1fr); }
  .connection-trace-meta { gap: 4px; }
}

/* -------------------------------------------------------------------------
 * Automatika munkafelület — közös, skinfüggetlen szerkezet.
 * A színek kizárólag a kiválasztott skin tokenjeiből készülnek; ez a modul a
 * tipográfiát, töréspontokat és olvasható kártyageometriát tartja egyben.
 * ---------------------------------------------------------------------- */
.automation-workspace-panel,
.automation-workspace-panel * { min-width: 0; }

.automation-workspace-panel {
  scroll-margin-top: clamp(76px, 10vh, 120px);
}

/* Az Automatika önálló munkalap: a dashboard általános többoszlopos rácsa
   nem szűkítheti egymás mellé a Szkriptek/Ütemezés/Segédek szakaszokat. */
body[data-page="automation"] .automation-workspace-panel {
  grid-column: 1 / -1 !important;
  width: 100%;
}

.automation-workspace {
  display: grid;
  gap: 14px;
  margin: -2px -2px 18px;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--lg-edge-soft, var(--line)));
  border-radius: clamp(18px, 2vw, 26px);
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--green) 18%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--lg-card, var(--card)) 78%, transparent), color-mix(in srgb, var(--lg-control, var(--card)) 54%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
  overflow: hidden;
}

.automation-workspace-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.automation-workspace-intro > div:first-child { display: grid; gap: 4px; }
.automation-workspace-intro h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.1; }
.automation-workspace-intro p { margin: 0; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.automation-kicker { color: var(--green); font-size: .68rem; font-weight: 850; letter-spacing: .13em; }

.automation-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.automation-quick-actions :is(button, .primary, .smallbtn) {
  width: auto;
  min-height: 40px;
  margin: 0;
  white-space: normal;
}

.automation-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.automation-metrics > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 62%, transparent);
}

.automation-metrics span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
  font-weight: 800;
}

.automation-metrics b { font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1; }
.automation-metrics small { color: var(--muted); font-size: .69rem; line-height: 1.2; overflow-wrap: anywhere; }
.automation-workspace.has-failures [data-automation-metric="failures"] { color: var(--lg-danger-ink, var(--red)); }

.automation-local-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.automation-local-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 48%, transparent);
  color: var(--glass-ink, var(--ink));
  text-align: center;
}

.automation-local-nav button:hover,
.automation-local-nav button:focus-visible {
  border-color: color-mix(in srgb, var(--green) 48%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--lg-control, var(--card)));
}

.automation-local-nav span { color: var(--green); font-size: .96rem; }
.automation-local-nav b { font-size: .76rem; line-height: 1.2; overflow-wrap: anywhere; }

/* UI-22: a szekciócímben a saját ikon áll, a skin-glyph nem jelenhet meg mellette. */
.automation-workspace-panel h2:has(> .automation-heading-icon) > :is(.skin-card-glyph, .card-glyph) {
  display: none !important;
}

.automation-heading-icon {
  display: inline-grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  margin-right: .42em;
  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
  border-radius: .58em;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  font-size: .78em;
  vertical-align: -.12em;
}

.automation-workspace-panel > .panel-head {
  align-items: center;
  gap: 12px;
}

.automation-workspace-panel > .panel-head :is(h2, p, span) { overflow-wrap: anywhere; }
.automation-workspace-panel > .panel-head .panel-actions { flex-wrap: wrap; justify-content: flex-end; }

.automation-guide {
  margin-top: 10px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 46%, transparent);
  overflow: clip;
}

.automation-guide > summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
}

.automation-guide > summary::-webkit-details-marker { display: none; }
.automation-guide > summary > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font-weight: 850; }
.automation-guide > summary b { font-size: .82rem; overflow-wrap: anywhere; }
.automation-guide > summary em { color: var(--muted); font-size: .71rem; font-style: normal; }
.automation-guide[open] > summary { border-bottom: 1px solid var(--lg-edge-soft, var(--line)); }
.automation-guide-body { padding: 10px 13px 12px 48px; color: var(--muted); font-size: .79rem; line-height: 1.5; }
.automation-guide-body :is(p, b) { overflow-wrap: anywhere; }
.automation-guide-body p { margin: 0; }

/* Sablonkönyvtár */
.script-starters > .editor-head > div { display: grid; gap: 2px; }
.script-starters > .editor-head small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.script-template-groups { display: grid; gap: 12px; }
.script-template-group { display: grid; gap: 7px; }
.script-template-group h5 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; }
.script-template-group h5 span { color: var(--green); font-size: .9rem; }
.script-starter.is-unavailable { opacity: .58; filter: saturate(.45); cursor: not-allowed; }
.script-starter.is-unavailable:hover { transform: none; border-color: var(--lg-edge-soft, var(--line)); }

/* Kártyák: hosszú magyar nevek és állapotszövegek se lógjanak ki. */
.automation-workspace-panel .automation-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: stretch;
  grid-auto-flow: row;
}

.automation-workspace-panel .automation-card { height: 100%; }

.automation-workspace-panel .automation-card :is(b, small, p, em, span),
.automation-workspace-panel .automation-next,
.automation-workspace-panel .automation-note { overflow-wrap: anywhere; word-break: normal; }

.automation-workspace-panel .automation-card > header > :is(div, span) { min-width: 0; }
.automation-workspace-panel .automation-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  margin-top: auto;
  padding-top: 4px;
}
/* 40 px volt; a vállalás 44. */
.automation-workspace-panel .automation-card-actions > * { width: 100%; min-width: 0; min-height: 44px; margin: 0; }
.automation-workspace-panel .automation-card-actions .primary { grid-column: 1 / -1; width: 100%; }
.automation-workspace-panel .automation-card-actions button { white-space: normal; line-height: 1.25; }
.automation-workspace-panel .automation-card-actions .checkline {
  justify-content: center;
  padding: 7px 9px;
  border: 1px solid var(--lg-edge-soft, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--lg-control, var(--card)) 58%, transparent);
}
.automation-workspace-panel .checkline { min-width: 0; overflow-wrap: anywhere; }
.automation-workspace-panel .script-card > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; }

/* Szerkesztők: a fejléc és az alsó gombsor helyben marad, csak a tartalom
   görgethető. Ez megakadályozza, hogy mobilon eltűnjön a Mentés. */
.automation-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(840px, calc(100vw - 24px));
  max-width: none;
  max-height: min(92dvh, 900px);
  overflow: hidden;
}

.automation-dialog .automation-dialog-stage {
  max-height: none;
  min-height: 0;
  padding: 4px 7px 10px 2px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.automation-dialog > .panel-head { min-width: 0; }
.automation-dialog > .panel-head > div { min-width: 0; }
.automation-dialog > .panel-head :is(h2, p) { overflow-wrap: anywhere; }
.automation-dialog .dialog-actions { margin-top: 4px; }

.automation-dialog .step-row-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.automation-dialog .step-kind-button b {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.automation-dialog .step-row-tools { flex-wrap: wrap; justify-content: flex-end; }
.automation-dialog .step-row-tools .smallbtn { min-width: 36px; min-height: 36px; padding: 5px 8px; }
.automation-dialog :is(input, select, textarea, button) { max-width: 100%; }

@media (max-width: 900px) {
  .automation-workspace-intro { align-items: stretch; flex-direction: column; }
  .automation-quick-actions { justify-content: flex-start; }
  .automation-local-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .automation-local-nav button:nth-child(n + 4) { grid-column: span 1; }
}

@media (max-width: 620px) {
  .automation-workspace { gap: 11px; margin-inline: 0; padding: 12px; border-radius: 18px; }
  .automation-workspace-intro { gap: 11px; }
  .automation-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-quick-actions .primary { grid-column: 1 / -1; }
  .automation-quick-actions :is(button, .primary, .smallbtn) { width: 100%; }
  .automation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-metrics > div { padding: 9px; }
  .automation-local-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-local-nav button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .automation-workspace-panel > .panel-head { align-items: stretch; flex-direction: column; }
  /* Oszlopirányú fejlécnél a sorirányú `flex: 1 1 12rem` címblokk
   * (52_skin_personality.css) magasságként érvényesülne (~130 px üres sáv a cím
   * és az „+ Új …” gomb között), ezért itt a címblokk a tartalmához igazodik.
   * Az asztali sorirány érintetlen. */
  body[data-ui="elo"] .automation-workspace-panel > .panel-head > :is(div:first-child, h2) { flex: 0 0 auto; }
  /* A fejléc gombjai (például „Energia + öntözés terv” és „+ Új automatizálás”)
   * egymás alatt, teljes szélességben: egymás mellett a hosszabb felirat
   * levágódott. */
  body[data-ui="elo"] .automation-workspace-panel > .panel-head .panel-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* A kártyafejléc állapotszava (Sikeres, Ki) a címmel egy sorban marad, ha
   * elfér, különben a cím alá kerül; a cím nem szorul keskeny oszlopba
   * (Automatika és Jelenlét kártyái). */
  body[data-ui="elo"] .automation-card > header { flex-wrap: wrap; }
  body[data-ui="elo"] .automation-card > header > div { flex: 1 1 10rem; }
  body[data-ui="elo"] .automation-card > header > :is(span, .status, .ha-state) { flex: 0 0 auto; width: auto; max-width: 100%; }
  /* Hosszú egyszavas feliratok (Rendszerengedélyek, Automatizálások) a gombon
   * belül elválasztással törnek, nem lógnak ki. */
  body[data-ui="elo"] :is(.automation-quick-actions, .automation-local-nav) button { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .automation-workspace-panel > .panel-head .panel-actions,
  .automation-workspace-panel > .panel-head > button { width: 100%; justify-content: stretch; }
  .automation-workspace-panel > .panel-head .panel-actions > *,
  .automation-workspace-panel > .panel-head > button { flex: 1 1 0; width: 100%; }
  .automation-guide-body { padding: 9px 11px 11px; }
  .automation-guide > summary { grid-template-columns: 28px minmax(0, 1fr); }
  .automation-guide > summary em { display: none; }
  .automation-workspace-panel .automation-card { padding: 12px; }
  .automation-workspace-panel .automation-card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-workspace-panel .automation-card-actions .primary { grid-column: 1 / -1; width: 100%; }
  .automation-workspace-panel .automation-card-actions :is(button, .smallbtn) { width: 100%; min-height: 44px; }
  .automation-workspace-panel .automation-card-actions .checkline { justify-content: center; min-height: 44px; }
  .automation-dialog[open] { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 13px; border-radius: 18px; }
  .automation-dialog .step-row-head { grid-template-columns: auto minmax(0, 1fr); }
  .automation-dialog .step-row-tools { grid-column: 1 / -1; justify-content: stretch; }
  .automation-dialog .step-row-tools .smallbtn { flex: 1 1 38px; }
  .automation-dialog .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-dialog .dialog-actions > * { width: 100%; }
}

@media (max-width: 360px) {
  .automation-metrics > div { grid-template-columns: 24px minmax(0, 1fr); gap: 0 6px; }
  .automation-metrics span { width: 24px; height: 24px; }
  .automation-local-nav b { font-size: .7rem; }
  .automation-workspace-panel .automation-card-actions { grid-template-columns: 1fr; }
  .automation-workspace-panel .automation-card-actions .primary { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .automation-workspace * { scroll-behavior: auto !important; transition: none !important; }
}
/* Event automations, scenes and visual traces. Shared across all three skins. */
.automation-trigger-list,
.scene-entity-chips,
.run-trace-head {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.automation-trigger-list span,
.scene-entity-chips span,
.run-trace-head span {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, #fff) 48%, transparent);
  padding: .3rem .58rem;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.automation-flow-editor,
.automation-scene-targets,
.automation-debug-flow {
  display: grid;
  gap: .8rem;
}

.automation-flow-node,
.automation-debug-flow article {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--accent, #45d6c3) 30%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel, #fff) 52%, transparent);
}

.automation-flow-node > span,
.automation-debug-flow article > span {
  display: grid;
  place-items: center;
  flex: 0 0 2.2rem;
  aspect-ratio: 1;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--accent, #45d6c3) 20%, transparent);
  font-weight: 800;
}

.automation-flow-node div,
.automation-debug-flow article div { display: grid; min-width: 0; }
.automation-flow-node button,
.automation-debug-flow article em { margin-inline-start: auto; }
.automation-flow-node small,
.automation-debug-flow small { overflow-wrap: anywhere; }

.automation-trigger-editor,
.automation-scene-target {
  padding: .85rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel, #fff) 42%, transparent);
}

.automation-trigger-editor > header,
.automation-scene-target > header {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

.automation-trigger-editor > header label { flex: 1; margin: 0; }
.automation-trigger-editor textarea,
.automation-scene-target textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.automation-debug-flow article { position: relative; }
.automation-debug-flow article:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.78rem;
  bottom: -.82rem;
  width: 2px;
  height: .82rem;
  background: color-mix(in srgb, var(--accent, #45d6c3) 55%, transparent);
}
.automation-debug-flow article[data-status="blocked"],
.automation-debug-flow article[data-status="skipped"] { opacity: .68; }
.automation-debug-flow article[data-status="matched"],
.automation-debug-flow article[data-status="ready"] {
  border-color: color-mix(in srgb, #24b47e 60%, transparent);
}

.run-trace-head { margin: .65rem 0; }
.run-steps.run-trace { position: relative; list-style: none; padding-left: 0; }
.run-steps.run-trace::before {
  content: "";
  position: absolute;
  left: .54rem;
  top: .9rem;
  bottom: .9rem;
  width: 2px;
  background: color-mix(in srgb, var(--accent, #45d6c3) 35%, transparent);
}
.run-steps.run-trace .run-step {
  display: grid;
  grid-template-columns: 1.1rem minmax(8rem, auto) minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
}
.run-trace-dot {
  z-index: 1;
  width: .72rem;
  aspect-ratio: 1;
  border: 2px solid var(--panel, #fff);
  border-radius: 50%;
  background: var(--accent, #45d6c3);
}
.run-step-error .run-trace-dot,
.run-step-aborted .run-trace-dot { background: #d84a5f; }
.run-step-skipped .run-trace-dot { background: #d79b2c; }

@media (max-width: 720px) {
  .automation-rule-editor,
  .automation-scene-editor,
  .automation-debug-dialog { width: min(100%, 42rem); }
  .run-steps.run-trace .run-step {
    grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  }
  .run-steps.run-trace .run-step small { grid-column: 2 / -1; }
}
.recovery-center {
  container-type: inline-size;
}

.recovery-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .8rem 0 1rem;
}

.recovery-assurance span {
  padding: .45rem .7rem;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, #fff) 44%, transparent);
  color: var(--text, #102033);
  font-size: .78rem;
  font-weight: 750;
}

.recovery-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.recovery-columns > section {
  min-width: 0;
  padding: .8rem;
  border: 1px solid color-mix(in srgb, var(--text, #102033) 17%, transparent);
  border-radius: calc(var(--radius, 20px) * .8);
  background: color-mix(in srgb, var(--panel, #fff) 24%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, white 42%, transparent);
}

.recovery-section-head,
.recovery-item {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.recovery-section-head {
  justify-content: space-between;
  margin-bottom: .7rem;
}

.recovery-section-head h3 { margin: 0; }
.recovery-section-head small { display: block; color: var(--muted, #5f6b7a); }
.recovery-list { display: grid; gap: .55rem; }

.recovery-item {
  padding: .7rem;
  border: 1px solid color-mix(in srgb, var(--text, #102033) 16%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent, #38bdf8) 68%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, #fff) 42%, transparent);
}

.recovery-item.repair-warning { border-left-color: #d89216; }
.recovery-item.repair-critical,
.recovery-item.is-bad { border-left-color: #d94b56; }
.recovery-item.repair-info { border-left-color: #4aa3df; }

.recovery-item-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #38bdf8) 14%, transparent);
  font-weight: 900;
}

.recovery-item-main { min-width: 0; flex: 1; }
.recovery-item-main b,
.recovery-item-main small,
.recovery-item-main em { display: block; overflow-wrap: anywhere; }
.recovery-item-main small { margin-top: .15rem; color: var(--muted, #5f6b7a); }
.recovery-item-main em { margin-top: .3rem; font-size: .72rem; color: var(--text, #102033); }
.recovery-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }

.recovery-empty {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: 1rem;
  text-align: center;
  color: var(--muted, #5f6b7a);
}
.recovery-empty span { font-size: 1.8rem; }
.recovery-empty b { color: var(--text, #102033); }
.recovery-empty small { max-width: 28rem; }
.recovery-empty.is-healthy span { color: #159b70; }

@container (max-width: 760px) {
  .recovery-columns { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .recovery-section-head { align-items: flex-start; }
  .recovery-item { align-items: flex-start; }
  .recovery-item-actions { flex: 0 0 100%; justify-content: flex-start; }
}
/* ESP32 vezérlés (0.9.0 „Játszótér”) a #rainSensors panelben.
 *
 * Egy lenyitható szakasz (`details.esp-play`, a panel többi lenyitójával
 * azonos `solax-details` alapon), alfülekkel. Classic és next felületen
 * ugyanaz a szerkezet: a --ep-* tokenek a next-tokenekből (világos/sötét:
 * body[data-next-color-scheme]) vagy a klasszikus üvegtokenekből töltődnek,
 * ezért a sötét téma külön szabály nélkül is követi a felületet.
 *
 * Szabályok: 320 px-en sem lóg ki semmi (minden rács `min(100%, …)`),
 * az érintési célok legalább 40 px-esek, a szöveg csak szóközön tör (a
 * hosszú azonosítók — SSID, MAC — a végső menekülő `overflow-wrap`-pel). */
.esp-play {
  --ep-ink: var(--next-ink, var(--glass-ink, #14202e));
  --ep-muted: var(--next-muted, var(--glass-muted, #52606f));
  --ep-line: var(--next-line, var(--lg-edge-soft, rgba(60, 80, 110, .22)));
  --ep-line-strong: var(--next-line-strong, var(--lg-edge, rgba(60, 80, 110, .38)));
  --ep-card: var(--next-panel, var(--lg-card, rgba(255, 255, 255, .6)));
  --ep-soft: var(--next-panel-2, var(--lg-control, rgba(255, 255, 255, .4)));
  --ep-accent: var(--next-accent, var(--glass-accent, #274fcf));
  --ep-accent-soft: var(--next-accent-soft, rgba(39, 79, 207, .12));
  --ep-accent-ink: var(--next-accent-ink, var(--glass-accent, #274fcf));
  --ep-danger: var(--next-danger, var(--lg-danger-ink, #b3303d));
  --ep-ok: var(--next-accent-ink, var(--lg-success-ink, #0b7a54));
  min-width: 0;
}
.esp-play[hidden], .esp-play [hidden] { display: none !important; }
.esp-play-title small { margin-left: 8px; color: var(--ep-muted); font-size: 12px; font-weight: 600; }

.esp-play-body {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding-block: 12px 14px;
  color: var(--ep-ink);
  font-size: 13px;
  line-height: 1.45;
}
.esp-play-body > *, .esp-play-grid > *, .esp-card > * { min-width: 0; margin: 0; }
.esp-play h3 { margin: 0; color: var(--ep-ink); font-size: 14px; font-weight: 720; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.esp-play-hint { margin: 0; color: var(--ep-muted); font-size: 12px; font-weight: 450; line-height: 1.45; }
.esp-play code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* Bevezető: saját felület megnyitása + élő állapotsor */
.esp-play-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.esp-play-intro .esp-play-hint { flex: 1 1 240px; }
html body .esp-play .smallbtn { min-height: 40px !important; }
html body .esp-play .esp-play-open { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; white-space: normal; }
.esp-play-live {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--ep-line);
  border-radius: 8px;
  background: var(--ep-soft);
  color: var(--ep-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.esp-play-live.ok { color: var(--ep-ink); }
.esp-play-live.ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ep-accent); vertical-align: 0; }
.esp-play-live.bad { border-color: color-mix(in srgb, var(--ep-danger) 45%, var(--ep-line)); color: var(--ep-danger); }

/* Alfülek */
.esp-play-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
html body .esp-play .esp-play-tab {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--ep-line-strong);
  border-radius: 8px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--ep-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
html body .esp-play .esp-play-tab:hover { color: var(--ep-ink); }
html body .esp-play .esp-play-tab[aria-selected="true"] { border-color: var(--ep-accent); background: var(--ep-accent-soft); color: var(--ep-accent-ink); }
html body .esp-play .esp-play-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--ep-accent) 35%, transparent); outline-offset: 2px; }

/* Állapotsor (hiba és siker; nem alert) */
.esp-play-status { margin: 0; padding: 9px 12px; border: 1px solid var(--ep-line); border-radius: 8px; background: var(--ep-soft); color: var(--ep-ink); font-size: 13px; font-weight: 600; overflow-wrap: break-word; }
.esp-play-status.ok { border-color: color-mix(in srgb, var(--ep-accent) 45%, var(--ep-line)); background: var(--ep-accent-soft); color: var(--ep-accent-ink); }
.esp-play-status.bad { border-color: color-mix(in srgb, var(--ep-danger) 50%, var(--ep-line)); background: color-mix(in srgb, var(--ep-danger) 9%, var(--ep-card)); color: var(--ep-danger); }
.esp-play-state { margin: 0; color: var(--ep-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.esp-play-state[data-running="true"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ep-accent); }

/* Kártyák és rács */
.esp-play-panel { display: grid; gap: 12px; min-width: 0; }
.esp-play-panel:focus-visible { outline: 3px solid color-mix(in srgb, var(--ep-accent) 30%, transparent); outline-offset: 3px; border-radius: 8px; }
.esp-play-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.esp-card { container-type: inline-size; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 14px; border: 1px solid var(--ep-line); border-radius: 10px; background: var(--ep-card); }
.esp-card-wide { grid-column: 1 / -1; }
.esp-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 40px; }
.esp-switch-row { display: inline-flex; align-items: center; gap: 10px; color: var(--ep-ink); font-weight: 650; }
.esp-switch-row .switch { position: relative; flex: 0 0 auto; }
.esp-switch-row .switch::after { content: ""; position: absolute; inset: -10px -6px; }
/* A next kapcsoló a saját ::before gombját rajzolja; a classic ::after gomb ne
 * jelenjen meg mellette. */

.esp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html body .esp-play .esp-actions > :is(button, a) { flex: 0 1 auto; width: auto; min-height: 40px; margin: 0; white-space: normal; }
.esp-play label { min-width: 0; }
.esp-play input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.esp-play select, .esp-play textarea { max-width: 100%; box-sizing: border-box; }
.esp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.esp-form { display: grid; gap: 12px; min-width: 0; }
.esp-form > label, .esp-card > label { display: grid; gap: 6px; }

/* Szín, fényerő, effektek */
.esp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
html body .esp-play .esp-swatch {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ep-line-strong);
  border-radius: 50%;
  background: var(--swatch, #888);
  background-image: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ep-card) 70%, transparent);
  cursor: pointer;
}
html body .esp-play .esp-swatch[aria-pressed="true"] { border-color: var(--ep-accent); box-shadow: inset 0 0 0 2px var(--ep-card), 0 0 0 3px color-mix(in srgb, var(--ep-accent) 45%, transparent); }
html body .esp-play .esp-swatch:focus-visible { outline: 3px solid color-mix(in srgb, var(--ep-accent) 40%, transparent); outline-offset: 2px; }
.esp-color-line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
html body[data-ui][data-ui][data-ui] .esp-play .esp-color-line input[type="color"] { width: 56px !important; max-width: 56px; height: 40px; min-height: 40px; padding: 2px; border: 1px solid var(--ep-line-strong); border-radius: 8px; background: var(--ep-card); cursor: pointer; }
.esp-range { display: grid; gap: 4px; }
.esp-range > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.esp-range output { color: var(--ep-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A közös üvegszabály (00_foundations) minden input[type=range] köré
 * keretet, hátteret és árnyékot tesz; a csúszka sávját ezek nélkül rajzoljuk. */
html body[data-ui][data-ui][data-ui] .esp-play .esp-range input[type="range"] {
  width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.esp-fx-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)); gap: 8px; }
html body .esp-play .esp-fx {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--ep-line-strong);
  border-radius: 8px;
  background: var(--ep-card);
  background-image: none;
  box-shadow: none;
  color: var(--ep-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.esp-fx::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--fx, var(--ep-accent)); }
.esp-fx-szivarvany { --fx: conic-gradient(#ff3b30, #ffcc00, #34c759, #007aff, #af52de, #ff3b30); }
.esp-fx-lelegzes { --fx: radial-gradient(circle, #7fd6ff 0 35%, #1c7fd1 100%); }
.esp-fx-villogas { --fx: linear-gradient(90deg, #ffd60a 50%, #8a6d00 50%); }
.esp-fx-disco { --fx: conic-gradient(#ff2d55, #5856d6, #00c7be, #ffcc00, #ff2d55); }
.esp-fx-gyertya { --fx: radial-gradient(circle, #fff1a8 0 25%, #ff9a3c 100%); }
.esp-fx-rendorseg { --fx: linear-gradient(90deg, #ff3b30 50%, #2f5bff 50%); }
html body .esp-play .esp-fx[aria-pressed="true"] { border-color: var(--ep-accent); background: var(--ep-accent-soft); color: var(--ep-accent-ink); }
html body .esp-play .esp-fx:focus-visible { outline: 3px solid color-mix(in srgb, var(--ep-accent) 40%, transparent); outline-offset: 2px; }

/* Lábak */
.esp-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 10px; }
.esp-pin { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--ep-line); border-radius: 8px; background: var(--ep-soft); }
.esp-pin > b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.esp-pin-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--ep-line-strong); }
.esp-pin[data-on="true"] .esp-pin-dot { background: var(--ep-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-accent) 28%, transparent); }
.esp-pin-state { color: var(--ep-muted); font-size: 12px; line-height: 1.35; }
html body .esp-play .esp-pin select { min-height: 40px; }
html body .esp-play .esp-pin .smallbtn { min-height: 40px !important; width: 100%; }
.esp-reserved { display: flex; flex-wrap: wrap; gap: 6px; }
.esp-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border: 1px solid var(--ep-line); border-radius: 99px; background: var(--ep-soft); color: var(--ep-muted); font-size: 12px; font-weight: 600; }

/* Program */
html body[data-ui][data-ui][data-ui][data-ui] .esp-play .esp-code-input {
  min-height: 190px !important;
  padding: 10px 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}
.esp-examples { display: grid; gap: 8px; }
html body .esp-play .esp-examples > button { justify-content: flex-start; width: 100%; min-height: 40px; text-align: left; white-space: normal; }
.esp-commands { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }

/* Kulcs–érték listák (eszköz, Wi-Fi, állapot) */
.esp-kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.esp-kv dt { color: var(--ep-muted); font-size: 12px; font-weight: 600; }
.esp-kv dd { margin: 0; color: var(--ep-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.esp-commands dd { font-weight: 450; }
.esp-commands dt { font-weight: 600; }

/* Wi-Fi-hálózatok */
.esp-nets { display: grid; gap: 6px; }
html body .esp-play .esp-net {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--ep-line-strong);
  border-radius: 8px;
  background: var(--ep-card);
  background-image: none;
  box-shadow: none;
  color: var(--ep-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body .esp-play .esp-net:hover { border-color: var(--ep-accent); }
.esp-net b { overflow-wrap: anywhere; font-size: 13px; }
.esp-net small { color: var(--ep-muted); font-size: 12px; }

/* Napló */
.esp-events { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.esp-events li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--ep-line); border-radius: 8px; background: var(--ep-soft); }
.esp-events li span { overflow-wrap: break-word; }
.esp-events small { color: var(--ep-muted); font-size: 12px; white-space: nowrap; }
.esp-events .esp-empty { display: block; color: var(--ep-muted); }

/* A kártya szélessége, nem a képernyőé számít: classic felületen a panel
 * asztalon is keskeny oszlop, next felületen 3 kártya fér egymás mellé. */
@container (max-width: 300px) {
  .esp-kv, .esp-commands { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .esp-kv dd { margin-bottom: 8px; }
  .esp-events li { grid-template-columns: minmax(0, 1fr); }
  html body .esp-play .esp-actions > :is(button, a) { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .esp-card { padding: 12px; }
  html body .esp-play .esp-play-tab { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .esp-play * { transition: none !important; animation: none !important; }
}
/* Szerver lap (Rendszer → Szerver): a HomeHubot futtató telefon állapota.
 *
 * Egyetlen panel (`#hostPanel`) állapotkártyákkal, szolgáltatáslistával és a
 * frissítés állapotával. A --hs-* tokenek a next-tokenekből (világos/sötét:
 * body[data-next-color-scheme]) vagy a klasszikus üvegtokenekből töltődnek,
 * ezért a sötét téma külön szabály nélkül is olvasható.
 *
 * Szabályok: 320 px-en sem lóg ki semmi (minden rács `min(100%, …)`), az
 * érintési célok legalább 44 px-esek, a hosszú azonosítók (SSID, útvonal,
 * címek) a végső menekülő `overflow-wrap`-pel törnek. */
.host-panel {
  --hs-ink: var(--next-ink, var(--glass-ink, #14202e));
  --hs-muted: var(--next-muted, var(--glass-muted, #52606f));
  --hs-line: var(--next-line, var(--lg-edge-soft, rgba(60, 80, 110, .22)));
  --hs-line-strong: var(--next-line-strong, var(--lg-edge, rgba(60, 80, 110, .38)));
  --hs-card: var(--next-panel, var(--lg-card, rgba(255, 255, 255, .6)));
  --hs-soft: var(--next-panel-2, var(--lg-control, rgba(255, 255, 255, .4)));
  --hs-accent: var(--next-accent, var(--glass-accent, #274fcf));
  --hs-accent-soft: var(--next-accent-soft, rgba(39, 79, 207, .12));
  --hs-accent-ink: var(--next-accent-ink, var(--glass-accent, #274fcf));
  --hs-warn: var(--next-warn, #a66724);
  --hs-warn-soft: var(--next-warn-soft, #f5e8d4);
  --hs-danger: var(--next-danger, var(--lg-danger-ink, #b3303d));
  --hs-danger-soft: var(--next-danger-soft, #f5dfdc);
  display: grid;
  gap: 16px;
  min-width: 0;
  color: var(--hs-ink);
  font-size: 13px;
  line-height: 1.45;
}
.host-panel[hidden], .host-panel [hidden] { display: none !important; }
.host-panel > * { min-width: 0; margin: 0; }
body[data-page="host"] .dashboard > #hostPanel { grid-column: 1 / -1; width: 100%; max-width: 100%; align-self: start; }

.host-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.host-head h2 { margin: 0; }
.host-sub { margin: 2px 0 0; color: var(--hs-muted); font-size: 13px; }
.host-stamp { display: inline-block; margin-left: 6px; font-variant-numeric: tabular-nums; }
html body .host-panel .smallbtn, html body .host-panel .host-dialog button { min-height: 44px !important; }
.host-block > h3, .host-card-head h3 { margin: 0; color: var(--hs-ink); font-size: 15px; font-weight: 720; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.host-block { display: grid; gap: 10px; min-width: 0; }
.host-block > * { min-width: 0; margin: 0; }
.host-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--hs-accent-ink); }

/* Állapotsor (siker/hiba; nem alert) */
.host-status { padding: 10px 12px; border: 1px solid var(--hs-line); border-radius: 8px; background: var(--hs-soft); color: var(--hs-ink); font-weight: 600; overflow-wrap: anywhere; }
.host-status.ok { border-color: color-mix(in srgb, var(--hs-accent) 45%, var(--hs-line)); background: var(--hs-accent-soft); color: var(--hs-accent-ink); }
.host-status.bad { border-color: color-mix(in srgb, var(--hs-danger) 50%, var(--hs-line)); background: var(--hs-danger-soft); color: var(--hs-danger); }
.host-hint { color: var(--hs-muted); font-size: 12px; }

/* Riasztások */
.host-alerts { display: grid; gap: 8px; }
.host-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--hs-line); border-radius: 8px; background: var(--hs-soft); font-weight: 600; overflow-wrap: anywhere; }
.host-alert .host-icon { margin-top: 1px; }
.host-alert[data-level="ok"] { border-color: color-mix(in srgb, var(--hs-accent) 35%, var(--hs-line)); background: var(--hs-accent-soft); color: var(--hs-accent-ink); }
.host-alert[data-level="warn"] { border-color: color-mix(in srgb, var(--hs-warn) 55%, var(--hs-line)); background: var(--hs-warn-soft); color: var(--hs-ink); }
.host-alert[data-level="warn"] .host-icon { color: var(--hs-warn); }
.host-alert[data-level="bad"] { border-color: color-mix(in srgb, var(--hs-danger) 55%, var(--hs-line)); background: var(--hs-danger-soft); color: var(--hs-ink); }
.host-alert[data-level="bad"] .host-icon { color: var(--hs-danger); }

/* Állapotkártyák */
.host-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.host-card { container-type: inline-size; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 14px; border: 1px solid var(--hs-line); border-radius: 10px; background: var(--hs-card); }
.host-card > * { min-width: 0; margin: 0; }
.host-card-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.host-empty { margin: 0; color: var(--hs-muted); font-size: 13px; }
.host-na { color: var(--hs-muted); font-weight: 500; }
.host-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.host-big b { font-size: 32px; font-weight: 760; line-height: 1.1; font-variant-numeric: tabular-nums; }
.host-big span { color: var(--hs-muted); font-weight: 600; }
.host-bar { height: 10px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--hs-line-strong) 55%, transparent); }
.host-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--hs-accent); }
.host-bar[data-level="warn"] > i, .host-meter[data-level="warn"] .host-bar > i { background: var(--hs-warn); }
.host-bar[data-level="bad"] > i, .host-meter[data-level="bad"] .host-bar > i { background: var(--hs-danger); }
.host-meters { display: grid; gap: 12px; }
.host-meter { display: grid; gap: 6px; }
.host-meter-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.host-meter-line span { color: var(--hs-muted); font-weight: 600; }
.host-meter-line b { font-variant-numeric: tabular-nums; font-weight: 700; }

.host-kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.host-kv dt { color: var(--hs-muted); font-size: 12px; font-weight: 600; }
.host-kv dd { margin: 0; color: var(--hs-ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.host-link { color: var(--hs-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.host-addresses { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.host-addresses li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 10px; border: 1px solid var(--hs-line); border-radius: 8px; background: var(--hs-soft); }
.host-addresses span { color: var(--hs-muted); font-weight: 600; }
.host-panel code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* Szolgáltatások */
.host-services { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.host-service { min-width: 0; border: 1px solid var(--hs-line); border-radius: 10px; background: var(--hs-card); }
.host-service-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 10px 14px; }
.host-service-main > * { min-width: 0; margin: 0; }
.host-service-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.host-service-id b { overflow-wrap: anywhere; font-size: 14px; }
.host-service-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.host-service-meta div { display: grid; }
.host-service-meta dt { color: var(--hs-muted); font-size: 11px; font-weight: 600; }
.host-service-meta dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.host-service-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
html body .host-panel .host-service-actions .smallbtn { flex: 0 1 auto; width: auto; margin: 0; white-space: normal; }
.host-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border: 1px solid var(--hs-line); border-radius: 99px; background: var(--hs-soft); color: var(--hs-muted); font-size: 12px; font-weight: 700; }
.host-chip[data-state="run"] { border-color: color-mix(in srgb, var(--hs-accent) 45%, var(--hs-line)); background: var(--hs-accent-soft); color: var(--hs-accent-ink); }
.host-chip[data-state="down"] { border-color: color-mix(in srgb, var(--hs-danger) 50%, var(--hs-line)); background: var(--hs-danger-soft); color: var(--hs-danger); }
.host-chip[data-state="info"] { border-color: color-mix(in srgb, var(--hs-warn) 50%, var(--hs-line)); background: var(--hs-warn-soft); color: var(--hs-ink); }
.host-log { display: grid; gap: 8px; padding: 0 14px 14px; min-width: 0; }
.host-log > * { min-width: 0; margin: 0; }
.host-log-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.host-log-error { color: var(--hs-danger); font-weight: 600; }
.host-log-text {
  max-height: 320px; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--hs-line); border-radius: 8px;
  background: var(--hs-soft); color: var(--hs-ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; white-space: pre; tab-size: 4;
}
.host-log-text:focus-visible, html body .host-panel button:focus-visible { outline: 3px solid color-mix(in srgb, var(--hs-accent) 40%, transparent); outline-offset: 2px; }

/* Frissítés állapota */
.host-update-line { display: flex; flex-wrap: wrap; gap: 8px; }
.host-update-message { color: var(--hs-ink); font-weight: 600; overflow-wrap: anywhere; }
.host-archives { display: grid; gap: 6px; }
.host-archives ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.host-archives li { padding: 6px 10px; border: 1px solid var(--hs-line); border-radius: 8px; background: var(--hs-soft); }

/* Megerősítő párbeszéd */
.host-dialog { width: min(92vw, 420px); max-width: calc(100% - 32px); padding: 0; border: 1px solid var(--hs-line-strong); border-radius: 12px; background: var(--next-panel, var(--lg-card, #fff)); color: var(--hs-ink); }
.host-dialog::backdrop { background: rgba(10, 14, 20, .55); }
.host-dialog-body { display: grid; gap: 12px; padding: 18px; }
.host-dialog-body > * { margin: 0; }
.host-dialog-body h3 { font-size: 16px; }
.host-dialog-warning { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--hs-warn) 55%, var(--hs-line)); border-radius: 8px; background: var(--hs-warn-soft); color: var(--hs-ink); font-weight: 650; }
.host-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
html body .host-panel .host-dialog-actions button { flex: 1 1 120px; min-width: 0; margin: 0; }

/* A kártya szélessége számít, nem a képernyőé. */
@container (max-width: 300px) {
  .host-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .host-kv dd { margin-bottom: 8px; }
}
@media (max-width: 720px) {
  .host-service-main { grid-template-columns: minmax(0, 1fr); }
  .host-service-actions { justify-content: flex-start; }
  html body .host-panel .host-service-actions .smallbtn { flex: 1 1 120px; }
}
@media (max-width: 480px) {
  .host-card { padding: 12px; }
  .host-big b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .host-panel * { transition: none !important; animation: none !important; }
}
/* -------------------------------------------------------------------------
 * 0.21.23 desktop packing and device-card geometry
 * ---------------------------------------------------------------------- */

/* A discovered-device card needs room for an image, an exact identity and a
 * real action button. Three 280px columns reduced the copy to a few letters
 * per line; use two readable columns at normal desktop widths instead. */
#homeDevices .device-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  align-items: start;
}

#homeDevices .device-card {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: start;
  align-self: start;
  min-height: 0;
}

#homeDevices .device-card-copy { min-width: 0; }
#homeDevices .device-card > button {
  align-self: start;
  justify-self: end;
  margin: 0;
}

#homeDevices .device-card :is(b, span, small, p) {
  word-break: normal;
  overflow-wrap: break-word;
}

#homeDevices .device-identity-details {
  margin-top: 7px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale, 1));
}

#homeDevices .device-identity-details summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 720;
}

#homeDevices .device-evidence {
  margin-top: 5px;
  line-height: 1.45;
}

/* A classic kezdőlap masonry-rácsa (2 px-es sorok, mért widget-span) elo alatt
 * nem jelenik meg: a kezdőlapot az elo története adja (95_elo_10_story.css), a
 * rács 2 px-es sorai pedig a megtartott panelek átfedését okozták (FB-17). */

.layout-editing [data-widget-id].widget-drop-before {
  box-shadow: inset 0 4px 0 var(--green), var(--shadow) !important;
}

.layout-editing [data-widget-id].widget-drop-after {
  box-shadow: inset 0 -4px 0 var(--green), var(--shadow) !important;
}

.widget-drag-handle { cursor: grab; touch-action: none; }
.widget-drag-handle:active { cursor: grabbing; }

@media (max-width: 760px) {
  #homeDevices .device-grid { grid-template-columns: minmax(0, 1fr); }
  #homeDevices .device-card { grid-template-columns: 56px minmax(0, 1fr); }
  #homeDevices .device-card > button { grid-column: 2; justify-self: start; }

  /* Mobile keeps the reliable arrow controls. Free-form height dragging was
   * overridden by the one-column safety CSS and therefore only pretended to
   * resize; do not expose a no-op handle. */
  html body.layout-editing .widget-resize-handle { display: none !important; }
  html body.layout-editing [data-widget-id] > .widget-controls { right: 8px !important; }
}

@media (max-width: 420px) {
  #homeDevices .device-card > button {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }
}

/* -------------------------------------------------------------------------
 * Stable dashboard bottom anchor and softly tinted skin surfaces
 * ---------------------------------------------------------------------- */

/* Live widget content and masonry repacking must not make the browser choose
 * a new implicit scroll anchor while the user is reading the last row. The
 * runtime enables this class only within 96px of the real dashboard bottom
 * and restores the same bottom distance after the measured layout settles. */
html body[data-page="dashboard"].dashboard-bottom-locked :is(
  .dashboard,
  [data-page-section="dashboard"]
) {
  overflow-anchor: none;
}

/* Every current identity uses the same material contract, but keeps its own
 * tint and ink. These tokens intentionally remain translucent; the opaque
 * page canvas behind them supplies the final contrast without turning cards
 * into flat white or black blocks. */
body[data-ui="elo"] {
  --skin-panel-surface: color-mix(in srgb, var(--lg-card) 84%, transparent);
  --skin-card-surface: color-mix(in srgb, var(--lg-control) 68%, transparent);
  --skin-surface-edge: color-mix(in srgb, var(--lg-edge) 78%, transparent);
  --skin-card-edge: color-mix(in srgb, var(--lg-edge-soft) 74%, transparent);
  --skin-surface-sheen: rgba(255, 255, 255, .16);
  --skin-card-sheen: rgba(255, 255, 255, .10);
  --skin-surface-accent: var(--glass-accent, var(--green));
  --skin-surface-ink: var(--glass-ink, var(--ink));
  --skin-surface-muted: var(--glass-muted, var(--muted));
}

html body[data-ui="elo"] :is(.panel) {
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--panel-glow, var(--skin-surface-accent)) 11%, transparent), transparent 40%),
    linear-gradient(145deg, var(--skin-surface-sheen), transparent 54%),
    var(--skin-panel-surface) !important;
  border-color: var(--skin-surface-edge) !important;
  color: var(--skin-surface-ink) !important;
}

html body[data-ui="elo"] :is(
  .duration-box,
  .consumption,
  .update-safety,
  .energy-metric,
  .energy-chart,
  .solar-node,
  .solax-metrics > div,
  .solax-chart,
  .solax-details,
  .balance-grid > div,
  .device-status-metrics > span,
  .phase-grid > div,
  .schedule,
  .notification:not(.warn):not(.bad),
  .file-entry,
  .credential,
  .device-card,
  .topic-box,
  .camera-card,
  .camera-tile,
  .dashboard-camera-tile,
  .ha-entity,
  .local-appliance-card,
  .air-card,
  .automation-card,
  .script-card,
  .surplus-card,
  .guide-card,
  .access-item,
  .detail-data-grid > div,
  .detail-explanation,
  .weather-detail-metrics > div,
  .weather-timeline-item,
  .always-on > div,
  .sensor-metrics > div,
  .tapo-device,
  .favorite-chip,
  .helper-strip,
  .digest-section,
  .remote-history-item,
  .wizard-device-card,
  .wizard-catalog-card,
  .settings-categories button:not(.selected),
  .choice-grid button:not(.selected),
  .refrigerator-mode,
  .script-starters,
  .script-starter,
  .schedule-calendar
) {
  background:
    linear-gradient(145deg, var(--skin-card-sheen), transparent 62%),
    var(--skin-card-surface) !important;
  border-color: var(--skin-card-edge) !important;
  color: var(--skin-surface-ink) !important;
}

html body[data-ui="elo"] .panel :is(h2, h3, h4, b, strong, label, code, output) {
  color: var(--skin-surface-ink) !important;
  text-shadow: var(--skin-text-shadow, none);
}

html body[data-ui="elo"] .panel :is(
  .panel-subtitle,
  .tapo-help,
  .muted,
  .status:not(.ok):not(.bad),
  .message:not(.ok):not(.bad),
  .tapo-result:not(.ok):not(.bad)
) {
  color: var(--skin-surface-muted) !important;
  text-shadow: var(--skin-text-shadow, none);
}

/* The weather panel keeps its live orb and state palette, but its two colour
 * stops are translucent as well. The scene therefore tints the current skin
 * canvas instead of replacing it with an opaque blue/yellow rectangle. */
html body[data-ui="elo"] #idojaras.weather {
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--weather-card-orb) 72%, transparent) 0 34px, transparent 35px),
    linear-gradient(
      142deg,
      color-mix(in srgb, var(--weather-card-a, #83d4ff) 36%, transparent),
      color-mix(in srgb, var(--weather-card-b, #fff0b2) 30%, transparent)
    ) !important;
  color: var(--weather-card-ink, var(--skin-surface-ink)) !important;
}

html body[data-ui="elo"] #idojaras.weather :is(h2, strong, b) {
  color: var(--weather-card-ink, var(--skin-surface-ink)) !important;
  text-shadow: var(--skin-text-shadow, 0 1px 1px rgba(255, 255, 255, .20));
}

html body[data-ui="elo"] #idojaras.weather :is(
  .panel-subtitle,
  .weather-now span:not(.weather-icon),
  .weather-stats span,
  .weather-meta
) {
  color: var(--weather-card-muted, var(--skin-surface-muted)) !important;
}

/* Legacy data-theme rules assign live/theme muted colours to every panel
 * paragraph, small label and span. Resolve that generic copy through the
 * active skin instead, while leaving controls, emphasized values, semantic
 * states, icons and the weather scene on their own component palettes. The
 * digest status marks (orb, tone label, section icon, alert counter) carry
 * their own ink and are listed explicitly (S1-01). */
html body[data-ui="elo"] .panel:not(#idojaras) :is(p, small, span):not(
  :is(
    button *,
    a *,
    [role="button"],
    [role="button"] *,
    h1 *,
    h2 *,
    h3 *,
    h4 *,
    b *,
    strong *,
    code *,
    output *,
    .ok,
    .ok *,
    .bad,
    .bad *,
    .warn,
    .warn *,
    .error,
    .error *,
    .success,
    .success *,
    .danger,
    .danger *,
    .camera-live,
    .camera-live *,
    .log-kind,
    .log-kind *,
    .log-level,
    .log-level *,
    .trace-outcome,
    .digest-health-orb,
    .digest-health-orb *,
    .digest-tone-label,
    .digest-tone-label *,
    .digest-section-icon,
    .digest-clear > span,
    .digest-stat-alert > span,
    [aria-hidden="true"],
    [class*="icon"],
    [class*="glyph"],
    [class*="badge"]
  )
) {
  color: var(--skin-surface-muted) !important;
  text-shadow: var(--skin-text-shadow, none);
}

/* A keskeny kártyafejlécek későbbi grid-szabályai felülírták az általános
 * 44 px-es érintési minimumot. Ezek a ténylegesen mért, ikonként megjelenő
 * kezelők minden mobil skinben megtartják a használható célterületet. */
@media (pointer: coarse), (max-width: 760px) {
  #openSearch,
  #openSearchFromFavorites,
  #printDigest,
  #refreshDigest {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .dashboard .digest-widget .panel-actions {
    grid-template-columns: minmax(92px, 1fr) repeat(2, 44px);
  }

  .dashboard .digest-widget .panel-actions :is(select, button) {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Keep the system accessibility preference authoritative over the late skin
 * surface layer. Each skin's --lg-opaque is its matching solid material, so
 * the same cards remain recognisable without exposing the moving canvas. */
@media (prefers-reduced-transparency: reduce) {
  html body[data-ui="elo"] {
    --skin-panel-surface: color-mix(in srgb, var(--lg-opaque, var(--card)) 98%, transparent);
    --skin-card-surface: color-mix(in srgb, var(--lg-opaque, var(--card)) 94%, transparent);
    --skin-surface-sheen: transparent;
    --skin-card-sheen: transparent;
  }

  html body[data-ui="elo"] :is(.panel) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body[data-ui="elo"] #idojaras.weather {
    background:
      radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--weather-card-orb) 72%, transparent) 0 34px, transparent 35px),
      linear-gradient(
        142deg,
        color-mix(in srgb, var(--weather-card-a, #83d4ff) 8%, var(--lg-opaque, var(--card)) 92%),
        color-mix(in srgb, var(--weather-card-b, #fff0b2) 8%, var(--lg-opaque, var(--card)) 92%)
      ) !important;
  }
}

/* Mobil gyorscsempék: végső layout-szerződés. Ezt szándékosan a skin- és a
 * régi egyoszlopos biztonsági szabályok után tartjuk, hogy mindhárom mobil
 * felület ugyanazt a tömör, kétoszlopos navigációt kapja. */
@media (max-width: 760px) {

  #cardDetailStage .mobile-card-summary { display: none !important; }
}
/* ========================================================================
 * Mobil élő widgetek – energia- és időjárás-hősök
 *
 * Ez a réteg a skin-specifikus dashboard-szabályok után áll. A valódi
 * panelazonosítók szándékosan szerepelnek a szelektorban: így a kiemelt
 * widgetek minden skinben teljes szélességűek maradnak, 320 px-en is.
 * Az animációk csak transform/opacity tulajdonságot mozgatnak, ezért a
 * szervertelefonon sem indítanak drága újrarajzolást.
 * ===================================================================== */
@keyframes homehub-mobile-value-in {
  from { opacity: .42; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes homehub-mobile-energy-travel {
  from { opacity: 0; transform: translateX(-12px) scale(.72); }
  18%, 82% { opacity: .72; }
  to { opacity: 0; transform: translateX(250px) scale(1); }
}

@keyframes homehub-mobile-energy-travel-reverse {
  from { opacity: 0; transform: translateX(250px) scale(.72); }
  18%, 82% { opacity: .72; }
  to { opacity: 0; transform: translateX(-12px) scale(1); }
}

@keyframes homehub-mobile-icon-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(2deg); }
}

@keyframes homehub-mobile-solar-turn {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .mobile-card-summary {
    --mobile-card-tone: var(--skin-surface-accent, #70c7ff);
    --mobile-card-tone-soft: color-mix(in srgb, var(--mobile-card-tone) 13%, transparent);
  }

  .mobile-card-summary[data-mobile-card-tone="solar"] { --mobile-card-tone: #f3b638; }
  .mobile-card-summary[data-mobile-card-tone="home-energy"] { --mobile-card-tone: #40d1bc; }
  .mobile-card-summary[data-mobile-card-tone="grid"] { --mobile-card-tone: #aa86ff; }
  .mobile-card-summary[data-mobile-card-tone="weather"] { --mobile-card-tone: #69c9ff; }
  .mobile-card-summary[data-mobile-card-tone="water"] { --mobile-card-tone: #50bdf4; }
  .mobile-card-summary[data-mobile-card-tone="garden"] { --mobile-card-tone: #62c97a; }
  .mobile-card-summary[data-mobile-card-tone="safety"] { --mobile-card-tone: #ffb85d; }
  .mobile-card-summary[data-mobile-card-tone="vehicle"] { --mobile-card-tone: #66b3ff; }
  .mobile-card-summary[data-mobile-card-tone="cold"] { --mobile-card-tone: #9ad8ff; }
  .mobile-card-summary[data-mobile-card-tone="media"] { --mobile-card-tone: #de83ff; }

  .mobile-card-summary .mobile-card-open {
    isolation: isolate;
    background:
      radial-gradient(circle at 92% -16%, var(--mobile-card-tone-soft) 0 15%, transparent 46%),
      linear-gradient(145deg, color-mix(in srgb, var(--skin-card-surface, var(--card)) 22%, transparent), transparent 70%);
  }

  .mobile-card-summary .mobile-card-head,
  .mobile-card-summary .mobile-card-facts {
    position: relative;
    z-index: 1;
  }

  .mobile-card-summary .mobile-card-icon {
    border-color: color-mix(in srgb, var(--mobile-card-tone) 42%, var(--skin-card-edge, var(--line)));
    background: color-mix(in srgb, var(--mobile-card-tone) 12%, var(--skin-card-surface, var(--card)) 88%);
  }

  .mobile-card-summary .mobile-card-fact {
    border-color: color-mix(in srgb, var(--mobile-card-tone) 20%, var(--skin-card-edge, var(--line)) 80%);
    background: color-mix(in srgb, var(--mobile-card-tone) 7%, var(--skin-card-surface, var(--card)) 93%);
  }

  .mobile-card-fact small {
    display: -webkit-box !important;
    overflow: hidden;
    overflow-wrap: normal;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mobile-card-fact strong {
    display: block !important;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
  }

  /* A kis kártyák nem csak számot kaphatnak: üres vagy beállításra váró
   * eszköznél rövid állapotmondat érkezik. Az egysoros kényszer ezeket már
   * 390 px-en is olvashatatlanul levágta. A kompakt változat két sort enged,
   * miközben a széles energia- és időjáráskártyák nagy számai egy sorban
   * maradnak. */
  .mobile-card-summary[data-mobile-card-variant="compact"] .mobile-card-fact strong {
    display: -webkit-box !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mobile-card-fact strong.is-updated {
    animation: homehub-mobile-value-in .42s cubic-bezier(.2, .72, .2, 1);
  }

  .mobile-card-visual {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .mobile-card-visual::before {
    content: "";
    position: absolute;
    right: -18px;
    top: -26px;
    width: 104px;
    height: 104px;
    border: 1px solid color-mix(in srgb, var(--mobile-card-tone) 30%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--mobile-card-tone) 8%, transparent);
    opacity: .68;
  }

  .mobile-card-visual i {
    position: absolute;
    left: 10px;
    bottom: 50px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mobile-card-tone);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mobile-card-tone) 13%, transparent);
    opacity: 0;
    animation: homehub-mobile-energy-travel 4.2s linear infinite;
  }

  .mobile-card-visual i:nth-child(2) { animation-delay: -1.4s; }
  .mobile-card-visual i:nth-child(3) { animation-delay: -2.8s; }

  #greenhess.is-importing .mobile-card-visual i {
    animation-name: homehub-mobile-energy-travel-reverse;
  }

  #greenhess:not(.is-importing):not(.is-exporting) .mobile-card-visual i,
  #solax:not(.is-pv-flowing) .mobile-card-visual i {
    animation-play-state: paused;
    opacity: 0;
  }

  #solax.is-pv-flowing .mobile-card-icon {
    animation: homehub-mobile-solar-turn 14s linear infinite;
  }

  #idojaras .mobile-card-icon {
    animation: homehub-mobile-icon-float 5.6s ease-in-out infinite;
  }

  .mobile-card-weather .mobile-card-visual i {
    width: 34px;
    height: 9px;
    bottom: auto;
    top: 30px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mobile-card-tone) 22%, white 78%);
    box-shadow: 14px -5px 0 -1px color-mix(in srgb, var(--mobile-card-tone) 18%, white 82%);
    animation: homehub-mobile-energy-travel 8s linear infinite;
  }

  .mobile-card-wide .mobile-card-open,
  .mobile-card-weather .mobile-card-open {
    gap: 8px;
    padding: 11px 12px 12px;
  }

  .mobile-card-wide .mobile-card-head,
  .mobile-card-weather .mobile-card-head {
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    gap: 9px;
  }

  .mobile-card-wide .mobile-card-icon,
  .mobile-card-weather .mobile-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 22px;
  }

  .mobile-card-wide .mobile-card-title,
  .mobile-card-weather .mobile-card-title {
    font-size: clamp(14px, 4vw, 17px);
  }

  .mobile-card-wide [data-mobile-card-status],
  .mobile-card-weather [data-mobile-card-status] {
    font-size: clamp(9px, 2.6vw, 11px);
  }

  .mobile-card-wide .mobile-card-facts,
  .mobile-card-weather .mobile-card-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(42px, .92fr) minmax(39px, .82fr);
    gap: 6px;
  }

  .mobile-card-weather .mobile-card-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-card-wide .mobile-card-fact,
  .mobile-card-weather .mobile-card-fact {
    padding: 5px 7px;
  }

  .mobile-card-wide .mobile-card-fact[data-mobile-card-primary],
  .mobile-card-weather .mobile-card-fact[data-mobile-card-primary] {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    gap: 10px;
    padding-inline: 10px;
  }

  .mobile-card-wide .mobile-card-fact[data-mobile-card-primary] small,
  .mobile-card-weather .mobile-card-fact[data-mobile-card-primary] small {
    font-size: clamp(9px, 2.5vw, 11px);
  }

  .mobile-card-wide .mobile-card-fact[data-mobile-card-primary] strong,
  .mobile-card-weather .mobile-card-fact[data-mobile-card-primary] strong {
    font-size: clamp(21px, 6vw, 28px);
    letter-spacing: -.035em;
  }

  .mobile-card-wide .mobile-card-fact[data-mobile-card-span="2"] {
    grid-column: span 2;
  }

  .mobile-card-wide .mobile-card-fact:not([data-mobile-card-primary]) strong,
  .mobile-card-weather .mobile-card-fact:not([data-mobile-card-primary]) strong {
    font-size: clamp(11px, 3.15vw, 14px);
  }
}

@media (max-width: 360px) {

  .mobile-card-wide .mobile-card-open,
  .mobile-card-weather .mobile-card-open { padding-inline: 9px; }

  .mobile-card-wide .mobile-card-facts,
  .mobile-card-weather .mobile-card-facts { gap: 4px; }

  .mobile-card-wide .mobile-card-fact,
  .mobile-card-weather .mobile-card-fact { padding-inline: 4px; }
}

html body[data-render-mode="efficient"] :is(
  .mobile-card-visual i,
  #solax .mobile-card-icon,
  #idojaras .mobile-card-icon,
  .mobile-card-fact strong.is-updated
) {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-card-visual i,
  #solax .mobile-card-icon,
  #idojaras .mobile-card-icon,
  .mobile-card-fact strong.is-updated {
    animation: none !important;
  }
}
/* Mobile appearance and navigation contract.
 * The chooser keeps the three identities recognisable without inheriting the
 * active skin's button palette. The bottom bar follows scroll direction on
 * iOS as well as regular mobile browsers. */

@media (max-width: 760px) {

  /* Restore the actual weather-state palette after the late translucent
   * surface layer. This keeps clear/cloud/rain/night visually distinct. */
  html body[data-ui="elo"] #idojaras.weather {
    background:
      radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--weather-card-orb, #fff) 82%, transparent) 0 34px, transparent 35px),
      linear-gradient(142deg, var(--weather-card-a, #83d4ff), var(--weather-card-b, #fff0b2)) !important;
    border-color: color-mix(in srgb, var(--weather-card-orb, #fff) 58%, transparent) !important;
  }

  html body[data-ui="elo"] .nav {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition:
      transform .40s cubic-bezier(.18, .78, .18, 1),
      opacity .28s ease !important;
    will-change: transform;
  }

  html body[data-ui="elo"].mobile-nav-hidden .nav {
    transform: translate3d(0, calc(100% + 28px + env(safe-area-inset-bottom)), 0) !important;
    opacity: 0;
    pointer-events: none;
  }
}

body[data-render-mode="efficient"][data-ui="elo"] .nav {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html body[data-ui="elo"] .nav { transition: none !important; }
}
/* -------------------------------------------------------------------------
 * 0.21.35 stable application header
 *
 * The title used to share a single flex row with the clock, three labelled
 * actions and a fixed-width connection badge.  At the app's 1320px maximum
 * width that tool row could consume most of the main column, so even the
 * short "Energia-központ" heading broke in half.  Keep the actions compact,
 * give server health its own row and stop the older tablet/mobile absolute
 * positioning rules from taking the badge out of the header flow.
 * ---------------------------------------------------------------------- */

html body[data-ui="elo"] .top {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  align-items: start;
  gap: 12px clamp(18px, 2.2vw, 32px);
}

html body[data-ui="elo"] .top > div:first-child {
  min-width: 0;
  align-self: center;
}

html body[data-ui="elo"] .top h1 {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

html body[data-ui="elo"] .top #headerText {
  max-width: 62ch;
  overflow-wrap: break-word;
  word-break: normal;
}

html body[data-ui="elo"] .top-tools {
  display: grid;
  grid-template-columns: auto repeat(3, max-content);
  align-items: center;
  justify-content: end;
  gap: 7px 9px !important;
  min-width: 0;
  max-width: 100%;
}

/* A jelenlétjelző csak felvett személynél kerül a fejlécbe. Ilyenkor öt
   művelet áll a négy sávban, és az utolsó — a Widgetek — külön sorba esett a
   többi alá. A sávszám a látható elemek számához igazodik. */
html body[data-ui="elo"] .top-tools:has(#presenceIndicator:not([hidden])) {
  grid-template-columns: auto repeat(4, max-content);
}

html body[data-ui="elo"] .top-tools :is(.display-button, .mobile-menu-button) {
  min-width: 44px;
  white-space: nowrap;
}

html body[data-ui="elo"] .top-tools #online {
  position: static !important;
  inset: auto !important;
  grid-column: 1 / -1;
  justify-self: end;
  width: min(100%, 19rem) !important;
  min-width: 0 !important;
  max-width: 19rem !important;
  padding: 3px 0 0;
}

html body[data-ui="elo"] .top-tools #online .connection-copy {
  min-width: 0;
  max-width: 100%;
}

html body[data-ui="elo"] .top-tools #online .connection-copy :is(b, small) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A tablet main column can be narrower than the tool group because the
 * persistent navigation still occupies its own column.  Stacking the two
 * header zones here keeps every action at least 44px without shrinking the
 * title or allowing the server state to overlap it. */
@media (min-width: 761px) and (max-width: 1020px) {
  html body[data-ui="elo"] .top {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  html body[data-ui="elo"] .top-tools {
    width: 100%;
    justify-content: start;
    grid-template-columns: repeat(3, max-content);
  }

  html body[data-ui="elo"] .top-tools #online {
    justify-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phone: title and controls never compete for horizontal space.  Labels are
 * already exposed through aria-label, so the four icon controls form a
 * predictable row and connection health remains readable directly below. */
@media (max-width: 760px) {
  html body[data-ui="elo"] .top {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding-bottom: 13px !important;
  }

  html body[data-ui="elo"] .top h1 {
    font-size: clamp(20px, 6.2vw, 27px);
  }

  html body[data-ui="elo"] .top-tools {
    width: 100%;
    /* A flexible fifth track lets the full-row connection state use the
     * complete header width even when a skin hides two optional actions. */
    grid-template-columns: repeat(4, 44px) minmax(0, 1fr);
    justify-content: start;
    gap: 7px !important;
  }

  html body[data-ui="elo"] .top-tools :is(
    #mobileMenuButton,
    #openSearch,
    #displaySettings,
    #layoutEdit
  ) {
    display: inline-grid;
    place-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
  }

  html body[data-ui="elo"] .top-tools #online {
    display: grid !important;
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 2px;
  }

  /* Before the first API response the bootstrap contains a plain text span;
   * the legacy mobile `.connection { font-size: 0 }` otherwise reduces it to
   * an unexplained red/green dot. `renderOnline()` later replaces this with
   * `.connection-copy`, which keeps its existing two-line styling. */
  html body[data-ui="elo"] .top-tools #online > span:not(.dot):not(.connection-copy) {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  html body[data-ui="elo"] .top-tools {
    grid-template-columns: repeat(4, 40px) minmax(0, 1fr);
  }

  html body[data-ui="elo"] .top-tools :is(
    #mobileMenuButton,
    #openSearch,
    #displaySettings,
    #layoutEdit
  ) {
    width: 100%;
    min-width: 40px;
  }
}
/* Élő otthon betűk: a három család latin és latin-ext variábilis részhalmaza,
 * saját kiszolgálásból (web/fonts/, OFL 1.1, lásd fonts/LICENSE.txt).
 * A CSP `font-src 'self' data:`-t enged, külső betűforrás nincs. */

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-display: swap;
  font-weight: 300 700;
  src: url("/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-display: swap;
  font-weight: 300 700;
  src: url("/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-display: swap;
  font-weight: 100 700;
  src: url("/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-display: swap;
  font-weight: 100 700;
  src: url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Élő otthon (elo): tokenek, témák, mozgás.
 *
 * Minden szabály a body[data-ui="elo"] alatt hat. A betűk OFL-licencűek, a saját
 * kiszolgálásból jönnek (web/fonts/, LICENSE.txt). A színek a semleges alapkészlet: a
 * megjelenések (Sziget, Pulzus) a saját `body[data-elo-look="X"]` szabályaikkal
 * átszínezik őket.
 *
 * Téma: az éjszakai készlet az alap. A feloldott téma a body[data-elo-resolved]
 * (day | night): kézi „day”/„night” választásnál az, „auto” esetén a valós napállás dönt
 * (nappal, ha a nap a -6° fölött van; 25_elo_08_sky.js, 25_elo_05_shell.js).
 */

body[data-ui="elo"] {
  --elo-ground: #0B0F14;
  --elo-s1: #121821;
  --elo-s2: #18202B;
  --elo-line: #243041;
  --elo-ink: #E8EEF5;
  --elo-mute: #93A1B2;
  --elo-water: #4CC9F0;
  --elo-energy: #F5B83D;
  --elo-secure: #A78BFA;
  --elo-plant: #6EE7A8;
  --elo-warn: #FF7A59;
  --elo-on-acc: #06121A;
  --elo-on-warn: #1A0A05;
  /* A betűméret-beállítás (Megjelenés → Betűméret) szorzója: a body[data-font]
   * adja a --ui-font-scale-t (0.92 / 1 / 1.18). Minden elo betűméret ezzel szorzódik. */
  --elo-font-scale: var(--ui-font-scale, 1);
  /* Az akcentus-erősség (homehub.eloAccent: Halk / Normál / Erős). */
  --elo-k: 1;
  --elo-font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --elo-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --elo-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* A mozgás két tokenje: --elo-run a végtelen (lélegző, pulzáló) animációkat,
   * --elo-motion a véges átmeneteket és a lap-felbukkanást kapcsolja. */
  --elo-run: running;
  --elo-motion: 1;
  /* A classic napszakos háttér (glass.css, body:not([data-theme="contrast"]))
   * nagyobb specificitású; az elo a saját talajszínét !important-tal adja. */
  background: var(--elo-ground) !important;
  color: var(--elo-ink);
  font: 400 calc(15px * var(--elo-font-scale))/1.45 var(--elo-font-body);
}

body[data-ui="elo"][data-elo-resolved="day"] {
  --elo-ground: #F3F6FA;
  --elo-s1: #FFFFFF;
  --elo-s2: #E8EEF5;
  --elo-line: #C9D3E0;
  --elo-ink: #0E1620;
  --elo-mute: #4A5A6E;
  --elo-water: #0A7AA6;
  --elo-energy: #9A6100;
  --elo-secure: #6D4BD1;
  --elo-plant: #1C7F52;
  --elo-warn: #C2410C;
  --elo-on-acc: #FFFFFF;
  --elo-on-warn: #FFFFFF;
}

/* A megtartott classic panelek (kézi vezérlés, szivattyú, Kert lap, Továbbiak lapok) a
 * `body[data-theme="time"]` szabályokból (index.html, glass.css) színeznek, a `--live-*` és a
 * `--card/--ink/--line/--muted` tokenekből, amelyeket a napszak ad (updateTimeTheme), nem az elo
 * téma. Ezért a kézi nappali elo téma éjjel sötét classic palettát kapott (FB-11, FB-18), a kézi
 * éjszakai (és az automatikus téma alkonyatkor) pedig nappal világos, áttetsző meleg-fehér lapokat
 * sötét lila szöveggel (kontraszt 2–3,5). A híd minden elo témára érvényes: a tokenek az elo
 * aktuális készletére mutatnak (--elo-*), amelyet a téma és a napszak már eldöntött. A
 * data-elo-theme az elo alatt mindig be van állítva (auto / day / night). Body-szintű deklaráció:
 * a :root inline értékeit a részfán !important nélkül felülírja. Tisztán szín. */
body[data-ui="elo"][data-elo-theme] {
  --live-ink: var(--elo-ink);
  --live-muted: var(--elo-mute);
  --live-glass: var(--elo-s1);
  --live-glass-line: var(--elo-line);
  --ink: var(--elo-ink);
  --muted: var(--elo-mute);
  --card: var(--elo-s1);
  --line: var(--elo-line);
  --glass-ink: var(--elo-ink);
  --glass-muted: var(--elo-mute);
  --skin-card-surface: var(--elo-s1);
  --skin-card-edge: var(--elo-line);
  --skin-surface-ink: var(--elo-ink);
  --skin-surface-muted: var(--elo-mute);
  --skin-surface-accent: var(--elo-water);
  --skin-focus: var(--elo-water);
  --live-solid: var(--elo-s1);
  --lg-card: var(--elo-s1);
  --lg-card-strong: var(--elo-s1);
  --lg-control: var(--elo-s2);
  --lg-edge: var(--elo-line);
  --lg-edge-soft: var(--elo-line);
  --lg-opaque: var(--elo-s1);
  --open-surface-fill: var(--elo-s1);
  --open-surface-edge: var(--elo-line);
}

/* Az öntözési panel (#beallitasok) akcentusa a classic Kert-lap szabályából jön
 * (78_irrigation_workspace.css, csak `data-page="irrigation"` alatt). A kezdőlapon a token nem
 * létezett, ezért a `color-mix(… var(--irrigation-accent) …)` keret és kitöltés érvénytelen lett:
 * az 5/10/15/30/45 perces gyorsgombok keret és kijelölés nélkül, szabad szövegként látszottak.
 * Body-szintű alapérték, ugyanazzal a képlettel: a Kert-lap elemszintű értéke továbbra is nyer. */
body[data-ui="elo"] {
  --irrigation-accent: color-mix(in srgb, var(--skin-focus, #168da1) 68%, #36b77c);
}

body[data-ui="elo"][data-elo-accent="low"] { --elo-k: 0.45; }
body[data-ui="elo"][data-elo-accent="high"] { --elo-k: 1.6; }

/* Kategória-szín: az eszközkártya és a panel ebből veszi az akcentusát. */
body[data-ui="elo"] .elo-a-kert { --elo-c: var(--elo-water); }
body[data-ui="elo"] .elo-a-energia { --elo-c: var(--elo-energy); }
body[data-ui="elo"] .elo-a-biz { --elo-c: var(--elo-secure); }
body[data-ui="elo"] .elo-a-otthon { --elo-c: var(--elo-plant); }
body[data-ui="elo"] .elo-a-szor,
body[data-ui="elo"] .elo-a-net { --elo-c: var(--elo-mute); }

/* Mozgás: egy helyen. A reduced-motion mindent kikapcsol; a hatékony
 * renderelési mód csak a végtelen, környezeti animációkat állítja le. */
body[data-ui="elo"][data-render-mode="efficient"] { --elo-run: paused; }

@media (prefers-reduced-motion: reduce) {
  body[data-ui="elo"]:not([data-elo-motion]) {
    --elo-run: paused;
    --elo-motion: 0;
  }
}

/* Élő otthon 2 · alap: a megjelenések (look) gyökere, a classic hordozó rejtése/megjelenítése,
 * a mozgás-módok és a közös üvegfény.
 *
 * Szabályok:
 * - minden szabály `body[data-ui="elo"]` alatt; a megjelenések saját szabályai a
 *   `body[data-elo-look="sziget" | "pulzus"]` alatt vannak (96_*, 97_* fájlok);
 * - mozgás csak transform/opacity (a közös fénysáv a kivétel: egyetlen regisztrált tulajdonság,
 *   `--elo-sweep`, a kártyák ::after rétegének háttérpozíciója, kis felület);
 * - iOS Safari a cél: fix háttérrögzítésre nem építünk.
 *
 * A body attribútumai (25_elo_05_shell.js, 25_elo_07_motion.js, 25_elo_08_sky.js):
 *   data-elo-look (sziget|pulzus), data-elo-current (otthon|eszkozok|energia|kert|biztonsag|tovabbiak),
 *   data-elo-hosted (on|off: classic hordozón élő oldal van-e), data-elo-resolved (day|night),
 *   data-elo-motion (full|calm|off), data-elo-paused (rejtett lap), data-elo-sky (napszak-fázis).
 */

/* Az ég tokenjei alapértékkel (a 25_elo_08_sky.js percenként felülírja a body-n). */
body[data-ui="elo"] {
  --elo-sun-elev: 30;
  --elo-sun-x: 50;
  --elo-sun-y: 40;
  --elo-moon-phase: 0.5;
  --elo-moon-lit: 1;
  --elo-moon-x: 50;
  --elo-moon-y: 60;
  --elo-sky-t: 0.5;
  --elo-sky-light: 1;
}

/* ---------------------------------------------------------- gyökér és hordozó */
body[data-ui="elo"] main {
  padding: 0;
  display: block;
}

body[data-ui="elo"] #eloRoot {
  position: relative;
  min-width: 0;
}

/* A look lapja (stage) látszik, a classic tartalom rejtett; classic hordozón élő oldalnál fordítva.
 * A vészzár-sáv (#emergencyLockBar) mindkét esetben látszik. */
body[data-ui="elo"][data-elo-hosted="off"] main > :not(#eloRoot):not(#emergencyLockBar) {
  display: none !important;
}

body[data-ui="elo"][data-elo-hosted="on"] #eloRoot [data-elo-stage] {
  display: none !important;
}

body[data-ui="elo"][data-elo-hosted="on"] main {
  padding: 0 16px calc(96px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------- mozgás-módok */
body[data-ui="elo"][data-elo-motion="calm"] {
  --elo-motion: 0.6;
  --elo-speed: 1.7;
}

body[data-ui="elo"][data-elo-motion="off"] {
  --elo-run: paused;
  --elo-motion: 0;
}

body[data-ui="elo"][data-elo-paused] {
  --elo-run: paused;
}

/* Biztosíték: Ki módban a look-ok semmilyen animációja nem fut, rejtett lapnál minden áll.
 * (A kezelőlap tartott gombjának töltősávja funkcionális visszajelzés, ezért nem a gyökéren belül van.) */
body[data-ui="elo"][data-elo-motion="off"] #eloRoot :is(*, *::before, *::after) {
  animation: none !important;
}

body[data-ui="elo"][data-elo-paused] #eloRoot :is(*, *::before, *::after) {
  animation-play-state: paused !important;
}

/* ---------------------------------------------------------- közös üvegfény */
/* Egyetlen fénysáv fut át minden `.elo-glass` kártyán (25_elo_09_glass.js). A body-n futó
 * `--elo-sweep` (0..1, a viewport szélességében) egyetlen animáció; a kártya ::after rétege a saját
 * viewport-helyéből (--elo-gx, --elo-gy) számolja a háttérpozíciót, így a fény a képernyőhöz kötött. */
@property --elo-sweep {
  syntax: "<number>";
  inherits: true;
  initial-value: -1;
}

@keyframes elo-sweep {
  0% { --elo-sweep: -0.1; }
  26% { --elo-sweep: 1.1; }
  100% { --elo-sweep: 1.1; }
}

body[data-ui="elo"]:not([data-elo-motion="off"]) {
  animation: elo-sweep var(--elo-sweep-period, 11s) linear infinite;
}

body[data-ui="elo"][data-elo-paused] {
  animation-play-state: paused;
}

body[data-ui="elo"] .elo-glass {
  position: relative;
  isolation: isolate;
}

body[data-ui="elo"] .elo-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    112deg,
    transparent 0,
    transparent 38%,
    rgb(var(--elo-sweep-rgb, 255 255 255) / calc(var(--elo-sweep-a, 0.14) * var(--elo-sweep-k, 1))) 50%,
    transparent 62%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: var(--elo-sweep-w, 46vw) 100vh;
  background-position:
    calc(var(--elo-sweep) * (100vw + var(--elo-sweep-w, 46vw)) - var(--elo-sweep-w, 46vw) - var(--elo-gx, 0px))
    calc(0px - var(--elo-gy, 0px));
}

body[data-ui="elo"][data-elo-motion="calm"] {
  --elo-sweep-k: 0.5;
}

body[data-ui="elo"][data-elo-motion="off"] .elo-glass::after {
  display: none;
}

/* ---------------------------------------------------------- stub (átmeneti) */
body[data-ui="elo"] .elo-stub-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--elo-line);
  border-radius: 12px;
  background: var(--elo-s1);
  color: var(--elo-ink);
  font: inherit;
  cursor: pointer;
}

body[data-ui="elo"] .elo-stub-btn[aria-current="page"] {
  border-color: var(--elo-water);
}

body[data-ui="elo"] .elo-stub-title {
  margin: 8px 0;
  font: 600 calc(22px * var(--elo-font-scale))/1.2 var(--elo-font-head);
}
/* Élő otthon 2 · közös felületek: a classic keret elrejtése, kis komponensek (pirula, info,
 * akkordeon), a kezelőlap (sheet), a háttér és a toast rétegei.
 *
 * Semleges és tokenvezérelt: minden szín az `--elo-*` tokenekből jön, amelyeket a
 * megjelenések (Sziget, Pulzus) a saját `body[data-elo-look="X"]` szabályaikkal átszínezhetnek.
 * A megjelenések saját szabályai a 96_* (Sziget) és 97_* (Pulzus) fájlokban vannak.
 * Minden érintési cél legalább 44 px.
 */

/* A classic és a next fejléce és oldalsó menüje elo alatt nem látszik. A
 * kijelző-gomb a héj felső sávjában marad, így a visszaút mindig nyitva van. */
body[data-ui="elo"] header.top,
body[data-ui="elo"] nav.nav,
body[data-ui="elo"] .app > aside,
body[data-ui="elo"] #mobileMenuButton,
body[data-ui="elo"] #mobileMenuPanel {
  display: none !important;
}

/* A classic `.app` két oszlopa (oldalsáv + tartalom) elo alatt nincs: az oldalsáv
 * rejtett, ezért a `main` egyetlen teljes szélességű oszlopba kerül. Az `index.html`
 * kritikus CSS-e `!important`-tal írja a 190 px-es oszlopot; ez a szabály annyi
 * `!important` és nagyobb specificitású (`body[data-ui="elo"]` + osztály). */
body[data-ui="elo"] .app {
  grid-template-columns: minmax(0, 100%) !important;
}

/* Az időjárás-égbolt (sun, felhők) a classic díszítés; elo alatt nincs helye. */
body[data-ui="elo"] .time-sky,
body[data-ui="elo"] .ambient-weather {
  display: none !important;
}

body[data-ui="elo"] .elo-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body[data-ui="elo"] :focus-visible {
  outline: 2px solid var(--elo-water);
  outline-offset: 2px;
}

body[data-ui="elo"] .elo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-ui="elo"] .elo-ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------- komponensek */
body[data-ui="elo"] .elo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--elo-tone, var(--elo-line));
  border-radius: 999px;
  font: 500 calc(12px * var(--elo-font-scale))/1 var(--elo-font-body);
  color: var(--elo-tone, var(--elo-mute));
  white-space: nowrap;
}

body[data-ui="elo"] .elo-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--elo-tone, currentColor);
  flex: none;
}

body[data-ui="elo"] [data-tone="ok"] { --elo-tone: var(--elo-plant); }
body[data-ui="elo"] [data-tone="conn"] { --elo-tone: var(--elo-water); }
body[data-ui="elo"] [data-tone="off"] { --elo-tone: var(--elo-warn); }
body[data-ui="elo"] [data-tone="wait"] { --elo-tone: var(--elo-energy); }
body[data-ui="elo"] [data-tone="mute"] { --elo-tone: var(--elo-mute); }

body[data-ui="elo"] .elo-breath {
  animation: elo-breathe 2.6s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-ui="elo"] .elo-pulse {
  animation: elo-pulse 1.4s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-ui="elo"] .elo-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid var(--elo-line);
  border-radius: 14px;
  background: var(--elo-s1);
  font-size: calc(13px * var(--elo-font-scale));
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-info-text {
  flex: 1 1 200px;
  min-width: 0;
}

body[data-ui="elo"] .elo-info-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--elo-line);
  border-radius: 14px;
  background: transparent;
  color: var(--elo-water);
  font: 600 calc(16px * var(--elo-font-scale))/1 var(--elo-font-head);
  cursor: pointer;
  flex: none;
}

body[data-ui="elo"] .elo-info-detail {
  flex-basis: 100%;
  margin-top: 4px;
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-info-detail[hidden] {
  display: none;
}

body[data-ui="elo"] .elo-acc {
  border-top: 1px solid var(--elo-line);
}

body[data-ui="elo"] .elo-acc summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  font: 600 calc(15px * var(--elo-font-scale))/1.3 var(--elo-font-head);
}

body[data-ui="elo"] .elo-acc summary::-webkit-details-marker {
  display: none;
}

body[data-ui="elo"] .elo-acc summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--elo-mute);
  border-bottom: 1.5px solid var(--elo-mute);
  transform: rotate(45deg);
  transition: transform calc(0.25s * var(--elo-motion)) ease;
  flex: none;
}

body[data-ui="elo"] .elo-acc[open] summary::after {
  transform: rotate(225deg);
}

body[data-ui="elo"] .elo-acc-body {
  padding: 0 0 14px;
  color: var(--elo-mute);
  font-size: calc(14px * var(--elo-font-scale));
}

/* ---------------------------------------------------------- alsó lap / panel */
body[data-ui="elo"] .elo-scrim {
  position: fixed;
  inset: 0;
  z-index: 6;
  background: var(--elo-scrim, rgba(4, 7, 10, 0.55));
}

body[data-ui="elo"] .elo-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  max-height: 82vh;
  overflow: auto;
  padding: 10px 18px calc(28px + env(safe-area-inset-bottom));
  background: var(--elo-sheet-bg, var(--elo-s2));
  border-top: 1px solid var(--elo-sheet-edge, var(--elo-line));
  border-radius: var(--elo-sheet-radius, 26px 26px 0 0);
  box-shadow: var(--elo-sheet-shadow, none);
  animation: elo-sheet-up calc(0.34s * var(--elo-motion)) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body[data-ui="elo"] .elo-sheet:focus {
  outline: none;
}

body[data-ui="elo"] .elo-grab {
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 9px;
  background: var(--elo-line);
}

body[data-ui="elo"] .elo-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

body[data-ui="elo"] .elo-sheet-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 600 calc(16px * var(--elo-font-scale))/1.3 var(--elo-font-head);
}

body[data-ui="elo"] .elo-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--elo-line);
  border-radius: 14px;
  background: transparent;
  color: var(--elo-mute);
  cursor: pointer;
  flex: none;
}

/* Tablet és asztal: oldalpanel jobb oldalon, az alsó lap helyett. */
@media (min-width: 640px) {
  body[data-ui="elo"] .elo-sheet {
    left: auto;
    top: 0;
    bottom: 0;
    width: min(440px, 100vw);
    max-height: none;
    padding: 24px 24px calc(32px + env(safe-area-inset-bottom));
    border-top: 0;
    border-left: 1px solid var(--elo-sheet-edge, var(--elo-line));
    border-radius: var(--elo-sheet-radius-wide, 0);
    animation-name: elo-panel-in;
  }

  body[data-ui="elo"] .elo-grab {
    display: none;
  }
}

@keyframes elo-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes elo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

@keyframes elo-sheet-up {
  from { transform: translateY(36px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes elo-panel-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* A nyitott lap és a háttere a telepítési sáv (#standaloneNudge, z-index 2400, fixed) fölött áll
 * (FB-26): 390 px-en a Továbbiak „Beállítások” és „Keresés” tételét a sáv takarta, nem volt
 * érinthető. A natív <dialog> elemek a top layerben maradnak e fölött is. */
body[data-ui="elo"] .elo-scrim {
  z-index: 2500;
}

body[data-ui="elo"] .elo-sheet {
  z-index: 2501;
}

/* RK-layout-theme-01: a hibaüzenet (toast) a kezelőlap és a scrim fölött marad. Ha a toast a lap
 * alá kerül, a „nem tudjuk, megkapta-e az eszköz” útmutatás láthatatlan. A toast pointer-events:
 * none, így a fölé emelés nem takar gombot és nem zárja ki a Leállítás sávot. */
body[data-ui="elo"] .toast {
  z-index: 2502;
  bottom: calc(84px + env(safe-area-inset-bottom));
}

/* Tableten és asztalon nincs alsó navigáció: a toast a classic helyén, alul marad. A telefonos
 * eltolás (a fenti szabály) a toastot az alsó navigáció fölé emeli, hogy ne fedje a füleket. */
@media (min-width: 640px) {
  body[data-ui="elo"] .toast {
    bottom: calc(22px + env(safe-area-inset-bottom));
  }
}

/* A skin-glifák (kártya, oldal, beállítás) a klasszikus panelfejekben elo alatt nem jelennek
 * meg: az Élő otthon saját jeleit használja, a beállítás-lapokon az aktív skin dobozai zavarnának
 * (RJ-web-skin-002). A klasszikus és a next felület glifáit ez a szabály nem érinti. */
body[data-ui="elo"] :is(.card-glyph, .skin-card-glyph, .skin-settings-glyph, .page-glyph) {
  display: none !important;
}
/* Az „Ugrás a tartalomra” ugrólink csak billentyűzetes fókusznál látszik (FB-21): egér- vagy
 * programozott fókusz után nem marad a fejléc fölött. A színe az elo tokenekből jön. */
body[data-ui="elo"] .skip-link:focus:not(:focus-visible) {
  transform: translateY(calc(-100% - 16px));
}

body[data-ui="elo"] #skipToContent.skip-link {
  border-color: var(--elo-water);
  background: var(--elo-s2);
  color: var(--elo-ink) !important;
}


/* A kezelőlap és a leállító sáv gombjai nem mozognak (a classic `button:hover` emelését kikapcsoljuk);
 * a kijelölést a keret és a szín adja. A nyomva tartás (.elo-hold) a saját kitöltését rajzolja. */
body[data-ui="elo"] :is(.elo-sheet, .elo-stopbar) :is(button, a):is(:hover, :active) {
  transform: none;
}


/* A súgókör telefonon (≤ 760 px) 44 px-es gomb, a látható gyűrűt a `::after` rajzolja; az
 * index.html egy szabálya azonban a nem nyitott súgógombok `::after`-ét elrejtette, így csak
 * egy magányos „i” betű látszott (a második szelektor az ő specificitását éri el). Elo alatt a
 * gyűrű 22 px-en mindig látszik (nyitva is: a buborék külön rétegben van,
 * 41_contextual_help.css); a találati felület 44 px marad. */
@media (max-width: 760px) {
  body[data-ui="elo"] .info-tip::after,
  body[data-ui="elo"] .info-tip:not(:focus-visible):not(.open)::after,
  body[data-ui="elo"] .info-tip:is(:hover, :focus, :focus-visible, .open)::after {
    display: block !important;
    position: absolute !important;
    inset: 11px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
}

/* UI-10 / V1-11: az összeállítás hibája a lap tetején, újrapróbálás gombbal (minden megjelenés). */
body[data-ui="elo"] .elo-load-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 8px 16px 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--elo-warn);
  color: var(--elo-ink);
  font: 500 calc(13px * var(--elo-font-scale)) / 1.35 var(--elo-font-body);
}

body[data-ui="elo"] .elo-load-notice p {
  margin: 0;
  min-width: 0;
}

body[data-ui="elo"] .elo-load-notice button {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--elo-line);
  background: transparent;
  color: var(--elo-ink);
  font: 600 calc(13px * var(--elo-font-scale)) / 1.2 var(--elo-font-body);
  cursor: pointer;
}
/* Élő otthon: mindig látható leállító sáv (Leállítás és Vészleállítás).
 *
 * Csak `body[data-ui="elo"]` alatt hat, ezért a classic és a next felület nem változik.
 * A sáv a `25_elo_15_stopbar.js` szerint akkor látszik, ha a szivattyú fut, az öntözés
 * aktív vagy egy szelep nyitva van. Telefonon az alsó navigáció fölött ragad, tableten
 * és asztalon a képernyő aljára. A színek és az eltolás (--elo-stop-*) csak tokenből
 * jönnek, így a megjelenések átszínezhetik; érintési cél legalább 44 px.
 *
 * Rétegsorrend: a sáv a nyitott kezelőlap (2501), a háttere (2500), a toast (2502), a
 * Megjelenés-dialógus (2550) és fátyla (2549) és a telepítési emlékeztető (2400) fölött áll
 * (2560), mert futás közben minden állapotban látható és érinthető kell legyen. Hogy semmit ne
 * takarjon, a kezelőlap, a toast és a tesztmód-jelzés a sáv fölé húzódik, amíg az látszik
 * (`--elo-stopbar-h`: a sáv mért magassága, 25_elo_15_stopbar.js).
 */
body[data-ui="elo"] .elo-stopbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 2560;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--elo-stop-bg, var(--elo-s2));
  border-top: 1px solid var(--elo-stop-edge, var(--elo-warn));
  border-bottom: 1px solid var(--elo-line);
  box-shadow: var(--elo-stop-shadow, 0 -6px 18px rgba(4, 7, 10, 0.28));
}

body[data-ui="elo"] .elo-stopbar[hidden] {
  display: none;
}

/* Nem teljes leállítás (25_elo_15_stopbar.js): a sáv vészszegélyt kap, és a szöveg vastagabb,
 * amíg a szerver biztonságosan igazolt állapotot nem mutat. Csak tokenből, minden megjelenésen. */
body[data-ui="elo"] .elo-stopbar[data-stop-failure="on"] {
  border-top: 3px solid var(--elo-warn);
  box-shadow: inset 0 0 0 2px var(--elo-warn), var(--elo-stop-shadow, 0 -6px 18px rgba(4, 7, 10, 0.28));
}

body[data-ui="elo"] .elo-stopbar[data-stop-failure="on"] .elo-stopbar-text {
  font-weight: 700;
}

body[data-ui="elo"] .elo-stopbar-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--elo-stop-ink, var(--elo-ink));
  font: 600 calc(13px * var(--elo-font-scale))/1.25 var(--elo-font-body);
  overflow-wrap: anywhere;
}

body[data-ui="elo"] .elo-stopbar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

body[data-ui="elo"] .elo-stopbar-actions button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font: 600 calc(14px * var(--elo-font-scale))/1 var(--elo-font-body);
  cursor: pointer;
}

body[data-ui="elo"] .elo-stopbar-stop {
  border: 1px solid var(--elo-ink);
  background: var(--elo-s1);
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-stopbar-emerg {
  border: 1px solid var(--elo-warn);
  background: var(--elo-warn);
  color: var(--elo-on-warn);
}

/* A sáv alatt a tartalom ne vesszen el: a lap alja a sáv magasságával lejjebb nyúlik. */
body[data-ui="elo"][data-elo-stopbar="on"] .app {
  padding-bottom: max(76px, calc(var(--elo-stopbar-h, 62px) + 14px));
}

/* Az „Nyisd meg appként” emlékeztető (z-index 2400, az alsó sáv fölött) eltakarná a
 * Vészleállítást: amíg a sáv látszik, az emlékeztető rejtett; utána visszatér. */
body[data-ui="elo"][data-elo-stopbar="on"] .standalone-nudge {
  display: none !important;
}

/* Telefonon a nyitott alsó lap a sáv fölött végződik (a sáv alatti navigációt a háttér fedi),
 * így a lap gombjai sem kerülnek a sáv alá. A toast és a tesztmód-jelzés is a sáv fölé kerül. */
body[data-ui="elo"][data-elo-stopbar="on"] .elo-sheet {
  bottom: calc(74px + var(--elo-stopbar-h, 62px) + env(safe-area-inset-bottom));
  max-height: calc(82vh - 74px - var(--elo-stopbar-h, 62px));
}

body[data-ui="elo"][data-elo-stopbar="on"] .toast {
  bottom: calc(84px + var(--elo-stopbar-h, 62px) + env(safe-area-inset-bottom));
}

body[data-ui="elo"][data-elo-stopbar="on"] .demo-mode-banner {
  bottom: calc(82px + var(--elo-stopbar-h, 62px) + env(safe-area-inset-bottom));
}

@media (max-width: 380px) {
  body[data-ui="elo"] .elo-stopbar {
    flex-wrap: wrap;
  }

  body[data-ui="elo"] .elo-stopbar-actions {
    flex: 1 1 100%;
  }

  body[data-ui="elo"] .elo-stopbar-actions button {
    flex: 1 1 0;
  }
}

/* Tablet: az alsó navigáció itt a lap tetején van, a sáv a képernyő aljára kerül. Az oldalpanel
 * (kezelőlap) a sáv fölött végződik. */
@media (min-width: 640px) {
  body[data-ui="elo"] .elo-stopbar {
    bottom: env(safe-area-inset-bottom);
  }

  body[data-ui="elo"][data-elo-stopbar="on"] .elo-sheet {
    bottom: calc(var(--elo-stopbar-h, 62px) + env(safe-area-inset-bottom));
    max-height: none;
  }

  body[data-ui="elo"][data-elo-stopbar="on"] .toast {
    bottom: calc(var(--elo-stopbar-h, 62px) + 12px + env(safe-area-inset-bottom));
  }

  body[data-ui="elo"][data-elo-stopbar="on"] .demo-mode-banner {
    bottom: calc(var(--elo-stopbar-h, 62px) + 8px + env(safe-area-inset-bottom));
  }
}

/* A megjelenés oldalsó sávot is tarthat: a --elo-stop-inset a sáv bal széle (alap 0). */
body[data-ui="elo"] .elo-stopbar {
  left: var(--elo-stop-inset, 0);
}

/* Modális dialógus alatt a sáv a dialógus gyermeke (25_elo_15_stopbar.js), hogy kattintható maradjon.
 * A dialógus háttér-elmosása (backdrop-filter) tárolót csinálna a rögzített sáv köré, ezért a sáv
 * idejére megszűnik. A dialógus a sáv fölött ér véget: a két inset a sáv helyét hagyja szabadon, a
 * dialógus a maradék térben középre kerül (Pulzusban a sáv felül van, a 97_pulzus_b_sheet.css szerint). */
body[data-ui="elo"] dialog[open]:has(> .elo-stopbar:not([hidden])) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  inset-block: 0 calc(var(--elo-stopbar-h, 62px) + 12px) !important;
  max-height: calc(100dvh - var(--elo-stopbar-h, 62px) - 24px) !important;
}

body[data-ui="elo"]:not([data-elo-look="pulzus"]) dialog[open] > .elo-stopbar {
  bottom: env(safe-area-inset-bottom);
}
/* Élő otthon · eszköz kezelőlap (sheet) tartalma és a közös mikro-vizualizációk.
 *
 * Semleges, tokenvezérelt stílus: a színek az `--elo-*` tokenekből jönnek, így a
 * megjelenések (Sziget, Pulzus) a saját `body[data-elo-look="X"]` szabályaikkal
 * átszínezhetik. A logika (nyomva tartás, kapu, Leállítás) nem itt van.
 */

/* ---------------------------------------------------------- mezők és csipek */
/* Közös keresőmező (`.elo-field`) és csip (`.elo-chip`) a megjelenéseknek. A classic űrlapszabályok
 * `!important`-tal festenek minden mezőt (index.html és 73_form_controls: fehér üveg + átmenet,
 * `body[data-theme="time"] :is(input, select)` élő üveg), ezért a mezők és a kezelőlap mezői az elo
 * tokenjeit kapják; a `:is()` az azonosító specifitását adja, így a classic `!important` sem írja
 * felül (FB-15). */
body[data-ui="elo"] .elo-field {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  font: 400 15px/1 var(--elo-font-body);
}

body[data-ui="elo"] :is(.elo-field, .elo-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .elo-sheet select, .elo-sheet textarea) {
  border: 1px solid var(--elo-line) !important;
  background: var(--elo-s1) !important;
  box-shadow: none !important;
  color: var(--elo-ink) !important;
}

body[data-ui="elo"] :is(.elo-field, .elo-sheet input, .elo-sheet textarea)::placeholder {
  color: var(--elo-mute);
  opacity: 1;
}

body[data-ui="elo"] .elo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-ui="elo"] .elo-chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--elo-line);
  border-radius: 999px;
  background: transparent;
  color: var(--elo-mute);
  font: 500 14px/1 var(--elo-font-body);
  cursor: pointer;
}

body[data-ui="elo"] .elo-chip.on {
  border-color: var(--elo-ink);
  background: var(--elo-ink);
  color: var(--elo-ground);
}

/* ---------------------------------------------------------- mikro-vizualizáció */
body[data-ui="elo"] .elo-dev-ring {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  /* A kategóriaszín (--elo-c) a kártyán van; a kezelőlapon nincs, ott a víz színe a tartalék,
   * különben az érvénytelen átmenet miatt a gyűrű íve eltűnt (csak egy fehér kör maradt). */
  background: conic-gradient(var(--elo-c, var(--elo-water)) var(--elo-pct, 0deg), var(--elo-line) 0);
}

body[data-ui="elo"] .elo-dev-ring > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--elo-s1);
  font: 500 12px/1 var(--elo-font-mono);
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-dev-spark {
  display: block;
  width: 100%;
  height: 36px;
  color: var(--elo-c, var(--elo-mute));
  overflow: visible;
}

body[data-ui="elo"] .elo-dev-spark.is-flat polyline {
  opacity: 0.45;
  stroke-dasharray: 4 4;
}

body[data-ui="elo"] .elo-dev-cam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  border: 1px dashed var(--elo-line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-rec {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--elo-warn);
  flex: none;
}

/* ---------------------------------------------------------- kezelőlap tartalma */
body[data-ui="elo"] .elo-dsheet {
  display: grid;
  gap: 12px;
  font-family: var(--elo-font-body);
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-dsheet-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-ui="elo"] .elo-dsheet-msg {
  min-height: 1.4em;
  margin: 0;
  font-size: 14px;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-dsheet-msg[data-tone="bad"] {
  color: var(--elo-warn);
}

body[data-ui="elo"] .elo-dsheet-big {
  font: 600 36px/1.05 var(--elo-font-head);
  letter-spacing: -0.02em;
}

body[data-ui="elo"] .elo-dsheet-sub,
body[data-ui="elo"] .elo-dsheet-list,
body[data-ui="elo"] .elo-dsheet-warn {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-dsheet-warn {
  color: var(--elo-energy);
  font-weight: 600;
}

body[data-ui="elo"] .elo-dsheet-list {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
}

body[data-ui="elo"] .elo-dsheet-label {
  font: 500 11px/1.2 var(--elo-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-dsheet-graph {
  min-height: 48px;
}

body[data-ui="elo"] .elo-dsheet-cam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  border: 1px dashed var(--elo-line);
  border-radius: 14px;
  color: var(--elo-mute);
}

/* Gombok: legalább 44 px érintési cél. */
body[data-ui="elo"] .elo-dsheet-btn,
body[data-ui="elo"] .elo-dsheet-stop,
body[data-ui="elo"] .elo-dsheet-emerg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  font: 600 15px/1 var(--elo-font-head);
  cursor: pointer;
}

body[data-ui="elo"] .elo-dsheet-btn {
  border: 1px solid var(--elo-line);
  background: var(--elo-s2);
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-dsheet-btn.is-danger {
  border-color: var(--elo-warn);
  color: var(--elo-warn);
}

body[data-ui="elo"] .elo-dsheet-stop {
  border: 1px solid var(--elo-water);
  background: transparent;
  color: var(--elo-water);
}

body[data-ui="elo"] .elo-dsheet-emerg {
  border: 0;
  background: var(--elo-warn);
  color: var(--elo-on-acc);
}

body[data-ui="elo"] .elo-dsheet-btn:disabled,
body[data-ui="elo"] .elo-dsheet-stop:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body[data-ui="elo"] .elo-dsheet-form {
  display: grid;
  gap: 8px;
  margin: 0;
}

body[data-ui="elo"] .elo-dsheet-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-dsheet-field input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--elo-line);
  border-radius: 12px;
  background: var(--elo-s1);
  color: var(--elo-ink);
  font: 500 15px/1 var(--elo-font-mono);
}

body[data-ui="elo"] .elo-dsheet-controls {
  display: grid;
  gap: 8px;
}

body[data-ui="elo"] .elo-dsheet-confirm {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--elo-warn);
  border-radius: 16px;
  background: var(--elo-s1);
}

body[data-ui="elo"] .elo-dsheet-confirm[hidden] {
  display: none;
}

body[data-ui="elo"] .elo-dsheet-confirm-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

body[data-ui="elo"] .elo-dsheet-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ---------------------------------------------------------- nyomva tartás */
body[data-ui="elo"] .elo-hold {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--elo-water);
  border-radius: 18px;
  background: transparent;
  color: var(--elo-ink);
  font: 600 16px/1.2 var(--elo-font-head);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body[data-ui="elo"] .elo-hold:disabled {
  border-color: var(--elo-line);
  color: var(--elo-mute);
  cursor: not-allowed;
}

body[data-ui="elo"] .elo-hold-fill {
  position: absolute;
  inset: 0;
  background: var(--elo-water);
  opacity: 0.3;
  transform: scaleX(0);
  transform-origin: left center;
}

body[data-ui="elo"] .elo-hold.is-holding .elo-hold-fill {
  animation: elo-hold-fill 2s linear forwards;
}

body[data-ui="elo"] .elo-hold-txt {
  position: relative;
}

@keyframes elo-hold-fill {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui="elo"] .elo-hold.is-holding .elo-hold-fill {
    animation: none;
    transform: scaleX(1);
    opacity: 0.2;
  }
}

/* ---------------------------------------------------------- szakaszok és beállítási út */
body[data-ui="elo"] .elo-dsheet-acc {
  border-top: 1px solid var(--elo-line);
}

body[data-ui="elo"] .elo-dsheet-acc summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  font: 600 15px/1 var(--elo-font-head);
}

body[data-ui="elo"] .elo-dsheet-acc summary::-webkit-details-marker {
  display: none;
}

body[data-ui="elo"] .elo-dsheet-acc-body {
  padding: 0 0 14px;
}

body[data-ui="elo"] .elo-dsheet-block {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--elo-line);
  border-radius: 16px;
  background: var(--elo-s1);
}

body[data-ui="elo"] .elo-dsheet-block h4 {
  margin: 0;
  font: 600 15px/1.2 var(--elo-font-head);
}

body[data-ui="elo"] .elo-setup {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-ui="elo"] .elo-setup-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}

body[data-ui="elo"] .elo-setup-item.is-active {
  border-color: var(--elo-water);
  background: var(--elo-s2);
}

body[data-ui="elo"] .elo-setup-item b,
body[data-ui="elo"] .elo-setup-item small {
  display: block;
}

body[data-ui="elo"] .elo-setup-item small {
  color: var(--elo-mute);
  font-size: 13px;
}

body[data-ui="elo"] .elo-setup-id {
  font: 600 15px/1.2 var(--elo-font-mono);
  color: var(--elo-mute);
}

/* Üres fejezet, csak olvasható állapot, kamera-hibaállapot, beállítási utak. */
body[data-ui="elo"] .elo-dev-noitems {
  display: grid;
  justify-items: start;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--elo-line);
  border-radius: 18px;
}

body[data-ui="elo"] .elo-dev-noitems h3 {
  margin: 0;
  font: 600 17px/1.3 var(--elo-font-head);
}

body[data-ui="elo"] .elo-dsheet-readonly,
body[data-ui="elo"] .elo-dsheet-alert {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--elo-line);
  border-radius: 14px;
  background: var(--elo-s1);
  font-size: 14px;
  line-height: 1.45;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-dsheet-alert {
  display: grid;
  gap: 6px;
  border-color: var(--elo-warn);
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-dsheet-cam.is-locked {
  color: var(--elo-warn);
}

body[data-ui="elo"] .elo-setup-steps {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--elo-mute);
}
/* Élő otthon 2 · kamera: az Otthon kártya és a kezelőlap képe (25_elo_21_camera_live.js).
 *
 * Az állandó kameraképet (`.elo-cam-tile`) a look jelölője (`.elo-cam-mount`) fogadja; a színeket a tokenek adják,
 * így a Sziget és a Pulzus is a saját palettájában látja. Az állapot (`data-cam-state`: live, connecting,
 * snapshot, unreachable, account, busy, error, idle) a jelvény szövegéből jön; ha nincs kép (`data-cam-pic="0"`),
 * az állapotot kimondó takaró fedi a képet, ha van régi kép, csak sáv jelzi. Mozgás: csak opacity. */
body[data-ui="elo"] .elo-cam-mount {
  display: grid;
  min-width: 0;
}

body[data-ui="elo"] .elo-cam-mount:empty {
  aspect-ratio: 16 / 9;
  place-items: center;
  border-radius: 14px;
  background: rgb(0 0 0 / 0.22);
}

body[data-ui="elo"] .elo-cam-mount:empty::before {
  content: "Kamerakép betöltése…";
  padding: 8px 12px;
  text-align: center;
  color: var(--elo-mute);
  font: 500 calc(13px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
}

body[data-ui="elo"] .elo-cam-tile {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

body[data-ui="elo"] .elo-cam-view {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #05080c;
  isolation: isolate;
}

body[data-ui="elo"] .elo-cam-view > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #05080c;
  -webkit-user-drag: none;
  user-select: none;
}

/* Kép nélkül a helyettesítő ikon nem látszik: az állapot-takaró saját ikonja és felirata beszél. */
body[data-ui="elo"] .elo-cam-tile[data-cam-pic="0"] .elo-cam-view > img {
  opacity: 0;
}

body[data-ui="elo"] .elo-cam-tile[data-cam-bad="1"][data-cam-pic="1"] .elo-cam-view > img {
  opacity: 0.6;
  filter: grayscale(0.7);
}

/* Jelvény: bal felső sarok, kis üvegcsík. */
body[data-ui="elo"] .elo-cam-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 16px);
  padding: 4px 9px;
  border-radius: 99px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgb(5 8 12 / 0.66);
  color: #f2f6fb;
  font: 700 calc(10.5px * var(--elo-font-scale)) / 1.2 var(--elo-font-body);
  letter-spacing: 0.06em;
  pointer-events: none;
}

body[data-ui="elo"] .elo-cam-badge::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #93a1b2;
}

body[data-ui="elo"] .elo-cam-tile[data-cam-state="live"] .elo-cam-badge::before {
  background: #ff5d5d;
}

body[data-ui="elo"] .elo-cam-tile[data-cam-state="connecting"] .elo-cam-badge::before {
  background: #f5b83d;
  animation: elo-cam-pulse 1.4s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-ui="elo"] .elo-cam-tile[data-cam-bad="1"] .elo-cam-badge::before {
  background: #ff7a59;
}

@keyframes elo-cam-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Állapot-takaró: kép nélkül a keret közepén, régi kép mellett alsó sávban. */
body[data-ui="elo"] .elo-cam-over {
  position: absolute;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #eef3f9;
  font: 600 calc(13.5px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
  text-align: center;
  pointer-events: none;
}

body[data-ui="elo"] .elo-cam-over b {
  font-weight: 600;
}

body[data-ui="elo"] .elo-cam-over span {
  color: rgb(238 243 249 / 0.72);
  font: 400 calc(12px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
}

body[data-ui="elo"] .elo-cam-over span:empty {
  display: none;
}

body[data-ui="elo"] .elo-cam-over .elo-glyph {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  opacity: 0.85;
}

body[data-ui="elo"] .elo-cam-tile:not([data-cam-state="live"])[data-cam-pic="0"] .elo-cam-over {
  display: flex;
  inset: 0;
  flex-direction: column;
  padding: 12px 14px;
}

body[data-ui="elo"] .elo-cam-tile:not([data-cam-state="live"])[data-cam-bad="1"][data-cam-pic="1"] .elo-cam-over {
  display: flex;
  inset: auto 0 0 0;
  padding: 24px 12px 9px;
  background: linear-gradient(to top, rgb(5 8 12 / 0.82), rgb(5 8 12 / 0));
}

body[data-ui="elo"] .elo-cam-tile[data-cam-pic="1"] .elo-cam-over .elo-glyph {
  display: none;
}

body[data-ui="elo"] .elo-cam-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-ui="elo"] .elo-cam-hit[hidden] {
  display: none;
}

body[data-ui="elo"] .elo-cam-hit:focus-visible {
  outline: 3px solid var(--elo-water);
  outline-offset: -3px;
}

body[data-ui="elo"] .elo-cam-tile figcaption {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body[data-ui="elo"] .elo-cam-tile figcaption b {
  font: 600 calc(13.5px * var(--elo-font-scale)) / 1.25 var(--elo-font-head);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-ui="elo"] .elo-cam-status {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--elo-mute);
  font: 400 calc(12px * var(--elo-font-scale)) / 1.35 var(--elo-font-body);
}

/* UI-11: a hibaállapot szövege teljes egészében látszik. A két soros vágás (768 px) a
   hibaüzenet teendő-részét levágta („Ellenőrizd a … jelszót.”), ezért itt nincs clamp. */
body[data-ui="elo"] .elo-cam-status.bad {
  color: var(--elo-warn);
  display: block;
  overflow: visible;
}

body[data-ui="elo"] .elo-cam-status:empty {
  display: none;
}

/* Több kamera / hiányzó lista. */
body[data-ui="elo"] .elo-cam-more,
body[data-ui="elo"] .elo-cam-off {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--elo-line);
  background: transparent;
  color: var(--elo-ink);
  font: 600 calc(13px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
  text-align: left;
  cursor: pointer;
}

body[data-ui="elo"] .elo-cam-off {
  display: grid;
  gap: 2px;
}

body[data-ui="elo"] .elo-cam-off span {
  color: var(--elo-warn);
  font-weight: 600;
}

body[data-ui="elo"] .elo-cam-off small {
  color: var(--elo-mute);
  font: 400 calc(12px * var(--elo-font-scale)) / 1.35 var(--elo-font-body);
}

/* A kezelőlapban: nagyobb, kerek keret nélkül a lap szélén. */
body[data-ui="elo"] .elo-sheet .elo-cam-mount-sheet {
  margin: 4px 0 10px;
}

body[data-ui="elo"] .elo-sheet .elo-cam-view {
  border-radius: 16px;
}

/* A kezelőlap címe már a kamera neve. */
body[data-ui="elo"] .elo-sheet .elo-cam-tile figcaption b {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui="elo"] .elo-cam-badge::before {
    animation: none;
  }
}
/* Élő otthon: a Beállítások nyolc szakasza (UI-5).
 *
 * Minden szabály `body[data-ui="elo"]` alatt áll, így a classic és a next felület
 * megjelenése nem változik. A mozgás a `--elo-motion` tokenen át kapcsol ki; a
 * mozgáscsökkentés egyetlen helyen, a tokenes fájlban van.
 *
 * A panelek áthelyezését a `hidden` attribútum nem követi: az áthelyezett panel
 * `hidden` jelölését itt felülírjuk, az eszközfüggő panelt pedig csak akkor
 * mutatjuk, ha a registry igazolta az eszközt (`data-settings-device-available`).
 */
body[data-ui="elo"] #settingsHub {
  display: none !important;
}

body[data-ui="elo"] .elo-set-root {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  padding-bottom: 36px;
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-set-root[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------ megjelenés */
body[data-ui="elo"] .elo-set-display {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--elo-line);
  border-radius: 18px;
  background: var(--elo-s1);
}

body[data-ui="elo"] .elo-set-display > h3 {
  margin: 0;
  font: 600 16px/1.25 var(--elo-font-head);
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-set-choice {
  display: grid;
  gap: 6px;
}

body[data-ui="elo"] .elo-set-choice > span {
  font-size: 13px;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-set-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-ui="elo"] .elo-set-chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--elo-line);
  background: var(--elo-s2);
  color: var(--elo-ink);
  font: 500 14px/1 var(--elo-font-body);
  cursor: pointer;
}

body[data-ui="elo"] .elo-set-chip[aria-pressed="true"] {
  border-color: var(--elo-water);
  color: var(--elo-water);
  box-shadow: inset 0 0 0 1px var(--elo-water);
}

body[data-ui="elo"] .elo-set-chip:focus-visible {
  outline: 2px solid var(--elo-water);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ szakaszok */
body[data-ui="elo"] .elo-set-list {
  display: grid;
  gap: 10px;
  align-items: start;
}

@media (min-width: 1100px) {
  body[data-ui="elo"] .elo-set-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-ui="elo"] .elo-set {
  border: 1px solid var(--elo-line);
  border-radius: 18px;
  background: var(--elo-s1);
  overflow: hidden;
}

body[data-ui="elo"] .elo-set-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

body[data-ui="elo"] .elo-set-head::-webkit-details-marker {
  display: none;
}

body[data-ui="elo"] .elo-set-head::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  margin-left: 2px;
  border-right: 1.5px solid var(--elo-mute);
  border-bottom: 1.5px solid var(--elo-mute);
  transform: rotate(45deg);
  transition: transform calc(0.25s * var(--elo-motion)) ease;
}

body[data-ui="elo"] .elo-set[open] > .elo-set-head::after {
  transform: rotate(225deg);
}

body[data-ui="elo"] .elo-set-head:focus-visible {
  outline: 2px solid var(--elo-water);
  outline-offset: -2px;
}

body[data-ui="elo"] .elo-set-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--elo-s2);
  color: var(--elo-water);
  flex: none;
}

body[data-ui="elo"] .elo-set-txt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-ui="elo"] .elo-set-txt > b {
  font: 600 16px/1.25 var(--elo-font-head);
  color: var(--elo-ink);
}

/* Az összegző egy sor: hosszú állapotnál a végén három pont. */
body[data-ui="elo"] .elo-set-txt > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.35;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-set-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--elo-line);
  border-radius: 999px;
  font: 500 12px/1 var(--elo-font-body);
  color: var(--elo-mute);
  white-space: nowrap;
  flex: none;
}

body[data-ui="elo"] .elo-set-badge[data-tone="wait"] {
  color: var(--elo-energy);
  border-color: var(--elo-energy);
}

body[data-ui="elo"] .elo-set-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 16px;
}

body[data-ui="elo"] .elo-set-note {
  margin: 0;
  font-size: 13px;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-set-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--elo-warn);
  border-radius: 14px;
  background: var(--elo-s2);
  font-size: 13px;
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-set-warn > .elo-ic {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--elo-warn);
}

body[data-ui="elo"] .elo-set-warn > span {
  flex: 1;
}

body[data-ui="elo"] .elo-set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-ui="elo"] .elo-set-row {
  display: grid;
  gap: 10px;
  justify-items: start;
}

body[data-ui="elo"] .elo-set-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--elo-line);
  background: var(--elo-s2);
  color: var(--elo-ink);
  font: 500 15px/1 var(--elo-font-body);
  cursor: pointer;
}

body[data-ui="elo"] .elo-set-btn.primary {
  background: var(--elo-water);
  border-color: var(--elo-water);
  color: var(--elo-on-acc);
}

body[data-ui="elo"] .elo-set-btn:focus-visible {
  outline: 2px solid var(--elo-water);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ hálózatok */
body[data-ui="elo"] .elo-net {
  display: grid;
  gap: 6px;
}

body[data-ui="elo"] .elo-net-h {
  margin: 8px 0 2px;
  font: 500 11px/1.2 var(--elo-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-net-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--elo-line);
  border-radius: 14px;
  background: var(--elo-s2);
}

body[data-ui="elo"] .elo-net-row > div {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-ui="elo"] .elo-net-row b {
  font: 600 14px/1.3 var(--elo-font-mono);
  color: var(--elo-ink);
  overflow-wrap: anywhere;
}

body[data-ui="elo"] .elo-net-row small {
  font-size: 13px;
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-net-row[data-tone="conn"] b {
  color: var(--elo-water);
}

body[data-ui="elo"] .elo-net-row[data-tone="off"] b {
  color: var(--elo-warn);
}

body[data-ui="elo"] .elo-net-warn {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--elo-warn);
  border-radius: 14px;
  font-size: 13px;
  color: var(--elo-ink);
}

body[data-ui="elo"] .elo-net-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font: 400 13px/1.4 var(--elo-font-mono);
  color: var(--elo-mute);
}

body[data-ui="elo"] .elo-net-list li {
  padding: 8px 12px;
  border: 1px dashed var(--elo-line);
  border-radius: 12px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ áthelyezett panelek */
body[data-ui="elo"] .elo-set-panel {
  margin: 0;
  scroll-margin-top: 16px;
  border: 1px solid var(--elo-line);
  border-radius: 16px;
  background: var(--elo-s2);
  box-shadow: none;
}

body[data-ui="elo"] .elo-set-panel[hidden] {
  display: block !important;
}

body[data-ui="elo"] .elo-set-panel[data-elo-device]:not([data-settings-device-available="true"]) {
  display: none !important;
}

/* A telepített (standalone) appban az app-telepítő panel rejtve marad: a classic
 * `body[data-display-mode="standalone"] .install-hint` szabály itt is érvényes, mert
 * a fenti `[hidden]` felülírás (0,3,1) nem győzheti le. */
body[data-ui="elo"][data-display-mode="standalone"] .elo-set-panel.install-hint {
  display: none !important;
}

/* Az eszközök elhelyezése (Otthon és személyek): a classic sor hat oszlopa (név + négy legalább
 * 8rem-es választó + gomb) kétoszlopos beállításlistában szélesebb volt a kártyánál; a
 * „Helyiség” választó félig levágva a jobb oszlop alá futott. Elo alatt a név saját sort kap, a
 * választók és a mentés annyi oszlopba törnek, amennyi kifér. */
body[data-ui="elo"] .elo-set-panel #householdDeviceList article.household-device {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  align-items: start;
}

body[data-ui="elo"] .elo-set-panel #householdDeviceList article.household-device > .household-device-name {
  grid-column: 1 / -1;
}

/* Hozzáférési munkamenetek: a félkövér név és az alatta lévő kliens-sor (b + small) egy inline
 * sorba futott, hézag nélkül; a szerepjelvény szó közben tört. */
body[data-ui="elo"] .elo-set-panel .access-item {
  gap: 10px;
}

body[data-ui="elo"] .elo-set-panel .access-item > div > :is(b, small) {
  display: block;
}

body[data-ui="elo"] .elo-set-panel .access-item > div > b + small {
  margin-top: 2px;
}

body[data-ui="elo"] .elo-set-panel .access-item .role-badge {
  flex: none;
  white-space: nowrap;
}

/* SolaX beállítás: a „Kapcsolattípus” és az „Adatfrissítés gyakorisága (mp)” címke inline elem
 * volt, a második a választó mellé csúszott, a mezője a sor végére. Elo alatt minden címke blokk,
 * a mező alatta teljes szélességben. */
body[data-ui="elo"] .elo-set-panel #solaxSetup > label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

body[data-ui="elo"] .elo-set-panel #solaxSetup > label > :is(select, input) {
  width: 100%;
  min-width: 0;
}

/* Értesítések: a classic két rögzített oszlop (220 px + 310 px) a kétoszlopos beállításlista
 * kártyájánál szélesebb volt, a „Tervezett öntözés előtt” és társai a kártya jobb szélén túlra
 * lógtak. Elo alatt az oszlopok annyian vannak, amennyi kifér, és összenyomhatók. */
body[data-ui="elo"] .elo-set-panel .notification-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Élő otthon: a classic hordozó (Kert, Továbbiak-lapok, Beállítások panelei,
 * párbeszédablakok) az elo tokenjeiből színez, mindkét elo témában.
 *
 * Miért kell: a classic felületek a `body[data-theme="time"]` (index.html, inline,
 * sok `!important`), a 91_surface_scroll_stability és a 95_open_surfaces
 * szabályaiból kapják a színüket, a `--live-*`, `--card/--ink/--line/--muted`,
 * `--glass-*`, `--skin-*` és `--lg-*` tokeneken át. Ezeket a tokeneket a napszak
 * (`body[data-period]`, a 10_dashboard_00_status.js inline `--live-ink`-je)
 * állítja, nem az elo téma: az éjszakai elo téma hajnalban sötét szöveget kapott
 * sötét kártyán, a nappali elo téma éjjel fehér szöveget világos lapon (FB-11,
 * FB-18). A 95_elo_00_tokens.css csak a kézzel választott nappali témára
 * hidalt át (17c15765); ez a fájl minden elo témára (automatikus, éjszakai,
 * nappali) ugyanarra az elo tokenre köti őket.
 *
 * Fajsúly: `html body[data-ui="elo"][data-theme]` (0,2,2) – a
 * `body[data-theme="time"][data-period="night"]` (0,2,1) és a
 * `body[data-ui="elo"][data-elo-theme="day"]` (0,2,1) blokk fölött; `!important`
 * nélkül, mert a tokeneket sehol nem írja felül `!important`.
 *
 * Az elo saját elemei (`.elo-*`) a saját fragmentumaikból színeznek; ez a fájl
 * nem nyúl hozzájuk. A leállító sáv és a vészleállítás látható marad: itt csak
 * szín változik, láthatóság, méret, sorrend és z-index nem.
 */

html body[data-ui="elo"][data-theme] {
  --live-ink: var(--elo-ink);
  --live-muted: var(--elo-mute);
  --live-glass: var(--elo-s1);
  --live-glass-line: var(--elo-line);
  --live-solid: var(--elo-s1);
  --ink: var(--elo-ink);
  --muted: var(--elo-mute);
  --card: var(--elo-s1);
  --line: var(--elo-line);
  --shadow: none;
  --glass-ink: var(--elo-ink);
  --glass-muted: var(--elo-mute);
  --glass-accent: var(--elo-water);
  --glass-surface: var(--elo-s1);
  --glass-strong: var(--elo-s1);
  --glass-edge: var(--elo-line);
  --glass-shadow: transparent;
  --lg-card: var(--elo-s1);
  --lg-card-strong: var(--elo-s1);
  --lg-control: var(--elo-s2);
  --lg-edge: var(--elo-line);
  --lg-edge-soft: var(--elo-line);
  --lg-opaque: var(--elo-s1);
  --skin-panel-surface: var(--elo-s1);
  --skin-card-surface: var(--elo-s2);
  --skin-surface-edge: var(--elo-line);
  --skin-card-edge: var(--elo-line);
  --skin-surface-sheen: transparent;
  --skin-card-sheen: transparent;
  --skin-surface-accent: var(--elo-water);
  --skin-surface-ink: var(--elo-ink);
  --skin-surface-muted: var(--elo-mute);
  --skin-focus: var(--elo-water);
  --skin-text-shadow: none;
  --panel-glow: transparent;
  --open-surface-fill: var(--elo-s1);
  --open-surface-edge: var(--elo-line);
  /* A classic kiemelőszín (gombok, csúszka, kijelölés) az elo vízszíne. */
  --green: var(--elo-water);
  --green-soft: color-mix(in srgb, var(--elo-water) 14%, transparent);
  --red: var(--elo-warn);
  /* A komponensek (integrációk, helyreállítás, automatika, varázsló) általános
   * tokenjei: elo alatt egyik sem volt definiálva, ezért a beégetett világos
   * tartalékszínek (`var(--panel, #fff)`, `var(--text, #102033)`) jelentek meg a
   * sötét kártyán is. */
  --panel: var(--elo-s2);
  --panel-solid: var(--elo-s1);
  --surface: var(--elo-s2);
  --text: var(--elo-ink);
  --border: var(--elo-line);
  --accent: var(--elo-water);
  --danger: var(--elo-warn);
  --good: var(--elo-plant);
  --ok: var(--elo-plant);
  --bad: var(--elo-warn);
  --amber: var(--elo-energy);
  --lg-green: var(--elo-plant);
  /* A Szerver lap (`--hs-*`, 87_host.css) és az ESP32-játszótér (`--ep-*`,
   * 86_sensor_playground.css) a `--next-*` tokenekből tölt; a next felület
   * kikerült, a tokenek az elo értékeire mutatnak. */
  --next-ink: var(--elo-ink);
  --next-muted: var(--elo-mute);
  --next-line: var(--elo-line);
  --next-line-strong: color-mix(in srgb, var(--elo-mute) 55%, var(--elo-line));
  --next-panel: var(--elo-s1);
  --next-panel-2: var(--elo-s2);
  --next-accent: var(--elo-water);
  --next-accent-soft: color-mix(in srgb, var(--elo-water) 16%, transparent);
  --next-accent-ink: var(--elo-ink);
  --next-warn: var(--elo-energy);
  --next-warn-soft: color-mix(in srgb, var(--elo-energy) 16%, transparent);
  --next-danger: var(--elo-warn);
  --next-danger-soft: color-mix(in srgb, var(--elo-warn) 16%, transparent);
}

/* A classic lapháttér-fátylak (index.html: `main` és `.app` áttetsző fehér
 * gradiense) az elo talajszínén szürkítettek: elo alatt átlátszók. */
html body[data-ui="elo"][data-theme] :is(.app, main) {
  background: transparent !important;
}

/* Panelek: az elo kártyája (s1, vonal, 18 px), fátyol, árnyék és üvegelmosás nélkül.
 * A 91_surface_scroll_stability (0,2,2) és az index.html (0,2,1) `!important`
 * szabályainál erősebb (0,3,3). */
html body[data-ui="elo"][data-theme] main .panel,
html body[data-ui="elo"][data-theme] dialog .panel {
  background: var(--elo-s1) !important;
  border: 1px solid var(--elo-line) !important;
  border-radius: 18px;
  color: var(--elo-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

/* A panelen belüli dobozok (időtartam, magyarázat, mérőcsempék, listaelemek):
 * az elo második felülete (s2). */
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(
  .duration-box,
  .consumption,
  .emergency-box,
  .update-safety,
  .energy-metric,
  .energy-chart,
  .solar-node,
  .solax-metrics > div,
  .solax-chart,
  .solax-details,
  .balance-grid > div,
  .device-status-metrics > span,
  .phase-grid > div,
  .schedule,
  .notification:not(.warn):not(.bad),
  .file-entry,
  .credential,
  .device-card,
  .topic-box,
  .camera-card,
  .camera-tile,
  .ha-entity,
  .local-appliance-card,
  .air-card,
  .automation-card,
  .script-card,
  .surplus-card,
  .guide-card,
  .access-item,
  .detail-data-grid > div,
  .detail-explanation,
  .weather-detail-metrics > div,
  .weather-timeline-item,
  .always-on > div,
  .sensor-metrics > div,
  .tapo-device,
  .favorite-chip,
  .helper-strip,
  .digest-section,
  .remote-history-item,
  .refrigerator-mode,
  .script-starters,
  .script-starter,
  .schedule-calendar,
  .irrigation-command-hero,
  .irrigation-command-deck,
  .irrigation-why-now,
  .irrigation-profile-deck,
  .head-row,
  .control-tile,
  .settings-card,
  .pump-duration-quick,
  .rule-core-settings,
  .custom-weather-editor,
  .native-push-setup,
  .access-request-panel,
  .access-role-help,
  .access-created-invite,
  .control-center-group
) {
  background: var(--elo-s2) !important;
  border-color: var(--elo-line) !important;
  color: var(--elo-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* A dobozokon belüli dobozok (például a „Miért (nem) locsol most” sorai a hero
 * felületén) az s1-et kapják, így a két szint elválik. */
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(.irrigation-why-now, .irrigation-command-deck, .duration-box, .detail-explanation) :is(
  dl > div,
  .duration-box,
  .irrigation-duration-presets button:not(.selected):not([aria-pressed="true"]),
  .recommendation-grid > div
) {
  background: var(--elo-s1) !important;
  border-color: var(--elo-line) !important;
}

/* Szövegszín: a címek és értékek az elo tintája, a magyarázó sorok a halk
 * tinta. A tokenek ezt nagyrészt már megadják; ez a fátyol nélküli,
 * egyértelmű végső réteg a classic beégetett színekkel szemben. */
html body[data-ui="elo"][data-theme] :is(main, dialog) .panel :is(h1, h2, h3, h4, b, strong, label, summary, legend, output, .value, dt, dd, th, td) {
  color: var(--elo-ink) !important;
  text-shadow: none !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) .panel :is(h1, h2, h3, h4) {
  font-family: var(--elo-font-head);
  letter-spacing: -0.01em;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) .panel :is(
  p,
  small,
  .muted,
  .panel-subtitle,
  .tapo-help,
  .range-ends,
  .recommendation-copy,
  .weather-meta,
  .energy-foot,
  .status:not(.ok):not(.bad):not(.warn),
  .hint,
  .display-hint
):not([class*="elo-"]) {
  color: var(--elo-mute) !important;
  text-shadow: none !important;
}

/* Állapotszavak: jelentéses szín, mindkét témában olvasható tokenből. A tinta
 * negyede a szöveg színéből jön, így a halványabb (s2) dobozon is eléri a 4,5:1-et. */
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(.status, .message, .tapo-result).ok { color: color-mix(in srgb, var(--elo-plant) 75%, var(--elo-ink)) !important; }
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(.status, .message, .tapo-result).warn { color: color-mix(in srgb, var(--elo-energy) 75%, var(--elo-ink)) !important; }
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(.status, .message, .tapo-result).bad { color: color-mix(in srgb, var(--elo-warn) 80%, var(--elo-ink)) !important; }

/* Gombok. A másodlagos gomb az elo `.elo-btn` mintája (s2, vonal, 14 px); az
 * elsődleges a vízszín, a veszélyes (Vészleállítás, törlés) a figyelmeztető szín.
 * A gombok mérete, helye és engedélyezettsége nem változik. */
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(.secondary, .smallbtn, .display-button, .text-button):not([class*="elo-"]) {
  background: var(--elo-s2) !important;
  border: 1px solid var(--elo-line) !important;
  color: var(--elo-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) .primary:not([class*="elo-"]) {
  background: var(--elo-water) !important;
  border: 1px solid var(--elo-water) !important;
  color: var(--elo-on-acc) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* A tömör figyelmeztető kitöltés csak a vészleállításé (`#emergency`) és a futó
 * öntözés leállító gombjáé (`.primary.stop`): ezeknek ki kell emelkedniük. A
 * rutinszerű veszélyes műveletek (Törlés, Újraindítás, Archívumok törlése) keretes
 * gombok figyelmeztető tintával, hogy a lap ne legyen riasztó, és a vészleállítás
 * ne keveredjen velük. Méret, hely és engedélyezettség nem változik. */
html body[data-ui="elo"][data-theme] :is(main, dialog) .danger:not([class*="elo-"]) {
  background: var(--elo-s2) !important;
  border: 1px solid color-mix(in srgb, var(--elo-warn) 70%, var(--elo-line)) !important;
  color: color-mix(in srgb, var(--elo-warn) 80%, var(--elo-ink)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) :is(#emergency, .primary.stop):not([class*="elo-"]) {
  background: var(--elo-warn) !important;
  border: 1px solid var(--elo-warn) !important;
  color: var(--elo-on-warn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* A Kézi vezérlés sima Leállítása legalább annyira látható, mint az Indítás:
 * teljes szélességű, erős keretes gomb (FB-11). */
html body[data-ui="elo"][data-theme] main #stop:not(.primary) {
  border: 2px solid var(--elo-ink) !important;
  background: var(--elo-s1) !important;
  color: var(--elo-ink) !important;
  font-weight: 700;
}

/* A classic elsődleges gomb fénycsíkja (`::before`, végtelen animáció) elo alatt nem kell. */
html body[data-ui="elo"] .primary::before {
  content: none !important;
  animation: none !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) :is(.primary, .secondary, .smallbtn):disabled:not([class*="elo-"]):not(.danger) {
  opacity: .55;
}

/* Kiválasztott szegmens és csempe (időtartam-előválasztó, beállítás-kategória,
 * szegmentált választó): vízszínű keret és halvány vízszínű kitöltés. */
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(
  .segmented button,
  .choice-grid button,
  .settings-categories button,
  .irrigation-duration-presets button
):not([class*="elo-"]) {
  border: 1px solid var(--elo-line) !important;
  color: var(--elo-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) :is(
  .segmented button,
  .choice-grid button,
  .settings-categories button,
  .irrigation-duration-presets button
):is(.selected, [aria-pressed="true"]):not([class*="elo-"]) {
  background: color-mix(in srgb, var(--elo-water) 18%, var(--elo-s1)) !important;
  border-color: var(--elo-water) !important;
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) :is(.segmented, .choice-grid, .settings-categories) button:is(.selected, [aria-pressed="true"]) small {
  color: var(--elo-mute) !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) .settings-categories button:not(.selected):not([aria-pressed="true"]):not([class*="elo-"]) {
  background: var(--elo-s2) !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) .segmented {
  background: var(--elo-s2) !important;
  border: 1px solid var(--elo-line) !important;
  box-shadow: none !important;
}

/* Űrlapmezők: az elo talajszíne a kártyán, vonal, olvasható helyőrző (FB-15).
 * A `.elo-field` az elo saját keresője: ugyanez a mező-készlet. */
html body[data-ui="elo"][data-theme] :is(main, dialog) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([class*="elo-"]),
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(select, textarea):not([class*="elo-"]),
html body[data-ui="elo"][data-theme] main input.elo-field {
  background: var(--elo-ground) !important;
  border: 1px solid var(--elo-line) !important;
  color: var(--elo-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

/* Egységes, érinthető mezőmagasság: a classic select 34 px volt az input 44 px-e mellett. */
html body[data-ui="elo"][data-theme] :is(main, dialog) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select
):not([class*="elo-"]) {
  min-height: 44px;
  border-radius: 12px;
}

/* WebKit a natív selectet 22–24 px-es kapszulaként rajzolja, a `min-height`-ot
 * figyelmen kívül hagyva: elo alatt saját megjelenés, a mezőkkel azonos magasság
 * és kerekítés, tokenszínű nyíl (két gradiens-háromszög, kép nélkül). A
 * többsoros lista (`multiple`, `size`) natív marad. */
html body[data-ui="elo"][data-theme] :is(main, dialog) select:not([multiple]):not([size]):not([class*="elo-"]) {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 8px 34px 8px 12px;
  border-radius: 12px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--elo-mute) 50%),
    linear-gradient(135deg, var(--elo-mute) 50%, transparent 50%) !important;
  background-position:
    right 18px center,
    right 13px center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  line-height: 1.25;
  text-overflow: ellipsis;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) :is(input, textarea)::placeholder {
  color: var(--elo-mute) !important;
  opacity: 1;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) fieldset {
  border: 1px solid var(--elo-line) !important;
  border-radius: 12px;
  background: transparent !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--elo-water);
}

/* Részletek-lenyitók és táblák a panelen. */
html body[data-ui="elo"][data-theme] :is(main, dialog) .panel :is(details, table) {
  border-color: var(--elo-line) !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) .panel :is(hr, .divider) {
  border-color: var(--elo-line) !important;
  background: var(--elo-line) !important;
}

/* A classic panelcímek arculat-jele elo alatt nem látszik (RJ-web-skin-002);
 * az elo saját ikonjai maradnak. */
html body[data-ui="elo"] :is(.card-glyph, .skin-card-glyph, .skin-settings-glyph, .page-glyph, .action-glyph) {
  display: none !important;
}

/* Az elo héj (25_elo_05_shell.js) egy régi megjegyzést szúr a Megjelenés-dialógusba
 * („az arculatok a Megszokott felületen érhetők el”): arculat és Megszokott felület
 * már nincs, ezért a szöveg nem jelenhet meg. */
html body[data-ui="elo"] #eloSkinNote {
  display: none !important;
}
/* Élő otthon: a classic hordozó lapjainak elrendezése (Kert, Vezérlőközpont,
 * Otthon · Home Assistant, Programok, Automatika, Összefoglaló, Eseménynapló,
 * Szerver, Jelenlét, Beállítások).
 *
 * A classic `.dashboard` rácsa (index.html: két, tartalomhoz igazított oszlop)
 * sorszinten igazítja a paneleket: 1280 px-en a Kert lapon a „Víz és terhelés”
 * a jobb oszlopban lebegett, alatta és mellette nagy üres sávval (FB-29), és a
 * Továbbiak-lapokon is ugyanez a szétesés látszott. Elo alatt minden nem-kezdőlap
 * egyoszlopos, automatikus sorokkal, egységes térközzel; a panelen belüli rácsok
 * (például a Kert „Kézi vezérlés | Szórófejek” párosa) maradnak.
 *
 * A kezdőlap (`data-page="dashboard"`) az elo története és a 95_elo_10_story.css
 * dolga; ez a fájl nem nyúl hozzá.
 */

html body[data-ui="elo"][data-theme]:not([data-page="dashboard"]) #attekintes.dashboard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  /* A tároló magasabb lehet a tartalmánál: a szabad hely ne ossza szét a sorokat. */
  align-content: start !important;
  gap: 16px !important;
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
}

html body[data-ui="elo"][data-theme]:not([data-page="dashboard"]) #attekintes.dashboard > * {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
}

/* A másik lap szakaszai rejtve maradnak akkor is, ha egy panelszabály `display`-t ad. */
html body[data-ui="elo"][data-theme]:not([data-page="dashboard"]) #attekintes.dashboard > [data-page-section][hidden] {
  display: none !important;
}

/* A panelek belső térköze telefonon kisebb, hogy a 320 px-es képernyőn is
 * elférjen egy kétoszlopos mezősor. */
html body[data-ui="elo"][data-theme] main .panel {
  padding: 18px;
}

@media (max-width: 420px) {
  html body[data-ui="elo"][data-theme] main .panel {
    padding: 14px;
  }
}

/* A hosszú szöveg (eszköznév, IP-cím, naplósor) tördel, nem tolja ki a lapot.
 * A szavak egészben maradnak, és csak akkor törnek (elválasztással), ha egy sorba
 * sem férnek: az `anywhere` a tartalom minimális szélességét is egy betűre
 * csökkentette, ezért a keskeny oszlopok szó közben törtek („Sikere s”,
 * „Automatizálá sok”, „Figyelmeztet és”). A kódszerű érték (cím, azonosító)
 * bárhol törhet. */
html body[data-ui="elo"][data-theme]:not([data-page="dashboard"]) #attekintes.dashboard :is(h2, h3, p, small, b, strong, span, label, td, li) {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

html body[data-ui="elo"][data-theme]:not([data-page="dashboard"]) #attekintes.dashboard code {
  overflow-wrap: anywhere;
}

html body[data-ui="elo"][data-theme] main :is(table) {
  max-width: 100%;
}
/* Élő otthon: a classic hordozó egyedi komponensei, amelyek beégetett színt
 * használtak a tokenek helyett (élő mérés: 0.25.0 és a demó, WebKit, 390/1280 px,
 * nappali és éjszakai elo téma; a kontraszt a ténylegesen festett háttéren számolva).
 *
 * - Naplószint-jelvény (Eseménynapló): a narancs/piros kitöltésen a classic
 *   `.panel span` halvány szövegszíne 1,4–2,0:1-et adott (UI-08 ugyanez volt).
 * - Infó-gomb („i”, FB-11 3. pont) és a buboréka.
 * - Öntözési központ fejléce: a kicsi felirat és a cím egy sorba csúszott.
 * - Szerver lap, Automatika és Helyreállítás jelvényei.
 */

/* Naplószint és -fajta jelvény: szöveg a saját tintával, a szín a keretben és
 * a halvány kitöltésben, mindkét témában ≥ 4,5:1. */
html body[data-ui="elo"][data-theme] main .log-meta :is(.log-kind, .log-level) {
  background: var(--elo-s2) !important;
  border: 1px solid var(--elo-line) !important;
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] main .log-warning .log-meta .log-level {
  background: color-mix(in srgb, var(--elo-energy) 18%, var(--elo-s1)) !important;
  border-color: var(--elo-energy) !important;
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] main .log-error .log-meta .log-level {
  background: color-mix(in srgb, var(--elo-warn) 18%, var(--elo-s1)) !important;
  border-color: var(--elo-warn) !important;
  color: var(--elo-ink) !important;
}

/* Infó-gomb és buborék: a gomb a szöveg mellett, a buborék a téma fordítottja.
 * A látható kör 24 px minden szélességen, így nem tolja szét a címkesort
 * („Növényigé ny”). Ujjal a láthatatlan `::after` gyűrű adja a 44 px-es
 * találati felületet (41_contextual_help.css: `pointer: coarse`); a
 * 60_accessibility_responsive.css 44 px-es dobozát és belső körét elo alatt ez
 * váltja ki. */
html body[data-ui="elo"][data-theme] :is(main, dialog) .info-tip {
  box-sizing: border-box;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--elo-water) 70%, var(--elo-ink)) !important;
}

html body[data-ui="elo"][data-theme] :is(main, dialog) .info-tip::after,
html body[data-ui="elo"][data-theme] :is(main, dialog) .info-tip:is(:hover, :focus, :focus-visible, .open)::after {
  inset: -10px !important;
  border: 0 !important;
  background: transparent !important;
}

/* A buborék a `body`-ra akasztott réteg (41_contextual_help.css); a gomb `::after`-e
 * csak a láthatatlan, nagyobb érintőfelület, ezért azt nem színezzük. */
html body[data-ui="elo"][data-theme] .info-tip-layer {
  border-color: var(--elo-line);
  background: var(--elo-ink);
  color: var(--elo-ground);
  font-family: var(--elo-font-body);
  box-shadow: 0 14px 40px rgba(4, 7, 10, .40);
}

html body[data-ui="elo"][data-theme] .info-tip-layer::after {
  background: var(--elo-ink);
  border-color: var(--elo-line);
}

/* Öntözési központ fejléce: a kicsi felirat a cím fölé kerül, nem tapad hozzá. */
html body[data-ui="elo"][data-theme] main .irrigation-command-hero :is(small, .irrigation-kicker, .eyebrow):first-child {
  display: block;
  margin-bottom: 2px;
}

html body[data-ui="elo"][data-theme] main .irrigation-command-hero::after {
  border-color: color-mix(in srgb, var(--elo-water) 22%, transparent);
  box-shadow: 0 0 0 26px color-mix(in srgb, var(--elo-water) 5%, transparent), 0 0 0 52px color-mix(in srgb, var(--elo-water) 3%, transparent);
}

/* Szerver lap: a szolgáltatás-jelvény és a figyelmeztető sor az elo tokenekből. */
html body[data-ui="elo"][data-theme] main .host-panel :is(.host-chip, .host-alert) {
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] main .host-panel .host-chip[data-state="down"] {
  border-color: var(--elo-warn) !important;
  background: color-mix(in srgb, var(--elo-warn) 14%, var(--elo-s1)) !important;
}

html body[data-ui="elo"][data-theme] main .host-panel .host-alert :is(span, b, small) {
  color: inherit !important;
}

/* Automatika: kiváltó-, jelenet- és futáskövetés-jelvények. */
html body[data-ui="elo"][data-theme] main :is(.automation-trigger-list, .scene-entity-chips, .run-trace-head) span {
  background: var(--elo-s2) !important;
  border-color: var(--elo-line) !important;
  color: var(--elo-ink) !important;
}

/* Helyreállítás és integrációk: tételek és ikonok az s2 felületen, olvasható tintával. */
html body[data-ui="elo"][data-theme] main :is(.recovery-item, .recovery-assurance, .integration-entry-card, .integration-catalog-card) {
  background: var(--elo-s2) !important;
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] main :is(.recovery-item, .recovery-assurance, .integration-entry-card, .integration-catalog-card) :is(small, p, span:not([class*="dot"])) {
  color: var(--elo-mute) !important;
}

html body[data-ui="elo"][data-theme] main :is(.recovery-item-main b, .integration-entry-card b, .integration-catalog-card b, .recovery-item-icon, .integration-card-head > span) {
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] main :is(.integration-summary > span, .integration-state-row > span) {
  background: var(--elo-s1) !important;
  border-color: var(--elo-line) !important;
  color: var(--elo-ink) !important;
}

/* Kártya-, kiépítés- és entitásjelvények: a szöveg az elo tintája, a jelvény saját
 * kitöltésén is olvasható. */
html body[data-ui="elo"][data-theme] main :is(.card-state, .provisioning-badge, .entity-badge) {
  color: var(--elo-ink) !important;
}

/* Kert → szórófejcsoport keskeny képernyőn: a Típus és a Fejenkénti szög teljes
 * sor, a Darab és az Egyedi l/p egymás mellett; 320 px-en a Típus-választó
 * korábban két betűre szűkült. */
@media (max-width: 420px) {
  html body[data-ui="elo"][data-theme] main #headGroups .head-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  html body[data-ui="elo"][data-theme] main #headGroups .head-row > :is(label:first-child, fieldset) {
    grid-column: 1 / -1;
  }
}

/* Kert → Kézi vezérlés: az Indítás és a Leállítás egyforma, teljes szélességű
 * gomb (tableten a Leállítás fél szélességű volt, mellette üres cellával). */
html body[data-ui="elo"][data-theme] main .control-actions > :is(#start, #stop) {
  grid-column: 1 / -1;
}

/* „Nyisd meg appként” emlékeztető: elo kártya és tömör elsődleges gomb a régi
 * kék–türkiz gradiens helyett. A láthatóságát és helyét nem érinti (a leállító
 * sáv alatt a 95_elo_15 rejti). */
html body[data-ui="elo"][data-theme] .standalone-nudge {
  border-color: var(--elo-line);
  background-color: var(--elo-s1);
  background-image: none;
  color: var(--elo-ink);
  box-shadow: 0 14px 36px rgba(4, 7, 10, .30);
}

html body[data-ui="elo"][data-theme] .standalone-nudge small {
  color: var(--elo-mute);
}

html body[data-ui="elo"][data-theme] .standalone-nudge > span {
  background: var(--elo-water);
  color: var(--elo-on-acc);
}

html body[data-ui="elo"][data-theme] .standalone-nudge .primary {
  border: 1px solid var(--elo-water) !important;
  background: var(--elo-water) !important;
  color: var(--elo-on-acc) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body[data-ui="elo"][data-theme] .standalone-nudge .standalone-dismiss {
  border: 1px solid var(--elo-line) !important;
  background: var(--elo-s2) !important;
  color: var(--elo-ink) !important;
  box-shadow: none !important;
}

/* Összefoglaló címikonja: az elo s2 felülete vízszínű jellel, a fehér fényfolt
 * nélkül (éjszaka 1,5:1 volt). */
html body[data-ui="elo"][data-theme] main .digest-title-icon {
  border-color: var(--elo-line) !important;
  background: var(--elo-s2) !important;
  color: var(--elo-water) !important;
  box-shadow: none !important;
}
/* Élő otthon: a Megjelenés-dialógus (FB-27).
 *
 * Az elo fejléc „Megjelenés” gombja a `#displayDialog`-ot nyitja. A dialógus a
 * 74_display_controls.css türkiz, áttetsző fehér üvegpalettáját használta
 * (`--display-*`), éjszakai elo témán is világos lapként jelent meg sötét
 * szegmensekkel. Itt ugyanazok a tokenek az elo értékeire mutatnak: a dialógus
 * az elo kártyája (s1), a szakaszok az s2 felület, a kijelölés a vízszín.
 * A tartalom (Téma, Akcentus, Elrendezés, Betűméret, Fényerő, Éjszakai
 * halványítás, Teljes képernyő) a 00_bootstrap.js-ben van; arculat- és
 * felületválasztó nincs.
 */

html body[data-ui="elo"][data-theme] .display-dialog[open] {
  --display-accent: var(--elo-water);
  --display-accent-ink: var(--elo-on-acc);
  --display-ink: var(--elo-ink);
  --display-muted: var(--elo-mute);
  --display-edge: var(--elo-line);
  --display-surface: var(--elo-s1);
  --display-section: var(--elo-s2);
  --display-control: var(--elo-s1);
  --display-track: var(--elo-line);
  --display-radius: 22px;
  --display-card-radius: 16px;
  font-family: var(--elo-font-body);
  box-shadow: 0 28px 80px rgba(4, 7, 10, .45) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] :is(h2, .display-section-heading > b, .display-section > b, .brightness-line b) {
  font-family: var(--elo-font-head);
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] :is(.display-section-heading small, .display-hint, .display-dialog-head p) {
  color: var(--elo-mute) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] .segmented {
  background: var(--elo-s1) !important;
  border: 1px solid var(--elo-line) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] .segmented button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] .segmented button:is(.selected, [aria-pressed="true"]) {
  background: color-mix(in srgb, var(--elo-water) 18%, var(--elo-s1)) !important;
  border-color: var(--elo-water) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] :is(#closeDisplay, .fullscreen-button) {
  background: var(--elo-s2) !important;
  border: 1px solid var(--elo-line) !important;
  color: var(--elo-ink) !important;
  box-shadow: none !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] :is(.brightness-line output, #nightDimState) {
  background: var(--elo-s1) !important;
  border: 1px solid var(--elo-line) !important;
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] .checkline {
  background: var(--elo-s1) !important;
  border-color: var(--elo-line) !important;
  color: var(--elo-ink) !important;
}

/* `background-color`, nem rövidítés: a select nyila (95_elo_60) háttérkép. */
html body[data-ui="elo"][data-theme] .display-dialog[open] :is(input[type="time"], select) {
  background-color: var(--elo-ground) !important;
  border: 1px solid var(--elo-line) !important;
  color: var(--elo-ink) !important;
}

html body[data-ui="elo"][data-theme] .display-dialog[open] input[type="range"] {
  accent-color: var(--elo-water);
}

/* Nem modális megnyitás (09_display_dialog.js): a dialógus és a fátyla a lap
 * fölött, de a mindig látható leállító sáv teteje fölött ér véget
 * (`--display-stopbar-reserve` = a sáv és az alatta lévő sávok mért magassága,
 * 0, ha nem fut öntözés). Így a Leállítás és a Vészleállítás látható és
 * megnyomható marad, a sáv z-indexétől függetlenül. */
html body[data-ui="elo"] .display-dialog[open][data-inline="true"] {
  position: fixed;
  inset: 12px 12px calc(var(--display-stopbar-reserve, 0px) + 12px);
  z-index: 2550;
  height: fit-content;
  max-height: calc(100dvh - 24px - var(--display-stopbar-reserve, 0px));
  margin: auto;
}

html body[data-ui="elo"] .display-scrim {
  position: fixed;
  inset: 0 0 var(--display-stopbar-reserve, 0px);
  z-index: 2549;
  background: rgba(5, 16, 28, .58);
}

html body[data-ui="elo"] .display-scrim[hidden] {
  display: none;
}
/* Élő otthon: a classic Öntözés oldal (pumpapanel és kézi vezérlés) elrendezése.
 *
 * A hosztolt „Öntözés · részletes beállítások” oldalon (Továbbiak) a classic `section.pump` és a
 * `#beallitasok` panel él; ez a fájl az elo tokenjeivel igazítja a fejléceket és a kézi időtartam
 * sorát. A natív lapok (Sziget, Pulzus) ezt nem használják.
 */

/* Az „ÉLŐ KERTVEZÉRLÉS” felirat és az „Öntözési központ” cím ≥ 431 px-en egy sorba futott,
 * hézag nélkül (a `small` inline, a h2 inline-flex). */
body[data-ui="elo"] #beallitasok .irrigation-hero-copy > small {
  display: block;
}

/* Indítás és Leállítás egymás mellett, egyforma szélességben; a Vészleállítás és a magyarázat
 * alattuk teljes sorban marad (inline `grid-column: 1 / -1`). A classic szabály az Indítást
 * teljes sorra feszítette, a Leállítás egyedül, fél szélességben maradt alatta, mellette üres
 * cellával. Csak elrendezés: a gombok sorrendje, láthatósága és tiltása nem változik. */
body[data-ui="elo"] #beallitasok .irrigation-command-deck .control-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-ui="elo"] #beallitasok .irrigation-command-deck .control-actions > #start {
  grid-column: auto;
}

/* Telefonon (≤ 420 px) a classic fejléc-szabály az állapotot és a jelzőpöttyöt 100 %-os
 * alapra nyújtotta: a 10 px-es kör 206–276 px széles narancs ellipszis lett. A cím csak a
 * saját szélességét kéri, így a súgógomb mellette marad; az állapot és a pötty egy sorban. */
body[data-ui="elo"] #attekintes section.pump > .panel-head > h2 {
  flex: 0 1 auto;
}

body[data-ui="elo"] #attekintes section.pump > .panel-head > .status {
  flex: 0 1 auto;
}

body[data-ui="elo"] #attekintes .panel-head > .card-state {
  flex: 0 0 auto;
  align-self: center;
}

/* Telefonon a pumpafejléc két sora: „Szivattyú (i)”, alatta „Nem igazolt ●”. A törést egy
 * 100 %-os, nulla magas álelem adja; az állapot és a pötty utána következik (order). */
@media (max-width: 420px) {
  body[data-ui="elo"] #attekintes section.pump > .panel-head {
    align-items: center;
    justify-content: flex-start;
    column-gap: 6px;
  }

  body[data-ui="elo"] #attekintes section.pump > .panel-head::after {
    content: "";
    order: 1;
    flex: 0 0 100%;
    height: 0;
  }

  body[data-ui="elo"] #attekintes section.pump > .panel-head > :is(.status, .card-state) {
    order: 2;
  }
}

/* A kézi időtartam sora: „Időtartam (i) ……… 10 perc”. A súgógomb a DOM-ban a sor után áll,
 * ezért külön sorba, a címke alá került. A sor elemei (display: contents) és a súgógomb egy
 * rács első sorába kerülnek; a csúszka, a végpontok és a gyorsgombok alattuk teljes sorban. */
body[data-ui="elo"] #beallitasok .duration-box {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 4px;
}

body[data-ui="elo"] #beallitasok .duration-box > .duration-line {
  display: contents;
}

body[data-ui="elo"] #beallitasok .duration-box > .duration-line > span {
  grid-row: 1;
  grid-column: 1;
}

body[data-ui="elo"] #beallitasok .duration-box > .info-tip {
  grid-row: 1;
  grid-column: 2;
}

body[data-ui="elo"] #beallitasok .duration-box > .duration-line > b {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
}

body[data-ui="elo"] #beallitasok .duration-box > :not(.duration-line):not(.info-tip) {
  grid-column: 1 / -1;
}

/* ==========================================================================
 * Megnyíló felületek
 *
 * Közös szerkezeti szerződés a kártyarészletekhez, szerkesztőkhöz és
 * lenyitható blokkokhoz. A skin csak a személyiséget adja; a fejléc,
 * görgethető munkaterület és műveletsor minden nézetben ugyanúgy működik.
 * ======================================================================== */

:root {
  --open-surface-radius: 24px;
  --open-surface-gap: 14px;
  --open-surface-pad: 18px;
  --open-surface-edge: var(--skin-card-edge, var(--lg-edge, var(--line)));
  --open-surface-fill: var(--skin-card-surface, var(--lg-card-strong, var(--card)));
  --open-surface-soft: color-mix(in srgb, var(--open-surface-fill) 72%, transparent);
}

body.card-detail-open { overflow: hidden; }

/* A részletes kártya nem egy hosszú, önmagát görgető doboz: a fejléc mindig
   látható, csak a teljes élő kártyát tartalmazó munkaterület mozog. */
html body[data-ui="elo"] .card-detail-dialog[open] {
  display: grid !important;
  place-items: center;
  overflow: hidden !important;
}

html body[data-ui="elo"] .card-detail-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  width: min(1040px, 100%);
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--open-surface-edge);
  border-radius: var(--open-surface-radius);
  background: var(--open-surface-fill);
  box-shadow: 0 28px 90px rgba(3, 18, 27, .34);
}

html body[data-ui="elo"] .card-detail-header {
  position: relative;
  z-index: 4;
  top: auto !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 !important;
  padding: 15px var(--open-surface-pad) 13px !important;
  border-bottom: 1px solid var(--open-surface-edge);
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--open-surface-fill) 92%, transparent);
  box-shadow: 0 8px 24px rgba(3, 18, 27, .07);
}

.card-detail-header > div { min-width: 0; }
.card-detail-header span {
  color: var(--skin-surface-accent, var(--green)) !important;
  font-size: .64rem !important;
  font-weight: 850;
  letter-spacing: .1em;
}
.card-detail-header h2 {
  max-width: 100%;
  margin: 3px 0 0 !important;
  overflow: hidden;
  color: var(--skin-surface-ink, var(--ink)) !important;
  font-size: clamp(1.05rem, 3vw, 1.35rem) !important;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-detail-close {
  min-width: 92px !important;
  min-height: 42px !important;
  margin: 0 !important;
}

html body[data-ui="elo"] .card-detail-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: var(--open-surface-pad);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

html body[data-ui="elo"] .card-detail-stage > .panel.card-detail-content {
  align-self: start;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: clamp(14px, 2vw, 20px) !important;
  overflow: visible;
  border-color: color-mix(in srgb, var(--open-surface-edge) 78%, transparent) !important;
  background: color-mix(in srgb, var(--open-surface-fill) 54%, transparent) !important;
  box-shadow: none !important;
}

/* Szerkesztők: fejléc és mentés fix, a középső munkaterület görgethető. */
html body[data-ui="elo"] .automation-dialog[open] {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  box-sizing: border-box;
  width: min(880px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(92dvh, 920px) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-ui="elo"] .automation-dialog > .panel-head {
  position: relative !important;
  top: auto !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px var(--open-surface-pad) 14px !important;
  border-bottom: 1px solid var(--open-surface-edge);
  background: color-mix(in srgb, var(--open-surface-fill) 92%, transparent) !important;
}

.automation-dialog > .panel-head > div { display: grid; gap: 2px; min-width: 0; }
.automation-dialog > .panel-head h2 { margin: 0; font-size: clamp(1.05rem, 3vw, 1.34rem); line-height: 1.12; }
.automation-dialog > .panel-head h2::before {
  display: block;
  margin-bottom: 3px;
  color: var(--skin-surface-accent, var(--green));
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#scriptEditor > .panel-head h2::before { content: "Folyamatépítő"; }
#stepPalette > .panel-head h2::before { content: "Művelettár"; }
#scheduleEditor > .panel-head h2::before { content: "Időzítés"; }
#helperEditor > .panel-head h2::before { content: "Belső érték"; }
#presenceEditor > .panel-head h2::before { content: "Jelenlétérzékelés"; }
#hookDialog > .panel-head h2::before { content: "Külső indítás"; }
#surplusEditor > .panel-head h2::before,
#surplusSettings > .panel-head h2::before { content: "Energiavezérlés"; }

.automation-dialog > .panel-head .muted { margin: 0; font-size: .78rem; line-height: 1.35; }
.automation-dialog > .panel-head > button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 13px;
  font-size: 1.25rem;
}

html body[data-ui="elo"] .automation-dialog .automation-dialog-stage {
  display: grid;
  align-content: start;
  gap: var(--open-surface-gap);
  min-width: 0;
  min-height: 0;
  max-height: none !important;
  padding: var(--open-surface-pad) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.automation-dialog > .tapo-result:empty { display: none; }
.automation-dialog > .tapo-result:not(:empty) {
  margin: 0 var(--open-surface-pad) 9px;
  padding: 9px 12px;
  border-radius: 11px;
}

html body[data-ui="elo"] .automation-dialog .dialog-actions {
  position: relative !important;
  bottom: auto !important;
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 9px;
  margin: 0 !important;
  padding: 12px var(--open-surface-pad) max(14px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--open-surface-edge);
  background: color-mix(in srgb, var(--open-surface-fill) 94%, transparent) !important;
}
.automation-dialog .dialog-actions > * { width: 100%; min-width: 0; margin: 0; }

/* Szerkesztőn belüli, egyértelműen számozott munkaszakaszok. */
.editor-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--open-surface-edge) 78%, transparent);
  border-radius: 17px;
  background: var(--open-surface-soft);
}

.editor-section-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.editor-section-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--skin-surface-accent, var(--green)) 42%, var(--open-surface-edge));
  border-radius: 11px;
  background: color-mix(in srgb, var(--skin-surface-accent, var(--green)) 13%, transparent);
  color: var(--skin-surface-accent, var(--green));
  font-size: .69rem;
  font-weight: 900;
}
.editor-section-heading > div { min-width: 0; }
.editor-section-heading h3 { margin: 0; color: var(--skin-surface-ink, var(--ink)); font-size: .94rem; line-height: 1.2; }
.editor-section-heading p { margin: 2px 0 0; color: var(--skin-surface-muted, var(--muted)); font-size: .73rem; line-height: 1.35; }
.editor-section-heading > .status { justify-self: end; }

.editor-toggle-list { display: grid; gap: 8px; }
.editor-toggle-list .checkline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--open-surface-edge) 72%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--open-surface-fill) 48%, transparent);
}
.editor-toggle-list .checkline > span { display: grid; gap: 2px; min-width: 0; }
.editor-toggle-list .checkline b { color: var(--skin-surface-ink, var(--ink)); font-size: .82rem; }
.editor-toggle-list .checkline small { color: var(--skin-surface-muted, var(--muted)); font-size: .72rem; line-height: 1.35; }
.editor-empty { margin: 0; padding: 16px; border: 1px dashed var(--open-surface-edge); border-radius: 13px; text-align: center; }
.editor-add-step { width: 100%; min-height: 44px; }

.editor-section .editor-head { align-items: end; margin: 0; }
.editor-section .editor-head > div { display: grid; gap: 2px; }
.editor-section .editor-head small { color: var(--skin-surface-muted, var(--muted)); font-size: .72rem; }
.editor-section .automation-preview {
  min-height: 50px;
  padding: 11px 12px;
  border: 1px dashed var(--open-surface-edge);
  border-radius: 13px;
  background: color-mix(in srgb, var(--open-surface-fill) 44%, transparent);
}

.step-row {
  position: relative;
  padding: 13px !important;
  border-left-width: 4px !important;
  background: color-mix(in srgb, var(--open-surface-fill) 54%, transparent) !important;
}
.step-row-tools .smallbtn { border-radius: 10px; }
.palette-group {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--open-surface-edge) 74%, transparent);
  border-radius: 16px;
  background: var(--open-surface-soft);
}

/* Közös lenyitható blokk. Csak az alkalmazás saját disclosure-osztályait
   célozzuk, így például egy böngészőbe ágyazott komponens nem változik meg. */
body[data-ui="elo"] :is(
  .solax-details, .refrigerator-details, .device-identity-details,
  .weather-script-editor,
  .access-request-panel, .script-more, .automation-run,
  .connection-trace details
) {
  box-sizing: border-box;
  min-width: 0;
  margin-top: 10px;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--open-surface-edge) 82%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--open-surface-fill) 48%, transparent);
}

body[data-ui="elo"] :is(
  .solax-details, .refrigerator-details, .device-identity-details,
  .weather-script-editor,
  .access-request-panel, .script-more, .automation-run,
  .connection-trace details
) > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 10px 10px 13px;
  color: var(--skin-surface-ink, var(--ink)) !important;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
body[data-ui="elo"] :is(.solax-details, .refrigerator-details, .device-identity-details, .weather-script-editor, .access-request-panel, .script-more, .automation-run, .connection-trace details) > summary::-webkit-details-marker { display: none; }
body[data-ui="elo"] :is(.solax-details, .refrigerator-details, .device-identity-details, .weather-script-editor, .access-request-panel, .script-more, .automation-run, .connection-trace details) > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--open-surface-edge);
  border-radius: 10px;
  color: var(--skin-surface-accent, var(--green));
  background: color-mix(in srgb, var(--open-surface-fill) 62%, transparent);
  font-size: 1rem;
  transition: transform .18s ease, background .18s ease;
}
body[data-ui="elo"] :is(.solax-details, .refrigerator-details, .device-identity-details, .weather-script-editor, .access-request-panel, .script-more, .automation-run, .connection-trace details)[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--open-surface-edge) 72%, transparent);
  background: color-mix(in srgb, var(--skin-surface-accent, var(--green)) 7%, transparent);
}
body[data-ui="elo"] :is(.solax-details, .refrigerator-details, .device-identity-details, .weather-script-editor, .access-request-panel, .script-more, .automation-run, .connection-trace details)[open] > summary::after { content: "−"; transform: rotate(180deg); }
body[data-ui="elo"] :is(.solax-details, .refrigerator-details, .device-identity-details, .weather-script-editor, .access-request-panel, .script-more, .automation-run, .connection-trace details) > :not(summary) { margin-inline: 12px; }
body[data-ui="elo"] :is(.solax-details, .refrigerator-details, .device-identity-details, .weather-script-editor, .access-request-panel, .script-more, .automation-run, .connection-trace details) > :last-child { margin-bottom: 12px; }

/* A kompakt előlap egyértelmű megnyitási affordance-t kap. */
.mobile-card-turn {
  width: auto !important;
  min-width: 28px;
  height: 28px !important;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--skin-card-edge, var(--line)) 76%, transparent);
  background: color-mix(in srgb, var(--skin-card-surface, var(--card)) 54%, transparent);
}
.mobile-card-turn { font-size: .78rem !important; }
.mobile-card-open:hover .mobile-card-turn { color: var(--skin-surface-accent, var(--green)) !important; transform: translate(1px, -1px); }

.panel-head > .card-detail {
  display: grid;
  place-items: center;
  /* 42 px volt; a vállalás 44. Egy négyzetes ikongomb, tehát mindkét
     irányban nőnie kell, különben csak a magasság stimmelne. */
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px !important;
  padding: 0 !important;
  font-size: .86rem;
  line-height: 1;
}

@media (min-width: 761px) {
  .mobile-card-turn { padding-inline: 8px; }
}

@media (max-width: 620px) {
  :root { --open-surface-radius: 19px; --open-surface-gap: 10px; --open-surface-pad: 12px; }
  html body[data-ui="elo"] .automation-dialog[open] {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  .automation-dialog > .panel-head h2 { font-size: 1.08rem; }
  .automation-dialog > .panel-head .muted { font-size: .72rem; }
  html body[data-ui="elo"] .automation-dialog .dialog-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-section { gap: 10px; padding: 11px; border-radius: 14px; }
  .editor-section-heading { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .editor-section-heading > span { width: 30px; height: 30px; border-radius: 9px; }
  .editor-section-heading > .status { grid-column: 1 / -1; justify-self: stretch; width: fit-content; }
  .editor-grid, .step-fields, .condition-fields, .trigger-fields { grid-template-columns: 1fr !important; }
  html body[data-ui="elo"] .card-detail-stage { padding: 10px; }
  html body[data-ui="elo"] .card-detail-stage > .panel.card-detail-content { padding: 12px !important; }
  .card-detail-close { min-width: 78px !important; }
}

@media (max-width: 360px) {
  html body[data-ui="elo"] .automation-dialog .dialog-actions { grid-template-columns: minmax(0, 1fr); }
  .card-detail-header { gap: 8px; }
  .card-detail-header h2 { font-size: .98rem !important; }
  .card-detail-close { min-width: 70px !important; padding-inline: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-card-turn,
  body[data-ui="elo"] details > summary::after { transition: none !important; }
}
/* ==========================================================================
 * Dashboard kamera — maga a widget az élőkép
 *
 * Egyetlen stream marad a DOM-ban. A fejléc, az állapot és a vezérlők a kép
 * fölötti, kontrasztos overlayek; így telefonon sem cseréljük adatcsempére.
 * ======================================================================== */

#dashboardCamera > .panel-head > div { min-width: 0; }
#dashboardCamera > .panel-head :is(h2, .panel-subtitle) {
  max-width: 100%;
  overflow: hidden;
  color: #fff !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .66);
}
#dashboardCamera > .panel-head h2 { margin: 0; font-size: clamp(.95rem, 2vw, 1.2rem); }
#dashboardCamera > .panel-head .panel-subtitle { margin-top: 3px; color: rgba(255, 255, 255, .76) !important; font-size: .7rem; }
#dashboardCamera > .panel-head .camera-switch { position: relative; z-index: 1; pointer-events: auto; }
#dashboardCamera > .panel-head .camera-switch .smallbtn {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  background: rgba(3, 14, 20, .46) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22) !important;
}
#dashboardCamera > .panel-head .camera-switch .smallbtn:disabled { opacity: .42; }

#dashboardCameraTiles .dashboard-camera-tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 210px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #07141b;
}

#dashboardCameraTiles .camera-preview.dashboard-camera-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #07141b !important;
  cursor: zoom-in;
}

#dashboardCameraTiles .dashboard-camera-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  background: #07141b;
  transition: opacity .2s ease, transform .28s ease;
}
#dashboardCameraTiles .dashboard-camera-preview:hover > img { transform: scale(1.012); }
#dashboardCameraTiles .camera-error .dashboard-camera-preview > img { opacity: .72; }

#dashboardCameraTiles .dashboard-camera-tile figcaption {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 40px 14px 13px;
  background: linear-gradient(0deg, rgba(2, 10, 15, .88), rgba(2, 10, 15, .44) 58%, transparent);
  color: #fff;
  pointer-events: none;
}
#dashboardCameraTiles .dashboard-camera-tile figcaption b,
#dashboardCameraTiles .dashboard-camera-tile figcaption small {
  max-width: calc(100% - 100px);
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .72);
}
#dashboardCameraTiles .dashboard-camera-tile figcaption b { font-size: .78rem; }
#dashboardCameraTiles .dashboard-camera-tile figcaption small { color: rgba(255, 255, 255, .72) !important; font-size: .63rem; }

#dashboardCameraTiles .camera-live {
  position: absolute;
  z-index: 5;
  top: 66px;
  left: 14px;
  right: auto;
  max-width: calc(100% - 28px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(3, 14, 20, .62);
  color: #fff !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
}

#dashboardCameraTiles .camera-tile-switch {
  z-index: 6;
  right: 12px;
  bottom: 12px;
}
#dashboardCameraTiles .camera-tile-switch .smallbtn {
  border-color: rgba(255, 255, 255, .30) !important;
  background: rgba(3, 14, 20, .58) !important;
  color: #fff !important;
}

#dashboardCameraTiles > .empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: inherit;
  margin: 0;
  padding: 88px 24px 24px;
  color: rgba(255, 255, 255, .78) !important;
  text-align: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(75, 166, 190, .20), transparent 34%),
    linear-gradient(145deg, #0b2029, #07141b);
}
#dashboardCameraTiles > .empty::before {
  content: "◉";
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  color: #8ce1f0;
  font-size: 1.55rem;
}

@media (max-width: 760px) {
  #dashboardCamera > .panel-head { padding: 11px 11px 34px !important; }
  #dashboardCamera > .panel-head h2 { font-size: .9rem; }
  #dashboardCamera > .panel-head .camera-switch { grid-template-columns: 42px 42px auto; }
  #dashboardCamera > .panel-head .camera-switch .smallbtn { min-width: 42px; min-height: 42px; padding-inline: 8px; }
  #dashboardCameraTiles .camera-live { top: 60px; left: 11px; }
  #dashboardCameraTiles .dashboard-camera-tile figcaption { padding-inline: 11px; }
}

@media (max-width: 380px) {
  #dashboardCamera > .panel-head .camera-switch #cameraExpand {
    width: 42px;
    overflow: hidden;
    color: transparent !important;
  }
  #dashboardCamera > .panel-head .camera-switch #cameraExpand::after {
    content: "⛶";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dashboardCameraTiles .dashboard-camera-preview > img { transition: none; }
}
.household-panel {
  container-type: inline-size;
}

.household-home-switch {
  display: grid;
  grid-template-columns: auto minmax(12rem, 22rem);
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-block: .75rem 1rem;
  font-weight: 750;
}

.household-summary,
.household-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .85rem;
}

.household-summary > section,
.household-editor > section,
.household-device-assignments,
.household-permissions {
  min-width: 0;
  padding: clamp(.8rem, 2cqi, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--text, #173042) 20%, transparent);
  border-radius: calc(var(--radius, 18px) * .8);
  background: color-mix(in srgb, var(--card, #fff) 58%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, #fff 42%, transparent);
}

.household-summary h3,
.household-editor h3,
.household-permissions h3 {
  margin: 0 0 .65rem;
}

.household-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-width: 0;
  padding: .65rem .7rem;
  margin-block: .45rem;
  border: 1px solid color-mix(in srgb, var(--text, #173042) 14%, transparent);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--card, #fff) 34%, transparent);
}

.household-record > div {
  display: grid;
  min-width: 0;
}

.household-record b,
.household-record small {
  overflow-wrap: anywhere;
}

.household-record small {
  color: var(--muted, #61717d);
}

.household-editor {
  margin-block: 1rem;
}

.household-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .55rem;
  align-items: stretch;
  margin-block: .55rem;
}

.household-inline > input,
.household-inline > select,
.household-inline > button {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
}

#zoneRooms {
  min-height: 4.75rem;
}

.household-permissions {
  display: grid;
  gap: .85rem;
}

.household-device-assignments {
  margin-block: 1rem;
}

.household-device-list {
  display: grid;
  gap: .65rem;
}

/* A nem csatlakoztatott eszközök összecsukott szakasza (UI-09): a fejléc érintésre elég nagy. */
.household-device-more {
  margin-top: .65rem;
}

.household-device-more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.household-device-more > .household-device {
  margin-top: .65rem;
}

.household-device {
  display: grid;
  grid-template-columns: minmax(10rem, 1.25fr) repeat(4, minmax(8rem, 1fr)) auto;
  gap: .55rem;
  align-items: end;
  min-width: 0;
  padding: .7rem;
  border: 1px solid color-mix(in srgb, var(--text, #173042) 16%, transparent);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--card, #fff) 32%, transparent);
}

.household-device > label,
.household-device-name {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.household-device select {
  width: 100%;
  min-width: 0;
}

.household-device-name b,
.household-device-name small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.household-device-name small {
  color: var(--muted, #61717d);
}

.household-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .45rem;
  margin-top: .45rem;
}

.household-check-grid label {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .55rem .65rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--accent, #2aa7a1) 9%, transparent);
  color: var(--text, #173042);
}

@media (max-width: 640px) {
  .household-home-switch {
    grid-template-columns: 1fr;
  }

  .household-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .household-record {
    align-items: flex-start;
    padding: .55rem;
  }

  .household-inline,
  .household-check-grid,
  .household-device {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .household-device {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 400px) {
  .household-summary {
    grid-template-columns: 1fr;
  }

  .household-device {
    grid-template-columns: minmax(0, 1fr);
  }

  .household-device select {
    min-width: 7.5rem;
  }
}
/* Élő otthon 2 · Sziget A: az Otthon lap kamera-kártyája (üveglap, a közös fénysávval).
 *
 * A kameraképet a közös, állandó elem adja (95_elo_26_camera.css); itt csak a kártya helye a 12 oszlopos rácsban
 * és a Sziget-színezés van. Telefonon a kártya a „Most” kártya után jön (order), tableten és gépen teljes szélességű
 * sor: a kép bal oldalt, mellette a kamera neve és állapota; gépen a rács végén (order), hogy a többi kártya
 * kiosztása ne változzon.
 */
body[data-elo-look="sziget"] .sza-cam {
  --p: 12;
}

body[data-elo-look="sziget"] .sza-cam .elo-cam-view {
  border: 1px solid var(--sza-card-edge);
  border-radius: 16px;
  box-shadow: 0 10px 22px -16px rgb(var(--sza-sh) / 0.9);
}

body[data-elo-look="sziget"] .sza-cam .elo-cam-tile figcaption b {
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-cam .elo-cam-status {
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-cam .elo-cam-status.bad {
  color: var(--elo-warn);
}

body[data-elo-look="sziget"] .sza-cam .elo-cam-more,
body[data-elo-look="sziget"] .sza-cam .elo-cam-off {
  border-color: var(--sza-card-edge);
  color: var(--sza-ink);
}

@media (max-width: 599px) {
  body[data-elo-look="sziget"] .sza-has-cam .sza-hero {
    order: -2;
  }

  body[data-elo-look="sziget"] .sza-has-cam .sza-cam {
    order: -1;
  }
}

@media (min-width: 600px) {
  body[data-elo-look="sziget"] .sza-cam .elo-cam-tile {
    grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
    align-items: end;
    column-gap: 18px;
  }

  body[data-elo-look="sziget"] .sza-cam .elo-cam-tile figcaption {
    padding-bottom: 6px;
  }

  body[data-elo-look="sziget"] .sza-cam .elo-cam-status {
    font-size: calc(13px * var(--elo-font-scale));
  }
}

@media (min-width: 1200px) {
  body[data-elo-look="sziget"] .sza-has-cam .sza-cam {
    order: 1;
    align-self: start;
  }

  body[data-elo-look="sziget"] .sza-cam .elo-cam-tile {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  }
}
/* Élő otthon 2 · Sziget A (2/5): nyilak, műholdak és a dokk alapszabályai.
 *
 * A fájl a `96_sziget_a_frame.css` ELŐTT töltődik (névsor), mert a tablet/gép felülírásokat a
 * frame fájl média-lekérdezései adják; ezért itt csak az alap (telefon) szabályok vannak.
 */
/* ---------------------------------------------------------------- nyilak (gép) */
body[data-elo-look="sziget"] .sza-arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 7;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sza-edge);
  background: var(--sza-glass);
  color: var(--sza-ink);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.4s var(--sza-spring), opacity 0.3s;
}

body[data-elo-look="sziget"] .sza-arrow svg {
  width: 22px;
  height: 22px;
}

body[data-elo-look="sziget"] .sza-arrow:hover:not(:disabled) {
  transform: scale(1.1);
}

body[data-elo-look="sziget"] .sza-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------------------------------------------------------------- műholdak */
body[data-elo-look="sziget"] .sza-sats {
  display: none;
}

body[data-elo-look="sziget"] .sza-sat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 62px;
  padding: 9px 14px 9px 9px;
  border-radius: 26px 22px 28px 24px / 24px 28px 22px 26px;
  border: 1px solid var(--sza-edge);
  background: var(--sza-glass);
  color: var(--sza-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 28px -18px rgb(var(--sza-sh) / 0.75), inset 0 1px 0 var(--sza-card-hi);
  animation: sza-bob 8s ease-in-out infinite;
  animation-delay: var(--sza-bl, 0s);
  animation-duration: var(--sza-bd, 8s);
  animation-play-state: var(--elo-run, running);
  transition: transform 0.4s var(--sza-spring);
  --elo-sweep-rgb: var(--sza-sweep);
  --elo-sweep-a: calc(var(--sza-sweep-a, 0.17) * 1.1);
}

body[data-elo-look="sziget"] .sza-sat:hover {
  transform: translate3d(0, -3px, 0) scale(1.02);
}

body[data-elo-look="sziget"] .sza-medal {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.1) 70%);
  box-shadow: inset 0 0 0 1px var(--sza-edge), 0 8px 14px -10px rgb(var(--sza-sh) / 0.8);
  color: var(--sza-ink);
}

body[data-elo-look="sziget"][data-elo-resolved="night"] .sza-medal {
  background: radial-gradient(circle at 34% 28%, rgb(150 170 255 / 0.28), rgb(150 170 255 / 0.06) 70%);
}

body[data-elo-look="sziget"] .sza-medal svg {
  width: 28px;
  height: 28px;
}

body[data-elo-look="sziget"] .sza-sat-t {
  display: grid;
  min-width: 0;
  gap: 1px;
}

body[data-elo-look="sziget"] .sza-sat-t i {
  font: 600 calc(9.5px * var(--elo-font-scale)) / 1.2 var(--elo-font-mono);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sza-ink3);
}

body[data-elo-look="sziget"] .sza-sat-t b {
  font: 700 calc(17px * var(--elo-font-scale)) / 1.12 var(--elo-font-head);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sza-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: normal;
}

/* Az alszöveg két sorban fér el (mint az érték): a „Elavult · mérve: 5 órája” és a „0/1 biztonsági
 * eszköz” nem vágódik el a 768 px-es tableten, a kor sem esik ki. */
body[data-elo-look="sziget"] .sza-sat-t em {
  font: 500 calc(11.5px * var(--elo-font-scale)) / 1.25 var(--elo-font-body);
  font-style: normal;
  color: var(--sza-ink2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- dokk */
body[data-elo-look="sziget"] .sza-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}

body[data-elo-look="sziget"] .sza-dock-in {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 660px;
  padding: 6px;
  border-radius: 30px;
  border: 1px solid var(--sza-edge);
  background: var(--sza-glass);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 18px 32px -16px rgb(var(--sza-sh) / 0.75), inset 0 1px 0 var(--sza-card-hi);
  pointer-events: auto;
}

body[data-elo-look="sziget"] .sza-blob {
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 6);
  border-radius: 24px;
  background: var(--sza-card-a);
  box-shadow: 0 8px 16px -8px rgb(var(--sza-sh) / 0.6), inset 0 1px 0 var(--sza-card-hi), inset 0 0 0 1px var(--sza-card-edge);
  transform: translate3d(calc(var(--sza-i, 0) * 100%), 0, 0);
  transition: transform 0.65s var(--sza-spring);
}

body[data-elo-look="sziget"][data-elo-resolved="night"] .sza-blob {
  background: rgb(120 140 235 / 0.34);
}

body[data-elo-look="sziget"] .sza-blob-go {
  animation: sza-squash 0.65s var(--sza-ease);
}

@keyframes sza-squash {
  0% { scale: 1 1; }
  35% { scale: 1.22 0.9; }
  70% { scale: 0.96 1.04; }
  100% { scale: 1 1; }
}

body[data-elo-look="sziget"] .sza-dk {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px 5px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--sza-ink2);
  font: 600 calc(11px * var(--elo-font-scale)) / 1.1 var(--elo-font-body);
  cursor: pointer;
  text-align: center;
  transition: color 0.3s;
}

body[data-elo-look="sziget"] .sza-dk svg {
  width: 24px;
  height: 24px;
  transition: transform 0.5s var(--sza-spring);
}

body[data-elo-look="sziget"] .sza-dk span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

body[data-elo-look="sziget"] .sza-dk[aria-current="page"] {
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-dk[aria-current="page"] svg {
  transform: translate3d(0, -1px, 0) scale(1.1);
}

body[data-elo-look="sziget"] .sza-dk:hover svg {
  transform: translate3d(0, -2px, 0) scale(1.08);
}

body[data-elo-look="sziget"] .sza-dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 20px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sza-warn);
  box-shadow: 0 0 0 2px var(--sza-glass);
}

body[data-elo-look="sziget"] .sza-dot[hidden] {
  display: none;
}

body[data-elo-look="sziget"][data-elo-motion="off"] .sza-dock-in,
body[data-elo-look="sziget"][data-elo-motion="calm"] .sza-dock-in {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Élő otthon 2 · Sziget A (3/5): keret, fejléc, sziget, korona, szikla, műholdak, dokk, lapváltás.
 *
 * Az egész keret fix elrendezésű (a világ fix, a fejléc fent, a dokk lent, köztük a sziget); a lap
 * (`[data-elo-stage]` = a fennsík) belül görget. Classic hordozón élő oldalnál (data-elo-hosted="on")
 * a sziget és a műholdak rejtettek, a fejléc és a dokk marad, a classic panel a világ fölött görget.
 * A leállítósáv és a kezelőlap a saját (2500+) rétegében marad; a keret --sza-sb szerint helyet hagy neki.
 */
body[data-elo-look="sziget"] {
  --sza-hdr: calc(58px + env(safe-area-inset-top));
  --sza-dk: 74px;
  --sza-sb: 0px;
  --sza-st: 0px;
  --sza-crown: 96px;
  --sza-rock: 26px;
  --sza-iw: min(100vw - 16px, 900px);
}

body[data-elo-look="sziget"][data-elo-stopbar="on"] {
  --sza-sb: var(--elo-stopbar-h, 62px);
}

/* paletta: éjszaka az alap, a feloldott téma szerint nappali készlet */
body[data-elo-look="sziget"] {
  --sza-ink: #eef2ff;
  --sza-ink2: #b8c3e2;
  --sza-ink3: #98a5ca;
  --sza-glass: rgb(18 26 62 / 0.68);
  --sza-edge: rgb(165 185 255 / 0.24);
  --sza-slab-a: rgb(36 46 92 / 0.72);
  --sza-slab-b: rgb(17 23 54 / 0.82);
  --sza-slab-edge: rgb(165 185 255 / 0.22);
  --sza-card-a: rgb(70 86 154 / 0.52);
  --sza-card-b: rgb(38 49 106 / 0.5);
  --sza-card-edge: rgb(172 192 255 / 0.2);
  --sza-card-hi: rgb(215 224 255 / 0.14);
  --sza-pill: rgb(200 215 255 / 0.1);
  --sza-sh: 2 4 26;
  --sza-water: #5ccbf0;
  --sza-garden: #58d894;
  --sza-energy: #ffc948;
  --sza-warn: #ff9f72;
  --sza-sweep: 190 205 255;
  --sza-sweep-a: 0.17;
  --sza-dock-solid: rgb(15 21 50 / 0.94);
}

body[data-elo-look="sziget"][data-elo-resolved="day"] {
  --sza-ink: #17212d;
  --sza-ink2: #2b3648;
  --sza-ink3: #34405a;
  --sza-glass: rgb(255 255 255 / 0.72);
  --sza-edge: rgb(255 255 255 / 0.82);
  --sza-slab-a: rgb(250 247 240 / 0.78);
  --sza-slab-b: rgb(234 228 215 / 0.84);
  --sza-slab-edge: rgb(255 255 255 / 0.8);
  --sza-card-a: rgb(255 255 255 / 0.84);
  --sza-card-b: rgb(252 247 237 / 0.72);
  --sza-card-edge: rgb(120 95 50 / 0.16);
  --sza-card-hi: rgb(255 255 255 / 0.9);
  --sza-pill: rgb(31 42 55 / 0.07);
  --sza-sh: 70 50 20;
  --sza-water: #0b7ea4;
  --sza-garden: #1b7f48;
  --sza-energy: #965c00;
  --sza-warn: #bd3f0a;
  --sza-sweep: 255 190 96;
  --sza-sweep-a: 0.3;
  --sza-dock-solid: rgb(247 247 249 / 0.95);
}

/* ---------------------------------------------------------------- keret */
body[data-elo-look="sziget"] .sza-frame {
  display: contents;
}

body[data-elo-look="sziget"][data-elo-hosted="off"] {
  overflow: hidden;
}

/* ---------------------------------------------------------------- fejléc */
body[data-elo-look="sziget"] .sza-top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(9px + env(safe-area-inset-top)) 14px 6px;
  pointer-events: none;
}

body[data-elo-look="sziget"] .sza-top > * {
  pointer-events: auto;
}

/* Vészzár alatt a vészzár-sáv (#emergencyLockBar) a natív lapokon a fejléc fölött áll: a fejléc és a
 * sziget-keret a sáv magasságával (--sza-lock-h, 25_elo_52 méri) lejjebb csúszik, hogy a sáv ne takarja
 * a gombokat és a lap címét. A hosztolt lapon a sáv a main-padding alatt van: ott nincs eltolás. */
body[data-elo-look="sziget"][data-elo-hosted="off"] .sza-top {
  top: var(--sza-lock-h, 0px);
}

body[data-elo-look="sziget"] .sza-sp {
  flex: 1;
  pointer-events: none;
}

body[data-elo-look="sziget"] .sza-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

body[data-elo-look="sziget"] .sza-brand-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--sza-glass);
  border: 1px solid var(--sza-edge);
  box-shadow: 0 8px 18px -10px rgb(var(--sza-sh) / 0.6);
}

body[data-elo-look="sziget"] .sza-brand-ic svg {
  width: 28px;
  height: 28px;
}

body[data-elo-look="sziget"] .sza-brand-t {
  display: grid;
  gap: 1px;
  padding: 3px 11px 3px 10px;
  border-radius: 12px;
  background: var(--sza-glass);
  border: 1px solid var(--sza-edge);
}

body[data-elo-look="sziget"] .sza-brand-t b,
body[data-elo-look="sziget"] .sza-time {
  white-space: nowrap;
}

body[data-elo-look="sziget"] .sza-brand-t b {
  font: 700 calc(15px * var(--elo-font-scale)) / 1.15 var(--elo-font-head);
  letter-spacing: -0.01em;
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-brand-t small {
  font: 600 calc(9.5px * var(--elo-font-scale)) / 1.1 var(--elo-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sza-ink3);
}

body[data-elo-look="sziget"] .sza-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--sza-edge);
  background: var(--sza-glass);
  color: var(--sza-ink);
  font: 600 calc(13px * var(--elo-font-scale)) / 1 var(--elo-font-body);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px -12px rgb(var(--sza-sh) / 0.7);
}

body[data-elo-look="sziget"] button.sza-chip {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s var(--sza-spring);
}

body[data-elo-look="sziget"] button.sza-chip:active {
  transform: scale(0.94);
}

body[data-elo-look="sziget"] .sza-chip svg {
  width: 20px;
  height: 20px;
}

/* telefonon és tableten a lapcím csak képernyőolvasónak és fókuszhoz van (a lap saját címe látszik) */
body[data-elo-look="sziget"] .sza-ttl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-elo-look="sziget"] .sza-ttl h1 {
  margin: 0;
  font: 700 calc(21px * var(--elo-font-scale)) / 1.1 var(--elo-font-head);
  letter-spacing: -0.015em;
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-ttl h1:focus {
  outline: none;
}

body[data-elo-look="sziget"] .sza-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 calc(10.5px * var(--elo-font-scale)) / 1 var(--elo-font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sza-ink3);
}

body[data-elo-look="sziget"] .sza-eyebrow .elo-dot {
  width: 7px;
  height: 7px;
}

/* ---------------------------------------------------------------- sziget */
body[data-elo-look="sziget"] .sza-stagebox {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--sza-hdr) + var(--sza-st) + var(--sza-lock-h, 0px));
  bottom: calc(var(--sza-dk) + var(--sza-sb) + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: var(--sza-crown) 0 var(--sza-rock);
  pointer-events: none;
}

body[data-elo-look="sziget"][data-elo-hosted="on"] .sza-stagebox,
body[data-elo-look="sziget"][data-elo-hosted="on"] .sza-sats {
  display: none;
}

body[data-elo-look="sziget"] .sza-island {
  position: relative;
  width: var(--sza-iw);
  height: 100%;
  animation: sza-bob 11s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
  pointer-events: none;
}

@keyframes sza-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -3px, 0); }
}

body[data-elo-look="sziget"][data-elo-motion="calm"] .sza-island {
  animation-duration: calc(11s * var(--elo-speed, 1.7));
}

body[data-elo-look="sziget"] .sza-tilt {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--sza-px, 0) * 5px), calc(var(--sza-py, 0) * 2px), 0);
  transition: transform 0.7s var(--sza-ease);
}

body[data-elo-look="sziget"] .sza-tilt-next {
  animation: sza-wob-next 0.9s var(--sza-spring);
}

body[data-elo-look="sziget"] .sza-tilt-prev {
  animation: sza-wob-prev 0.9s var(--sza-spring);
}

@keyframes sza-wob-next {
  0%, 100% { rotate: 0deg; }
  35% { rotate: 0.6deg; }
}

@keyframes sza-wob-prev {
  0%, 100% { rotate: 0deg; }
  35% { rotate: -0.6deg; }
}

body[data-elo-look="sziget"] .sza-crown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--sza-crown);
  pointer-events: none;
  z-index: 3;
  transition: height 0.5s var(--sza-ease);
}

body[data-elo-look="sziget"] .sza-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(0.96);
  transition: opacity 0.5s, transform 0.8s var(--sza-ease);
}

body[data-elo-look="sziget"] .sza-scene.on {
  opacity: 1;
  transform: translate3d(calc(var(--sza-px, 0) * -6px), 0, 0);
}

body[data-elo-look="sziget"] .sza-plateau {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 28px 28px 34px 34px / 24px 24px 38px 38px;
  background: linear-gradient(180deg, var(--sza-slab-a), var(--sza-slab-b));
  border: 1px solid var(--sza-slab-edge);
  border-top: 0;
  box-shadow: 0 34px 60px -26px rgb(var(--sza-sh) / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.18);
  pointer-events: auto;
}

body[data-elo-look="sziget"] .sza-plateau::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sza-slab-b);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

body[data-elo-look="sziget"] .sza-plateau::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(177deg, transparent 0 46px, rgb(var(--sza-sh) / 0.05) 46px 47px);
  pointer-events: none;
}

body[data-elo-look="sziget"] .sza-lip {
  position: absolute;
  left: -5px;
  right: -5px;
  top: -13px;
  height: 30px;
  z-index: 4;
  pointer-events: none;
}

body[data-elo-look="sziget"] .sza-lip svg {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-elo-look="sziget"] .sza-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 30px 14px 22px;
  border-radius: inherit;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--sza-sh) / 0.35) transparent;
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-face.sza-drag {
  transition: none;
}

/* A telepítési sáv a dokk fölött ül: amíg látszik (és nincs leállítósáv), az utolsó kártya a sáv fölött maradjon.
 * A sáv valós magassága (--standalone-nudge-h, JS méri) az egysoros 68 px fölé adja a többletet: ≤420 px-en
 * a szöveg több sorba törik, és a fix 118 px alá került volna a sor. */
body[data-elo-look="sziget"].standalone-nudge-visible:not([data-elo-stopbar="on"]) .sza-face {
  padding-bottom: calc(118px + max(0px, var(--standalone-nudge-h, 68px) - 68px) + env(safe-area-inset-bottom));
}

/* A bezárás × célterülete legalább 44 px (eddig 36 px volt). */
body[data-elo-look="sziget"] .standalone-nudge .standalone-dismiss {
  min-width: 44px;
  min-height: 44px;
}

body[data-elo-look="sziget"] .sza-enter-next {
  animation: sza-in-next 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body[data-elo-look="sziget"] .sza-enter-prev {
  animation: sza-in-prev 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes sza-in-next {
  from { opacity: 0; transform: translate3d(34px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes sza-in-prev {
  from { opacity: 0; transform: translate3d(-34px, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- classic hordozón élő oldalak */
body[data-elo-look="sziget"][data-elo-hosted="on"] main > :not(#eloRoot) {
  position: relative;
  z-index: 2;
}

body[data-elo-look="sziget"][data-elo-hosted="on"] main {
  max-width: 1040px;
  margin: 0 auto;
  padding: calc(var(--sza-hdr) + 6px) 16px calc(var(--sza-dk) + var(--sza-sb) + 28px + env(safe-area-inset-bottom));
}

/* A felső hely a fejléc-változó (58/64 px) és a JS által mért valós sáv (--sza-top-h, 25_elo_52) közül a
 * nagyobb + 14 px: a változó a sávnál kisebb is lehet, és akkor a lap címe a sáv alá csúszott (H1-12).
 * Az alja a dokk és (ha látszik) a telepítési sáv fölött áll. */
body[data-elo-look="sziget"][data-elo-hosted="on"] main {
  padding: calc(max(var(--sza-hdr), var(--sza-top-h, 0px)) + 14px) 16px calc(var(--sza-dk) + var(--sza-sb) + 28px + env(safe-area-inset-bottom)) !important;
}

body[data-elo-look="sziget"][data-elo-hosted="on"].standalone-nudge-visible:not([data-elo-stopbar="on"]) main {
  padding-bottom: calc(184px + max(0px, var(--standalone-nudge-h, 68px) - 68px) + env(safe-area-inset-bottom)) !important;
}

body[data-elo-look="sziget"][data-elo-hosted="on"] .sza-dock-in {
  background: var(--sza-dock-solid);
}

body[data-elo-look="sziget"][data-elo-hosted="on"] .sza-top::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--sza-hdr) + 18px);
  background: linear-gradient(180deg, rgb(var(--sza-sh) / 0.4), transparent);
  pointer-events: none;
  z-index: -1;
}

/* ---------------------------------------------------------------- tablet: műholdak felül, a sziget nagyobb */
@media (min-width: 600px) {
  body[data-elo-look="sziget"] .sza-plateau::after {
    display: none;
  }

  body[data-elo-look="sziget"] {
    --sza-hdr: calc(64px + env(safe-area-inset-top));
    --sza-crown: 150px;
    --sza-rock: 54px;
    --sza-st: 92px;
    --sza-iw: min(100vw - 36px, 780px);
  }

  body[data-elo-look="sziget"] .sza-top {
    padding: calc(12px + env(safe-area-inset-top)) 22px 6px;
  }

  body[data-elo-look="sziget"] .sza-sats {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--sza-hdr) + var(--sza-lock-h, 0px));
    z-index: 4;
    display: flex;
    gap: 10px;
    padding: 6px 22px 0;
    pointer-events: none;
  }

  body[data-elo-look="sziget"] .sza-sat {
    flex: 1 1 0;
    pointer-events: auto;
  }

  body[data-elo-look="sziget"] .sza-sat:nth-child(n+5) {
    display: none;
  }

  body[data-elo-look="sziget"] .sza-face {
    padding: 30px 20px 26px;
  }

  body[data-elo-look="sziget"] .sza-dk {
    font-size: calc(11.5px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"][data-elo-stopbar="on"] .sza-dock {
    bottom: var(--sza-sb);
  }

  body[data-elo-look="sziget"] .sza-dock {
    padding-bottom: 12px;
  }

  body[data-elo-look="sziget"] .sza-stagebox {
    bottom: calc(var(--sza-dk) + var(--sza-sb) + 4px);
  }
}

@media (min-width: 640px) {
  body[data-elo-look="sziget"][data-elo-stopbar="on"] .sza-dock {
    bottom: calc(var(--sza-sb) + env(safe-area-inset-bottom));
  }
}

/* ---------------------------------------------------------------- gép */
@media (min-width: 1200px) {
  body[data-elo-look="sziget"] {
    --sza-crown: 128px;
    --sza-rock: 50px;
    --sza-st: 80px;
    /* OW-02: a sziget a nézet szélességéhez igazodik (nem rögzített 900 px), ésszerű maximummal. */
    --sza-iw: min(calc(100vw - 112px), 1840px);
  }

  body[data-elo-look="sziget"] .sza-ttl {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    display: grid;
    gap: 5px;
    margin-left: 12px;
    padding: 8px 16px 8px 14px;
    border-radius: 16px;
    border: 1px solid var(--sza-edge);
    background: var(--sza-glass);
  }

  /* OW-02: a műholdak gépen is a lap fölötti sorban ülnek (mint tableten), a sziget szélességében;
   * oldalt nem foglalnak helyet, így a fennsík kitölti a nézetet. */
  body[data-elo-look="sziget"] .sza-sats {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--sza-hdr) + var(--sza-lock-h, 0px));
    z-index: 4;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 6px max(56px, calc((100vw - var(--sza-iw)) / 2)) 0;
    pointer-events: none;
  }

  body[data-elo-look="sziget"] .sza-sat {
    flex: 1 1 0;
    max-width: 400px;
    min-height: 54px;
    padding: 6px 12px 6px 7px;
    pointer-events: auto;
  }

  body[data-elo-look="sziget"] .sza-sat:nth-child(n+5) {
    display: none;
  }

  body[data-elo-look="sziget"] .sza-sat .sza-medal {
    width: 38px;
    height: 38px;
  }

  body[data-elo-look="sziget"] .sza-sat .sza-medal svg {
    width: 24px;
    height: 24px;
  }

  body[data-elo-look="sziget"] .sza-sat-t b {
    font-size: calc(15.5px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"] .sza-arrow {
    display: grid;
  }

  body[data-elo-look="sziget"] .sza-arrow-p {
    left: -50px;
  }

  body[data-elo-look="sziget"] .sza-arrow-n {
    right: -50px;
  }

  body[data-elo-look="sziget"] .sza-dock-in {
    max-width: 780px;
  }

  body[data-elo-look="sziget"] .sza-stagebox {
    align-items: center;
  }

  body[data-elo-look="sziget"] .sza-island {
    max-height: min(100%, 940px);
  }

  /* A korona-jelenet (ház, fák) saját, 960 px-es kompozíciójában marad, a fennsík közepén. */
  body[data-elo-look="sziget"] .sza-scene {
    inset: 0 auto 0 calc(50% - min(50%, 480px));
    width: min(100%, 960px);
  }

  body[data-elo-look="sziget"] .sza-dk {
    flex-direction: row;
    gap: 8px;
    font-size: calc(13px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"] .sza-dot {
    right: 12px;
    top: 10px;
  }

  body[data-elo-look="sziget"] .sza-face {
    padding: 22px 24px 16px;
  }
}

@media (min-width: 1500px) {
  body[data-elo-look="sziget"] .sza-sat:nth-child(n+5) {
    display: flex;
  }
}

@media (min-width: 1700px) {
  body[data-elo-look="sziget"] .sza-face {
    padding: 26px 30px 20px;
  }
}

@media (min-width: 600px) and (max-width: 1199px) and (max-height: 900px) {
  body[data-elo-look="sziget"] {
    --sza-crown: 112px;
    --sza-rock: 40px;
  }
}

@media (min-width: 1200px) and (max-height: 720px) {
  body[data-elo-look="sziget"] {
    --sza-crown: 112px;
    --sza-rock: 44px;
  }
}

@media (max-width: 420px) {
  body[data-elo-look="sziget"] [data-sza-motion] {
    display: none;
  }

  body[data-elo-look="sziget"] .sza-brand-t small {
    display: none;
  }
}

@media (max-width: 380px) {
  body[data-elo-look="sziget"] .sza-brand-t {
    display: none;
  }

  body[data-elo-look="sziget"] .sza-dk {
    font-size: min(calc(11px * var(--elo-font-scale)), 11px);
  }
}

/* Alacsony ablak (fekvő telefon 844x390, 667x375; asztali ablak 1024x600): a korona és a műholdsor
 * elvész, a lap a fejléc és a dokk közötti teljes magasságot kapja (eddig 56-213 px maradt). */
@media (max-height: 640px) {
  body[data-elo-look="sziget"] {
    --sza-crown: 0px;
    --sza-rock: 0px;
    --sza-st: 0px;
  }

  body[data-elo-look="sziget"] .sza-crown,
  body[data-elo-look="sziget"] .sza-sats {
    display: none;
  }

  body[data-elo-look="sziget"] .sza-face {
    padding-top: 16px;
  }
}
/* Élő otthon 2 · Sziget A (5/5): az Otthon lap kártyái (üveglapok, közös fénysávval).
 *
 * A kártyák az `.elo-glass` osztályt kapják: a fénysáv egyetlen, a képernyőhöz kötött mozgás
 * (95_elo_02_base.css), kártyánként nincs külön csillogás. Itt csak a színét és az erősségét adjuk meg.
 * A rács 12 oszlopos; a kártyák oszlopszélessége telefon/tablet/gép szerint változik, és a
 * hiányzó Energia kártya esetén (nincs beállítva) a rács önmagát tölti ki, lyuk nélkül.
 */
body[data-elo-look="sziget"] .sza-home {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

body[data-elo-look="sziget"] .sza-fh {
  display: grid;
  gap: 6px;
  margin: 0 4px 12px;
}

body[data-elo-look="sziget"] .sza-fh h2 {
  margin: 0;
  font: 700 calc(26px * var(--elo-font-scale)) / 1.08 var(--elo-font-head);
  letter-spacing: -0.02em;
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-bento {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  grid-auto-flow: dense;
}

body[data-elo-look="sziget"] .sza-card {
  grid-column: span var(--p, 12);
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 15px 16px 16px;
  border-radius: 22px;
  border: 1px solid var(--sza-card-edge);
  background: linear-gradient(158deg, var(--sza-card-a), var(--sza-card-b));
  box-shadow: inset 0 1px 0 var(--sza-card-hi), 0 16px 24px -20px rgb(var(--sza-sh) / 0.8);
  color: var(--sza-ink);
  --elo-sweep-rgb: var(--sza-sweep);
  --elo-sweep-a: var(--sza-sweep-a, 0.17);
}

body[data-elo-look="sziget"] .sza-face.sza-enter-next .sza-card,
body[data-elo-look="sziget"] .sza-face.sza-enter-prev .sza-card {
  animation: sza-rise 0.8s var(--sza-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 90ms);
}

body[data-elo-look="sziget"] .sza-card:nth-child(1) { --i: 0; }
body[data-elo-look="sziget"] .sza-card:nth-child(2) { --i: 1; }
body[data-elo-look="sziget"] .sza-card:nth-child(3) { --i: 2; }
body[data-elo-look="sziget"] .sza-card:nth-child(4) { --i: 3; }
body[data-elo-look="sziget"] .sza-card:nth-child(5) { --i: 4; }
body[data-elo-look="sziget"] .sza-card:nth-child(6) { --i: 5; }

@keyframes sza-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.97); }
  to { opacity: 1; transform: none; }
}

body[data-elo-look="sziget"] .sza-card .sza-eyebrow {
  margin-bottom: 1px;
}

body[data-elo-look="sziget"] .sza-card .sza-medal {
  width: 46px;
  height: 46px;
}

body[data-elo-look="sziget"] .sza-medal-corner {
  position: absolute;
  top: 10px;
  right: 12px;
}

/* ---------------------------------------------------------------- Most */
body[data-elo-look="sziget"] .sza-hero {
  --p: 12;
}

body[data-elo-look="sziget"] .sza-clock {
  font: 700 calc(56px * var(--elo-font-scale)) / 0.95 var(--elo-font-head);
  letter-spacing: -0.02em;
}

body[data-elo-look="sziget"] .sza-date {
  font: 500 calc(13.5px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-says {
  margin: 4px 0 0;
  font: 500 calc(15.5px * var(--elo-font-scale)) / 1.4 var(--elo-font-body);
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-elo-look="sziget"] .sza-fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 99px;
  background: var(--sza-pill);
  font: 500 calc(12px * var(--elo-font-scale)) / 1.15 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-fact b {
  font-weight: 700;
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-fact .elo-dot {
  width: 7px;
  height: 7px;
}

body[data-elo-look="sziget"] .sza-arc {
  margin-top: auto;
  padding-top: 6px;
}

body[data-elo-look="sziget"] .sza-arc-box {
  position: relative;
  height: 72px;
}

body[data-elo-look="sziget"] .sza-arc-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body[data-elo-look="sziget"] .sza-mk-pos {
  position: absolute;
  width: 0;
  height: 0;
}

body[data-elo-look="sziget"] .sza-mk {
  position: absolute;
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

body[data-elo-look="sziget"] .sza-mk-sun {
  background: radial-gradient(circle, #fff6d0 0 16%, #ffd36a 22% 36%, rgb(255 214 120 / 0.28) 44%, transparent 70%);
}

body[data-elo-look="sziget"] .sza-mk-moon {
  background: radial-gradient(circle, transparent 0 40%, rgb(170 190 255 / 0.22) 55%, transparent 72%);
}

body[data-elo-look="sziget"] .sza-mk-moon svg {
  position: absolute;
  inset: 4px;
  width: 24px;
  height: 24px;
}

body[data-elo-look="sziget"] .sza-arc-base {
  fill: none;
  stroke: var(--sza-ink3);
  stroke-width: 1.6;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}

body[data-elo-look="sziget"] .sza-arc-done {
  fill: none;
  stroke: #f0a928;
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

body[data-elo-look="sziget"] .sza-arc-done.sza-arc-night {
  stroke: #a9b6ea;
}

body[data-elo-look="sziget"] .sza-arc-l {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -2px;
  font: 600 calc(11.5px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-arc-l em {
  font-style: normal;
  color: var(--sza-ink3);
  text-align: center;
}

body[data-elo-look="sziget"] .sza-arc-l > * {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Kertben */
body[data-elo-look="sziget"] .sza-garden {
  --p: 12;
}

body[data-elo-look="sziget"] .sza-card-h {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body[data-elo-look="sziget"] .sza-card-h > div {
  min-width: 0;
}

body[data-elo-look="sziget"] .sza-q {
  margin: 4px 0 0;
  font: 700 calc(18px * var(--elo-font-scale)) / 1.22 var(--elo-font-head);
  letter-spacing: -0.015em;
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-q-s {
  font-size: calc(17px * var(--elo-font-scale));
}

body[data-elo-look="sziget"] .sza-next {
  margin: 0;
  font: 500 calc(12.5px * var(--elo-font-scale)) / 1.35 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-none {
  margin: 0;
  font: 500 calc(13.5px * var(--elo-font-scale)) / 1.4 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 46px;
  margin-top: auto;
  padding: 0 18px;
  border: 0;
  border-radius: 99px;
  background: var(--sza-garden);
  color: #fff;
  font: 700 calc(14px * var(--elo-font-scale)) / 1.2 var(--elo-font-body);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 12px 20px -14px var(--sza-garden);
  transition: transform 0.3s var(--sza-spring);
}

body[data-elo-look="sziget"][data-elo-resolved="night"] .sza-btn {
  color: #04271a;
}

body[data-elo-look="sziget"] .sza-btn:active {
  transform: scale(0.97);
}

body[data-elo-look="sziget"] .sza-btn-quiet {
  background: var(--sza-pill);
  color: var(--sza-ink);
  box-shadow: none;
}

body[data-elo-look="sziget"][data-elo-resolved="night"] .sza-btn-quiet {
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-live .sza-medal::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--sza-garden);
  opacity: 0;
  animation: sza-ping 2.6s ease-out infinite;
  animation-play-state: var(--elo-run, running);
}

@keyframes sza-ping {
  from { opacity: 0.7; transform: scale(0.7); }
  to { opacity: 0; transform: scale(1.5); }
}

/* ---------------------------------------------------------------- Időjárás */
body[data-elo-look="sziget"] .sza-wx {
  --p: 12;
  background: linear-gradient(165deg, color-mix(in srgb, var(--sza-water) 20%, var(--sza-card-a)), var(--sza-card-b));
}

body[data-elo-look="sziget"] .sza-wx-t {
  margin-top: auto;
  font: 700 calc(48px * var(--elo-font-scale)) / 1 var(--elo-font-head);
  letter-spacing: -0.04em;
}

body[data-elo-look="sziget"] .sza-wx-t sup {
  position: relative;
  top: 4px;
  margin-left: 2px;
  font-size: 0.42em;
  font-weight: 600;
  vertical-align: top;
  letter-spacing: 0;
}

body[data-elo-look="sziget"] .sza-wx-t.sza-wx-none {
  font-size: calc(24px * var(--elo-font-scale));
  letter-spacing: -0.02em;
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-wx-l {
  font: 500 calc(14px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-wx-r {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font: 500 calc(12px * var(--elo-font-scale)) / 1.35 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-wx-r b {
  color: var(--sza-ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------- Energia */
body[data-elo-look="sziget"] .sza-en {
  --p: 12;
  background: linear-gradient(158deg, color-mix(in srgb, var(--sza-energy) 14%, var(--sza-card-a)), var(--sza-card-b));
}

body[data-elo-look="sziget"] .sza-mini {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

/* Az érem (.sza-medal-corner) a kártya jobb felső sarkában kb. 46 px magas: az Energia sorai ez alá
 * kerülnek, különben a „Napelem” sor értékét takarja. */
body[data-elo-look="sziget"] .sza-en .sza-mini {
  margin-top: 30px;
}

/* Elavult mérés: a sor értéke a másodlagos szövegszínt kapja (nem halványítva: az AA-határ alá esne),
 * alatta az elavultság kora (a sáv a második és harmadik oszlopon). */
body[data-elo-look="sziget"] .sza-mf.is-stale b {
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-mf-age {
  grid-column: 2 / 4;
  font: 600 calc(12px * var(--elo-font-scale)) / 1.2 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-mf {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font: 600 calc(12.5px * var(--elo-font-scale)) / 1.2 var(--elo-font-body);
  color: var(--sza-ink2);
}

body[data-elo-look="sziget"] .sza-mf b {
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: calc(14px * var(--elo-font-scale));
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-bar {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--sza-pill);
}

body[data-elo-look="sziget"] .sza-bar i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  border-radius: 7px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sza-energy) 60%, #fff), var(--sza-energy));
}

/* ---------------------------------------------------------------- Mára hátravan */
body[data-elo-look="sziget"] .sza-left {
  --p: 12;
}

body[data-elo-look="sziget"] .sza-tl {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

body[data-elo-look="sziget"] .sza-tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--sza-ink3) 0 4px, transparent 4px 8px);
  opacity: 0.45;
}

body[data-elo-look="sziget"] .sza-tl li {
  display: grid;
  grid-template-columns: 14px 54px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font: 600 calc(13px * var(--elo-font-scale)) / 1.3 var(--elo-font-body);
}

body[data-elo-look="sziget"] .sza-tl li i {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 3px solid var(--sza-warn);
  background: var(--sza-card-a);
}

body[data-elo-look="sziget"] .sza-tl li.sza-now i {
  background: var(--sza-warn);
}

body[data-elo-look="sziget"] .sza-tl time {
  font: 600 calc(12px * var(--elo-font-scale)) / 1.2 var(--elo-font-mono);
  color: var(--sza-ink2);
}

/* ---------------------------------------------------------------- Eszközök */
body[data-elo-look="sziget"] .sza-devs {
  --p: 12;
}

body[data-elo-look="sziget"] .sza-orbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-elo-look="sziget"] .sza-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--sza-card-edge);
  background: var(--sza-pill);
  color: var(--sza-ink);
  cursor: pointer;
  transition: transform 0.3s var(--sza-spring);
}

body[data-elo-look="sziget"] .sza-orb:hover {
  transform: translate3d(0, -2px, 0);
}

body[data-elo-look="sziget"] .sza-orb svg {
  width: 24px;
  height: 24px;
}

body[data-elo-look="sziget"] .sza-orb[data-tone="wait"]::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sza-warn);
  border: 2px solid var(--sza-card-b);
}

body[data-elo-look="sziget"] .sza-warn {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sza-warn) 13%, transparent);
  font: 500 calc(12.5px * var(--elo-font-scale)) / 1.35 var(--elo-font-body);
  color: var(--sza-ink);
}

body[data-elo-look="sziget"] .sza-warn .elo-dot {
  flex: none;
  margin-top: 5px;
  background: var(--sza-warn);
}

/* A figyelmeztetés törzse: a név, az üzenet és a „Megnézem” egymás alatt, külön sorban (UI-04). */
body[data-elo-look="sziget"] .sza-warn-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  justify-items: start;
}

body[data-elo-look="sziget"] .sza-warn-body > b {
  font-weight: 700;
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .sza-warn-text {
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .sza-link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sza-water);
  font: 700 calc(12.5px * var(--elo-font-scale)) / 1.35 var(--elo-font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- elrendezés */
@media (min-width: 600px) {
  body[data-elo-look="sziget"] .sza-fh {
    display: none;
  }

  body[data-elo-look="sziget"] .sza-bento {
    gap: 14px;
  }

  body[data-elo-look="sziget"] .sza-garden {
    --p: 7;
  }

  body[data-elo-look="sziget"] .sza-wx {
    --p: 5;
  }

  body[data-elo-look="sziget"] .sza-has-en .sza-en,
  body[data-elo-look="sziget"] .sza-has-en .sza-left {
    --p: 6;
  }

  body[data-elo-look="sziget"] .sza-no-en .sza-left,
  body[data-elo-look="sziget"] .sza-no-en .sza-devs {
    --p: 6;
  }

  body[data-elo-look="sziget"] .sza-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "e e" "c s" "d s" "f f" "a a";
    column-gap: 28px;
    align-items: start;
  }

  body[data-elo-look="sziget"] .sza-hero > .sza-eyebrow { grid-area: e; }
  body[data-elo-look="sziget"] .sza-hero > .sza-clock { grid-area: c; }
  body[data-elo-look="sziget"] .sza-hero > .sza-date { grid-area: d; }
  body[data-elo-look="sziget"] .sza-hero > .sza-says { grid-area: s; margin: 6px 0 0; font-size: calc(17px * var(--elo-font-scale)); }
  body[data-elo-look="sziget"] .sza-hero > .sza-facts { grid-area: f; }
  body[data-elo-look="sziget"] .sza-hero > .sza-arc { grid-area: a; }
}

@media (min-width: 1200px) {
  body[data-elo-look="sziget"] .sza-bento {
    grid-auto-rows: minmax(min-content, 1fr);
  }

  body[data-elo-look="sziget"] .sza-hero {
    --p: 5;
    display: flex;
  }

  body[data-elo-look="sziget"] .sza-garden {
    --p: 4;
  }

  body[data-elo-look="sziget"] .sza-wx {
    --p: 3;
  }

  body[data-elo-look="sziget"] .sza-has-en .sza-en,
  body[data-elo-look="sziget"] .sza-has-en .sza-left,
  body[data-elo-look="sziget"] .sza-has-en .sza-devs {
    --p: 4;
  }

  body[data-elo-look="sziget"] .sza-no-en .sza-left,
  body[data-elo-look="sziget"] .sza-no-en .sza-devs {
    --p: 6;
  }

  body[data-elo-look="sziget"] .sza-hero > .sza-says {
    font-size: calc(14.5px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"] .sza-clock {
    font-size: calc(40px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"] .sza-card {
    gap: 7px;
    padding: 12px 15px 13px;
  }

  body[data-elo-look="sziget"] .sza-arc-box {
    height: 38px;
  }

  body[data-elo-look="sziget"] .sza-btn {
    min-height: 42px;
  }

  body[data-elo-look="sziget"] .sza-q {
    font-size: calc(16.5px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"] .sza-q-s {
    font-size: calc(16px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"] .sza-has-en .sza-orb:nth-child(n+6),
  body[data-elo-look="sziget"] .sza-has-en .sza-warn:nth-of-type(n+2) {
    display: none;
  }

  body[data-elo-look="sziget"] .sza-wx-t {
    font-size: calc(38px * var(--elo-font-scale));
  }

  body[data-elo-look="sziget"] .sza-wx-t {
    font-size: calc(40px * var(--elo-font-scale));
  }
}

/* OW-02: nagy kijelzőn a rács négy oszlopos (3 / 12 oszlop kártyánként), a kamera két oszlopot kap;
 * két soron belül marad minden kártya, a sorok a magasságot egyenlően osztják. */
@media (min-width: 1700px) {
  body[data-elo-look="sziget"] .sza-bento {
    gap: 16px;
  }

  body[data-elo-look="sziget"] .sza-hero,
  body[data-elo-look="sziget"] .sza-garden,
  body[data-elo-look="sziget"] .sza-wx,
  body[data-elo-look="sziget"] .sza-has-en .sza-en,
  body[data-elo-look="sziget"] .sza-has-en .sza-left,
  body[data-elo-look="sziget"] .sza-has-en .sza-devs {
    --p: 3;
  }

  body[data-elo-look="sziget"] .sza-has-en.sza-has-cam .sza-cam {
    --p: 6;
    align-self: stretch;
  }

  body[data-elo-look="sziget"] .sza-card {
    padding: 14px 18px 16px;
  }
}

@media (max-width: 359px) {
  body[data-elo-look="sziget"] .sza-clock {
    font-size: calc(46px * var(--elo-font-scale));
  }
}
/* Élő otthon 2 · Sziget A (4/5): a szikla, a víz tükröződése és a koronajelenetek apró mozgásai.
 *
 * Minden szabály `body[data-elo-look="sziget"]` alatt; mozgás csak transform/opacity, a végtelen
 * animációk a --elo-run tokent követik (Ki módban és rejtett lapnál a héj leállítja őket).
 */
body[data-elo-look="sziget"] .sza-rock {
  position: absolute;
  left: 3%;
  right: 3%;
  top: calc(100% - 6px);
  height: calc(var(--sza-rock) + 44px);
  z-index: 1;
  pointer-events: none;
}

body[data-elo-look="sziget"] .sza-rock svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body[data-elo-look="sziget"] .sza-vine {
  transform-box: fill-box;
  transform-origin: top center;
  animation: sza-sway-a 7s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
}

/* a víz tükröződése a sziget alatt: lágy árnyék és lassú hullámgyűrűk */
body[data-elo-look="sziget"] .sza-reflect {
  position: absolute;
  left: 20%;
  right: 20%;
  top: calc(100% + var(--sza-rock) + 34px);
  height: 56px;
  pointer-events: none;
}

body[data-elo-look="sziget"] .sza-reflect i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(4 12 26 / 0.34), transparent 68%);
}

body[data-elo-look="sziget"] .sza-reflect i + i {
  background: none;
  border: 1px solid rgb(255 255 255 / 0.12);
  animation: sza-ring 7s ease-out infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="sziget"] .sza-reflect i + i + i {
  animation-delay: -3.5s;
}

@keyframes sza-ring {
  from { opacity: 0.7; transform: scale(0.5, 0.4); }
  to { opacity: 0; transform: scale(1.15, 0.9); }
}

/* a jelenetek apró mozgásai */
body[data-elo-look="sziget"] .sza-sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sza-sway-a 7s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="sziget"] .sza-sway-slow {
  animation-duration: 10s;
}

@keyframes sza-sway-a {
  0%, 100% { transform: rotate(-0.8deg); }
  50% { transform: rotate(0.8deg); }
}

body[data-elo-look="sziget"] .sza-smoke {
  fill: rgb(255 255 255 / 0.3);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: sza-smoke 7s ease-out infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="sziget"] .sza-smoke-b {
  animation-delay: -3.5s;
}

@keyframes sza-smoke {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  18% { opacity: 0.45; }
  100% { opacity: 0; transform: translate3d(16px, -40px, 0) scale(1.7); }
}

body[data-elo-look="sziget"] .sza-win-lit {
  fill: #ffcf8a;
  opacity: calc((1 - var(--sza-L, 1)) * 0.62);
}

body[data-elo-look="sziget"] .sza-night-only,
body[data-elo-look="sziget"] .sza-lamp-glow {
  opacity: calc((1 - var(--sza-L, 1)) * 0.95);
}

body[data-elo-look="sziget"] .sza-lamp {
  opacity: calc(0.45 + (1 - var(--sza-L, 1)) * 0.55);
}

body[data-elo-look="sziget"] .sza-beacon,
body[data-elo-look="sziget"] .sza-led {
  animation: sza-blink 2.4s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="sziget"] .sza-led-b {
  animation-delay: -1.2s;
}

@keyframes sza-blink {
  0%, 70%, 100% { opacity: 1; }
  80% { opacity: 0.2; }
}

body[data-elo-look="sziget"] .sza-signal {
  animation: sza-blink 4s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="sziget"] .sza-rotor {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sza-spin 16s linear infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="sziget"] .sza-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: sza-spin 22s linear infinite;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="sziget"] .sza-gear-r {
  animation-direction: reverse;
}

@keyframes sza-spin {
  to { transform: rotate(360deg); }
}

body[data-elo-look="sziget"] .sza-glint-p,
body[data-elo-look="sziget"] .sza-level {
  animation: sza-glow 4s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
}

@keyframes sza-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

body[data-elo-look="sziget"] .sza-beam {
  transform-box: view-box;
  transform-origin: 451px 50px;
  animation: sza-beam 9s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
  opacity: calc((1 - var(--sza-L, 1)) * 0.9);
}

body[data-elo-look="sziget"] .sza-beam-r {
  animation-delay: -4.5s;
}

@keyframes sza-beam {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(-0.2); }
}

body[data-elo-look="sziget"] .sza-pan {
  transform-box: fill-box;
  transform-origin: 6% 50%;
  animation: sza-pan 8s ease-in-out infinite;
  animation-play-state: var(--elo-run, running);
}

@keyframes sza-pan {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(14deg); }
}

body[data-elo-look="sziget"] .sza-spray {
  opacity: 0;
  transition: opacity 0.6s;
}

body[data-elo-look="sziget"] .sza-frame[data-sza-run="on"] .sza-spray {
  opacity: 1;
}

body[data-elo-look="sziget"] .sza-drop {
  fill: rgb(150 220 255 / 0.9);
  animation: sza-drop 1.6s ease-in infinite;
  animation-play-state: var(--elo-run, running);
}

@keyframes sza-drop {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(var(--dx), var(--dy), 0); opacity: 0; }
}

/* Ki mód: a keret átmenetei is azonnaliak (a lapváltás, a jelenetcsere, a dokk-jelölő). */
body[data-elo-look="sziget"][data-elo-motion="off"] #eloRoot :is(*, *::before, *::after) {
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
}
/* Élő otthon 2 · Sziget A: egységes kártyaméretek az Otthon lapon (OW-04).
 *
 * A 12 oszlopos rácson az azonos sorban ülő kártyák egyforma szélesek (tableten 6+6, gépen 4+4+4;
 * 1700 px fölött 3+3+3+3), a sorok magasságát a rács adja. Telefonon a teljes szélességű kártyák
 * egységes magasságcsaládot kapnak (S 96, M 192, L 288, XL 384 px): a kártya legalább ekkora, a tartalom
 * csak ezeknek a lépcsőknek a közelében nyújthatja.
 */
@media (min-width: 600px) {
  body[data-elo-look="sziget"] .sza-garden,
  body[data-elo-look="sziget"] .sza-wx {
    --p: 6;
  }
}

@media (min-width: 1200px) {
  body[data-elo-look="sziget"] .sza-hero,
  body[data-elo-look="sziget"] .sza-garden,
  body[data-elo-look="sziget"] .sza-wx {
    --p: 4;
  }
}

@media (min-width: 1700px) {
  body[data-elo-look="sziget"] .sza-hero,
  body[data-elo-look="sziget"] .sza-garden,
  body[data-elo-look="sziget"] .sza-wx {
    --p: 3;
  }
}

@media (max-width: 599px) {
  body[data-elo-look="sziget"] .sza-left { min-height: 96px; }
  body[data-elo-look="sziget"] .sza-wx { min-height: 192px; }
  body[data-elo-look="sziget"] .sza-garden,
  body[data-elo-look="sziget"] .sza-en,
  body[data-elo-look="sziget"] .sza-cam,
  body[data-elo-look="sziget"] .sza-devs { min-height: 288px; }
  body[data-elo-look="sziget"] .sza-hero { min-height: 384px; }
}
/* Élő otthon 2 · Sziget A (1/5): tokenek és a világ (valós ég, csillagok, hold, nap, felhők, víz).
 *
 * Minden szabály `body[data-elo-look="sziget"]` alatt. A világ a --sza-* változókból él, amelyeket a
 * 25_elo_50_sziget_a_world.js a valós napállásból számol (percenként frissül). Mozgás csak
 * transform/opacity; a felhők és a víz sodródása, a csillagok pislákolása és a csillanás lassú.
 * A felhő-rétegek apró, statikus elmosást kapnak (egyszer rasztereződnek, utána csak mozognak).
 */
body[data-elo-look="sziget"] {
  --sza-L: var(--elo-sky-light, 1);
  --sza-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sza-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* fény-függő színek: a --sza-L (0 éjszaka .. 1 nappal) folyamatosan keveri őket */
  --sza-wall: color-mix(in srgb, #f1ece2 calc(var(--sza-L) * 100%), #3b4366);
  --sza-wall-shade: color-mix(in srgb, #cdc5b5 calc(var(--sza-L) * 100%), #1f2646);
  --sza-roof-a: color-mix(in srgb, #4a5264 calc(var(--sza-L) * 100%), #1c2238);
  --sza-roof-b: color-mix(in srgb, #2d3443 calc(var(--sza-L) * 100%), #0e1325);
  --sza-chimney: color-mix(in srgb, #8c6350 calc(var(--sza-L) * 100%), #2c2a3c);
  --sza-leaf-a: color-mix(in srgb, #92bf74 calc(var(--sza-L) * 100%), #2f5b55);
  --sza-leaf-b: color-mix(in srgb, #4f8f4a calc(var(--sza-L) * 100%), #214740);
  --sza-leaf-c: color-mix(in srgb, #2f6a3a calc(var(--sza-L) * 100%), #132f2d);
  --sza-pine-a: color-mix(in srgb, #3f7a55 calc(var(--sza-L) * 100%), #1c3c3b);
  --sza-pine-b: color-mix(in srgb, #28563c calc(var(--sza-L) * 100%), #0e2427);
  --sza-trunk: color-mix(in srgb, #6b5039 calc(var(--sza-L) * 100%), #2a2230);
  --sza-grass-a: color-mix(in srgb, #86b35c calc(var(--sza-L) * 100%), #2b5e4b);
  --sza-grass-b: color-mix(in srgb, #4b7f3d calc(var(--sza-L) * 100%), #1b3e34);
  --sza-rock-a: color-mix(in srgb, #c4ab85 calc(var(--sza-L) * 100%), #4a5078);
  --sza-rock-b: color-mix(in srgb, #8f7656 calc(var(--sza-L) * 100%), #2f3558);
  --sza-rock-c: color-mix(in srgb, #594632 calc(var(--sza-L) * 100%), #181c3a);
  --sza-vine: color-mix(in srgb, #5f9a4c calc(var(--sza-L) * 100%), #2a5b4a);
  --sza-glass-a: color-mix(in srgb, #a9cbe8 calc(var(--sza-L) * 100%), #ffd08c);
  --sza-glass-b: color-mix(in srgb, #5f87ad calc(var(--sza-L) * 100%), #ffa955);
  --sza-frame: color-mix(in srgb, #2b323f calc(var(--sza-L) * 100%), #10162a);
  --sza-door: color-mix(in srgb, #7b5236 calc(var(--sza-L) * 100%), #35283a);
  --sza-wood: color-mix(in srgb, #a77d54 calc(var(--sza-L) * 100%), #3a3040);
  --sza-stone: color-mix(in srgb, #b8b2a4 calc(var(--sza-L) * 100%), #3c4260);
  --sza-soil: color-mix(in srgb, #6b4d36 calc(var(--sza-L) * 100%), #2a2230);
  --sza-panel-a: color-mix(in srgb, #3c70b8 calc(var(--sza-L) * 100%), #1a2d63);
  --sza-panel-b: color-mix(in srgb, #1d3f7a calc(var(--sza-L) * 100%), #0b1636);
  --sza-metal-a: color-mix(in srgb, #d8dde6 calc(var(--sza-L) * 100%), #5f6a90);
  --sza-metal-b: color-mix(in srgb, #9aa4b6 calc(var(--sza-L) * 100%), #353e62);
}

/* ---------------------------------------------------------------- világ */
body[data-elo-look="sziget"] .sza-world {
  --sza-hor: 66%;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: var(--sza-sea2, #0b1424);
}

@media (max-width: 599px) {
  body[data-elo-look="sziget"] .sza-world {
    --sza-hor: 50%;
  }
}

body[data-elo-look="sziget"] .sza-world > * {
  position: absolute;
}

body[data-elo-look="sziget"] .sza-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(2 6 18 / 0.18), transparent 24%, transparent 66%, rgb(2 6 18 / 0.26));
}

body[data-elo-look="sziget"] .sza-sky {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--sza-hor) + 1px);
  background: linear-gradient(180deg, var(--sza-top) 0%, var(--sza-mid) 46%, var(--sza-hor-c) 100%);
}

body[data-elo-look="sziget"] .sza-glow {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--sza-hor);
  background:
    radial-gradient(ellipse 62% 70% at calc(8% + var(--sza-sx, 0.5) * 84%) 100%, rgb(var(--sza-glow-rgb, 255 200 140) / var(--sza-glow-a, 0)), transparent 72%),
    radial-gradient(ellipse 140% 34% at 50% 100%, rgb(var(--sza-glow-rgb, 255 200 140) / calc(var(--sza-glow-a, 0) * 0.5)), transparent 80%);
}

body[data-elo-look="sziget"] .sza-stars,
body[data-elo-look="sziget"] .sza-twinkle {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--sza-hor);
  opacity: var(--sza-stars, 0);
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 97%);
}

body[data-elo-look="sziget"] .sza-twinkle i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.2;
  animation: sza-twinkle var(--sza-td, 5s) ease-in-out infinite;
  animation-delay: var(--sza-tl, 0s);
  animation-play-state: var(--elo-run, running);
}

@keyframes sza-twinkle {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.95; }
}

/* nap és hold: a vízszintes helyzet a nappali / holdív haladása, a magasság a valós magasság */
body[data-elo-look="sziget"] .sza-sun {
  left: calc(8% + var(--sza-sx, 0.5) * 84%);
  top: calc(var(--sza-hor) - var(--sza-sel, 0.4) * (var(--sza-hor) - 9%));
  width: 0;
  height: 0;
  opacity: var(--sza-sun-a, 1);
  transform: translate3d(calc(var(--sza-px, 0) * -3px), 0, 0);
}

body[data-elo-look="sziget"] .sza-sun-halo {
  position: absolute;
  left: -420px;
  top: -420px;
  width: 840px;
  height: 840px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--sza-sun-rgb, 255 240 200) / 0.95) 0, rgb(var(--sza-sun-rgb, 255 240 200) / 0.5) 7%, rgb(var(--sza-sun-rgb, 255 240 200) / 0.22) 16%, rgb(var(--sza-sun-rgb, 255 240 200) / 0.08) 34%, transparent 62%);
  transform: scale(calc(1 + var(--sza-sun-low, 0) * 0.55));
}

body[data-elo-look="sziget"] .sza-sun-core {
  position: absolute;
  left: -44px;
  top: -44px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef8 0, #fffef8 40%, rgb(var(--sza-sun-rgb, 255 240 200) / 0.98) 56%, rgb(var(--sza-sun-rgb, 255 240 200) / 0) 74%);
}

body[data-elo-look="sziget"] .sza-moon {
  left: calc(8% + var(--sza-mx, 0.5) * 84%);
  top: calc(var(--sza-hor) - var(--sza-mel, 0.4) * (var(--sza-hor) - 9%));
  width: 0;
  height: 0;
  opacity: var(--sza-moon-a, 0);
  transform: translate3d(calc(var(--sza-px, 0) * -3px), 0, 0);
}

body[data-elo-look="sziget"] .sza-moon svg {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  overflow: visible;
}

body[data-elo-look="sziget"] .sza-moon-halo {
  position: absolute;
  left: -150px;
  top: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(190 205 255 / calc(var(--sza-moon-lit, 1) * 0.3)) 0, rgb(190 205 255 / calc(var(--sza-moon-lit, 1) * 0.07)) 34%, transparent 66%);
}

/* felhők: puha, két mélységben; a sodródás egyetlen transform */
body[data-elo-look="sziget"] .sza-clouds {
  left: 0;
  width: 100%;
  overflow: hidden;
  opacity: var(--sza-cl-a, 0.4);
  transform: translate3d(calc(var(--sza-px, 0) * -6px), 0, 0);
  transition: transform 0.9s var(--sza-ease);
}

body[data-elo-look="sziget"] .sza-clouds-far {
  top: calc(var(--sza-hor) * 0.2);
  height: calc(var(--sza-hor) * 0.26);
}

body[data-elo-look="sziget"] .sza-clouds-near {
  top: calc(var(--sza-hor) * 0.46);
  height: calc(var(--sza-hor) * 0.42);
  opacity: calc(var(--sza-cl-a, 0.4) * 0.92);
  transform: translate3d(calc(var(--sza-px, 0) * -14px), 0, 0);
}

body[data-elo-look="sziget"] .sza-clouds svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  fill: url(#szaCloud);
  filter: blur(2.5px);
  animation: sza-drift 190s linear infinite;
  animation-play-state: var(--elo-run, running);
  will-change: transform;
}

body[data-elo-look="sziget"] .sza-clouds-near svg {
  animation-duration: 120s;
  filter: blur(2px);
}

@keyframes sza-drift {
  to { transform: translate3d(-50%, 0, 0); }
}

body[data-elo-look="sziget"][data-elo-motion="calm"] .sza-clouds svg {
  animation-duration: calc(190s * var(--elo-speed, 1.7));
}

body[data-elo-look="sziget"] .sza-ridge {
  left: 0;
  bottom: calc(100% - var(--sza-hor) - 1px);
  width: 100%;
  height: 7%;
  fill: color-mix(in srgb, var(--sza-hor-c) 52%, #1b2a3c);
}

body[data-elo-look="sziget"] .sza-ridge .sza-ridge-far {
  fill: color-mix(in srgb, var(--sza-hor-c) 72%, #3a4a62);
}

/* víz: az ég horizont-színét tükrözi; hullám-vonalak perspektívában, lassan sodródnak */
body[data-elo-look="sziget"] .sza-sea {
  left: 0;
  right: 0;
  top: var(--sza-hor);
  bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sza-sea0), var(--sza-sea1) 42%, var(--sza-sea2));
}

body[data-elo-look="sziget"] .sza-sea-waves {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  color: rgb(255 255 255 / calc(0.04 + var(--sza-L, 1) * 0.05));
  animation: sza-drift 120s linear infinite;
  animation-play-state: var(--elo-run, running);
  will-change: transform;
}

body[data-elo-look="sziget"] .sza-sea-w2 {
  animation-duration: 78s;
  animation-direction: reverse;
  color: rgb(255 255 255 / calc(0.025 + var(--sza-L, 1) * 0.04));
}

body[data-elo-look="sziget"] .sza-sea-waves {
  display: flex;
}

body[data-elo-look="sziget"] .sza-sea-waves svg {
  display: block;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
}

body[data-elo-look="sziget"] .sza-glint {
  position: absolute;
  left: var(--sza-gx, 50%);
  top: 0;
  width: min(30vw, 420px);
  height: 74%;
  transform: translate3d(-50%, 0, 0);
  opacity: var(--sza-gl-a, 0);
}

body[data-elo-look="sziget"] .sza-glint-col {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 100% at 50% 0, rgb(var(--sza-gl-rgb, 255 255 255) / 0.5), rgb(var(--sza-gl-rgb, 255 255 255) / 0.12) 52%, transparent 80%);
}

body[data-elo-look="sziget"] .sza-glint i {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--sza-gl-rgb, 255 255 255) / 0.92);
  opacity: 0.2;
  animation: sza-glint var(--sza-gd, 3s) ease-in-out infinite;
  animation-delay: var(--sza-gl, 0s);
  animation-play-state: var(--elo-run, running);
}

@keyframes sza-glint {
  0%, 100% { opacity: 0.08; transform: scaleX(0.6); }
  50% { opacity: 0.95; transform: scaleX(1); }
}

body[data-elo-look="sziget"] .sza-haze {
  left: 0;
  top: calc(var(--sza-hor) - 5%);
  width: 100%;
  height: 10%;
  background: linear-gradient(180deg, transparent, rgb(var(--sza-glow-rgb, 255 200 140) / calc(var(--sza-glow-a, 0) * 0.32)) 50%, transparent);
}

/* eső: csak ha a valós időjárás esőt jelez */
body[data-elo-look="sziget"] .sza-rain {
  inset: 0;
  overflow: hidden;
  opacity: var(--sza-rain-a, 0);
  display: none;
}

body[data-elo-look="sziget"] .sza-world[data-sza-rainy="on"] .sza-rain {
  display: block;
}

body[data-elo-look="sziget"] .sza-rain i {
  position: absolute;
  left: -10%;
  top: -240px;
  width: 120%;
  height: 150%;
  background: repeating-linear-gradient(106deg, transparent 0 20px, rgb(215 230 255 / 0.3) 20px 21px, transparent 21px 43px);
  animation: sza-rain 0.7s linear infinite;
  animation-play-state: var(--elo-run, running);
  will-change: transform;
}

body[data-elo-look="sziget"] .sza-rain i + i {
  background: repeating-linear-gradient(104deg, transparent 0 14px, rgb(215 230 255 / 0.22) 14px 15px, transparent 15px 33px);
  animation-duration: 0.95s;
}

@keyframes sza-rain {
  to { transform: translate3d(-40px, 220px, 0); }
}

body[data-elo-look="sziget"] .sza-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Élő otthon 2 · Sziget B: palettatokenek, lapfej, eszközkártyák, rácsok.
 *
 * Minden szabály `body[data-elo-look="sziget"]` alatt (a CSS-hatókör szabály). Komoly, visszafogott
 * üveg: finom keret, belső fény, mély árnyék; a kártyák `.elo-glass` osztályt viselnek, a csillogás
 * egyetlen, közös fénysáv (95_elo_02_base.css), saját animáció nincs. A mozgás csak transform/opacity.
 */

/* ---------------------------------------------------------- tokenek */
body[data-elo-look="sziget"] {
  --elo-ground: #060C17;
  --elo-s1: #0E192B;
  --elo-s2: #14233A;
  --elo-line: #2B3C58;
  --elo-ink: #E8EFF8;
  --elo-mute: #9DADC4;
  --elo-water: #62B8E4;
  --elo-energy: #E6B85A;
  --elo-secure: #AA9CF2;
  --elo-plant: #72CFA2;
  --elo-warn: #F28C66;
  --szb-glass: rgba(13, 24, 42, 0.66);
  --szb-glass-hi: rgba(255, 255, 255, 0.07);
  --szb-edge: rgba(170, 198, 236, 0.20);
  --szb-edge-in: rgba(255, 255, 255, 0.07);
  --szb-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
  --szb-chip: rgba(255, 255, 255, 0.06);
  --elo-sweep-rgb: 190 215 255;
  --elo-sweep-a: 0.10;
}

body[data-elo-look="sziget"][data-elo-resolved="day"] {
  --elo-ground: #DCE8F3;
  --elo-s1: #FFFFFF;
  --elo-s2: #EAF1F8;
  --elo-line: #BFCDDD;
  --elo-ink: #0F1B28;
  --elo-mute: #44566B;
  --elo-water: #0A6E9A;
  --elo-energy: #8F5A00;
  --elo-secure: #5F44C8;
  --elo-plant: #1B7A50;
  --elo-warn: #B63E0B;
  --szb-glass: rgba(255, 255, 255, 0.72);
  --szb-glass-hi: rgba(255, 255, 255, 0.55);
  --szb-edge: rgba(255, 255, 255, 0.85);
  --szb-edge-in: rgba(20, 50, 80, 0.10);
  --szb-shadow: 0 16px 32px -20px rgba(20, 50, 80, 0.55), 0 1px 3px rgba(20, 50, 80, 0.12);
  --szb-chip: rgba(15, 27, 40, 0.06);
  --elo-sweep-rgb: 255 255 255;
  --elo-sweep-a: 0.55;
}

/* ---------------------------------------------------------- lap */
body[data-elo-look="sziget"] .szb-page {
  display: block;
  min-width: 0;
  padding: 2px 0 12px;
  color: var(--elo-ink);
  font-family: var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-page.szb-enter > * {
  animation: szb-rise calc(0.55s * var(--elo-motion)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-elo-look="sziget"] .szb-page.szb-enter > *:nth-child(2) { animation-delay: calc(0.05s * var(--elo-motion)); }
body[data-elo-look="sziget"] .szb-page.szb-enter > *:nth-child(3) { animation-delay: calc(0.10s * var(--elo-motion)); }
body[data-elo-look="sziget"] .szb-page.szb-enter > *:nth-child(4) { animation-delay: calc(0.15s * var(--elo-motion)); }
body[data-elo-look="sziget"] .szb-page.szb-enter > *:nth-child(n+5) { animation-delay: calc(0.20s * var(--elo-motion)); }

@keyframes szb-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

body[data-elo-look="sziget"] .szb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 2px 14px;
}

body[data-elo-look="sziget"] .szb-eyebrow {
  display: block;
  color: var(--elo-mute);
  font: 600 calc(11px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-elo-look="sziget"] .szb-title {
  margin: 4px 0 0;
  font: 600 calc(28px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  letter-spacing: -0.012em;
  color: var(--elo-ink);
}

body[data-elo-look="sziget"] .szb-title:focus {
  outline: none;
}

body[data-elo-look="sziget"] .szb-head-aside {
  flex: none;
  color: var(--elo-mute);
  font: 500 calc(14px * var(--elo-font-scale))/1.2 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-count b {
  color: var(--elo-ink);
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="sziget"] .szb-section-h,
body[data-elo-look="sziget"] .szb-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 2px 10px;
  color: var(--elo-mute);
  font: 600 calc(11.5px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-elo-look="sziget"] .szb-section-h::after,
body[data-elo-look="sziget"] .szb-group-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--szb-edge-in), transparent);
}

body[data-elo-look="sziget"] .szb-group-h { order: 0; }
body[data-elo-look="sziget"] .szb-group-h span {
  order: 2;
  min-width: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--szb-chip);
  color: var(--elo-ink);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body[data-elo-look="sziget"] .szb-group-h::after { order: 1; }

body[data-elo-look="sziget"] .szb-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--elo-tone, var(--elo-line));
  border-radius: 999px;
  color: var(--elo-ink);
  font: 600 calc(13px * var(--elo-font-scale))/1 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-live-chip i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--elo-tone);
}

/* ---------------------------------------------------------- rácsok */
/* Eszközkártyák: a sor végén a kártyák kitöltik a helyet (nincs lyuk), de nem nyúlnak végtelenre. */
body[data-elo-look="sziget"] .szb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-elo-look="sziget"] .szb-grid > * {
  flex: 1 1 208px;
  min-width: 0;
  max-width: 400px;
}

body[data-elo-look="sziget"] :is(.szb-grid-zones, .szb-grid-stat, .szb-grid-tiles) {
  display: grid;
  gap: 10px;
  align-items: stretch;
}

body[data-elo-look="sziget"] :is(.szb-grid-zones, .szb-grid-stat, .szb-grid-tiles) > * { max-width: none; }

body[data-elo-look="sziget"] .szb-grid-zones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
body[data-elo-look="sziget"] .szb-grid-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-elo-look="sziget"] .szb-grid-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }

@media (min-width: 1000px) {
  body[data-elo-look="sziget"] .szb-grid-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  body[data-elo-look="sziget"] .szb-grid > * {
    flex: 1 1 calc(50% - 5px);
    max-width: none;
  }

  body[data-elo-look="sziget"] .szb-grid-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-elo-look="sziget"] .szb-grid-tiles { grid-template-columns: minmax(0, 1fr); }
  body[data-elo-look="sziget"] .szb-grid > .szb-cam { flex-basis: 100%; }
}

/* ---------------------------------------------------------- kártya */
body[data-elo-look="sziget"] .szb-card,
body[data-elo-look="sziget"] .szb-panel,
body[data-elo-look="sziget"] .szb-hero,
body[data-elo-look="sziget"] .szb-tile,
body[data-elo-look="sziget"] .szb-search {
  border: 1px solid var(--szb-edge);
  border-radius: 18px;
  background:
    linear-gradient(165deg, var(--szb-glass-hi), rgba(255, 255, 255, 0) 46%),
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--elo-c, var(--elo-water)) calc(15% * var(--elo-k)), transparent), transparent 62%),
    var(--szb-glass);
  box-shadow: var(--szb-shadow), inset 0 1px 0 var(--szb-edge-in);
  color: var(--elo-ink);
}

body[data-elo-look="sziget"] .szb-card {
  appearance: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-width: 0;
  min-height: 148px;
  margin: 0;
  padding: 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform calc(0.28s * var(--elo-motion)) cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
}

body[data-elo-look="sziget"] .szb-card:is(:hover, :focus-visible) {
  transform: translateY(calc(-2px * var(--elo-motion)));
  border-color: color-mix(in srgb, var(--elo-c, var(--elo-water)) 55%, var(--szb-edge));
}

body[data-elo-look="sziget"] .szb-card:active { transform: scale(0.985); }
body[data-elo-look="sziget"] div.szb-card,
body[data-elo-look="sziget"] section.szb-card { cursor: default; }
body[data-elo-look="sziget"] div.szb-card:hover,
body[data-elo-look="sziget"] section.szb-card:hover { transform: none; border-color: var(--szb-edge); }

body[data-elo-look="sziget"] .szb-card[data-live="1"] {
  box-shadow: var(--szb-shadow), inset 0 1px 0 color-mix(in srgb, var(--elo-c, var(--elo-water)) 60%, transparent);
}

body[data-elo-look="sziget"] .szb-card-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

body[data-elo-look="sziget"] .szb-card-id {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

body[data-elo-look="sziget"] .szb-name {
  font: 600 calc(15px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .szb-sub {
  color: var(--elo-mute);
  font: 400 calc(12.5px * var(--elo-font-scale))/1.3 var(--elo-font-body);
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .szb-dot {
  flex: none;
  margin-top: 5px;
}

body[data-elo-look="sziget"] .szb-medal {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--elo-c, var(--elo-water)) 38%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    color-mix(in srgb, var(--elo-c, var(--elo-water)) calc(20% * var(--elo-k)), transparent);
  color: color-mix(in srgb, var(--elo-c, var(--elo-water)) 88%, var(--elo-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body[data-elo-look="sziget"] .szb-card-mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-end;
  gap: 8px 12px;
  min-width: 0;
}

body[data-elo-look="sziget"] .szb-val {
  font: 600 calc(17px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .szb-val.is-empty {
  color: var(--elo-mute);
  font-weight: 500;
}

body[data-elo-look="sziget"] .szb-val-text {
  font-size: calc(15px * var(--elo-font-scale));
}

body[data-elo-look="sziget"] .szb-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

body[data-elo-look="sziget"] .szb-card .elo-pill {
  min-height: 26px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--elo-tone, var(--elo-line)) 10%, transparent);
  font-size: calc(11.5px * var(--elo-font-scale));
}

body[data-elo-look="sziget"] .szb-ro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--szb-edge);
  border-radius: 999px;
  color: var(--elo-mute);
  font: 500 calc(11.5px * var(--elo-font-scale))/1 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-pi {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-elo-look="sziget"] .szb-ro .szb-pi { width: 13px; height: 13px; }

body[data-elo-look="sziget"] .szb-note {
  grid-row: auto;
  color: var(--elo-mute);
  font-size: calc(12px * var(--elo-font-scale));
}

body[data-elo-look="sziget"] .szb-card.is-stale .szb-val { color: var(--elo-mute); }
body[data-elo-look="sziget"] .szb-card.is-readonly { border-style: dashed; }

body[data-elo-look="sziget"] .szb-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--elo-water);
  font: 600 calc(13px * var(--elo-font-scale))/1 var(--elo-font-body);
}

/* mikro-vizualizáció (a közös elo-dev-* jelölés átszínezve) */
body[data-elo-look="sziget"] .szb-card .elo-dev-ring {
  width: 46px;
  height: 46px;
  background: conic-gradient(var(--elo-c, var(--elo-water)) var(--elo-pct, 0deg), color-mix(in srgb, var(--elo-line) 70%, transparent) 0);
}

body[data-elo-look="sziget"] .szb-card .elo-dev-ring > span {
  width: 36px;
  height: 36px;
  background: var(--szb-glass-solid, var(--elo-s1));
  color: var(--elo-ink);
  font: 600 calc(11.5px * var(--elo-font-scale))/1 var(--elo-font-mono);
}

body[data-elo-look="sziget"] .szb-card .elo-dev-spark {
  width: 96px;
  height: 30px;
  color: var(--elo-c, var(--elo-water));
}

body[data-elo-look="sziget"] .szb-card .elo-dev-cam {
  min-height: 0;
  border: 0;
  color: var(--elo-mute);
  font-size: calc(12px * var(--elo-font-scale));
}

body[data-elo-look="sziget"] .szb-cam {
  min-height: 176px;
}

body[data-elo-look="sziget"] .szb-cam .szb-card-mid {
  align-content: center;
  justify-content: center;
  min-height: 64px;
  border: 1px solid var(--szb-edge-in);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.12));
}

/* ---------------------------------------------------------- Eszközök: keresés és szűrő */
body[data-elo-look="sziget"] .szb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 4px;
}

body[data-elo-look="sziget"] .szb-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  max-width: 420px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--elo-mute);
}

body[data-elo-look="sziget"] .szb-search input.szb-elo-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--elo-ink);
  font: 400 calc(15px * var(--elo-font-scale))/1.3 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-search input.szb-elo-input:focus { outline: none; }
body[data-elo-look="sziget"] .szb-search input::-webkit-search-cancel-button { appearance: none; }
body[data-elo-look="sziget"] .szb-search:focus-within { border-color: var(--elo-water); }
body[data-elo-look="sziget"] .szb-search input::placeholder { color: var(--elo-mute); }

body[data-elo-look="sziget"] .szb-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-elo-look="sziget"] .szb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--szb-edge);
  border-radius: 999px;
  background: var(--szb-chip);
  color: var(--elo-ink);
  font: 500 calc(13.5px * var(--elo-font-scale))/1 var(--elo-font-body);
  cursor: pointer;
}

body[data-elo-look="sziget"] .szb-chip.on {
  border-color: var(--elo-water);
  background: color-mix(in srgb, var(--elo-water) 24%, var(--szb-glass-solid, transparent));
  color: var(--elo-ink);
  font-weight: 600;
}

body[data-elo-look="sziget"] .szb-chip.on .szb-chip-n { color: var(--elo-ink); }

body[data-elo-look="sziget"] .szb-chip-n {
  color: var(--elo-mute);
  font: 600 calc(11.5px * var(--elo-font-scale))/1 var(--elo-font-mono);
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="sziget"] .szb-empty {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--szb-edge);
  border-radius: 16px;
  color: var(--elo-mute);
  font-size: calc(14px * var(--elo-font-scale));
}

body[data-elo-look="sziget"] .szb-empty b {
  color: var(--elo-ink);
  font: 600 calc(15px * var(--elo-font-scale))/1.3 var(--elo-font-head);
}

body[data-elo-look="sziget"] .szb-banner { margin-bottom: 12px; }

body[data-elo-look="sziget"] .szb-panel .szb-empty {
  padding: 4px 0 0;
  border: 0;
}

/* ---------------------------------------------------------- gombok */
body[data-elo-look="sziget"] .szb-link-btn,
body[data-elo-look="sziget"] .szb-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--elo-water) 55%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--elo-water) 14%, transparent);
  color: var(--elo-ink);
  font: 600 calc(14px * var(--elo-font-scale))/1 var(--elo-font-body);
  cursor: pointer;
}

body[data-elo-look="sziget"] .szb-cta {
  min-height: 48px;
  margin-top: 4px;
  border-color: var(--elo-water);
  background: color-mix(in srgb, var(--elo-water) 26%, transparent);
}

body[data-elo-look="sziget"] .szb-link-btn:is(:hover, :focus-visible),
body[data-elo-look="sziget"] .szb-cta:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--elo-water) 32%, transparent);
}

body[data-elo-look="sziget"] .szb-foot-link { margin: 14px 2px 0; }

/* ---------------------------------------------------------- hero (Kert, Biztonság) */
body[data-elo-look="sziget"] .szb-hero {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 18px 18px 16px 22px;
  overflow: hidden;
}

body[data-elo-look="sziget"] .szb-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--elo-tone, var(--elo-line));
}

body[data-elo-look="sziget"] .szb-hero-title {
  margin: 0;
  font: 600 calc(21px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .szb-hero-run {
  margin: 0;
  color: var(--elo-mute);
  font: 500 calc(14px * var(--elo-font-scale))/1.3 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-hint {
  margin: 0;
  color: var(--elo-mute);
  font: 400 calc(12.5px * var(--elo-font-scale))/1.4 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-beats {
  display: grid;
  gap: 6px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
  color: var(--elo-mute);
  font: 400 calc(13.5px * var(--elo-font-scale))/1.4 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-beats li {
  position: relative;
  padding-left: 14px;
}

body[data-elo-look="sziget"] .szb-beats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--elo-mute);
}

body[data-elo-look="sziget"] .szb-garden-top,
body[data-elo-look="sziget"] .szb-sec-top {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

@media (max-width: 760px) {
  body[data-elo-look="sziget"] .szb-garden-top,
  body[data-elo-look="sziget"] .szb-sec-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

body[data-elo-look="sziget"] .szb-mini { min-height: 124px; }
body[data-elo-look="sziget"] .szb-pump { min-height: 0; }

/* Telefonon a két oszlopos csempe szűk: az ikon és a jelölő a cím fölé kerül, a cím a teljes szélességet
 * kapja, így a „Talajnedvesség” és az „Esőérzékelő” nem törik szó közepén. */
@media (max-width: 430px) {
  body[data-elo-look="sziget"] .szb-mini .szb-card-top {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }

  body[data-elo-look="sziget"] .szb-mini .szb-card-id {
    order: 2;
    flex: 1 1 100%;
  }

  body[data-elo-look="sziget"] .szb-mini .szb-dot {
    order: 1;
    margin: 0 0 0 auto;
  }
}

/* ---------------------------------------------------------- panel */
body[data-elo-look="sziget"] .szb-panel {
  position: relative;
  min-width: 0;
  padding: 16px;
}

body[data-elo-look="sziget"] .szb-panel-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 600 calc(15px * var(--elo-font-scale))/1.2 var(--elo-font-head);
}

body[data-elo-look="sziget"] .szb-panel-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--elo-secure) 22%, transparent);
  color: var(--elo-secure);
}

body[data-elo-look="sziget"] .szb-events {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-elo-look="sziget"] .szb-events li {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-elo-look="sziget"] .szb-events li > span {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

body[data-elo-look="sziget"] .szb-events small {
  color: var(--elo-mute);
  font-size: calc(12.5px * var(--elo-font-scale));
}

/* ---------------------------------------------------------- Továbbiak csempe */
body[data-elo-look="sziget"] .szb-tile {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform calc(0.28s * var(--elo-motion)) cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
  --elo-c: var(--elo-water);
}

body[data-elo-look="sziget"] .szb-tile:is(:hover, :focus-visible) {
  transform: translateY(calc(-2px * var(--elo-motion)));
  border-color: color-mix(in srgb, var(--elo-water) 55%, var(--szb-edge));
}

body[data-elo-look="sziget"] .szb-tile-text {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

body[data-elo-look="sziget"] .szb-tile-text b {
  font: 600 calc(15px * var(--elo-font-scale))/1.25 var(--elo-font-head);
}

body[data-elo-look="sziget"] .szb-tile-text small {
  color: var(--elo-mute);
  font: 400 calc(12.5px * var(--elo-font-scale))/1.35 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-tile-go { color: var(--elo-mute); }
/* Élő otthon 2 · Sziget B: egységes rács (OW-03) és az Eszközök lap összecsukott szakaszai.
 *
 * A kártyarács CSS grid: minden csoport ugyanazokkal az oszlopsávokkal rajzol, így a kártyák
 * csoportok között is egymás alá igazodnak, a sor végén nincs széthúzott vagy elszórt kártya.
 * Telefonon (<=520 px) a korábbi kétoszlopos elrendezés marad. Az összecsukott szakaszok
 * (Felismert, még nem csatlakoztatott eszközök; Hálózati jelenlét) csak sorokat adnak, kártyát nem.
 */
body[data-elo-look="sziget"] .szb-grid:not(.szb-grid-zones):not(.szb-grid-stat):not(.szb-grid-tiles) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

body[data-elo-look="sziget"] .szb-grid:not(.szb-grid-zones):not(.szb-grid-stat):not(.szb-grid-tiles) > * {
  flex: none;
  min-width: 0;
  max-width: none;
}

body[data-elo-look="sziget"] .szb-grid > .szb-cam {
  grid-column: 1 / -1;
}

@media (min-width: 521px) {
  body[data-elo-look="sziget"] .szb-grid:not(.szb-grid-zones):not(.szb-grid-stat):not(.szb-grid-tiles) {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 12px;
  }

  body[data-elo-look="sziget"] .szb-grid > .szb-cam {
    grid-column: span 2;
  }
}

/* Gépen a kategóriák fejléces szakaszok, rácsban egymás mellé (UI-13: a korábbi CSS-oszlopos tördelés
 * a görgetőben a kártyákat rossz helyre rajzolta, ezért grid); egy szakasz (szűrt nézet) vagy üzenet
 * a teljes szélességet kapja. A szakaszok felül igazodnak, soronként a legmagasabb adja a magasságot. */
@media (min-width: 1000px) {
  body[data-elo-look="sziget"] .szb-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    gap: 0 24px;
    align-items: start;
  }

  body[data-elo-look="sziget"] .szb-list > .szb-group {
    min-width: 0;
    margin-bottom: 4px;
  }

  body[data-elo-look="sziget"] .szb-list > :is(.szb-group:only-child, .szb-empty) {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------- összecsukott szakaszok */
body[data-elo-look="sziget"] .szb-unlinked:not(:empty) {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

body[data-elo-look="sziget"] .szb-fold {
  border: 1px solid var(--szb-edge);
  border-radius: 16px;
  background: var(--szb-glass);
  box-shadow: inset 0 1px 0 var(--szb-edge-in);
  color: var(--elo-ink);
}

body[data-elo-look="sziget"] .szb-fold-h {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--elo-ink);
  font: 600 calc(13.5px * var(--elo-font-scale))/1.25 var(--elo-font-body);
  text-align: left;
  cursor: pointer;
}

body[data-elo-look="sziget"] .szb-fold-h:is(:hover, :focus-visible) {
  background: var(--szb-chip);
}

body[data-elo-look="sziget"] .szb-fold-t {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .szb-fold-n {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--szb-chip);
  color: var(--elo-mute);
  font: 600 calc(12px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="sziget"] .szb-fold-ch {
  flex: none;
  display: grid;
  color: var(--elo-mute);
}

body[data-elo-look="sziget"] .szb-fold-ch svg {
  transition: transform calc(0.25s * var(--elo-motion)) ease;
}

body[data-elo-look="sziget"] .szb-fold-h[aria-expanded="true"] .szb-fold-ch svg {
  transform: rotate(90deg);
}

body[data-elo-look="sziget"] .szb-fold-body {
  display: grid;
  gap: 14px;
  padding: 2px 14px 14px;
}

body[data-elo-look="sziget"] .szb-fold-body .szb-section-h {
  margin: 8px 2px 6px;
}

body[data-elo-look="sziget"] .szb-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 6px 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

body[data-elo-look="sziget"] .szb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 5px 10px;
  border-radius: 12px;
  background: var(--szb-chip);
}

body[data-elo-look="sziget"] .szb-row .szb-medal {
  width: 32px;
  height: 32px;
}

body[data-elo-look="sziget"] .szb-row .szb-medal svg {
  width: 20px;
  height: 20px;
}

body[data-elo-look="sziget"] .szb-row-id {
  display: grid;
  min-width: 0;
}

body[data-elo-look="sziget"] .szb-row-id b {
  overflow: hidden;
  font: 600 calc(13px * var(--elo-font-scale))/1.25 var(--elo-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="sziget"] .szb-row-id b em {
  color: var(--elo-mute);
  font-style: normal;
  font-weight: 500;
}

body[data-elo-look="sziget"] .szb-row-id small {
  overflow: hidden;
  color: var(--elo-mute);
  font: 400 calc(11.5px * var(--elo-font-scale))/1.25 var(--elo-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="sziget"] .szb-row-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--elo-mute);
  font: 500 calc(12px * var(--elo-font-scale))/1.2 var(--elo-font-body);
  text-align: right;
}

body[data-elo-look="sziget"] .szb-row[data-home="1"] .szb-row-state {
  color: var(--elo-ink);
}

/* A jelenlét-sor állapota hosszabb („Nincs otthon · utoljára …”): a név alatt kap helyet. */
body[data-elo-look="sziget"] .szb-row[data-home] {
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 0;
}

body[data-elo-look="sziget"] .szb-row[data-home] .szb-row-state {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}

body[data-elo-look="sziget"] .szb-row[data-home] .szb-medal {
  grid-row: 1 / span 2;
}

@media (max-width: 520px) {
  body[data-elo-look="sziget"] .szb-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body[data-elo-look="sziget"] .szb-row-state {
    grid-column: 2;
    justify-self: start;
  }
}
/* Élő otthon 2 · Sziget B: Energia lap (csomópontok és áramlás).
 *
 * A diagram egy 5x3-as CSS-rács: fent a napelem, lent akkumulátor · ház · hálózat, közöttük a
 * kapcsolatok. Az áramlás egy ismétlődő pontsor, amelynek egyetlen periódusnyi `transform`-ja fut
 * (nincs stroke-dashoffset, nincs layout-animáció). Irány nélküli (üres `data-dir`) kapcsolat áll.
 */
body[data-elo-look="sziget"] .szb-panel-flow {
  padding: 22px 12px 18px;
}

body[data-elo-look="sziget"] .szb-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(26px, 0.55fr) minmax(0, 1fr) minmax(26px, 0.55fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(44px, 70px) auto;
  align-items: center;
  justify-items: center;
}

body[data-elo-look="sziget"] .szb-node[data-node="pv"] { grid-area: 1 / 3; --szb-nc: var(--elo-energy); }
body[data-elo-look="sziget"] .szb-node[data-node="battery"] { grid-area: 3 / 1; --szb-nc: var(--elo-plant); }
body[data-elo-look="sziget"] .szb-node[data-node="home"] { grid-area: 3 / 3; --szb-nc: var(--elo-water); }
body[data-elo-look="sziget"] .szb-node[data-node="grid"] { grid-area: 3 / 5; --szb-nc: var(--elo-secure); }
body[data-elo-look="sziget"] .szb-link-v { grid-area: 2 / 3; --szb-lc: var(--elo-energy); }
body[data-elo-look="sziget"] .szb-link-l { grid-area: 3 / 2; --szb-lc: var(--elo-plant); }
body[data-elo-look="sziget"] .szb-link-r { grid-area: 3 / 4; --szb-lc: var(--elo-secure); }

body[data-elo-look="sziget"] .szb-node {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

body[data-elo-look="sziget"] .szb-node-ic {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 4px;
  border: 1.5px solid color-mix(in srgb, var(--szb-nc) 55%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    color-mix(in srgb, var(--szb-nc) calc(18% * var(--elo-k)), transparent);
  color: color-mix(in srgb, var(--szb-nc) 88%, var(--elo-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-elo-look="sziget"] .szb-node[data-flow="1"] .szb-node-ic {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 4px color-mix(in srgb, var(--szb-nc) 14%, transparent);
}

body[data-elo-look="sziget"] .szb-node-v {
  font: 600 calc(22px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .szb-node-v.is-empty {
  color: var(--elo-mute);
  font-size: calc(14px * var(--elo-font-scale));
  font-weight: 500;
}

body[data-elo-look="sziget"] .szb-node-l {
  color: var(--elo-ink);
  font: 500 calc(13px * var(--elo-font-scale))/1.2 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-node-x,
body[data-elo-look="sziget"] .szb-node-s {
  color: var(--elo-mute);
  font: 400 calc(11.5px * var(--elo-font-scale))/1.3 var(--elo-font-body);
}

body[data-elo-look="sziget"] .szb-node[data-fresh="stale"] .szb-node-v { color: var(--elo-mute); }

body[data-elo-look="sziget"] .szb-link {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--elo-line) 80%, transparent);
  border-radius: 2px;
}

body[data-elo-look="sziget"] .szb-link-h { width: 100%; height: 2px; }
body[data-elo-look="sziget"] .szb-link-v { width: 2px; height: 100%; }

body[data-elo-look="sziget"] .szb-link i {
  position: absolute;
  display: none;
}

body[data-elo-look="sziget"] .szb-link[data-dir] i { display: block; }
body[data-elo-look="sziget"] .szb-link[data-dir=""] i { display: none; }

body[data-elo-look="sziget"] .szb-link-h i {
  top: -3px;
  height: 8px;
  width: calc(100% + 16px);
  background: radial-gradient(circle, var(--szb-lc) 2.4px, transparent 3px) 0 0 / 16px 8px repeat-x;
}

body[data-elo-look="sziget"] .szb-link-v i {
  left: -3px;
  width: 8px;
  height: calc(100% + 16px);
  background: radial-gradient(circle, var(--szb-lc) 2.4px, transparent 3px) 0 0 / 8px 16px repeat-y;
}

body[data-elo-look="sziget"] .szb-link[data-dir="right"] i { left: -16px; animation: szb-flow-x calc(1.1s * var(--elo-speed, 1)) linear infinite; }
body[data-elo-look="sziget"] .szb-link[data-dir="left"] i { left: 0; animation: szb-flow-nx calc(1.1s * var(--elo-speed, 1)) linear infinite; }
body[data-elo-look="sziget"] .szb-link[data-dir="down"] i { top: -16px; animation: szb-flow-y calc(1.1s * var(--elo-speed, 1)) linear infinite; }
body[data-elo-look="sziget"] .szb-link[data-dir="up"] i { top: 0; animation: szb-flow-ny calc(1.1s * var(--elo-speed, 1)) linear infinite; }

body[data-elo-look="sziget"] .szb-link i { animation-play-state: var(--elo-run); }

@keyframes szb-flow-x { from { transform: translateX(0); } to { transform: translateX(16px); } }
@keyframes szb-flow-nx { from { transform: translateX(0); } to { transform: translateX(-16px); } }
@keyframes szb-flow-y { from { transform: translateY(0); } to { transform: translateY(16px); } }
@keyframes szb-flow-ny { from { transform: translateY(0); } to { transform: translateY(-16px); } }

@media (max-width: 520px) {
  body[data-elo-look="sziget"] .szb-node-ic { width: 50px; height: 50px; border-radius: 16px; }
  body[data-elo-look="sziget"] .szb-node-v { font-size: calc(18px * var(--elo-font-scale)); }
  body[data-elo-look="sziget"] .szb-panel-flow { padding: 18px 6px 14px; }
}
/* Élő otthon 2 · Sziget B: a classic hordozón élő oldalak (Beállítások, Programok, Automatika, Napló,
 * Szerver, Vezérlőközpont, Összefoglaló, Home Assistant, felismerés, Öntözés, Jelenlét) Sziget-stílusa.
 *
 * A tartalom és a logika a classic oldalaké; itt csak a réteg (a világ fölött), az üveges felület és a
 * kontraszt változik. A felületek a tokenekből színeződnek (`--elo-s1` fél-áttetsző üveg), a keretet
 * (fejléc, dokk) az A rész adja.
 */
body[data-elo-look="sziget"][data-elo-hosted="on"] {
  --elo-s1: color-mix(in srgb, var(--szb-glass-solid) 90%, transparent);
  --elo-s2: color-mix(in srgb, var(--szb-s2-solid) 92%, transparent);
}

body[data-elo-look="sziget"] {
  --szb-s2-solid: #14233A;
}

body[data-elo-look="sziget"][data-elo-resolved="day"] {
  --szb-s2-solid: #EAF1F8;
}

/* a classic panel a világ és a sziget fölött görget (a dokk és a fejléc 30-on marad) */
body[data-elo-look="sziget"][data-elo-hosted="on"] main {
  position: relative;
  z-index: 6;
}

body[data-elo-look="sziget"][data-elo-hosted="on"] main > :not(#eloRoot):not(#emergencyLockBar) {
  border-radius: 20px;
}

body[data-elo-look="sziget"][data-elo-hosted="on"] .elo-set-root > section,
body[data-elo-look="sziget"][data-elo-hosted="on"] .elo-set-list > * {
  border-color: var(--szb-edge);
  border-radius: 18px;
  box-shadow: var(--szb-shadow);
}

body[data-elo-look="sziget"][data-elo-hosted="on"] main :is(h1, h2, h3) {
  font-family: var(--elo-font-head);
}

/* Apró betűk a classic hordozón (Összefoglaló, Napló, Vezérlőközpont): legalább 11 px, a betűméret-szorzóval. */
body[data-elo-look="sziget"][data-elo-hosted="on"] main :is(small, em, .digest-kicker, .log-kind, .log-level) {
  font-size: max(11px, calc(11px * var(--elo-font-scale)));
}

/* A „Eszközök felismerése és párosítása” oldal két listája telefonon belső görgetést kap: a 64 eszközös
 * rács eddig ~35 000 px magas volt, így a lap alja és a többi szakasz elérhetetlen volt. */
@media (max-width: 760px) {
  body[data-elo-look="sziget"][data-elo-hosted="on"] :is(#entityDeviceGrid, #deviceGrid) {
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* Élő otthon 2 · Sziget B: ikonok stílusa és állapot-animációi.
 *
 * A rajz vonalas-kétszínű: a `.fa` halvány kitöltés, az `.fs` tömör folt. A mozgó részek `.sz-*`
 * osztályt kapnak, és csak akkor mozognak, ha a gazdakártya jelzi: `data-run="1"` (az eszköz ténylegesen
 * dolgozik: permet, forgó járókerék, töltés), `data-flow="1"` (energiacsomópont áramlik) vagy
 * `data-live="1"` (csak a jelzőfény pislog). Csak transform/opacity; Ki módban a #eloRoot animation:none
 * biztosítéka, rejtett lapnál a `--elo-run` megállít mindent.
 */
body[data-elo-look="sziget"] .elo-glyph {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

body[data-elo-look="sziget"] .elo-glyph .fa { fill: currentColor; fill-opacity: 0.2; stroke: none; }
body[data-elo-look="sziget"] .elo-glyph .fs { fill: currentColor; stroke: none; }
body[data-elo-look="sziget"] .elo-glyph [class*="sz-"] { transform-box: fill-box; transform-origin: center; }
body[data-elo-look="sziget"] .elo-glyph .sz-needle { transform-box: view-box; transform-origin: 12px 12.5px; }
body[data-elo-look="sziget"] .elo-glyph .sz-level { transform-origin: 50% 100%; }

/* nyugalmi, finom jelzőfény: csak friss kapcsolatnál */
body[data-elo-look="sziget"] [data-live="1"] .elo-glyph .sz-blink {
  animation: szb-blink calc(2.6s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] [data-live="1"] .elo-glyph .sz-ripple {
  animation: szb-ripple calc(2.4s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] [data-live="1"] .elo-glyph .sz-ripple.sz-d2 { animation-delay: 0.4s; }
body[data-elo-look="sziget"] [data-live="1"] .elo-glyph .sz-ripple.sz-d3 { animation-delay: 0.8s; }

body[data-elo-look="sziget"] [data-live="1"] .elo-glyph .sz-throb {
  animation: szb-throb calc(2s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] [data-live="1"] .elo-glyph .sz-drift {
  animation: szb-drift calc(7s * var(--elo-speed, 1)) ease-in-out infinite alternate;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] [data-live="1"] .elo-glyph .sz-spin-slow {
  animation: szb-spin calc(18s * var(--elo-speed, 1)) linear infinite;
  animation-play-state: var(--elo-run);
}

/* munka közben: a rajz dolgozik */
body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-spin {
  animation: szb-spin calc(2.4s * var(--elo-speed, 1)) linear infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-spin-slow {
  animation: szb-spin calc(9s * var(--elo-speed, 1)) linear infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-fall {
  animation: szb-fall calc(1.5s * var(--elo-speed, 1)) ease-in infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-fall.sz-d2 { animation-delay: 0.45s; }
body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-fall.sz-d3 { animation-delay: 0.9s; }

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-spray {
  animation: szb-spray calc(1.6s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-glow {
  animation: szb-glow calc(1.8s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-level {
  animation: szb-level calc(2.2s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-glint {
  animation: szb-glow calc(2.4s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-rise {
  animation: szb-rise-up calc(1.9s * var(--elo-speed, 1)) ease-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-rise.sz-d2 { animation-delay: 0.6s; }

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-flow {
  animation: szb-air calc(1.7s * var(--elo-speed, 1)) ease-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-flow.sz-d2 { animation-delay: 0.3s; }
body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-flow.sz-d3 { animation-delay: 0.6s; }

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-wave {
  animation: szb-wave calc(2.2s * var(--elo-speed, 1)) ease-in-out infinite alternate;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-needle {
  animation: szb-needle calc(3s * var(--elo-speed, 1)) ease-in-out infinite alternate;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-merc {
  animation: szb-glow calc(2.6s * var(--elo-speed, 1)) ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] :is([data-run="1"], [data-flow="1"]) .elo-glyph .sz-scan {
  animation: szb-scan calc(2.4s * var(--elo-speed, 1)) ease-in-out infinite alternate;
  animation-play-state: var(--elo-run);
}

@keyframes szb-spin { to { transform: rotate(360deg); } }
@keyframes szb-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes szb-ripple { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes szb-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes szb-drift { from { transform: translateX(-0.8px); } to { transform: translateX(0.8px); } }
@keyframes szb-fall { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
@keyframes szb-spray { 0%, 100% { opacity: 0.35; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes szb-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes szb-level { 0%, 100% { transform: scaleY(0.82); } 50% { transform: scaleY(1); } }
@keyframes szb-rise-up { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-3px); opacity: 0; } }
@keyframes szb-air { 0% { transform: translateY(-2px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
@keyframes szb-wave { from { transform: translateX(-1px) scaleY(0.8); } to { transform: translateX(1px) scaleY(1.1); } }
@keyframes szb-needle { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }
@keyframes szb-scan { from { transform: translateX(0); opacity: 0.3; } to { transform: translateX(9px); opacity: 0.9; } }
/* Élő otthon 2 · Sziget B: kezelőlap (sheet), leállítósáv, fátyol, toast és dialógusok.
 *
 * A közös felületek logikája és jelölése változatlan (95_elo_*); itt csak a tokenek és a megjelenés
 * kerülnek át a Sziget üvegére. A leállítósáv (z-index 2560) minden lapon, nyitott kezelőlap és
 * dialógus fölött is látszik és kattintható; a keret (A rész) a `--elo-stopbar-h` szerint helyet hagy
 * neki, ezért a sáv mindig a képernyő alján, a dokk alatt ül (teljes szélességben, min. 44 px gombok).
 */
body[data-elo-look="sziget"] {
  --elo-sheet-bg: linear-gradient(180deg, rgba(22, 36, 60, 0.97), rgba(11, 20, 36, 0.98));
  --elo-sheet-edge: rgba(170, 198, 236, 0.24);
  --elo-sheet-radius: 22px 22px 0 0;
  --elo-sheet-radius-wide: 24px;
  --elo-sheet-shadow: 0 -18px 50px -18px rgba(0, 0, 0, 0.75);
  --elo-scrim: rgba(3, 8, 18, 0.58);
  --elo-stop-bg: linear-gradient(180deg, rgba(44, 26, 22, 0.97), rgba(26, 16, 16, 0.98));
  --elo-stop-edge: #F28C66;
  --elo-stop-ink: #F4F7FB;
  --elo-stop-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.7);
  --elo-stop-inset: 0px;
  --szb-glass-solid: #101c30;
}

body[data-elo-look="sziget"][data-elo-resolved="day"] {
  --elo-sheet-bg: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(238, 244, 250, 0.98));
  --elo-sheet-edge: rgba(255, 255, 255, 0.9);
  --elo-sheet-shadow: 0 -18px 46px -18px rgba(20, 50, 80, 0.55);
  --elo-scrim: rgba(18, 36, 58, 0.42);
  --elo-stop-bg: linear-gradient(180deg, rgba(255, 251, 247, 0.98), rgba(253, 240, 232, 0.99));
  --elo-stop-edge: #B63E0B;
  --elo-stop-ink: #1C130E;
  --elo-stop-shadow: 0 -10px 30px -12px rgba(120, 50, 20, 0.45);
  --szb-glass-solid: #ffffff;
}

/* ---------------------------------------------------------- kezelőlap */
body[data-elo-look="sziget"] .elo-sheet {
  border-color: var(--elo-sheet-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

body[data-elo-look="sziget"] .elo-sheet-head h3 {
  font: 600 calc(18px * var(--elo-font-scale))/1.25 var(--elo-font-head);
}

body[data-elo-look="sziget"] .elo-sheet .elo-icon-btn {
  border-color: var(--szb-edge);
  border-radius: 14px;
  background: var(--szb-chip);
  color: var(--elo-ink);
}

@media (min-width: 640px) {
  body[data-elo-look="sziget"] .elo-sheet {
    top: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid var(--elo-sheet-edge);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  }

  body[data-elo-look="sziget"][data-elo-stopbar="on"] .elo-sheet {
    bottom: calc(var(--elo-stopbar-h, 62px) + 12px);
  }
}

/* telefon: az alsó lap a leállítósáv fölött végződik (a sáv most a képernyő alján ül) */
@media (max-width: 639px) {
  body[data-elo-look="sziget"][data-elo-stopbar="on"] .elo-sheet {
    bottom: calc(var(--elo-stopbar-h, 62px) + env(safe-area-inset-bottom));
    max-height: calc(86vh - var(--elo-stopbar-h, 62px));
  }

  body[data-elo-look="sziget"][data-elo-stopbar="on"] .toast {
    bottom: calc(var(--elo-stopbar-h, 62px) + 96px + env(safe-area-inset-bottom));
  }

  body[data-elo-look="sziget"][data-elo-stopbar="on"] .demo-mode-banner {
    bottom: calc(var(--elo-stopbar-h, 62px) + 90px + env(safe-area-inset-bottom));
  }
}

body[data-elo-look="sziget"] .elo-sheet :is(.elo-chip, .elo-dsheet-btn) {
  border-color: var(--szb-edge);
}

body[data-elo-look="sziget"] .elo-sheet .elo-chip.on {
  border-color: var(--elo-water);
  background: color-mix(in srgb, var(--elo-water) 24%, transparent);
  color: var(--elo-ink);
}

/* a dokk mindig a leállítósáv fölött ül (minden szélességen; a keret --sza-sb szerint helyet hagy) */
body[data-elo-look="sziget"][data-elo-stopbar="on"] .sza-dock {
  bottom: var(--elo-stopbar-h, 62px);
}

/* ---------------------------------------------------------- leállítósáv */
body[data-elo-look="sziget"] .elo-stopbar {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--elo-stop-edge);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body[data-elo-look="sziget"] .elo-stopbar-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 calc(14px * var(--elo-font-scale))/1.3 var(--elo-font-body);
}

body[data-elo-look="sziget"] .elo-stopbar-text::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--elo-stop-edge);
  animation: szb-live 1.8s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="sziget"] .elo-stopbar-stop {
  border-color: var(--elo-stop-ink);
  background: transparent;
  color: var(--elo-stop-ink);
}

body[data-elo-look="sziget"] .elo-stopbar-emerg {
  border-color: var(--elo-stop-edge);
  background: var(--elo-stop-edge);
  color: #fff;
}

@keyframes szb-live { 0%, 100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }

@media (min-width: 640px) {
  body[data-elo-look="sziget"] .elo-stopbar {
    bottom: 0;
    padding-left: max(24px, calc((100vw - 900px) / 2));
    padding-right: max(24px, calc((100vw - 900px) / 2));
  }
}

/* ---------------------------------------------------------- dialógusok */
body[data-elo-look="sziget"] dialog {
  border-color: var(--szb-edge);
  border-radius: 22px;
  background: var(--elo-s2);
  color: var(--elo-ink);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}

body[data-elo-look="sziget"] dialog::backdrop {
  background: var(--elo-scrim);
}

body[data-elo-look="sziget"] dialog :is(button, [role="button"]):not(.selected):not(.primary) {
  border-color: var(--szb-edge);
}

body[data-elo-look="sziget"] #displayDialog .segmented button.selected,
body[data-elo-look="sziget"] #displayDialog .segmented button[aria-pressed="true"] {
  border-color: var(--elo-water);
  background: color-mix(in srgb, var(--elo-water) 24%, transparent);
  color: var(--elo-ink);
}
/* Élő otthon 2 · Sziget B: egységes kártyaméretek (OW-04).
 *
 * Elv: egy rácson belül az azonos szerepű kártyák egyforma szélesek és egyforma magasak. A magasságot
 * a rács adja (`grid-auto-rows`), nem a tartalom: a hosszú név, alcím, érték és megjegyzés vágódik
 * (a teljes szöveg a kártya `title` jelölésében és a kezelőlapon marad), a jelzők és a lábléc fix helyen
 * ülnek. A nagyobb kártya (kamera) a rács egész számú cellája (2x1). Telefonon (<=430 px) a kártya
 * tetején az ikon és a jelző egy sorban, alatta a teljes szélességű név (mint eddig a minik).
 */
body[data-elo-look="sziget"] {
  --szb-card-h: 204px;
  --szb-tile-h: 88px;
  --szb-row-h: 58px;
  --szb-fold-h: 52px;
}

@media (max-width: 430px) {
  body[data-elo-look="sziget"] {
    --szb-card-h: 232px;
  }
}

/* ---------------------------------------------------------- kártyarácsok: fix sormagasság */
body[data-elo-look="sziget"] .szb-grid:not(.szb-grid-tiles) {
  grid-auto-rows: var(--szb-card-h);
}

body[data-elo-look="sziget"] .szb-grid:not(.szb-grid-tiles) > .szb-card {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

body[data-elo-look="sziget"] .szb-grid > .szb-cam,
body[data-elo-look="sziget"] .szb-grid > .szb-mini {
  min-height: 0;
}

/* A kártya szövegei: a név legfeljebb két, az alcím, a megjegyzés egy, az érték két sor. */
body[data-elo-look="sziget"] .szb-card .szb-name,
body[data-elo-look="sziget"] .szb-card .szb-val {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

body[data-elo-look="sziget"] .szb-card .szb-sub,
body[data-elo-look="sziget"] .szb-card .szb-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="sziget"] .szb-card .szb-card-mid {
  overflow: hidden;
  max-height: 64px;
}

/* A lábléc egy sor: a második jelző (régi adat, csak olvasható) vágódik, a címkében marad. */
body[data-elo-look="sziget"] .szb-card .szb-card-foot {
  max-height: 26px;
  overflow: hidden;
}

body[data-elo-look="sziget"] .szb-card .szb-card-foot > * {
  white-space: nowrap;
}

@media (max-width: 430px) {
  body[data-elo-look="sziget"] .szb-grid .szb-card .szb-card-top {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }

  body[data-elo-look="sziget"] .szb-grid .szb-card .szb-card-id {
    order: 2;
    flex: 1 1 100%;
  }

  body[data-elo-look="sziget"] .szb-grid .szb-card .szb-dot {
    order: 1;
    margin: 0 0 0 auto;
  }

  body[data-elo-look="sziget"] .szb-grid .szb-card .szb-note {
    display: none;
  }
}

/* ---------------------------------------------------------- Továbbiak csempék */
body[data-elo-look="sziget"] .szb-grid-tiles {
  grid-auto-rows: var(--szb-tile-h);
}

body[data-elo-look="sziget"] .szb-grid-tiles > .szb-tile {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-elo-look="sziget"] .szb-tile-text b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="sziget"] .szb-tile-text small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------------------------------------------------------- összecsukott szakaszok és sorok */
body[data-elo-look="sziget"] .szb-fold-h {
  height: var(--szb-fold-h);
  min-height: var(--szb-fold-h);
}

body[data-elo-look="sziget"] .szb-fold-t {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body[data-elo-look="sziget"] .szb-rows {
  grid-auto-rows: var(--szb-row-h);
}

body[data-elo-look="sziget"] .szb-row {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-elo-look="sziget"] .szb-row-state {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A Kert és Biztonság lap felső párja (döntés + szivattyú / védelem + események) egyforma magas. */
body[data-elo-look="sziget"] .szb-garden-top,
body[data-elo-look="sziget"] .szb-sec-top {
  align-items: stretch;
}

/* A „Programok” hivatkozás (Kert állapot rács) gombja 44 px magas: a lábléc ott nagyobb helyet kap. */
body[data-elo-look="sziget"] .szb-grid-stat .szb-card .szb-card-foot {
  max-height: 48px;
}
/* Kezdőlap-komponáló felületei
 * ---------------------------------------------------------------------------
 * A kártyák listáját a szerver DashboardComposer modulja adja, ezért itt csak
 * három új dolog jelenik meg: a csoportfejléc, a kapcsolatjelzés és a
 * capability sémából épülő általános kártya. Minden más panelstílus a meglévő
 * rétegekből öröklődik, hogy a három arculat változatlanul érvényes maradjon.
 */

.dashboard-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 2px 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dashboard-group-head b { color: var(--ink, inherit); font-weight: 800; }
.dashboard-group-head small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

/* A kapcsolat állapota a kártya fejlécében. Csak akkor van jelen, ha mondani
 * akar valamit: a bizonyítottan élő kapcsolat nem kap külön címkét. */
.card-connection {
  flex: 0 0 auto;
  max-width: 100%;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  overflow-wrap: anywhere;
}

.card-connection.ok { color: var(--lg-success, var(--ok)); }
.card-connection.warn {
  color: var(--lg-solar, var(--muted));
  background: color-mix(in srgb, var(--lg-solar, #c8891f) 16%, transparent);
}
.card-connection.bad {
  color: var(--lg-danger, var(--bad));
  background: color-mix(in srgb, var(--lg-danger, #c0392b) 16%, transparent);
}

/* A megszakadt kapcsolatú kártya látszik, de nem tolakszik: a tartalma
 * halványabb, a jelzése viszont teljes erővel olvasható. */
[data-card-connection-state]:not([data-card-connection-state="connected"]) .entity-components,
[data-card-connection-state]:not([data-card-connection-state="connected"]) .balance-grid {
  opacity: .78;
}

.composed-card { min-width: 0; }
.composed-card.is-unavailable .entity-components { opacity: .78; }

.composed-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.composed-card-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  color: var(--muted);
  font-size: 12px;
}

/* Biztonsági esemény: a komponáló a lap tetejére emeli, a felület pedig
 * láthatóvá teszi, hogy miért van ott. */
[data-page-section="dashboard"].is-card-alert {
  outline: 2px solid color-mix(in srgb, var(--lg-danger, #c0392b) 65%, transparent);
  outline-offset: -2px;
}

[data-page-section="dashboard"].is-card-pinned .panel-head h2::after {
  content: " ★";
  color: var(--lg-solar, var(--muted));
  font-size: .78em;
}

#dashboardCompositionState { font-size: 11px; }

@media (max-width: 760px) {
  .dashboard-group-head { margin: 4px 0 0; font-size: 12px; }
  .composed-card-meta { margin: 8px 0; }
}
/* Élő otthon 2 · Pulzus A: a Biztonság blokk kameraképe az Otthon lapon.
 *
 * A kameraképet a közös, állandó elem adja (95_elo_26_camera.css); a blokk tetején ül a csempék felett.
 * Telefonon a Biztonság blokk a középső panel után jön (order), tableten és gépen a rács helye marad.
 */
body[data-elo-look="pulzus"] .plz-cam {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-cam .elo-cam-view {
  border: 1px solid var(--plz-edge);
  border-radius: 16px;
}

body[data-elo-look="pulzus"] .plz-cam .elo-cam-tile figcaption b {
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plz-cam .elo-cam-status {
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-cam .elo-cam-status.bad {
  color: var(--elo-warn);
}

body[data-elo-look="pulzus"] .plz-cam .elo-cam-more {
  border-color: var(--plz-edge-strong);
  color: var(--elo-ink);
}

@media (max-width: 719px) {
  body[data-elo-look="pulzus"] .plz-has-cam .plz-core {
    order: -2;
  }

  body[data-elo-look="pulzus"] .plz-has-cam .plz-c-biztonsag {
    order: -1;
  }
}
/* Élő otthon 2 · Pulzus A: az Otthon lap középső része (horizont-panel, mérősávok, „Ma hátra van”).
 *
 * A középső elem széles, vízszintes üvegpanel: idő, dátum, állapotmondat, a nap útja és négy
 * vízszintes mérősáv. Nincs benne kör, gyűrű vagy ív. A panel konténer-egységekkel (cqw) méreteződik.
 */
body[data-elo-look="pulzus"] .plz-home {
  display: grid;
  gap: 14px;
}

body[data-elo-look="pulzus"] .plz-core {
  display: grid;
  gap: 14px;
  align-content: center;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-horizon {
  container-type: inline-size;
  display: grid;
  gap: 14px;
  padding: 18px 20px 20px;
  border-radius: 24px;
  background: var(--plz-glass);
  border: 1px solid var(--plz-edge);
  box-shadow: var(--plz-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plz-horizon-head {
  display: grid;
  gap: 8px 22px;
  align-items: end;
}

body[data-elo-look="pulzus"] .plz-time {
  display: grid;
  gap: 2px;
}

body[data-elo-look="pulzus"] .plz-clock {
  font: 700 clamp(52px, 17cqw, 92px)/0.95 var(--elo-font-head);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="pulzus"] .plz-date {
  font: 500 calc(14px * var(--elo-font-scale))/1.3 var(--elo-font-body);
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-sentence {
  margin: 0;
  font: 600 calc(17px * var(--elo-font-scale))/1.32 var(--elo-font-head);
  text-wrap: balance;
}

/* A nap valós útja (napkelte–napnyugta): vízszintes vonal, csak nappal van jelölő. */
body[data-elo-look="pulzus"] .plz-sun-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  font: 500 calc(12px * var(--elo-font-scale))/1.2 var(--elo-font-body);
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-sun-path > span:not(.plz-sun-track) {
  flex: 0 0 auto;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plz-sun-track {
  position: relative;
  order: 3;
  flex: 1 1 100%;
  height: 2px;
  min-width: 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--plz-ink-rgb) / 0.08), rgb(var(--plz-ink-rgb) / 0.4) 50%, rgb(var(--plz-ink-rgb) / 0.08));
}

body[data-elo-look="pulzus"] .plz-sun-track i {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0) * 1%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgb(var(--plz-c-energia));
  box-shadow: 0 0 0 4px rgb(var(--plz-c-energia) / 0.2);
}

body[data-elo-look="pulzus"] .plz-sun-path[data-day="0"] {
  opacity: 0.85;
}

/* ---------------------------------------------------------- mérősávok */
body[data-elo-look="pulzus"] .plz-meters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

body[data-elo-look="pulzus"] .plz-meter {
  --m: var(--plz-c-kert);
  display: grid;
  gap: 7px;
  min-width: 0;
  align-content: start;
}

body[data-elo-look="pulzus"] .plz-meter[data-tone="energia"] { --m: var(--plz-c-energia); }
body[data-elo-look="pulzus"] .plz-meter[data-tone="biz"] { --m: var(--plz-c-biz); }
body[data-elo-look="pulzus"] .plz-meter[data-tone="otthon"] { --m: var(--plz-c-otthon); }
body[data-elo-look="pulzus"] .plz-meter[data-tone="warn"] { --m: var(--plz-c-warn); }
body[data-elo-look="pulzus"] .plz-meter[data-tone="bad"] { --m: var(--plz-c-bad); }

body[data-elo-look="pulzus"] .plz-meter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-meter-name {
  font: 600 calc(11px * var(--elo-font-scale))/1.2 var(--elo-font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-meter-val {
  font: 700 calc(24px * var(--elo-font-scale))/1 var(--elo-font-head);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--m));
  text-align: right;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-meter-val small {
  margin-left: 2px;
  font: 600 0.58em/1 var(--elo-font-head);
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-meter-val.is-text {
  font-size: calc(16px * var(--elo-font-scale));
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--elo-ink);
  flex: 1 1 100%;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: auto;
}

body[data-elo-look="pulzus"] .plz-meter-sub {
  font: 500 calc(12px * var(--elo-font-scale))/1.3 var(--elo-font-body);
  color: var(--plz-mute);
  overflow-wrap: break-word;
  hyphens: auto;
}

body[data-elo-look="pulzus"] .plz-bar {
  position: relative;
  display: block;
  height: 9px;
  border-radius: 5px;
  background: rgb(var(--plz-ink-rgb) / 0.12);
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plz-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgb(var(--plz-ink-rgb) / 0.18) calc(10% - 1px), rgb(var(--plz-ink-rgb) / 0.18) 10%);
  pointer-events: none;
}

body[data-elo-look="pulzus"] .plz-bar-fill > i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(calc(var(--p, 0) / 100));
  background: linear-gradient(90deg, rgb(var(--m) / 0.55), rgb(var(--m)));
  border-radius: 5px;
  transition: transform calc(1.2s * var(--elo-motion, 1)) var(--plz-ease);
}

body[data-elo-look="pulzus"] .plz-bar-none {
  background: none;
  border: 1px dashed rgb(var(--plz-ink-rgb) / 0.3);
}

body[data-elo-look="pulzus"] .plz-bar-none::after,
body[data-elo-look="pulzus"] .plz-bar-none > i {
  display: none;
}

body[data-elo-look="pulzus"] .plz-bar-seg {
  display: flex;
  gap: 3px;
  background: none;
  overflow: visible;
}

body[data-elo-look="pulzus"] .plz-bar-seg::after {
  display: none;
}

body[data-elo-look="pulzus"] .plz-bar-seg > i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 3px;
  background: rgb(var(--plz-ink-rgb) / 0.14);
}

body[data-elo-look="pulzus"] .plz-bar-seg > i[data-on] {
  background: rgb(var(--m));
}

body[data-elo-look="pulzus"] .plz-bar-scale {
  overflow: visible;
  background: linear-gradient(90deg, rgb(90 160 245 / 0.7), rgb(95 205 165 / 0.7) 38%, rgb(243 193 75 / 0.75) 68%, rgb(239 106 76 / 0.75));
}

body[data-elo-look="pulzus"] .plz-bar-scale::after {
  border-radius: 5px;
}

body[data-elo-look="pulzus"] .plz-bar-scale > i {
  position: absolute;
  top: -4px;
  left: calc(var(--p, 0) * 1%);
  width: 5px;
  height: 17px;
  margin-left: -2.5px;
  border-radius: 3px;
  background: rgb(var(--plz-ink-rgb));
  box-shadow: 0 0 0 2px var(--plz-glass-solid);
}

/* ---------------------------------------------------------- figyelmeztetések */
body[data-elo-look="pulzus"] .plz-warns {
  display: grid;
  gap: 8px;
}

body[data-elo-look="pulzus"] .plz-warn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 16px;
  background: var(--plz-glass-solid);
  border: 1px solid var(--plz-edge);
  border-left: 4px solid var(--plz-wait);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plz-warn[data-tone="off"] {
  border-left-color: var(--plz-off);
}

body[data-elo-look="pulzus"] .plz-warn div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-warn b {
  font: 600 calc(14px * var(--elo-font-scale))/1.25 var(--elo-font-head);
}

body[data-elo-look="pulzus"] .plz-warn span {
  font: 400 calc(12.5px * var(--elo-font-scale))/1.3 var(--elo-font-body);
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-warn-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--plz-edge-strong);
  background: var(--plz-tile);
  color: var(--elo-ink);
  font: 600 calc(13px * var(--elo-font-scale))/1 var(--elo-font-body);
  cursor: pointer;
}

/* ---------------------------------------------------------- Ma hátra van */
body[data-elo-look="pulzus"] .plz-ahead {
  padding: 12px 14px 14px;
  border-radius: 20px;
  background: var(--plz-glass);
  border: 1px solid var(--plz-edge);
  box-shadow: var(--plz-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  color: var(--elo-ink);
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-label {
  margin: 0 0 9px;
  font: 600 calc(11px * var(--elo-font-scale))/1.2 var(--elo-font-head);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-ahead-list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

body[data-elo-look="pulzus"] .plz-ahead-list::-webkit-scrollbar {
  display: none;
}

body[data-elo-look="pulzus"] .plz-ahead-list li {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-width: 148px;
  max-width: 230px;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--plz-tile);
  border: 1px solid var(--plz-edge);
  scroll-snap-align: start;
}

body[data-elo-look="pulzus"] .plz-ahead-list li[data-active="1"] {
  border-color: rgb(var(--plz-c-kert) / 0.7);
}

body[data-elo-look="pulzus"] .plz-ahead-list b {
  font: 700 calc(19px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="pulzus"] .plz-ahead-list span {
  font: 400 calc(12.5px * var(--elo-font-scale))/1.3 var(--elo-font-body);
  color: var(--plz-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plz-ahead-note {
  margin: 0;
  font: 400 calc(13.5px * var(--elo-font-scale))/1.4 var(--elo-font-body);
  color: var(--plz-mute);
}

@container (min-width: 400px) {
  body[data-elo-look="pulzus"] .plz-sun-path {
    flex-wrap: nowrap;
  }

  body[data-elo-look="pulzus"] .plz-sun-track {
    order: 0;
    flex: 1 1 auto;
  }
}
/* Élő otthon 2 · Pulzus A: az Otthon lap kategóriablokkjai, eszközcsempéi és az elrendezés méretenként.
 *
 * Telefon: egy oszlop (horizont-panel, „Ma hátra van”, négy blokk). Tablet: a panel teljes
 * szélességben, alatta 2x2 blokk. Gép (>=1100 px): három oszlop, a horizont-panel középen,
 * a négy kategóriablokk két-két oldalt, a magasságot a nézetablak adja.
 */
body[data-elo-look="pulzus"] .plz-cluster {
  --plz-cat: var(--plz-c-kert);
  align-self: start;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 14px;
  border-radius: 24px;
  background: var(--plz-glass);
  border: 1px solid var(--plz-edge);
  box-shadow: var(--plz-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plz-c-energia { --plz-cat: var(--plz-c-energia); }
body[data-elo-look="pulzus"] .plz-c-biztonsag { --plz-cat: var(--plz-c-biz); }
body[data-elo-look="pulzus"] .plz-c-otthon { --plz-cat: var(--plz-c-otthon); }

body[data-elo-look="pulzus"] .plz-cluster-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body[data-elo-look="pulzus"] .plz-cluster-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgb(var(--plz-cat) / 0.16);
  color: rgb(var(--plz-cat));
}

body[data-elo-look="pulzus"] .plz-cluster-head h2 {
  margin: 0;
  font: 600 calc(16px * var(--elo-font-scale))/1.2 var(--elo-font-head);
  overflow-wrap: break-word;
  hyphens: auto;
}

body[data-elo-look="pulzus"] .plz-cluster-head small {
  display: block;
  font: 400 calc(12px * var(--elo-font-scale))/1.3 var(--elo-font-body);
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-open,
body[data-elo-look="pulzus"] .plz-more {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgb(var(--plz-cat) / 0.55);
  background-color: var(--plz-glass-solid);
  background-image: linear-gradient(rgb(var(--plz-cat) / 0.1), rgb(var(--plz-cat) / 0.1));
  color: rgb(var(--plz-cat));
  font: 600 calc(13px * var(--elo-font-scale))/1 var(--elo-font-body);
  cursor: pointer;
  transition: transform 0.16s var(--plz-ease);
}

body[data-elo-look="pulzus"] .plz-open:hover,
body[data-elo-look="pulzus"] .plz-more:hover {
  background-image: linear-gradient(rgb(var(--plz-cat) / 0.2), rgb(var(--plz-cat) / 0.2));
}

body[data-elo-look="pulzus"] .plz-open:active,
body[data-elo-look="pulzus"] .plz-more:active {
  transform: scale(0.96);
}

body[data-elo-look="pulzus"] .plz-empty {
  margin: 0;
  padding: 14px 4px 8px;
  font: 400 calc(13.5px * var(--elo-font-scale))/1.4 var(--elo-font-body);
  color: var(--plz-mute);
}

/* A figyelmeztetés-lista „betöltés” / „nincs friss adat” sora a fotón áll: üveg háttér adja az olvasható
 * alapot (a figyelmeztetés-kártyákkal azonos), így a --plz-mute szöveg nem a sötét képre kerül (UI-05). */
body[data-elo-look="pulzus"] .plz-warns .plz-empty {
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--plz-edge);
  background: var(--plz-glass-solid);
}

/* ---------------------------------------------------------- csempék */
body[data-elo-look="pulzus"] .plz-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-elo-look="pulzus"] .plz-tile {
  --elo-sweep-a: 0.1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-width: 0;
  min-height: 120px;
  padding: 10px 11px 11px;
  border-radius: 18px;
  background: var(--plz-tile);
  border: 1px solid var(--plz-edge);
  color: var(--elo-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s var(--plz-ease), border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

body[data-elo-look="pulzus"] .plz-tile:hover {
  border-color: rgb(var(--plz-cat) / 0.6);
  transform: translateY(-2px);
}

body[data-elo-look="pulzus"] .plz-tile:active {
  transform: scale(0.98);
}

body[data-elo-look="pulzus"] .plz-tile[data-stale="1"] .plz-tile-val b {
  opacity: 0.65;
}

body[data-elo-look="pulzus"] .plz-tile-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-tile-ico {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgb(var(--plz-cat) / 0.15);
  color: rgb(var(--plz-cat));
}

body[data-elo-look="pulzus"] .plz-tile-name {
  display: grid;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-tile-name b {
  font: 600 calc(13.5px * var(--elo-font-scale))/1.2 var(--elo-font-head);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}

body[data-elo-look="pulzus"] .plz-tile-name small {
  font: 400 calc(11px * var(--elo-font-scale))/1.25 var(--elo-font-body);
  color: var(--plz-mute);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-elo-look="pulzus"] .plz-tile-val {
  display: grid;
  align-content: end;
  gap: 1px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plz-tile-val small {
  font: 500 calc(10.5px * var(--elo-font-scale))/1.2 var(--elo-font-body);
  color: var(--plz-mute);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-elo-look="pulzus"] .plz-tile-val b {
  font: 700 calc(21px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-elo-look="pulzus"] .plz-tile-val b.is-long {
  font-size: calc(16px * var(--elo-font-scale));
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-elo-look="pulzus"] .plz-tbar {
  display: block;
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: rgb(var(--plz-cat) / 0.18);
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plz-tbar i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(calc(var(--p, 0) / 100));
  background: rgb(var(--plz-cat));
  border-radius: 3px;
}

body[data-elo-look="pulzus"] .plz-spark {
  width: 100%;
  height: 26px;
  color: rgb(var(--plz-cat));
}

body[data-elo-look="pulzus"] .plz-spark-fill {
  fill: rgb(var(--plz-cat) / 0.14);
}

body[data-elo-look="pulzus"] .plz-tile-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  font: 500 calc(11px * var(--elo-font-scale))/1.2 var(--elo-font-body);
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-ro {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--plz-edge-strong);
  background: rgb(var(--plz-ink-rgb) / 0.08);
  color: var(--elo-ink);
  font: 600 calc(10.5px * var(--elo-font-scale))/1.2 var(--elo-font-body);
}

/* ---------------------------------------------------------- tablet */
@media (min-width: 720px) {
  body[data-elo-look="pulzus"] .plz-home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body[data-elo-look="pulzus"] .plz-core {
    grid-column: 1 / -1;
  }

  body[data-elo-look="pulzus"] .plz-horizon {
    padding: 22px 26px 24px;
  }

  body[data-elo-look="pulzus"] .plz-ahead-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    overflow: visible;
  }

  body[data-elo-look="pulzus"] .plz-ahead-list li {
    max-width: none;
  }
}

@container (min-width: 520px) {
  body[data-elo-look="pulzus"] .plz-meters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-elo-look="pulzus"] .plz-horizon-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------- gép */
@media (min-width: 1100px) {
  body[data-elo-look="pulzus"] .plz-home {
    grid-template-columns: minmax(300px, 1fr) minmax(430px, 1.2fr) minmax(300px, 1fr);
    grid-template-areas:
      "kert core energia"
      "biztonsag core otthon";
    align-content: center;
    min-height: calc(100dvh - 190px);
  }

  body[data-elo-look="pulzus"] .plz-core {
    grid-area: core;
    grid-column: auto;
    align-self: center;
  }

  body[data-elo-look="pulzus"] .plz-c-kert { grid-area: kert; }
  body[data-elo-look="pulzus"] .plz-c-energia { grid-area: energia; }
  body[data-elo-look="pulzus"] .plz-c-biztonsag { grid-area: biztonsag; }
  body[data-elo-look="pulzus"] .plz-c-otthon { grid-area: otthon; }

  body[data-elo-look="pulzus"] .plz-ahead-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* OW-02: a blokkok soronként egyforma magasak, a csempék a blokk szélességét töltik ki
   * (kevés csempe sem marad félszélesen). */
  body[data-elo-look="pulzus"] .plz-cluster {
    align-self: stretch;
  }

  body[data-elo-look="pulzus"] .plz-tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  }

  body[data-elo-look="pulzus"] .plz-tile {
    min-height: 108px;
    padding: 9px 10px 10px;
    gap: 6px;
  }
}

@media (min-width: 1100px) and (max-height: 860px) {
  body[data-elo-look="pulzus"] .plz-tile-name small {
    display: none;
  }

  body[data-elo-look="pulzus"] .plz-tile {
    min-height: 96px;
  }

  body[data-elo-look="pulzus"] .plz-cluster {
    padding: 12px;
    gap: 10px;
  }
}

@media (min-width: 1100px) and (min-height: 1000px) {
  body[data-elo-look="pulzus"] .plz-tile {
    min-height: 132px;
  }

  body[data-elo-look="pulzus"] .plz-horizon {
    padding: 26px 28px 28px;
    gap: 18px;
  }
}

@media (min-width: 1600px) {
  body[data-elo-look="pulzus"] .plz-home {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1900px) {
  body[data-elo-look="pulzus"] .plz-home {
    gap: 24px;
  }
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] .plz-open,
body[data-elo-look="pulzus"][data-elo-resolved="day"] .plz-more {
  color: var(--elo-ink);
  border-color: rgb(var(--plz-cat) / 0.7);
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] .plz-tile {
  --elo-sweep-a: 0.2;
}
/* Élő otthon 2 · Pulzus A: valós fotó-háttér (25_elo_63_pulzus_a_photo.js).
 *
 * Fotó módban (`data-plz-photo="on"` a [data-plz-sky] elemen) a fotó réteg a háttér; a procedurális
 * ég (alapszín, izzás, csillagok, tejút, nap, felhők, dombvonal) rejtve marad. Éjszaka a valós
 * fázisú hold a felső égbolton megmarad. Az esőréteg (.plz-sky-over) a meglévő módon működik, a fotót
 * pedig enyhén sötétíti. Mozgás: csak opacity (képváltás) és transform (lassú nagyítás, Teljes módban).
 */
body[data-elo-look="pulzus"] .plz-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body[data-elo-look="pulzus"] .plz-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity var(--plz-fade, 30s) ease-in-out;
}

body[data-elo-look="pulzus"] .plz-photo-img.is-on {
  opacity: 1;
}

/* Állóképernyőn a tó és a lejtő a keskeny kivágásban is látszik. */
@media (orientation: portrait) {
  body[data-elo-look="pulzus"] .plz-photo-img {
    object-position: 42% 50%;
  }
}

/* Lassú nagyítás-sodródás csak Teljes módban; Nyugodt és Ki módban nincs. */
body[data-elo-look="pulzus"][data-elo-motion="full"] .plz-photo-img {
  animation: plz-photo-drift 90s ease-in-out infinite alternate;
  animation-play-state: var(--elo-run, running);
}

@keyframes plz-photo-drift {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

body[data-elo-look="pulzus"][data-elo-motion="off"] .plz-photo-img,
body[data-elo-look="pulzus"][data-elo-motion="off"] .plz-photo-shade {
  transition: none;
}

/* Eső: az esőréteg marad, a fotó enyhén sötétedik. */
body[data-elo-look="pulzus"] .plz-photo-shade {
  position: absolute;
  inset: 0;
  background: rgb(10 16 26 / 0.22);
  opacity: 0;
  transition: opacity 8s ease-in-out;
}

body[data-elo-look="pulzus"] .plz-sky[data-plz-rainy="1"] .plz-photo-shade {
  opacity: 1;
}

/* Olvashatóság: lágy felső átmenet a fejléc mögött; nappal világos (sötét szöveg), éjjel sötét. */
body[data-elo-look="pulzus"] .plz-photo-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30vh;
  background: linear-gradient(180deg, rgb(4 8 16 / 0.42) 0%, rgb(4 8 16 / 0.14) 55%, rgb(4 8 16 / 0) 100%);
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] .plz-photo-top {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.34) 0%, rgb(255 255 255 / 0.12) 55%, rgb(255 255 255 / 0) 100%);
}

/* Fotó módban az eljárásos ég rétegei rejtve maradnak (a csillagok, a felhők és a nap is). */
body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"] > .plz-sky-base,
body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"] > .plz-sky-glow,
body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"] > .plz-layer,
body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"] > .plz-sun,
body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"] > .plz-clouds,
body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"] > .plz-land {
  display: none;
}

/* Nappal nincs hold a fotón; éjszaka a valós fázisú hold a felső égbolton marad. */
body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"] > .plz-moon {
  opacity: 0;
}

body[data-elo-look="pulzus"] .plz-sky[data-plz-photo="on"][data-plz-photo-night="1"] > .plz-moon {
  opacity: var(--plz-moon-o);
  top: clamp(7%, var(--plz-moon-y), 34%);
}
/* Élő otthon 2 · Pulzus A: egységes kártyaméretek az Otthon lapon (OW-04).
 *
 * A figyelmeztető sorok egyforma magasak (két sorra vágott szöveg, a teljes szöveg a `title`-ben), a
 * csempék rácsa fix sormagasságú, telefonon a teljes szélességű blokkok egységes magasságcsaládot
 * kapnak (a kamerás Biztonság blokk kivételével, amelynek magasságát a kép adja).
 */
body[data-elo-look="pulzus"] {
  --plz-warn-h: 76px;
  --plz-tile-h: 120px;
}

body[data-elo-look="pulzus"] .plz-warn {
  height: var(--plz-warn-h);
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plz-warn b,
body[data-elo-look="pulzus"] .plz-warn span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow-wrap: anywhere;
}

body[data-elo-look="pulzus"] .plz-warn span {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body[data-elo-look="pulzus"] .plz-tiles {
  grid-auto-rows: var(--plz-tile-h);
}

body[data-elo-look="pulzus"] .plz-tiles > .plz-tile {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plz-tile-name small,
body[data-elo-look="pulzus"] .plz-tile-foot > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 719px) {
  /* Egyoszlopos blokkok: a három csempés blokk (Kert, Energia, Otthon) egyforma magas. */
  body[data-elo-look="pulzus"] .plz-cluster:not(.plz-c-biztonsag) {
    min-height: 232px;
  }
}

@media (min-width: 1100px) {
  body[data-elo-look="pulzus"] {
    --plz-tile-h: 112px;
  }
}

@media (min-width: 1100px) and (max-height: 860px) {
  body[data-elo-look="pulzus"] {
    --plz-tile-h: 100px;
  }
}

@media (min-width: 1100px) and (min-height: 1000px) {
  body[data-elo-look="pulzus"] {
    --plz-tile-h: 132px;
  }
}
/* Élő otthon 2 · Pulzus A: valós égbolt és horizont (háttér rétegek).
 *
 * A színeket, a nap és a hold helyét, a csillagok és a tejút fényerejét a
 * 25_elo_61_pulzus_a_sky.js állítja a `[data-plz-sky]` elemen (`--plz-*` változók), a valós
 * napállásból és holdfázisból. Az alapértékek (nappali kék) a betöltés előtti villanást
 * akadályozzák meg. Mozgás: csak transform/opacity.
 */
body[data-elo-look="pulzus"] .plz-sky {
  --plz-hy: 62%;
  --plz-z: 46 110 188;
  --plz-m: 116 168 216;
  --plz-h: 200 224 238;
  --plz-glow: 255 240 215;
  --plz-glow-o: 0;
  --plz-sun-x: 70%;
  --plz-sun-y: 28%;
  --plz-sun-o: 1;
  --plz-sun-rgb: 255 247 230;
  --plz-moon-x: 30%;
  --plz-moon-y: 30%;
  --plz-moon-o: 0;
  --plz-moon-lit: 0.5;
  --plz-stars-dim: 0;
  --plz-stars-bright: 0;
  --plz-milky-o: 0;
  --plz-cloud: 250 252 255;
  --plz-cloud-shade: 196 210 228;
  --plz-cloud-o: 0.5;
  --plz-far: 150 175 190;
  --plz-mid: 100 130 120;
  --plz-near: 62 94 66;
  --plz-over-o: 0;
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: rgb(var(--plz-h));
}

body[data-elo-look="pulzus"] .plz-sky-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--plz-z)) 0%,
    rgb(var(--plz-m)) calc(var(--plz-hy) * 0.64),
    rgb(var(--plz-h)) var(--plz-hy),
    rgb(var(--plz-h)) 100%
  );
}

body[data-elo-look="pulzus"] .plz-sky-glow {
  position: absolute;
  inset: 0;
  opacity: var(--plz-glow-o);
  background:
    radial-gradient(ellipse 62% 36% at var(--plz-sun-x) var(--plz-hy), rgb(var(--plz-glow) / 0.78), rgb(var(--plz-glow) / 0.3) 40%, transparent 74%),
    radial-gradient(ellipse 130% 22% at 50% var(--plz-hy), rgb(var(--plz-glow) / 0.3), transparent 82%);
}

body[data-elo-look="pulzus"] .plz-layer {
  position: absolute;
  inset: 0;
}

body[data-elo-look="pulzus"] .plz-layer canvas,
body[data-elo-look="pulzus"] .plz-twinkle canvas {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-elo-look="pulzus"] .plz-milky {
  opacity: var(--plz-milky-o);
}

body[data-elo-look="pulzus"] .plz-stars-dim {
  opacity: var(--plz-stars-dim);
}

body[data-elo-look="pulzus"] .plz-stars-bright {
  opacity: var(--plz-stars-bright);
}

body[data-elo-look="pulzus"] .plz-twinkle {
  position: absolute;
  inset: 0;
  animation: plz-twinkle calc(7s * var(--elo-speed, 1)) ease-in-out infinite alternate;
  animation-play-state: var(--elo-run, running);
}

body[data-elo-look="pulzus"] .plz-twinkle-b {
  animation-duration: calc(11s * var(--elo-speed, 1));
  animation-delay: -4s;
}

@keyframes plz-twinkle {
  from { opacity: 1; }
  to { opacity: 0.42; }
}

/* ---------------------------------------------------------- nap és hold */
body[data-elo-look="pulzus"] .plz-sun {
  position: absolute;
  left: var(--plz-sun-x);
  top: var(--plz-sun-y);
  width: 0;
  height: 0;
  opacity: var(--plz-sun-o);
}

body[data-elo-look="pulzus"] .plz-sun-bloom {
  position: absolute;
  left: -300px;
  top: -300px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--plz-sun-rgb) / 0.6) 0, rgb(var(--plz-sun-rgb) / 0.26) 14%, rgb(var(--plz-sun-rgb) / 0.09) 38%, transparent 66%);
}

body[data-elo-look="pulzus"] .plz-sun-core {
  position: absolute;
  left: -27px;
  top: -27px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0, #ffffff 40%, rgb(var(--plz-sun-rgb)) 66%, rgb(var(--plz-sun-rgb) / 0) 74%);
}

body[data-elo-look="pulzus"] .plz-moon {
  position: absolute;
  left: var(--plz-moon-x);
  top: var(--plz-moon-y);
  width: clamp(54px, 8vmin, 88px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: var(--plz-moon-o);
}

body[data-elo-look="pulzus"] .plz-moon::before {
  content: "";
  position: absolute;
  inset: -110%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(196 212 255 / calc(0.3 * var(--plz-moon-lit))) 0, rgb(196 212 255 / calc(0.1 * var(--plz-moon-lit))) 32%, transparent 64%);
}

body[data-elo-look="pulzus"] .plz-moon svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------- felhők */
body[data-elo-look="pulzus"] .plz-clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: var(--plz-cloud-o);
}

body[data-elo-look="pulzus"] .plz-cloud {
  --c: rgb(var(--plz-cloud));
  --s: rgb(var(--plz-cloud-shade));
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 10%);
  width: var(--w, 46vw);
  height: var(--h, 20vh);
  background:
    radial-gradient(ellipse 30% 34% at 22% 46%, var(--c), transparent 70%),
    radial-gradient(ellipse 26% 42% at 42% 36%, var(--c), transparent 70%),
    radial-gradient(ellipse 30% 36% at 62% 44%, var(--c), transparent 70%),
    radial-gradient(ellipse 24% 30% at 80% 52%, var(--c), transparent 70%),
    radial-gradient(ellipse 52% 24% at 50% 68%, var(--s), transparent 72%);
  animation: plz-drift calc(var(--t, 300s) * var(--elo-speed, 1)) linear infinite alternate;
  animation-delay: var(--d, 0s);
  animation-play-state: var(--elo-run, running);
  will-change: transform;
}

body[data-elo-look="pulzus"] .plz-cloud-a { --x: 4%; --y: 12%; --w: 46vw; --h: 21vh; --t: 260s; --d: -90s; }
body[data-elo-look="pulzus"] .plz-cloud-b { --x: 52%; --y: 24%; --w: 40vw; --h: 17vh; --t: 340s; --d: -200s; }
body[data-elo-look="pulzus"] .plz-cloud-c { --x: -6%; --y: 36%; --w: 52vw; --h: 18vh; --t: 300s; --d: -40s; }
body[data-elo-look="pulzus"] .plz-cloud-d { --x: 34%; --y: 4%; --w: 60vw; --h: 11vh; --t: 420s; --d: -150s; }

@keyframes plz-drift {
  from { transform: translate3d(-18vw, 0, 0); }
  to { transform: translate3d(30vw, 0, 0); }
}

/* ---------------------------------------------------------- horizont */
body[data-elo-look="pulzus"] .plz-land {
  position: absolute;
  left: -1%;
  right: -1%;
  top: calc(var(--plz-hy) - 8%);
  bottom: 0;
}

body[data-elo-look="pulzus"] .plz-land svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body[data-elo-look="pulzus"] .plz-ridge-far { fill: rgb(var(--plz-far)); }
body[data-elo-look="pulzus"] .plz-ridge-mid { fill: rgb(var(--plz-mid)); }
body[data-elo-look="pulzus"] .plz-ridge-near { fill: rgb(var(--plz-near)); }

body[data-elo-look="pulzus"] .plz-land-haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--plz-h) / 0) 0%, rgb(var(--plz-h) / 0.5) 12%, rgb(var(--plz-h) / 0.12) 28%, rgb(var(--plz-h) / 0) 46%);
}

body[data-elo-look="pulzus"] .plz-sky-over {
  position: absolute;
  inset: 0;
  opacity: var(--plz-over-o);
  background: linear-gradient(180deg, rgb(88 96 108 / 0.9), rgb(124 132 142 / 0.5));
}
/* Élő otthon 2 · Pulzus A: tokenek, keret, fejléc, dokk, oldalsó fülek, lapváltás.
 *
 * Minden szabály `body[data-elo-look="pulzus"]` alatt. Az üvegfelületek az `elo-glass`
 * osztályt kapják (közös fénysáv, 95_elo_02_base.css); a színt és az erősséget a
 * `--elo-sweep-rgb` és a `--elo-sweep-a` adja. A `--plz-*` tokenek a másik fél (Pulzus B)
 * számára is használhatók: üveg, él, árnyék, kategóriaszínek (`--plz-c-*`, "r g b" hármasok).
 */
body[data-elo-look="pulzus"] {
  --plz-gut: 16px;
  --plz-ink-rgb: 232 238 245;
  --plz-mute: #aebccf;
  --plz-glass: rgba(14, 22, 42, 0.74);
  --plz-glass-solid: rgba(18, 28, 52, 0.86);
  --plz-tile: rgba(36, 52, 92, 0.64);
  --plz-edge: rgba(160, 190, 255, 0.2);
  --plz-edge-strong: rgba(180, 205, 255, 0.34);
  --plz-shadow: 0 18px 44px rgba(0, 4, 18, 0.46), 0 2px 6px rgba(0, 4, 18, 0.34);
  --plz-c-kert: 62 227 198;
  --plz-c-energia: 255 193 77;
  --plz-c-biz: 169 155 255;
  --plz-c-otthon: 255 138 160;
  --plz-c-warn: 255 193 77;
  --plz-c-bad: 255 120 110;
  --plz-ok: #35d08a;
  --plz-wait: #f2b23c;
  --plz-off: #ff6f66;
  --plz-conn: #6aa9ff;
  --plz-quiet: #8e9cb4;
  --plz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --elo-sweep-rgb: 220 232 255;
  --elo-sweep-a: 0.12;
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] {
  --plz-ink-rgb: 14 22 32;
  --plz-mute: #36465a;
  --plz-glass: rgba(255, 255, 255, 0.78);
  --plz-glass-solid: rgba(250, 252, 255, 0.92);
  --plz-tile: rgba(255, 255, 255, 0.86);
  --plz-edge: rgba(255, 255, 255, 0.82);
  --plz-edge-strong: rgba(255, 255, 255, 0.95);
  --plz-shadow: 0 16px 40px rgba(20, 44, 78, 0.2), 0 2px 6px rgba(20, 44, 78, 0.12);
  --plz-c-kert: 8 116 104;
  --plz-c-energia: 150 88 0;
  --plz-c-biz: 91 63 208;
  --plz-c-otthon: 196 44 76;
  --plz-c-warn: 150 88 0;
  --plz-c-bad: 190 40 40;
  --plz-ok: #138a57;
  --plz-wait: #b87500;
  --plz-off: #c93a36;
  --plz-conn: #2f6fcf;
  --plz-quiet: #66768a;
  --elo-sweep-rgb: 96 176 255;
  --elo-sweep-a: 0.26;
}

/* Az Otthon és a többi natív lap teljes szélességet kap (a classic .app keretéből kilép); a
 * classic hordozón élő oldalaknál a keret a classic oszlopban marad. A body overflow-x: clip véd. */
body[data-elo-look="pulzus"][data-elo-hosted="off"] #eloRoot {
  margin-inline: calc(50% - 50vw);
}

body[data-elo-look="pulzus"] .plz-frame {
  position: relative;
  min-height: 100dvh;
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plz-ico {
  display: block;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------- fejléc */
body[data-elo-look="pulzus"] .plz-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 2240px; /* OW-02: a tartalom a nézethez igazodik, e fölött középre kerül */
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) var(--plz-gut) 6px;
}

body[data-elo-look="pulzus"] .plz-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 14px 5px 7px;
  border-radius: 16px;
  background: var(--plz-glass);
  border: 1px solid var(--plz-edge);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plz-logo {
  flex: 0 0 auto;
  color: rgb(var(--plz-c-kert));
}

body[data-elo-look="pulzus"] .plz-brand-text {
  display: grid;
  line-height: 1.1;
}

body[data-elo-look="pulzus"] .plz-brand-text b {
  font: 700 calc(16px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  letter-spacing: -0.01em;
}

body[data-elo-look="pulzus"] .plz-brand-text small {
  font: 600 calc(10px * var(--elo-font-scale))/1.2 var(--elo-font-head);
  letter-spacing: 0.22em;
  color: var(--plz-mute);
}

body[data-elo-look="pulzus"] .plz-top-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-elo-look="pulzus"] .plz-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--plz-glass);
  border: 1px solid var(--plz-edge);
  color: var(--elo-ink);
  font: 600 calc(13px * var(--elo-font-scale))/1 var(--elo-font-body);
}

body[data-elo-look="pulzus"] .plz-chip-text {
  display: none;
}

body[data-elo-look="pulzus"] .plz-tool {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  background: var(--plz-glass);
  border: 1px solid var(--plz-edge);
  color: var(--elo-ink);
  cursor: pointer;
  transition: transform 0.18s var(--plz-ease), border-color 0.18s;
}

body[data-elo-look="pulzus"] .plz-tool:hover {
  border-color: var(--plz-edge-strong);
}

body[data-elo-look="pulzus"] .plz-tool:active {
  transform: scale(0.94);
}

body[data-elo-look="pulzus"] .plz-tool:focus-visible,
body[data-elo-look="pulzus"] .plz-dock-btn:focus-visible,
body[data-elo-look="pulzus"] .plz-edge:focus-visible,
body[data-elo-look="pulzus"] .plz-tile:focus-visible,
body[data-elo-look="pulzus"] .plz-open:focus-visible,
body[data-elo-look="pulzus"] .plz-more:focus-visible,
body[data-elo-look="pulzus"] .plz-warn-btn:focus-visible {
  outline: 3px solid rgb(var(--plz-c-kert));
  outline-offset: 2px;
}

body[data-elo-look="pulzus"] .plz-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--plz-quiet);
}

body[data-elo-look="pulzus"] .plz-dot[data-tone="ok"] { background: var(--plz-ok); }
body[data-elo-look="pulzus"] .plz-dot[data-tone="wait"] { background: var(--plz-wait); }
body[data-elo-look="pulzus"] .plz-dot[data-tone="off"] { background: var(--plz-off); }
body[data-elo-look="pulzus"] .plz-dot[data-tone="conn"] { background: var(--plz-conn); }

body[data-elo-look="pulzus"][data-elo-hosted="on"] .plz-top {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------- lap helye */
body[data-elo-look="pulzus"] .plz-stage {
  position: relative;
  z-index: 1;
  max-width: 2240px; /* OW-02: a tartalom a nézethez igazodik, e fölött középre kerül */
  margin: 0 auto;
  padding: 8px var(--plz-gut) calc(94px + env(safe-area-inset-bottom));
}

/* A közös szabály (95_elo_05_shell.css) a classic .app aljára is helyet ad; a stage-é elég. */
body[data-elo-look="pulzus"][data-elo-hosted="on"] .plz-frame {
  min-height: 0;
}

body[data-elo-look="pulzus"] .plz-stage.plz-enter {
  animation: plz-enter calc(0.46s * var(--elo-speed, 1)) var(--plz-ease) both;
}

@keyframes plz-enter {
  from { opacity: 0; transform: translate3d(var(--plz-dx, 0px), 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes plz-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

body[data-elo-look="pulzus"] .plz-rise {
  animation: plz-rise calc(0.62s * var(--elo-speed, 1)) var(--plz-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms * var(--elo-motion, 1));
}

/* ---------------------------------------------------------- dokk */
body[data-elo-look="pulzus"] .plz-dock {
  position: fixed;
  z-index: 40;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  height: 60px;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(var(--plz-dock-n, 6), minmax(0, 1fr));
  border-radius: 20px;
  background: var(--plz-glass-solid);
  border: 1px solid var(--plz-edge-strong);
  box-shadow: var(--plz-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

body[data-elo-look="pulzus"] .plz-dock-glow {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / var(--plz-dock-n, 6));
  border-radius: 15px;
  background: rgb(var(--plz-c-kert) / 0.18);
  box-shadow: inset 0 0 0 1px rgb(var(--plz-c-kert) / 0.5);
  transform: translateX(calc(var(--plz-dock-i, 0) * 100%));
  transition: transform calc(0.5s * var(--elo-motion, 1)) cubic-bezier(0.3, 1.25, 0.5, 1);
  pointer-events: none;
}

body[data-elo-look="pulzus"] .plz-dock-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-radius: 15px;
  background: none;
  color: var(--plz-mute);
  font: 600 calc(10px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-elo-look="pulzus"] .plz-dock-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plz-dock-btn[aria-current="page"] {
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plz-dock-btn:active .plz-ico {
  transform: scale(0.9);
}

body[data-elo-look="pulzus"] .plz-dock-btn .plz-ico {
  transition: transform 0.18s var(--plz-ease);
}

/* ---------------------------------------------------------- oldalsó lapozófülek (nagy kijelző) */
body[data-elo-look="pulzus"] .plz-edge {
  display: none;
}

@media (min-width: 640px) {
  body[data-elo-look="pulzus"] {
    --plz-gut: 24px;
  }

  body[data-elo-look="pulzus"] .plz-chip-text {
    display: inline;
  }

  body[data-elo-look="pulzus"] .plz-chip {
    padding: 0 14px;
  }

  body[data-elo-look="pulzus"] .plz-dock {
    left: 50%;
    right: auto;
    width: min(660px, calc(100% - 32px));
    height: 64px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
  }

  body[data-elo-look="pulzus"] .plz-dock-btn {
    flex-direction: row;
    gap: 8px;
    font-size: calc(13px * var(--elo-font-scale));
  }

  body[data-elo-look="pulzus"] .plz-stage {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

}

@media (max-width: 760px) {
  body[data-elo-look="pulzus"] .plz-dock-btn span {
    font-size: calc(10.5px * var(--elo-font-scale));
  }

  body[data-elo-look="pulzus"] .plz-dock-btn {
    flex-direction: column;
    gap: 3px;
    font-size: calc(10.5px * var(--elo-font-scale));
  }
}

@media (min-width: 900px) {
  body[data-elo-look="pulzus"] {
    --plz-gut: 52px;
  }

  body[data-elo-look="pulzus"] .plz-top {
    padding-left: 52px;
    padding-right: 52px;
  }

  body[data-elo-look="pulzus"] .plz-edge {
    position: fixed;
    z-index: 30;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 38px;
    min-height: 120px;
    padding: 10px 0;
    margin-top: -60px;
    border-radius: 14px;
    background: var(--plz-glass);
    border: 1px solid var(--plz-edge);
    color: var(--elo-ink);
    cursor: pointer;
    transition: transform 0.2s var(--plz-ease), border-color 0.2s;
  }

  body[data-elo-look="pulzus"] .plz-edge[hidden] {
    display: none;
  }

  body[data-elo-look="pulzus"] .plz-edge-prev {
    left: 8px;
  }

  body[data-elo-look="pulzus"] .plz-edge-next {
    right: 8px;
  }

  body[data-elo-look="pulzus"] .plz-edge:hover {
    border-color: var(--plz-edge-strong);
  }

  body[data-elo-look="pulzus"] .plz-edge span {
    writing-mode: vertical-rl;
    font: 600 calc(11.5px * var(--elo-font-scale))/1 var(--elo-font-head);
    letter-spacing: 0.08em;
    color: var(--plz-mute);
  }
}

@media (min-width: 1100px) {
  body[data-elo-look="pulzus"] .plz-top {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
}

@media (max-width: 359px) {
  body[data-elo-look="pulzus"] {
    --plz-gut: 12px;
  }

  body[data-elo-look="pulzus"] .plz-brand {
    padding: 5px;
  }

  body[data-elo-look="pulzus"] .plz-brand-text {
    display: none;
  }

  body[data-elo-look="pulzus"] .plz-top-tools {
    gap: 6px;
  }

  body[data-elo-look="pulzus"] .plz-dock-btn,
  body[data-elo-look="pulzus"] .plz-dock-btn span {
    font-size: calc(9px * var(--elo-font-scale));
    letter-spacing: -0.01em;
  }
}

/* H2-017: nagy betűméret 360–400 px-en a márka nem vágódik le („HomeHul”), a dokk felirata nem
 * rövidül „…”-ra. A kapcsolati pirula szövege ilyenkor csak a jelzőpont; a szöveg a címkében (aria-label,
 * title) és a kezdőlap mondatában marad meg. */
@media (min-width: 360px) and (max-width: 400px) {
  body[data-elo-look="pulzus"] .plz-conn .plz-chip-text {
    display: none;
  }

  body[data-elo-look="pulzus"] .plz-conn {
    min-width: 0;
    padding: 0 12px;
  }

  body[data-elo-look="pulzus"] .plz-top-tools {
    flex: 0 0 auto;
  }

  body[data-elo-look="pulzus"] .plz-brand {
    flex: 1 1 auto;
  }

  body[data-elo-look="pulzus"] .plz-brand-text b {
    white-space: nowrap;
  }

  body[data-elo-look="pulzus"] .plz-dock-btn span {
    font-size: 10px;
    letter-spacing: 0;
  }
}
/* Élő otthon 2 · Pulzus B: tokenek, üvegfelület, eszközkártya, pirula, sáv, mikro-vizualizáció.
 *
 * Minden szabály `body[data-elo-look="pulzus"]` alatt. A kártya és a panel a `.elo-glass`
 * osztályt viseli: a közös üvegfényt (95_elo_02_base.css) az adja, a kártyák külön nem csillognak.
 * Hangulat: letisztult, prémium műszer. Díszvonal (pulzusjel) nincs; a hierarchiát a tipográfia,
 * a finom keret és az üveg mélysége adja. Backdrop-filter itt nincs (sok kártya), csak a kezelőlapon.
 */

/* ---------------------------------------------------------- tokenek */
body[data-elo-look="pulzus"] {
  --elo-s1: #101A2C;
  --elo-s2: #17233B;
  --elo-line: rgba(168, 198, 255, 0.2);
  --elo-ink: #EAF1FB;
  --elo-mute: #A6B5CA;
  --elo-water: #3FD8C7;
  --elo-energy: #F6BA4E;
  --elo-secure: #AA9CFF;
  --elo-warn: #FF8266;
  --elo-on-acc: #05131A;
  --elo-on-warn: #1A0A05;
  --plzb-glass-a: rgba(18, 28, 48, 0.74);
  --plzb-glass-b: rgba(10, 17, 31, 0.8);
  --plzb-edge: rgba(176, 204, 255, 0.18);
  --plzb-edge-hi: rgba(206, 224, 255, 0.34);
  --plzb-hi: rgba(255, 255, 255, 0.09);
  --plzb-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --plzb-track: rgba(168, 198, 255, 0.16);
  --plzb-tint: 0.16;
  --plzb-halo: rgba(6, 12, 24, 0.75);
  --plzb-wire: rgba(214, 230, 255, 0.5);
  --plzb-flow: #F6BA4E;
  --elo-sweep-rgb: 205 226 255;
  --elo-sweep-a: 0.15;
  --elo-sweep-w: 54vw;
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] {
  --elo-s1: #FFFFFF;
  --elo-s2: #EDF2F9;
  --elo-line: rgba(18, 40, 78, 0.18);
  --elo-ink: #0E1A2B;
  /* Másodlagos szöveg nappal: sötétebb, hogy a fotón álló üveg-csempén is elérje az AA 4,5:1-et (UI-06). */
  --elo-mute: #34445A;
  --elo-water: #08796F;
  --elo-energy: #8F5A00;
  --elo-secure: #5A3DCB;
  --elo-warn: #BD3F0B;
  --elo-on-acc: #FFFFFF;
  --elo-on-warn: #FFFFFF;
  --plzb-glass-a: rgba(255, 255, 255, 0.84);
  --plzb-glass-b: rgba(244, 248, 254, 0.76);
  --plzb-edge: rgba(24, 52, 98, 0.16);
  --plzb-edge-hi: rgba(24, 52, 98, 0.3);
  --plzb-hi: rgba(255, 255, 255, 0.9);
  --plzb-shadow: 0 16px 34px -22px rgba(20, 44, 90, 0.5), 0 2px 5px -2px rgba(20, 44, 90, 0.18);
  --plzb-track: rgba(24, 52, 98, 0.13);
  --plzb-tint: 0.1;
  --plzb-halo: rgba(255, 255, 255, 0.8);
  --plzb-wire: rgba(18, 40, 78, 0.5);
  --plzb-flow: #B26A00;
  --elo-sweep-rgb: 110 160 230;
  --elo-sweep-a: 0.2;
}

/* Kategóriaszín: ugyanaz a kártyán, a fürt jelén és az ikonon. */
body[data-elo-look="pulzus"] .elo-a-kert { --elo-c: var(--elo-water); }
body[data-elo-look="pulzus"] .elo-a-energia { --elo-c: var(--elo-energy); }
body[data-elo-look="pulzus"] .elo-a-biz { --elo-c: var(--elo-secure); }
body[data-elo-look="pulzus"] .elo-a-otthon,
body[data-elo-look="pulzus"] .elo-a-szor { --elo-c: #FF8F7A; }
body[data-elo-look="pulzus"] .elo-a-net { --elo-c: #6DB7FF; }
body[data-elo-look="pulzus"][data-elo-resolved="day"] .elo-a-otthon,
body[data-elo-look="pulzus"][data-elo-resolved="day"] .elo-a-szor { --elo-c: #BC3F27; }
body[data-elo-look="pulzus"][data-elo-resolved="day"] .elo-a-net { --elo-c: #1B5FC2; }

/* ---------------------------------------------------------- üveg */
body[data-elo-look="pulzus"] :is(.plzb-card, .plzb-panel, .plzb-toolbar, .plzb-node, .plzb-tile, .plzb-hero, .plzb-more) {
  border: 1px solid var(--plzb-edge);
  background: linear-gradient(168deg, var(--plzb-glass-a), var(--plzb-glass-b));
  box-shadow: var(--plzb-shadow), inset 0 1px 0 var(--plzb-hi);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] :is(.plzb-card, .plzb-panel, .plzb-toolbar, .plzb-node, .plzb-tile, .plzb-hero, .plzb-more)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, var(--plzb-hi), transparent 38%);
  opacity: 0.55;
}

body[data-elo-look="pulzus"] :is(.plzb-card, .plzb-panel, .plzb-node, .plzb-tile, .plzb-hero, .plzb-more, .plzb-toolbar) > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------- eszközkártya */
body[data-elo-look="pulzus"] .plzb-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 148px;
  padding: 14px;
  border-radius: 18px;
  text-align: left;
  font: 400 calc(14px * var(--elo-font-scale))/1.3 var(--elo-font-body);
  cursor: pointer;
  transition: transform calc(0.22s * var(--elo-motion)) ease;
  -webkit-tap-highlight-color: transparent;
}

body[data-elo-look="pulzus"] .plzb-card:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--plzb-edge-hi);
}

body[data-elo-look="pulzus"] .plzb-card:active {
  transform: scale(0.985);
}

/* Elavult kártya: az érték másodlagos szövegszínt kap, nem halványítást (UI-06: az AA-határ alá esne). */
body[data-elo-look="pulzus"] .plzb-card.is-stale .plzb-card-num b {
  color: var(--elo-mute);
}

body[data-elo-look="pulzus"] .plzb-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--elo-c, var(--elo-mute)) 38%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--elo-c, var(--elo-mute)) calc(var(--plzb-tint) * 100%), transparent);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plzb-ico .elo-glyph {
  width: 25px;
  height: 25px;
}

body[data-elo-look="pulzus"] .plzb-card-id {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-card-name {
  display: -webkit-box;
  overflow: hidden;
  font: 600 calc(15px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body[data-elo-look="pulzus"] .plzb-card-sub {
  overflow: hidden;
  color: var(--elo-mute);
  font-size: calc(12px * var(--elo-font-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-led {
  align-self: flex-start;
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--elo-tone, var(--elo-mute));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 22%, transparent);
}

body[data-elo-look="pulzus"] .plzb-card[data-conn="connected"] .plzb-led {
  animation: plzb-led 3.2s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .plzb-card-val {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin-top: auto;
}

body[data-elo-look="pulzus"] .plzb-card-val em {
  overflow: hidden;
  color: var(--elo-mute);
  font: 500 calc(10.5px * var(--elo-font-scale))/1.3 var(--elo-font-mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-card-num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-card-num b {
  font: 600 calc(28px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="pulzus"] .plzb-card-num b.is-word {
  display: -webkit-box;
  overflow: hidden;
  font-size: calc(21px * var(--elo-font-scale));
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body[data-elo-look="pulzus"] .plzb-card-num small {
  color: var(--elo-mute);
  font: 500 calc(13px * var(--elo-font-scale))/1 var(--elo-font-mono);
}

body[data-elo-look="pulzus"] .plzb-card-val.is-none {
  color: var(--elo-mute);
  font-size: calc(14px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* ---------------------------------------------------------- pirula */
body[data-elo-look="pulzus"] .plzb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 46%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 11%, transparent);
  color: var(--elo-tone, var(--elo-mute));
  font: 500 calc(11.5px * var(--elo-font-scale))/1.2 var(--elo-font-body);
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-pill > i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

body[data-elo-look="pulzus"] .plzb-pill .plzb-ui {
  width: 13px;
  height: 13px;
}

/* ---------------------------------------------------------- mérősáv és mikro-vizualizáció */
body[data-elo-look="pulzus"] .plzb-bar {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--plzb-track);
}

body[data-elo-look="pulzus"] .plzb-bar > i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--elo-c, var(--elo-water)) 70%, transparent), var(--elo-c, var(--elo-water)));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

body[data-elo-look="pulzus"] .plzb-spark {
  display: block;
  width: 100%;
  height: 34px;
  color: var(--elo-c, var(--elo-mute));
  overflow: visible;
}

body[data-elo-look="pulzus"] .plzb-spark-fill {
  fill: color-mix(in srgb, var(--elo-c, var(--elo-mute)) 16%, transparent);
  stroke: none;
}

body[data-elo-look="pulzus"] .plzb-cam {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--plzb-edge);
  border-radius: 10px;
  background: color-mix(in srgb, var(--elo-c, var(--elo-mute)) 8%, transparent);
  color: var(--elo-mute);
  font-size: calc(12px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-cam .plzb-ui {
  width: 16px;
  height: 16px;
  color: var(--elo-c);
}

/* ---------------------------------------------------------- betöltés (váz) */
body[data-elo-look="pulzus"] .plzb-skel {
  min-height: 148px;
  cursor: default;
  opacity: 0.55;
}

/* ---------------------------------------------------------- felületi jelek */
body[data-elo-look="pulzus"] .plzb-ui {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes plzb-led {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (max-width: 520px) {
  body[data-elo-look="pulzus"] .plzb-card {
    min-height: 140px;
    padding: 12px;
    gap: 8px;
  }

  body[data-elo-look="pulzus"] .plzb-ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  body[data-elo-look="pulzus"] .plzb-ico .elo-glyph {
    width: 22px;
    height: 22px;
  }

  body[data-elo-look="pulzus"] .plzb-card-top {
    gap: 9px;
  }

  body[data-elo-look="pulzus"] .plzb-card-name {
    font-size: calc(14px * var(--elo-font-scale));
  }

  body[data-elo-look="pulzus"] .plzb-card-num b {
    font-size: calc(24px * var(--elo-font-scale));
  }

  body[data-elo-look="pulzus"] .plzb-card-num b.is-word {
    font-size: calc(17px * var(--elo-font-scale));
  }

  body[data-elo-look="pulzus"] .plzb-card-sub {
    font-size: calc(11.5px * var(--elo-font-scale));
  }

  body[data-elo-look="pulzus"] .plzb-led {
    display: none;
  }
}
/* Élő otthon 2 · Pulzus B: az Eszközök lap összecsukott szakaszai (OW-03).
 *
 * Felismert, még nem csatlakoztatott eszközök és hálózati jelenlét: két összecsukott szakasz,
 * kártya nélküli sorokkal (az eszközkártya-rács csak a csatlakoztatott eszközöké).
 */
body[data-elo-look="pulzus"] [data-plzb-region="unlinked"]:not(:empty) {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

body[data-elo-look="pulzus"] .plzb-fold {
  border-radius: 18px;
  border: 1px solid var(--plzb-edge, var(--elo-line));
  background: var(--plzb-glass-a, rgb(255 255 255 / 0.06));
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plzb-fold-h {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--elo-ink);
  font: 600 calc(13px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

body[data-elo-look="pulzus"] .plzb-fold-h:is(:hover, :focus-visible) {
  background: rgb(255 255 255 / 0.07);
}

body[data-elo-look="pulzus"] .plzb-fold-t {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-elo-look="pulzus"] .plzb-fold-h small {
  flex: none;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: var(--elo-mute);
  font: 500 calc(12px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="pulzus"] .plzb-fold-ch {
  flex: none;
  display: grid;
  color: var(--elo-mute);
}

body[data-elo-look="pulzus"] .plzb-fold-ch .plzb-ui {
  width: 16px;
  height: 16px;
  transition: transform calc(0.2s * var(--elo-motion, 1)) ease;
}

body[data-elo-look="pulzus"] .plzb-fold-h[aria-expanded="true"] .plzb-fold-ch .plzb-ui {
  transform: rotate(90deg);
}

body[data-elo-look="pulzus"] .plzb-fold-body {
  display: grid;
  gap: 16px;
  padding: 2px 16px 16px;
}

body[data-elo-look="pulzus"] .plzb-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-elo-look="pulzus"] .plzb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 10px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.06);
}

body[data-elo-look="pulzus"] .plzb-row > .plzb-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

body[data-elo-look="pulzus"] .plzb-row > .plzb-ico svg {
  width: 20px;
  height: 20px;
}

body[data-elo-look="pulzus"] .plzb-row-id {
  display: grid;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-row-id b {
  overflow: hidden;
  font: 600 calc(13px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-row-id b em {
  color: var(--elo-mute);
  font-style: normal;
  font-weight: 500;
}

body[data-elo-look="pulzus"] .plzb-row-id small {
  overflow: hidden;
  color: var(--elo-mute);
  font: 400 calc(11.5px * var(--elo-font-scale))/1.25 var(--elo-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-row-state {
  justify-self: end;
}

/* A jelenlét-sor állapota hosszabb („Nincs otthon · utoljára …”): a név alatt kap helyet. */
body[data-elo-look="pulzus"] .plzb-row[data-home] {
  grid-template-columns: auto minmax(0, 1fr);
}

body[data-elo-look="pulzus"] .plzb-row[data-home] > .plzb-ico {
  grid-row: 1 / span 2;
}

body[data-elo-look="pulzus"] .plzb-row[data-home] .plzb-row-state {
  grid-column: 2;
  justify-self: start;
}

@media (max-width: 520px) {
  body[data-elo-look="pulzus"] .plzb-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body[data-elo-look="pulzus"] .plzb-row-state {
    grid-column: 2;
    justify-self: start;
  }
}
/* Élő otthon 2 · Pulzus B: a classic-hosted lapok (Beállítások, Programok, Automatika, Napló,
 * Szerver, Vezérlőközpont, ...) a Pulzus üvegfelületén.
 *
 * A tartalom a `95_elo_6x_*` tokenes stílusát kapja; itt csak a panel felülete (üveg, keret, árnyék,
 * lekerekítés) és a háttér fölötti olvashatóság Pulzus-specifikus. A panelen belüli mezők és
 * dobozok az opak `--elo-s1/--elo-s2` felületeket használják, így a kontraszt az égtől független.
 */
html body[data-elo-look="pulzus"][data-theme] main .panel,
html body[data-elo-look="pulzus"][data-theme] dialog .panel {
  background: linear-gradient(168deg, var(--plzb-glass-a), var(--plzb-glass-b)) !important;
  border: 1px solid var(--plzb-edge) !important;
  border-radius: 22px;
  box-shadow: var(--plzb-shadow), inset 0 1px 0 var(--plzb-hi) !important;
}

html body[data-elo-look="pulzus"][data-theme] main .panel :is(h2, h3) {
  font-family: var(--elo-font-head);
  letter-spacing: -0.01em;
}

/* Az oldalfejléc (a classic lapcím) az ég fölött: halo a kontraszthoz. */
html body[data-elo-look="pulzus"][data-elo-hosted="on"] main > :is(h1, h2, .page-head) {
  color: var(--elo-ink);
  text-shadow: 0 0 18px var(--plzb-halo);
}

body[data-elo-look="pulzus"][data-elo-hosted="on"] main {
  padding-top: 8px;
}

@media (min-width: 960px) {
  body[data-elo-look="pulzus"][data-elo-hosted="on"] main {
    padding-left: 32px;
    padding-right: 32px;
  }
}
/* Élő otthon 2 · Pulzus B: az ikonkészlet stílusa és állapot-animációi.
 *
 * Az ikon vonalas (currentColor), az `i-a` részek a kategória akcentusát (`--elo-c`) kapják.
 * A mozgás csak transform/opacity, és csak igazolt állapotnál fut: `.is-run` (futó öntözés,
 * aktív eső), `.is-on` (be van kapcsolva, szól, tölt) vagy `.is-live` (friss kapcsolat). A végtelen
 * animációk `animation-play-state: var(--elo-run)`-t használnak (Ki mód, rejtett lap: állnak).
 */
body[data-elo-look="pulzus"] .elo-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

body[data-elo-look="pulzus"] .elo-glyph .i-a {
  stroke: var(--elo-c, currentColor);
}

body[data-elo-look="pulzus"] .elo-glyph .i-f {
  fill: var(--elo-c, currentColor);
  stroke: none;
}

body[data-elo-look="pulzus"] .elo-glyph :is(.i-rot, .i-rot-slow, .i-needle, .i-shackle, .i-spray, .i-fall, .i-fall1, .i-flow, .i-w, .i-w1, .i-w2, .i-sw, .i-sw2, .i-seg, .i-bolt, .i-led, .i-glow, .i-ring, .i-scan, .i-heat, .i-bub, .i-bub2, .i-d1, .i-d2) {
  transform-box: view-box;
}

/* Nyugalmi állapot: a mozgó részek halványabbak vagy rejtettek. */
body[data-elo-look="pulzus"] .elo-glyph :is(.i-spray, .i-glow, .i-ring, .i-scan, .i-heat, .i-bub, .i-bub2) {
  opacity: 0;
}

body[data-elo-look="pulzus"] .elo-glyph :is(.i-fall, .i-fall1, .i-flow) {
  opacity: 0.55;
}

body[data-elo-look="pulzus"] .elo-glyph .i-seg {
  opacity: 0.85;
}

/* ---------------------------------------------------------- futás (öntözés) */
body[data-elo-look="pulzus"] .is-run .elo-glyph .i-rot {
  animation: plzb-spin 1.6s linear infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-run .elo-glyph .i-spray {
  opacity: 1;
}

body[data-elo-look="pulzus"] .is-run .elo-glyph :is(.i-d1, .i-d2) {
  animation: plzb-spit 1.1s ease-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-run .elo-glyph .i-d2 {
  animation-delay: 0.45s;
}

body[data-elo-look="pulzus"] .is-run .elo-glyph :is(.i-fall, .i-fall1) {
  opacity: 1;
  animation: plzb-drop 1.1s ease-in infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-run .elo-glyph .i-flow {
  opacity: 1;
  animation: plzb-shift 1.2s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

/* ---------------------------------------------------------- bekapcsolt / aktív állapot */
body[data-elo-look="pulzus"] .is-on .elo-glyph .i-rot {
  animation: plzb-spin 2.6s linear infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-glow {
  opacity: 1;
  animation: plzb-glow 2.8s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-ring {
  animation: plzb-ring 2.4s ease-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-scan {
  animation: plzb-scan 3.4s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph :is(.i-sw, .i-sw2) {
  animation: plzb-wave 1.8s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-sw2 {
  animation-delay: 0.45s;
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-heat {
  opacity: 1;
  animation: plzb-heat 2.6s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph :is(.i-bub, .i-bub2) {
  animation: plzb-bubble 2.2s ease-in infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-bub2 {
  animation-delay: 0.9s;
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-bolt {
  animation: plzb-glow 1.8s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-seg {
  animation: plzb-seg 2.4s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-s3 { animation-delay: 0.3s; }
body[data-elo-look="pulzus"] .is-on .elo-glyph .i-s2 { animation-delay: 0.6s; }
body[data-elo-look="pulzus"] .is-on .elo-glyph .i-s1 { animation-delay: 0.9s; }

body[data-elo-look="pulzus"] .is-on .elo-glyph .i-flow {
  opacity: 1;
  animation: plzb-shift 1.4s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

/* ---------------------------------------------------------- friss kapcsolat: csak jelzőfény és lassú környezeti mozgás */
body[data-elo-look="pulzus"] .is-live .elo-glyph .i-led {
  animation: plzb-led 2.6s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-live .elo-glyph .i-rot-slow {
  animation: plzb-spin 36s linear infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-live .elo-glyph .i-needle {
  animation: plzb-needle 5.2s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-live .elo-glyph :is(.i-w, .i-w1, .i-w2) {
  animation: plzb-wave 3.4s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .is-live .elo-glyph .i-w2 {
  animation-delay: 0.6s;
}

body[data-elo-look="pulzus"] .is-live .elo-glyph .i-shackle {
  animation: plzb-shackle 7s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

@keyframes plzb-spin {
  to { transform: rotate(360deg); }
}

@keyframes plzb-needle {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(18deg); }
}

@keyframes plzb-shackle {
  0%, 92%, 100% { transform: translateY(0); }
  96% { transform: translateY(-0.5px); }
}

@keyframes plzb-drop {
  0% { transform: translateY(-3px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(4px); opacity: 0; }
}

@keyframes plzb-spit {
  0% { transform: translateY(2px) scale(0.6); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(-2px) scale(1.15); opacity: 0; }
}

@keyframes plzb-shift {
  0%, 100% { transform: translateX(-1.5px); }
  50% { transform: translateX(1.5px); }
}

@keyframes plzb-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes plzb-ring {
  0% { transform: scale(0.86); opacity: 0.7; }
  100% { transform: scale(1.12); opacity: 0; }
}

@keyframes plzb-scan {
  0%, 100% { transform: translateY(0); opacity: 0.2; }
  50% { transform: translateY(6px); opacity: 1; }
}

@keyframes plzb-wave {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes plzb-heat {
  0%, 100% { transform: translateY(1.5px); opacity: 0.3; }
  50% { transform: translateY(-1.5px); opacity: 1; }
}

@keyframes plzb-bubble {
  0% { transform: translateY(2px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-3px); opacity: 0; }
}

@keyframes plzb-seg {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
/* Élő otthon 2 · Pulzus B: az Eszközök, Energia, Kert, Biztonság és Továbbiak lap elrendezése.
 *
 * A lapok a Pulzus A rész keretének `[data-elo-stage]` elemében élnek; a vízszintes szegélyt és az
 * alsó helyet (dokk) a keret adja, a lap csak a saját közeit. Telefon (360–430),
 * tablet (768–1180), gép (1200–2560): a tartalom a nézethez igazodik, max. 2240 px széles, középre igazítva;
 * nincs vízszintes görgetés, az oszlopok a szélességhez igazodnak.
 */
body[data-elo-look="pulzus"] .plzb-page {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 2240px; /* OW-02: a lap a nézethez igazodik, e fölött középre kerül */
  margin: 0 auto;
  padding: 4px 0 8px;
  min-width: 0;
  color: var(--elo-ink);
  font: 400 calc(15px * var(--elo-font-scale))/1.45 var(--elo-font-body);
}

body[data-elo-look="pulzus"] .plzb-page > * {
  min-width: 0;
}

/* ---------------------------------------------------------- fejléc */
body[data-elo-look="pulzus"] .plzb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
}

/* A lapcím üvegtáblán áll: bármilyen ég (nappal, alkonyat, éjszaka) fölött olvasható marad. */
body[data-elo-look="pulzus"] .plzb-head-id {
  min-width: 0;
  padding: 10px 20px 12px;
  border: 1px solid var(--plzb-edge);
  border-radius: 18px;
  background: linear-gradient(168deg, var(--plzb-glass-a), var(--plzb-glass-b));
  box-shadow: var(--plzb-shadow), inset 0 1px 0 var(--plzb-hi);
}

body[data-elo-look="pulzus"] .plzb-eyebrow {
  margin: 0 0 2px;
  color: var(--elo-mute);
  font: 500 calc(11px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-elo-look="pulzus"] .plzb-title {
  margin: 0;
  font: 600 clamp(26px, 4.2vw, 38px)/1.1 var(--elo-font-head);
  letter-spacing: -0.02em;
}

body[data-elo-look="pulzus"] .plzb-title:focus {
  outline: none;
}

body[data-elo-look="pulzus"] .plzb-head-aside {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-elo-look="pulzus"] .plzb-head-aside:empty {
  display: none;
}

body[data-elo-look="pulzus"] .plzb-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--plzb-edge);
  border-radius: 999px;
  background: var(--plzb-glass-a);
  color: var(--elo-mute);
  font: 500 calc(12.5px * var(--elo-font-scale))/1.2 var(--elo-font-body);
}

body[data-elo-look="pulzus"] .plzb-count b {
  color: var(--elo-ink);
  font: 600 calc(14px * var(--elo-font-scale))/1 var(--elo-font-head);
}

body[data-elo-look="pulzus"] .plzb-count.is-run b {
  color: var(--elo-water);
}

body[data-elo-look="pulzus"] :is(.plzb-sec-h, .plzb-group-h) {
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid var(--plzb-edge);
  border-radius: 999px;
  background: var(--plzb-glass-a);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5);
}

body[data-elo-look="pulzus"] :is([data-plzb-region], .plzb-section, .plzb-devices, .plzb-flow-wrap) > .plzb-note {
  width: fit-content;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--plzb-edge);
  border-radius: 12px;
  background: var(--plzb-glass-a);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plzb-sec-h {
  margin: 4px 0 -6px;
  color: var(--elo-ink);
  font: 500 calc(12px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-elo-look="pulzus"] .plzb-section {
  display: grid;
  gap: 14px;
}

body[data-elo-look="pulzus"] .plzb-section:empty {
  display: none;
}

body[data-elo-look="pulzus"] .plzb-note {
  margin: 0;
  color: var(--elo-mute);
  font-size: calc(13px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-hint {
  margin: 0;
  color: var(--elo-mute);
  font-size: calc(12.5px * var(--elo-font-scale));
  line-height: 1.45;
}

/* ---------------------------------------------------------- gombok */
body[data-elo-look="pulzus"] .plzb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--plzb-edge-hi);
  border-radius: 13px;
  background: color-mix(in srgb, var(--elo-ink) 7%, transparent);
  color: var(--elo-ink);
  font: 600 calc(14px * var(--elo-font-scale))/1.2 var(--elo-font-head);
  cursor: pointer;
  transition: transform calc(0.18s * var(--elo-motion)) ease;
}

body[data-elo-look="pulzus"] .plzb-btn:hover {
  border-color: var(--elo-water);
}

body[data-elo-look="pulzus"] .plzb-btn:active {
  transform: scale(0.98);
}

body[data-elo-look="pulzus"] .plzb-btn.is-primary {
  border-color: color-mix(in srgb, var(--elo-water) 60%, transparent);
  background: color-mix(in srgb, var(--elo-water) 20%, transparent);
}

/* ---------------------------------------------------------- eszközök */
body[data-elo-look="pulzus"] .plzb-toolbar {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
}

body[data-elo-look="pulzus"] .plzb-search {
  position: relative;
  display: block;
}

body[data-elo-look="pulzus"] .plzb-search > .plzb-ui {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 2;
  color: var(--elo-mute);
  transform: translateY(-50%);
  pointer-events: none;
}

body[data-elo-look="pulzus"] .plzb-search-input {
  padding-left: 42px;
}

body[data-elo-look="pulzus"] .plzb-chips {
  gap: 8px;
}

body[data-elo-look="pulzus"] .plzb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-color: var(--plzb-edge);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plzb-chip small {
  color: var(--elo-mute);
  font: 500 calc(11.5px * var(--elo-font-scale))/1 var(--elo-font-mono);
}

body[data-elo-look="pulzus"] .plzb-chip.on {
  border-color: var(--elo-water);
  background: color-mix(in srgb, var(--elo-water) 20%, transparent);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plzb-devices {
  display: grid;
  gap: 22px;
}

body[data-elo-look="pulzus"] .plzb-group {
  display: grid;
  gap: 12px;
}

body[data-elo-look="pulzus"] .plzb-group-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--elo-ink);
  font: 500 calc(12px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-elo-look="pulzus"] .plzb-group-h > i {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--elo-c, var(--elo-mute));
}

body[data-elo-look="pulzus"] .plzb-group-h small {
  color: var(--elo-mute);
  font: inherit;
  opacity: 0.8;
}

body[data-elo-look="pulzus"] .plzb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-elo-look="pulzus"] .plzb-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 22px;
  border: 1px dashed var(--plzb-edge-hi);
  border-radius: 18px;
  background: var(--plzb-glass-a);
}

body[data-elo-look="pulzus"] .plzb-empty h3 {
  margin: 0;
  font: 600 calc(18px * var(--elo-font-scale))/1.3 var(--elo-font-head);
}

body[data-elo-look="pulzus"] .plzb-empty p {
  margin: 0;
  color: var(--elo-mute);
}

/* ---------------------------------------------------------- panelek */
body[data-elo-look="pulzus"] .plzb-panel {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
}

body[data-elo-look="pulzus"] .plzb-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-elo-look="pulzus"] .plzb-panel-head h2 {
  margin: 0;
  color: var(--elo-mute);
  font: 500 calc(12px * var(--elo-font-scale))/1.2 var(--elo-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-elo-look="pulzus"] .plzb-panel-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--elo-c, var(--elo-mute)) 16%, transparent);
  color: var(--elo-c, var(--elo-ink));
}

body[data-elo-look="pulzus"] .plzb-panel-ic .plzb-ui {
  width: 17px;
  height: 17px;
}

/* ---------------------------------------------------------- energia */
body[data-elo-look="pulzus"] .plzb-flow-wrap {
  display: grid;
  gap: 12px;
}

body[data-elo-look="pulzus"] .plzb-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "pv pv" "w1 w1" "house house" "w2 w3" "grid bat" "yld exp";
  grid-template-rows: auto 46px auto 46px auto auto;
  justify-items: stretch;
  gap: 0 10px;
}

body[data-elo-look="pulzus"] .plzb-node {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
}

body[data-elo-look="pulzus"] .plzb-node-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--elo-c, var(--elo-mute)) 38%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--elo-c, var(--elo-mute)) calc(var(--plzb-tint) * 100%), transparent);
}

body[data-elo-look="pulzus"] .plzb-node-ic .elo-glyph {
  width: 25px;
  height: 25px;
}

body[data-elo-look="pulzus"] .plzb-node h3 {
  margin: 0;
  color: var(--elo-mute);
  font: 500 calc(11.5px * var(--elo-font-scale))/1.3 var(--elo-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-elo-look="pulzus"] .plzb-node-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

body[data-elo-look="pulzus"] .plzb-node-num b {
  font: 600 calc(34px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

body[data-elo-look="pulzus"] .plzb-node-num small {
  color: var(--elo-mute);
  font: 500 calc(14px * var(--elo-font-scale))/1 var(--elo-font-mono);
}

body[data-elo-look="pulzus"] .plzb-node-none {
  color: var(--elo-mute);
  font: 500 calc(17px * var(--elo-font-scale))/1.3 var(--elo-font-head);
}

body[data-elo-look="pulzus"] .plzb-node-extra {
  color: var(--elo-ink);
  font-size: calc(13px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-node-age {
  min-height: 1.2em;
  color: var(--elo-mute);
  font-size: calc(12px * var(--elo-font-scale));
}

/* Elavult mérés: a szám másodlagos szövegszínt kap, nem halványítást (az egység és a kor is olvasható marad, UI-06). */
body[data-elo-look="pulzus"] .plzb-node.is-stale .plzb-node-num b {
  color: var(--elo-mute);
}

body[data-elo-look="pulzus"] .plzb-node.is-none {
  border-style: dashed;
}

body[data-elo-look="pulzus"] .plzb-node-home {
  --elo-c: var(--elo-ink);
  border-color: var(--plzb-edge-hi);
}

body[data-elo-look="pulzus"] .plzb-node[style*="yld"],
body[data-elo-look="pulzus"] .plzb-node[style*="exp"] {
  margin-top: 10px;
}

/* Vezeték: a fényimpulzus csak mért áramlásnál fut (az irányt az `is-fwd` / `is-rev` adja). */
body[data-elo-look="pulzus"] .plzb-wire {
  position: relative;
  align-self: stretch;
  justify-self: center;
  width: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--plzb-wire);
}

body[data-elo-look="pulzus"] .plzb-wire > i {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 34%;
  background: linear-gradient(180deg, transparent, var(--plzb-flow), transparent);
  transform: translateY(-110%);
}

body[data-elo-look="pulzus"] .plzb-wire:is(.is-fwd, .is-rev) > i {
  display: block;
  animation: plzb-run-y 1.9s linear infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .plzb-wire.is-rev > i {
  animation-direction: reverse;
}

body[data-elo-look="pulzus"] .plzb-wire:not(.is-fwd):not(.is-rev) {
  background: repeating-linear-gradient(180deg, var(--plzb-wire) 0 4px, transparent 4px 8px);
}

@keyframes plzb-run-y {
  from { transform: translateY(-110%); }
  to { transform: translateY(300%); }
}

@keyframes plzb-run-x {
  from { transform: translateX(-110%); }
  to { transform: translateX(300%); }
}

/* ---------------------------------------------------------- tablet és gép */
@media (min-width: 600px) {
  body[data-elo-look="pulzus"] .plzb-toolbar {
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    align-items: center;
  }

  body[data-elo-look="pulzus"] .plzb-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
  }
}

@media (min-width: 720px) {
  body[data-elo-look="pulzus"] .plzb-flow {
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.15fr) 84px minmax(0, 1fr);
    grid-template-areas: "pv w1 house w2 grid" ". . w3 . ." "yld . bat . exp";
    grid-template-rows: auto 52px auto;
    gap: 0;
  }

  body[data-elo-look="pulzus"] .plzb-node[style*="yld"],
  body[data-elo-look="pulzus"] .plzb-node[style*="exp"] {
    margin-top: 0;
  }

  body[data-elo-look="pulzus"] .plzb-wire {
    width: auto;
    height: 3px;
    align-self: center;
    justify-self: stretch;
  }

  body[data-elo-look="pulzus"] .plzb-wire[style*="w3"] {
    width: 3px;
    height: auto;
    align-self: stretch;
    justify-self: center;
  }

  body[data-elo-look="pulzus"] .plzb-wire:not([style*="w3"]) > i {
    width: 34%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--plzb-flow), transparent);
    transform: translateX(-110%);
  }

  body[data-elo-look="pulzus"] .plzb-wire:not([style*="w3"]):is(.is-fwd, .is-rev) > i {
    animation-name: plzb-run-x;
  }

  body[data-elo-look="pulzus"] .plzb-wire:not([style*="w3"]):not(.is-fwd):not(.is-rev) {
    background: repeating-linear-gradient(90deg, var(--plzb-wire) 0 4px, transparent 4px 8px);
  }
}

@media (min-width: 960px) {
  body[data-elo-look="pulzus"] .plzb-page {
    gap: 22px;
  }
}

@media (min-width: 1200px) {
  body[data-elo-look="pulzus"] .plzb-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

/* H2-019 / OW-03 / UI-13: gépen a kategóriák fejléces szakaszok, rácsban egymás mellé (a CSS-oszlopos
 * tördelés görgetőben rossz helyre rajzolta a kártyákat, ezért grid). A szakaszokon belül a kártyák
 * egységes rácsban, soronként egyforma magasan ülnek. A szűrt (egy rácsos) nézet és az üres/betöltő
 * üzenet a teljes szélességet kapja. */
@media (min-width: 960px) {
  body[data-elo-look="pulzus"] .plzb-devices {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    column-gap: 26px;
    align-items: start;
  }

  body[data-elo-look="pulzus"] .plzb-devices > :is(.plzb-grid, .plzb-empty, .plzb-note, .plzb-group:only-child) {
    grid-column: 1 / -1;
  }
}
/* Élő otthon 2 · Pulzus B: a Kert, a Biztonság és a Továbbiak lap elrendezése.
 *
 * A közös lapkeret és a fejléc a 97_pulzus_b_pages.css-ben van. Az indítás kizárólag a kezelőlap
 * tartott gombjával történik; a lapon csak „Megnyitás” gombok vannak.
 */
/* ---------------------------------------------------------- kert */
body[data-elo-look="pulzus"] .plzb-garden {
  display: grid;
  gap: 16px;
}

body[data-elo-look="pulzus"] .plzb-garden-main,
body[data-elo-look="pulzus"] .plzb-garden-side {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-decision {
  gap: 12px;
  padding: 22px;
  box-shadow: var(--plzb-shadow), inset 3px 0 0 var(--elo-tone, var(--elo-mute)), inset 0 1px 0 var(--plzb-hi);
}

body[data-elo-look="pulzus"] .plzb-decision-text {
  margin: 0;
  font: 600 clamp(20px, 3vw, 28px)/1.25 var(--elo-font-head);
  letter-spacing: -0.015em;
}

body[data-elo-look="pulzus"] .plzb-run {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--elo-water) 55%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--elo-water) 14%, transparent);
  font: 600 calc(14px * var(--elo-font-scale))/1.3 var(--elo-font-body);
}

body[data-elo-look="pulzus"] .plzb-run-ic .elo-glyph {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .plzb-beats {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-elo-look="pulzus"] .plzb-beats li {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--elo-ink) 5%, transparent);
  color: var(--elo-mute);
  font-size: calc(14px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-beats time {
  flex: none;
  color: var(--elo-mute);
  font: 500 calc(12px * var(--elo-font-scale))/1.5 var(--elo-font-mono);
}

body[data-elo-look="pulzus"] .plzb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

body[data-elo-look="pulzus"] .plzb-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
}

body[data-elo-look="pulzus"] .plzb-tile-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--elo-c, var(--elo-mute)) 16%, transparent);
  color: var(--elo-c, var(--elo-ink));
}

body[data-elo-look="pulzus"] .plzb-tile h3 {
  margin: 0;
  color: var(--elo-mute);
  font: 500 calc(11.5px * var(--elo-font-scale))/1.3 var(--elo-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-elo-look="pulzus"] .plzb-tile-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

body[data-elo-look="pulzus"] .plzb-tile-num b {
  font: 600 calc(30px * var(--elo-font-scale))/1.1 var(--elo-font-head);
  letter-spacing: -0.02em;
}

body[data-elo-look="pulzus"] .plzb-tile-num b.is-word {
  font-size: calc(19px * var(--elo-font-scale));
  letter-spacing: -0.01em;
}

body[data-elo-look="pulzus"] .plzb-tile-num small {
  color: var(--elo-mute);
  font: 500 calc(14px * var(--elo-font-scale))/1 var(--elo-font-mono);
}

body[data-elo-look="pulzus"] .plzb-tile-sub {
  color: var(--elo-mute);
  font-size: calc(12.5px * var(--elo-font-scale));
}

/* Hibás csempe: a „Nem érhető el” a hibaszínt tartja, de félkövéren (700): 19 px félkövér már nagy
 * szövegnek számít, így a 3:1 küszöb érvényes. A vastagság nélkül a narancs 3,4–3,7:1 volt nappal (UI-06). */
body[data-elo-look="pulzus"] .plzb-tile[data-tone="off"] .plzb-tile-num b {
  color: var(--elo-warn);
}

/* A betűméret legalább 19 px (a 0,92-es szövegskálán is), hogy a nagy-szöveg küszöb megmaradjon. */
body[data-elo-look="pulzus"] .plzb-tile[data-tone="off"] .plzb-tile-num b.is-word {
  font-weight: 700;
  font-size: calc(19px * max(1, var(--elo-font-scale)));
}

body[data-elo-look="pulzus"] .plzb-pump-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-elo-look="pulzus"] .plzb-pump-row b {
  display: block;
  font: 600 calc(16px * var(--elo-font-scale))/1.25 var(--elo-font-head);
}

body[data-elo-look="pulzus"] .plzb-pump-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--elo-tone, var(--elo-mute));
  font-size: calc(13px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-pump-state > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

body[data-elo-look="pulzus"] .plzb-zones {
  display: grid;
  gap: 8px;
}

body[data-elo-look="pulzus"] .plzb-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--plzb-edge);
  border-radius: 14px;
  background: color-mix(in srgb, var(--elo-ink) 4%, transparent);
  color: var(--elo-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-elo-look="pulzus"] .plzb-zone:hover {
  border-color: var(--plzb-edge-hi);
}

body[data-elo-look="pulzus"] .plzb-zone .plzb-ico {
  width: 38px;
  height: 38px;
}

body[data-elo-look="pulzus"] .plzb-zone-id {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-zone-id b {
  overflow: hidden;
  font: 600 calc(14.5px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-zone-state {
  color: var(--elo-mute);
  font-size: calc(12.5px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-zone.is-run {
  border-color: color-mix(in srgb, var(--elo-water) 60%, transparent);
  background: color-mix(in srgb, var(--elo-water) 12%, transparent);
}

body[data-elo-look="pulzus"] .plzb-program-text {
  margin: 0;
  font: 600 calc(17px * var(--elo-font-scale))/1.3 var(--elo-font-head);
}

/* ---------------------------------------------------------- biztonság */
body[data-elo-look="pulzus"] .plzb-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  box-shadow: var(--plzb-shadow), inset 3px 0 0 var(--elo-tone, var(--elo-mute)), inset 0 1px 0 var(--plzb-hi);
}

body[data-elo-look="pulzus"] .plzb-hero > div {
  flex: 1 1 220px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-hero-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 50%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 14%, transparent);
  color: var(--elo-tone, var(--elo-ink));
}

body[data-elo-look="pulzus"] .plzb-hero-ic .plzb-ui {
  width: 28px;
  height: 28px;
}

body[data-elo-look="pulzus"] .plzb-hero h3 {
  margin: 0;
  font: 600 calc(22px * var(--elo-font-scale))/1.2 var(--elo-font-head);
  letter-spacing: -0.015em;
}

body[data-elo-look="pulzus"] .plzb-hero p {
  margin: 2px 0 0;
  color: var(--elo-mute);
  font-size: calc(14px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-banner {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--elo-tone, var(--elo-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 12%, var(--elo-s1));
  font-weight: 600;
}

body[data-elo-look="pulzus"] .plzb-alert-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-elo-look="pulzus"] .plzb-alert-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--elo-tone, var(--elo-mute)) 9%, transparent);
}

body[data-elo-look="pulzus"] .plzb-alert-list li > div {
  display: grid;
  flex: 1 1 200px;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-alert-list li > div > span {
  color: var(--elo-mute);
  font-size: calc(13px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-alert-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--elo-tone, var(--elo-mute));
}

body[data-elo-look="pulzus"] .plzb-card-cam {
  min-height: 168px;
}

/* ---------------------------------------------------------- továbbiak */
body[data-elo-look="pulzus"] .plzb-more-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

body[data-elo-look="pulzus"] .plzb-more {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--elo-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform calc(0.2s * var(--elo-motion)) ease;
}

body[data-elo-look="pulzus"] .plzb-more:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--plzb-edge-hi);
}

body[data-elo-look="pulzus"] .plzb-more-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--plzb-edge);
  border-radius: 14px;
  background: color-mix(in srgb, var(--elo-water) 14%, transparent);
  color: var(--elo-water);
}

body[data-elo-look="pulzus"] .plzb-more-ic .plzb-ui {
  width: 22px;
  height: 22px;
}

body[data-elo-look="pulzus"] .plzb-more-id {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

body[data-elo-look="pulzus"] .plzb-more-id b {
  font: 600 calc(15px * var(--elo-font-scale))/1.3 var(--elo-font-head);
}

body[data-elo-look="pulzus"] .plzb-more-id span {
  color: var(--elo-mute);
  font-size: calc(12.5px * var(--elo-font-scale));
}

body[data-elo-look="pulzus"] .plzb-more-go {
  color: var(--elo-mute);
}

@media (min-width: 600px) {
  body[data-elo-look="pulzus"] .plzb-more-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (min-width: 960px) {
  body[data-elo-look="pulzus"] .plzb-garden {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    align-items: start;
  }
}

/* H2-012: a rács- és oszlopgyerekek zsugorodnak (min-width: 0), a szóköz nélküli hosszú név
 * a saját dobozában törik, nem tolja ki a panelt a képernyőről. */
body[data-elo-look="pulzus"] .plz-core > *,
body[data-elo-look="pulzus"] .plz-stage > *,
body[data-elo-look="pulzus"] .plz-horizon,
body[data-elo-look="pulzus"] .plz-sentence,
body[data-elo-look="pulzus"] .plzb-garden-main > *,
body[data-elo-look="pulzus"] .plzb-garden-side > *,
body[data-elo-look="pulzus"] .plzb-pump,
body[data-elo-look="pulzus"] .plzb-alerts,
body[data-elo-look="pulzus"] .plzb-alert-list li > div,
body[data-elo-look="pulzus"] .plzb-hero > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Élő otthon 2 · Pulzus B: kezelőlap (sheet), leállítósáv, toast és dialógusok.
 *
 * A közös felületeket (95_elo_05_shell.css, 95_elo_15_stopbar.css, 95_elo_25_sheet.css) a Pulzus
 * tokenekkel színezi át, a szerkezetük és a logikájuk (tartott gomb, leállítás) változatlan.
 *
 * Leállítósáv: a Pulzusban a képernyő tetején áll (`position: fixed`, z-index 2560), így nem
 * ütközik az alul lebegő dokkal; minden lapon, nyitott kezelőlappal és dialógussal is látszik és
 * kattintható (44 px-es gombok). A helyét a `--elo-stopbar-h` méri; a lap tartalma ennyivel lejjebb
 * kerül, a kezelőlap és a dialógus a sáv alatt kezdődik: semmit nem takar el.
 */
body[data-elo-look="pulzus"] {
  /* H2-008: a kezelőlap teljesen átlátszatlan, hogy a lebegő dokk ne üssön át rajta. */
  --elo-sheet-bg: rgb(13, 21, 36);
  --elo-sheet-edge: rgba(176, 204, 255, 0.24);
  --elo-sheet-radius: 24px 24px 0 0;
  --elo-sheet-radius-wide: 24px 0 0 24px;
  --elo-sheet-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.7);
  --elo-scrim: rgba(3, 8, 18, 0.58);
  --elo-stop-bg: linear-gradient(90deg, #0B2230, #10202F);
  --elo-stop-edge: #3FD8C7;
  --elo-stop-ink: #EAF6FA;
  --elo-stop-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] {
  --elo-sheet-bg: rgb(252, 254, 255);
  --elo-sheet-edge: rgba(24, 52, 98, 0.2);
  --elo-sheet-shadow: 0 -24px 60px -24px rgba(20, 44, 90, 0.55);
  --elo-scrim: rgba(18, 36, 68, 0.38);
  --elo-stop-bg: linear-gradient(90deg, #E3F4F4, #EAF2FA);
  --elo-stop-edge: #08796F;
  --elo-stop-ink: #0B1B2A;
  --elo-stop-shadow: 0 12px 28px -12px rgba(20, 44, 90, 0.45);
}

/* ---------------------------------------------------------- kezelőlap */
body[data-elo-look="pulzus"] .elo-sheet {
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .elo-sheet-head h3 {
  font: 600 calc(19px * var(--elo-font-scale))/1.25 var(--elo-font-head);
  letter-spacing: -0.01em;
}

body[data-elo-look="pulzus"] .elo-icon-btn {
  border-color: var(--plzb-edge-hi);
  border-radius: 13px;
  color: var(--elo-ink);
}

body[data-elo-look="pulzus"] .elo-grab {
  background: var(--plzb-edge-hi);
}

body[data-elo-look="pulzus"] .elo-sheet :is(.elo-dsheet-block, .elo-dsheet-confirm, .elo-dsheet-readonly, .elo-dsheet-alert) {
  border-color: var(--plzb-edge);
  border-radius: 16px;
  background: color-mix(in srgb, var(--elo-ink) 5%, transparent);
}

body[data-elo-look="pulzus"] .elo-sheet .elo-dsheet-btn {
  border-color: var(--plzb-edge-hi);
  border-radius: 14px;
  background: color-mix(in srgb, var(--elo-ink) 7%, transparent);
}

body[data-elo-look="pulzus"] .elo-sheet .elo-hold {
  border-color: var(--elo-water);
  border-radius: 16px;
  background: color-mix(in srgb, var(--elo-water) 9%, transparent);
}

body[data-elo-look="pulzus"] .elo-sheet .elo-dsheet-label {
  letter-spacing: 0.14em;
}

/* Hely a felső leállítósáv alatt: telefonon alsó lap, tableten és gépen oldalpanel. */
body[data-elo-look="pulzus"][data-elo-stopbar="on"] .elo-sheet {
  bottom: 0;
  max-height: calc(88vh - var(--elo-stopbar-h, 62px));
}

@media (min-width: 640px) {
  body[data-elo-look="pulzus"][data-elo-stopbar="on"] .elo-sheet {
    top: var(--elo-stopbar-h, 62px);
    bottom: 0;
    max-height: none;
  }
}

/* A fátyol a sáv alatt kezdődik, így a sáv mindig tiszta marad. */
body[data-elo-look="pulzus"][data-elo-stopbar="on"] .elo-scrim {
  top: var(--elo-stopbar-h, 62px);
}

/* ---------------------------------------------------------- leállítósáv */
body[data-elo-look="pulzus"] .elo-stopbar {
  top: 0;
  bottom: auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-top: 0;
  border-bottom: 1px solid var(--elo-stop-edge);
  box-shadow: var(--elo-stop-shadow);
}

body[data-elo-look="pulzus"] .elo-stopbar-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 calc(14px * var(--elo-font-scale))/1.3 var(--elo-font-body);
}

body[data-elo-look="pulzus"] .elo-stopbar-text::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--elo-stop-edge);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--elo-stop-edge) 28%, transparent);
  animation: plzb-run-dot 1.8s ease-in-out infinite;
  animation-play-state: var(--elo-run);
}

body[data-elo-look="pulzus"] .elo-stopbar-actions button {
  border-radius: 13px;
  font-family: var(--elo-font-head);
}

body[data-elo-look="pulzus"] .elo-stopbar-stop {
  border-color: var(--elo-stop-ink);
  background: var(--elo-stop-ink);
  color: #0B1B2A;
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] .elo-stopbar-stop {
  color: #FFFFFF;
}

body[data-elo-look="pulzus"] .elo-stopbar-emerg {
  border-color: #FF8266;
  background: #FF8266;
  color: #1A0A05;
}

body[data-elo-look="pulzus"][data-elo-resolved="day"] .elo-stopbar-emerg {
  border-color: #BD3F0B;
  background: #BD3F0B;
  color: #FFFFFF;
}

body[data-elo-look="pulzus"][data-elo-stopbar="on"] #eloRoot {
  padding-top: var(--elo-stopbar-h, 62px);
}

/* A vészzár-sáv (#emergencyLockBar, sticky top:0 z 40) a felső leállítósáv alá kerül, a Feloldás
 * hivatkozásával együtt: a leállítósáv (z 2560) nem takarhatja el. A `!important` a sáv inline
 * `top:0` értékét írja felül; a sáv nélkül a sáv a helyén marad. */
body[data-elo-look="pulzus"][data-elo-stopbar="on"] #emergencyLockBar {
  top: var(--elo-stopbar-h, 62px) !important;
}

/* Modális dialógus alatt a sáv a dialógusban van (felül): a dialógus a sáv alatt kezdődik. */
body[data-elo-look="pulzus"] dialog[open]:has(> .elo-stopbar:not([hidden])) {
  inset-block: calc(var(--elo-stopbar-h, 62px) + 12px) 0 !important;
}

/* A toast és a tesztmód-jelzés a dokk fölött marad (a sáv fent van). */
body[data-elo-look="pulzus"] .toast,
body[data-elo-look="pulzus"][data-elo-stopbar="on"] .toast {
  bottom: calc(104px + env(safe-area-inset-bottom));
}

body[data-elo-look="pulzus"] .demo-mode-banner,
body[data-elo-look="pulzus"][data-elo-stopbar="on"] .demo-mode-banner {
  bottom: calc(100px + env(safe-area-inset-bottom));
}

@keyframes plzb-run-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.6; }
}

/* ---------------------------------------------------------- dialógusok (Megjelenés) */
html body[data-elo-look="pulzus"][data-theme] .display-dialog[open] {
  --display-radius: 24px;
  border: 1px solid var(--plzb-edge-hi);
}

html body[data-elo-look="pulzus"] .display-scrim {
  background: var(--elo-scrim);
}

/* A Megjelenés-dialógus a felső sáv alatt kezdődik. A közös szkript (09_display_dialog.js) az alsó
 * sáv helyét méri (`--display-stopbar-reserve`); a felső sávnál ez az egész ablakmagasság lenne,
 * ezért a Pulzus a saját, a sáv magasságából számolt helyet használja. */
html body[data-elo-look="pulzus"] .display-dialog[open][data-inline="true"] {
  inset: 12px;
  max-height: calc(100dvh - 24px);
}

html body[data-elo-look="pulzus"] .display-scrim {
  inset: 0;
}

html body[data-elo-look="pulzus"][data-elo-stopbar="on"] .display-dialog[open][data-inline="true"] {
  inset: calc(var(--elo-stopbar-h, 62px) + 12px) 12px 12px;
  max-height: calc(100dvh - 24px - var(--elo-stopbar-h, 62px));
}

html body[data-elo-look="pulzus"][data-elo-stopbar="on"] .display-scrim {
  inset: var(--elo-stopbar-h, 62px) 0 0;
}
/* Élő otthon 2 · Pulzus B: egységes kártyaméretek (OW-04).
 *
 * Elv: egy rácson belül az azonos szerepű kártyák egyforma szélesek és egyforma magasak. A magasságot a
 * rács adja (`grid-auto-rows`), a tartalom nem nyújtja: a név legfeljebb két, az alcím egy sor, az érték
 * két sor, a lábléc egy sor (a vágott szöveg a kártya `title` jelölésében és a kezelőlapon marad). A nagyobb
 * kártya (kamera) a rács egész számú cellája (2x1). Az energia-csomópontok egyforma szélesek és magasak.
 */
body[data-elo-look="pulzus"] {
  --plzb-card-h: 184px;
  --plzb-tile-h: 148px;
  --plzb-more-h: 88px;
  --plzb-node-h: 172px;
  --plzb-row-h: 58px;
  --plzb-fold-h: 52px;
}

/* ---------------------------------------------------------- eszközkártyák */
body[data-elo-look="pulzus"] .plzb-grid {
  grid-auto-rows: var(--plzb-card-h);
}

body[data-elo-look="pulzus"] .plzb-grid > .plzb-card {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plzb-grid > .plzb-card-cam {
  min-height: 0;
}

body[data-elo-look="pulzus"] .plzb-card .plzb-card-foot {
  flex-wrap: nowrap;
  max-height: 28px;
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plzb-card .plzb-card-foot > * {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-card .plzb-card-val {
  max-height: 64px;
  overflow: hidden;
}

/* ---------------------------------------------------------- Kert állapot csempék */
body[data-elo-look="pulzus"] .plzb-tiles {
  grid-auto-rows: var(--plzb-tile-h);
}

body[data-elo-look="pulzus"] .plzb-tiles > .plzb-tile {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plzb-tile h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-tile-num b.is-word {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

body[data-elo-look="pulzus"] .plzb-tile-sub {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------------------------------------------------------- Továbbiak */
body[data-elo-look="pulzus"] .plzb-more-grid {
  grid-auto-rows: var(--plzb-more-h);
}

body[data-elo-look="pulzus"] .plzb-more-grid > .plzb-more {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plzb-more-id b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-elo-look="pulzus"] .plzb-more-id span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------------------------------------------------------- energia: egyforma csomópontok */
body[data-elo-look="pulzus"] .plzb-node {
  height: var(--plzb-node-h);
  overflow: hidden;
}

@media (min-width: 720px) {
  body[data-elo-look="pulzus"] .plzb-flow {
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) 84px minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------- összecsukott szakaszok és sorok */
body[data-elo-look="pulzus"] .plzb-fold-h {
  height: var(--plzb-fold-h);
  min-height: var(--plzb-fold-h);
}

body[data-elo-look="pulzus"] .plzb-fold-t {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body[data-elo-look="pulzus"] .plzb-rows {
  grid-auto-rows: var(--plzb-row-h);
}

body[data-elo-look="pulzus"] .plzb-row {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-elo-look="pulzus"] .plzb-row-state {
  max-width: 100%;
  overflow: hidden;
}