.mobile-controls { display:none; }
@media(max-width:980px) {
    .mobile-controls:not([hidden]) {
        display:block; position:fixed; z-index:40; bottom:calc(12px + env(safe-area-inset-bottom));
        left:12px; right:12px; max-width:460px; margin-inline:auto;
        color:var(--color-text); background:var(--color-card);
        border:1px solid var(--color-border-strong); border-radius:14px;
        box-shadow:0 8px 32px #0003;
    }
    .mobile-controls summary {
        display:flex; align-items:center; justify-content:space-between;
        min-height:44px; padding:0 12px; cursor:pointer; font-weight:700; list-style:none;
    }
    .mobile-controls summary::-webkit-details-marker { display:none; }
    .mobile-controls summary::after { content:'+'; font-size:22px; }
    .mobile-controls[open] summary::after { content:'−'; }
    .mobile-controls-status { margin-left:auto; margin-right:8px; font-size:14px; color:var(--color-text-secondary); }
    .mobile-control-dock { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; padding:0 12px 8px; }
    .mobile-parameter-picker {
        height:88px; padding-block:22px; overflow-y:auto; overscroll-behavior:contain;
        scroll-snap-type:y mandatory; scrollbar-width:none; border-right:1px solid var(--color-border-strong);
        mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent);
    }
    .mobile-parameter-picker::-webkit-scrollbar { display:none; }
    .mobile-parameter-picker button {
        display:block; width:100%; min-height:44px; scroll-snap-align:center; scroll-snap-stop:always;
        color:var(--color-text-secondary); font-size:16px; text-align:left; padding-inline:6px;
        user-select:none; -webkit-user-select:none;
    }
    .mobile-parameter-picker button[hidden] { display:none; }
    .mobile-parameter-picker button[aria-selected=true] { color:var(--color-primary); font-weight:700; }
    .mobile-slider-panel { min-width:0; }
    .mobile-slider-value { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; text-align:center; }
    .mobile-slider-value output { min-width:0; font-size:16px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
    .mobile-slider-value button {
        min-height:44px; font-size:22px; color:var(--color-primary); touch-action:none;
        user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
    }
    #mobile-control-slider { width:100%; height:44px; margin:0; padding:0; accent-color:var(--color-primary); touch-action:pan-y; }
    #mobile-control-slider[aria-invalid=true] { outline:2px solid var(--color-invalid); }
    .workspace { padding-bottom:calc(160px + env(safe-area-inset-bottom)); }
    body:has(#intro-layer[style*="display: flex"]) .mobile-controls,
    body:has(.qr-modal.open) .mobile-controls,
    body:has(#setup-wizard.open) .mobile-controls { display:none; }
}
@media(max-width:980px) and (max-height:660px) {
    .mobile-controls[open] summary {
        float:left; width:44px; min-height:88px; padding:0; justify-content:center; font-size:0;
    }
    .mobile-controls[open] .mobile-controls-status { display:none; }
    .mobile-controls[open] .mobile-control-dock {
        margin-left:44px; grid-template-columns:88px minmax(0,1fr); gap:8px; padding:0 8px 8px 0;
    }
}
@media(min-width:600px) and (max-width:980px) and (max-height:660px) {
    .mobile-controls:not([hidden]) { left:auto; width:340px; }
}
@media(min-width:500px) and (max-width:599px) and (max-height:420px) {
    .mobile-controls:not([hidden]) { left:auto; width:290px; }
}