:root { --console-height: 365px; }
body.single-pack #pack-stage { bottom:var(--console-height); top:80px; }
body.single-pack .realistic-pack .pack {
  width:min(var(--pack-width,380px),calc((100dvh - var(--console-height) - 130px) * .6036),calc(100vw - 64px));
}
body.single-pack .hint { bottom:calc(var(--console-height) + 3px); margin:0; font-size:11px; }
.pack-console {
  position:fixed; z-index:620; bottom:18px; left:50%; transform:translateX(-50%);
  width:min(1080px,calc(100vw - 48px)); padding:16px 6px 6px;
  border:1px solid #2c2a32; border-radius:16px; background:#1b191f;
  box-shadow:0 12px 45px #0004; color:#e9e7ed; box-sizing:border-box;
  font-size:12px;
}
.console-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 12px 15px; }
.console-title { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.console-title h2 { font-size:13px; font-weight:600; letter-spacing:.02em; margin:0; }
.console-storage { display:flex; align-items:center; gap:6px; color:#8c8994; font-size:10px; }
.console-storage i { width:4px; height:4px; background:#a3b7a3; border-radius:50%; }
.console-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.console-actions button {
  border:1px solid transparent; background:transparent; color:#aaa6b2; border-radius:6px;
  padding:5px 8px; font:inherit; font-size:11px; cursor:pointer; white-space:nowrap;
}
.console-actions button:hover { color:#fff; background:#302d37; }
.console-actions [data-action="open"] { border-color:#45404d; color:#e7e3ee; background:#29252f; }
.console-actions [data-action="collapse"] { color:#dedbe4; }
.console-actions [data-action="collapse"] span { margin-left:4px; }
#console-body { background:#121016; border:1px solid #24212b; border-radius:11px; padding:12px; max-height:42dvh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#49434f transparent; }
#console-body[hidden] { display:none; }
.console-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.console-cell {
  display:flex; align-items:center; justify-content:space-between; min-width:0;
  height:40px; border-radius:7px; background:#201d25; color:#aaa6b2; padding:0 12px;
  position:relative; box-sizing:border-box; gap:12px; overflow:hidden;
}
.console-cell > span { white-space:nowrap; }
.console-cell output { color:#efedf3; font-size:12px; font-weight:600; white-space:nowrap; }
.console-range { background:linear-gradient(to right,#2b2732 0 var(--fill),#201d25 var(--fill) 100%); }
.console-range > span,.console-range output { position:relative; z-index:1; pointer-events:none; }
.console-range input {
  position:absolute; inset:0; margin:0; width:100%; height:100%; appearance:none;
  background:transparent; border:none; outline-offset:-2px; cursor:ew-resize; z-index:2;
}
.console-range input::-webkit-slider-runnable-track { height:18px; background:transparent; margin:0 5px; }
.console-range input::-webkit-slider-thumb { appearance:none; width:3px; height:18px; border-radius:3px; background:#77707e; box-shadow:0 0 0 3px #201d2540; }
.console-range input::-moz-range-track { height:18px; background:transparent; }
.console-range input::-moz-range-thumb { border:0; width:3px; height:18px; border-radius:3px; background:#77707e; }
.console-range:hover { filter:brightness(1.15); }
.console-select select { border:0; color:#efedf3; background:transparent; font:inherit; text-align:right; cursor:pointer; max-width:65%; outline-offset:3px; }
.console-select option { background:#201d25; }
.console-color { gap:8px; }
.console-color > span { margin-right:auto; }
.console-color input { width:24px; height:24px; padding:0; border:0; background:none; border-radius:5px; cursor:pointer; flex-shrink:0; }
.console-color input::-webkit-color-swatch-wrapper { padding:0; }
.console-color input::-webkit-color-swatch { border:1px solid #ffffff18; border-radius:5px; }
.console-color output { background:#302b36; border-radius:5px; padding:3px 7px; font-size:11px; }
.console-switch { cursor:pointer; }
.console-switch input { position:absolute; right:10px; width:36px; height:22px; opacity:0; margin:0; cursor:pointer; }
.console-switch i { width:34px; height:20px; border-radius:20px; background:#44404b; position:relative; pointer-events:none; }
.console-switch i:after { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#9b95a3; border-radius:50%; transition:transform .15s; }
.console-switch input:checked + i { background:#d6d2df; }
.console-switch input:checked + i:after { background:#26232d; transform:translateX(14px); }
.console-cell:focus-within { outline:1px solid #b4a4ce; outline-offset:1px; }
.console-note { display:flex; justify-content:space-between; gap:12px; margin:12px 1px 0; color:#77717f; font-size:10px; line-height:1.5; }
.console-note span { white-space:nowrap; }
.pack-console.is-collapsed { padding-bottom:1px; }
@media(max-width:760px) {
  .pack-console { width:calc(100vw - 24px); bottom:12px; padding-top:12px; }
  .console-header { flex-wrap:wrap; gap:10px; padding:0 8px 10px; }
  .console-title { width:100%; justify-content:space-between; }
  .console-actions { width:100%; justify-content:space-between; gap:2px; }
  .console-actions button { padding:4px 6px; font-size:10px; }
  .console-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  #console-body { max-height:35dvh; padding:8px; }
  .console-cell { padding:0 9px; height:38px; gap:6px; font-size:11px; }
  .console-cell output { font-size:11px; }
  .console-note { display:block; }
  .console-note span { display:none; }
  body.single-pack #pack-stage { top:88px; }
  body.single-pack .realistic-pack .pack { width:min(var(--pack-width,380px),calc((100dvh - var(--console-height) - 140px) * .6036),calc(100vw - 48px)); }
}