/* Diseño compacto para el control desde el teléfono. */
.mobile-header{max-width:480px;margin:auto;padding:24px 20px 12px;display:flex;align-items:center;justify-content:space-between}
.mobile-label{font-size:10px;letter-spacing:2px;color:#748076}
.mobile-header .brand span{display:inline;font-size:12px;margin-left:8px}
main{max-width:480px;padding:8px 16px 24px}
.connection{margin:8px 0 16px;padding:18px;flex-direction:column;align-items:stretch;gap:16px}
.card{padding:22px;margin-bottom:16px}
.card-heading{margin-bottom:20px}
.card h2{font-size:26px}
.clock-mode{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:14px;min-height:44px}
.clock-mode input{width:20px;height:20px;margin:0;accent-color:#213e32}
input[type=time]{min-height:64px;font-size:28px;padding:12px;width:100%;min-width:0}
button.primary{min-height:48px;font-size:14px}
.send-button{margin-top:20px}
.swatches{justify-content:space-between;gap:6px;margin:20px 0 26px}
.swatches button{width:40px;height:40px;min-width:40px}
input[type=range]{height:36px;margin:10px 0 2px}
.feedback{padding:0 4px 12px;min-height:0}
.footnote{padding:0 4px;margin:0;font-size:12px}
@media(max-width:350px){.card{padding:18px}.mobile-label{display:none}.swatches button{width:34px;height:34px;min-width:34px}}