.canvas-area{position:relative}.layout-toggle{position:absolute;right:5px;top:42%;z-index:12;display:flex;flex-direction:column;align-items:center;gap:6px;width:30px;padding:10px 5px;border:1px solid #4877bf;border-radius:12px 3px 3px 12px;background:#122d51e8;color:#c6ddff;box-shadow:0 6px 20px #0005;cursor:pointer;transition:background .2s}.layout-toggle>span{font:400 28px/.8 system-ui}.layout-toggle>b{writing-mode:vertical-rl;font:600 9px/1.2 system-ui;letter-spacing:.4px}.layout-toggle:hover,.layout-toggle.is-open{background:#2266ce;color:#fff;border-color:#8cb5ff}.layout-toggle:focus-visible{outline:2px solid white;outline-offset:2px}.layout-panel{position:absolute;top:50px;bottom:0;left:0;right:0;z-index:30;padding:22px 18px;background:linear-gradient(155deg,#15263f,#0d1523 60%);border-left:1px solid #365881;overflow-y:auto;color:#dce8fb;box-sizing:border-box}.layout-panel[hidden]{display:none!important}.layout-panel header{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:20px}.layout-panel header small{font-size:8px;letter-spacing:1.5px;color:#83abdf}.layout-panel h2{font-size:21px;line-height:1.2;letter-spacing:-.7px;margin:9px 0 0}.layout-close{border:1px solid #334b6a;border-radius:8px;background:#ffffff06;color:#b8cce9;width:28px;height:28px;cursor:pointer;font-size:20px}.layout-panel>p{font-size:12px;line-height:1.8;color:#a5b9d6}.layout-panel>label{display:grid;gap:10px;margin-top:22px;font-size:11px;font-weight:600}.layout-panel select{width:100%;border:1px solid #45618b;background:#101d32;border-radius:9px;color:#e3edff;padding:12px 9px;font-size:12px}.layout-panel .layout-keyboard{font-size:10px;line-height:1.9;color:#8cadd3}.layout-position{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0}.layout-position>span{background:#0b172a;border:1px solid #304763;border-radius:10px;padding:12px;font-size:10px;color:#8ba6ce}.layout-position b{display:block;margin-top:7px;font:600 16px/1.2 system-ui;color:#e5efff;font-variant-numeric:tabular-nums}.layout-panel-actions{display:grid;gap:9px}.layout-panel-actions button{background:#1c304b;border:1px solid #3a5478;border-radius:8px;padding:10px;color:#c8dcf8;cursor:pointer;font:600 11px system-ui}.layout-panel-actions button:hover{border-color:#82adf1;background:#284970}.layout-panel #layout-save-status{font-size:11px;color:#94c9ff;min-height:2em;margin-top:20px}.layout-panel>small{display:block;font-size:10px;color:#8aa1c2;line-height:1.8;margin-bottom:24px}.layout-panel #layout-done{width:100%;justify-content:center;padding:13px 10px;font-size:11px}@media(max-width:850px){.dashboard-body.is-layout-editing .dashboard-right{display:flex!important;position:fixed;top:auto;bottom:65px;right:10px;width:min(290px,calc(100vw - 20px));height:min(620px,73dvh);z-index:60;border:1px solid #365881;border-radius:14px;box-shadow:0 20px 65px #000b;overflow:hidden}.dashboard-body.is-layout-editing .dashboard-right>*:not(.layout-panel){display:none!important}.dashboard-body.is-layout-editing .layout-panel{top:0;border:0;padding:20px}.layout-toggle{right:2px}}@media(prefers-reduced-motion:reduce){.layout-toggle{transition:none}}
.canvas-area:fullscreen>.layout-panel{left:auto;right:12px;top:50px;bottom:20px;width:280px;border:1px solid #365881;border-radius:14px;box-shadow:0 20px 70px #0008}
