body.layout-classic header { top: max(12px, var(--safe-top)); bottom: auto !important; }
body.layout-classic #controls { bottom: max(30px, var(--safe-bottom)); top: auto !important; }
body.layout-classic #toolbar { top: 50%; bottom: auto !important; left: 16px; right: auto !important; display: flex; flex-direction: column; transform: translate(-200%, -50%); }
body.layout-classic #toolbar.active { transform: translate(0, -50%); }

body.layout-split header {
    bottom: max(18px, calc(var(--safe-bottom) + 10px));
    top: auto !important;
    width: min(95%, 640px);
}
body.layout-split #controls {
    top: max(10px, var(--safe-top));
    bottom: auto !important;
    width: min(95%, 640px);
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
}
body.layout-split #toolbar {
    top: 50%;
    bottom: auto !important;
    left: auto !important;
    right: 10px;
    display: flex;
    flex-direction: column;
    transform: translate(220%, -50%);
    max-height: calc(100vh - 180px);
}
body.layout-split #toolbar.active { transform: translate(0, -50%); }

body.layout-onehand header {
    bottom: max(130px, calc(var(--safe-bottom) + 110px));
    top: auto !important;
    width: min(96%, 680px);
} 
body.layout-onehand #controls {
    bottom: max(12px, var(--safe-bottom));
    top: auto !important;
    width: min(96%, 700px);
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px;
}
body.layout-onehand #toolbar {
    bottom: max(86px, calc(var(--safe-bottom) + 64px));
    top: auto !important;
    left: 50%;
    right: auto !important;
    display: flex;
    flex-direction: row;
    gap: 6px;
    max-width: min(96vw, 760px);
    overflow-x: auto;
    overflow-y: hidden;
    transform: translate(-50%, 200%);
}
body.layout-onehand #toolbar.active { transform: translate(-50%, 0); }