/* === App fixes injected === */
html, body { overflow-x: hidden; }
.fab-contact { position: fixed; right: 16px; bottom: 16px; z-index: 1000; }
@media (max-width: 480px){ .fab-contact { right: 12px; bottom: 12px; } .fab-contact .label { display: none; } }

/* mobile menu layer higher than floating FAB */
.app-mobile-overlay { position: fixed; inset: 0; display: none; background: rgba(0,0,0,.3); z-index: 1100; }
.menu-open .app-mobile-overlay { display: block; }
.app-mobile-sheet { position: absolute; top:0; left:0; width:88%; max-width:360px; height:100%; background:#fff; overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,.15); }

.config-section { max-width: 960px; margin-inline: auto; padding-inline: 16px; }
@media (max-width: 480px){ .config-section { padding-bottom: 88px; } }

.btn-group, .options, .option-group, .choices { display:flex; flex-wrap: wrap; gap:12px; }
.btn, .option, .choice, .chip { flex: 1 1 calc(50% - 12px); min-width: 140px; white-space: normal; line-height: 1.2; }

.option-label, .btn span, .chip span { word-break: break-word; hyphens: auto; }

/* images responsive */
img { max-width: 100%; height: auto; }
figure img { width:100%; height:auto; }

/* cards/grid for devices page (best effort) */
.devices-grid, .device-list, .cards { display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .devices-grid, .device-list, .cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px){ .devices-grid, .device-list, .cards { grid-template-columns: repeat(3,1fr); } }

.device-card img, .card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.device-card, .card { border:1px solid #eef0f4; border-radius:14px; padding:12px; }
/* paper background for cards */
.bg-paper{background-image:url('../assets/img/paper.png');background-size:256px 256px;background-repeat:repeat}