:root {
            --bg: #121212;
            --panel: #1b1b1b;
            --panel2: #202020;
            --text: #e9e9e9;
            --muted: #b7b7b7;
            --line: #2a2a2a;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
            background: var(--bg);
            color: var(--text);
        }

        .app {
            display: grid;
            grid-template-columns: 420px 1fr 360px;
            height: 100vh;
        }

            .app.app--solo {
                grid-template-columns: 1fr !important;
            }

        .sidebar {
            background: linear-gradient(180deg,var(--panel),var(--panel2));
            border-right: 1px solid var(--line);
            padding: 14px;
            overflow: auto;
        }

        .brand {
            font-weight: 800;
            letter-spacing: .3px;
            font-size: 16px;
            margin: 0 0 6px;
        }

        .sub {
            margin: 0 0 12px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .toolbox {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }



            .tool:hover {
                border-color: #3a3a3a;
            }

            .tool.selected {
                outline: 2px solid rgba(111,177,255,0.6);
            }

            .tool:active {
                cursor: grabbing;
            }

            .tool img {
                width: 96px;
                height: auto;
                border-radius: 10px;
                background: #0e0e0e;
                border: 1px solid #2a2a2a;
                padding: 6px;
            }

            .tool .name {
                font-weight: 750;
                margin: 0;
            }

            .tool .meta {
                color: var(--muted);
                font-size: 12px;
                margin: 4px 0 0;
            }

        .row {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 12px;
        }

        .btn {
            appearance: none;
            border: 1px solid var(--line);
            background: #151515;
            color: var(--text);
            padding: 8px 10px;
            border-radius: 12px;
            cursor: pointer;
            font-weight: 650;
        }

            .btn:hover {
                border-color: #3a3a3a;
            }

            .btn:active {
                transform: translateY(1px);
            }

            .btn.danger {
                border-color: rgba(255,90,90,.45);
            }

                .btn.danger:hover {
                    border-color: rgba(255,90,90,.8);
                }

        .hint {
            margin-top: 12px;
            padding: 10px;
            border-radius: 14px;
            border: 1px dashed #3a3a3a;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
        }

        .main {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            padding: 0;
        }

.canvasWrap {

    inset: 0;
    overflow: auto;
}

        canvas {
            display: block;
            background: #0b0b0b;
        }

        .status {
            position: absolute;
            left: 10px;
            bottom: 10px;
            background: rgba(0,0,0,.55);
            border: 1px solid rgba(255,255,255,.08);
            padding: 8px 10px;
            border-radius: 12px;
            font-size: 12px;
            color: var(--muted);
            backdrop-filter: blur(6px);
            pointer-events: none;
        }

        .pill {
            color: var(--text);
        }

        .kbd {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 11px;
            padding: 2px 6px;
            border: 1px solid rgba(255,255,255,.12);
            border-bottom-color: rgba(255,255,255,.05);
            border-radius: 8px;
            color: var(--text);
            background: rgba(255,255,255,.04);
        }

        .sectionTitle {
            margin: 12px 0 8px;
            font-size: 12px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .12em;
        }

        .sep {
            height: 1px;
            background: var(--line);
            margin: 12px 0;
        }

        .rightbar {
            background: linear-gradient(180deg,var(--panel),var(--panel2));
            border-left: 1px solid var(--line);
            padding: 14px;
            overflow: auto;
        }

            .rightbar .brand {
                font-size: 12px;
                margin: 0 0 8px;
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: .12em;
            }





        .rightbar .row {
            margin: 10px 0 0;
        }



/* Monster toolbox */


/* Feature contents panel */
.contentsPanel{
  border:1px solid var(--line);
  background: rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 10px;
}
.contentsHint{ font-size: 12px; opacity: .9; line-height: 1.25; }
.contentsTitle{ font-weight: 800; margin-bottom: 8px; }
.contentsPanel .row{
  display:flex; align-items:center; gap:8px; margin: 6px 0; flex-wrap: wrap;
}
.contentsPanel .lbl{ width: 72px; font-size: 12px; opacity: .9; }
.contentsPanel .num{
  width: 90px; padding: 6px 8px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0,0,0,0.18); color: var(--text);
}
.contentsPanel .sel{
  flex: 1 1 180px; min-width: 160px; padding: 6px 8px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0,0,0,0.18); color: var(--text);
}
.contentsPanel .btn{
  padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.08); color: var(--text); cursor:pointer; font-weight:700;
}
.contentsPanel .btn:hover{ filter: brightness(1.08); }
.contentsPanel .smallNote{ font-size: 11px; opacity: .75; }
.contentsStatus{ font-size: 12px; min-height: 16px; opacity: .95; margin-top: 6px; }
.contentsList{ margin-top: 8px; display:flex; flex-direction: column; gap: 6px; }
.contentsItem{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.10);
}
.contentsItem .left{ display:flex; flex-direction: column; min-width: 0; }
.contentsItem .nm{ font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contentsItem .qt{ font-size: 11px; opacity: .85; }
.contentsItem .del{
  padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.06); color: var(--text); cursor: pointer; font-weight: 800;
}
/* Collapsible toolboxes */
.collapsibleHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  user-select:none;
  cursor:pointer;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  margin-top: 8px;
  margin-bottom: 6px;
}
.collapsibleHeader .title{
  font-weight: 900;
  letter-spacing: 0.3px;
  font-size: 12px;
}
.collapsibleHeader .chev{
  font-weight: 900;
  font-size: 14px;
  opacity: .9;
}

details { border: 0; }
summary.collapsibleSummary{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  user-select:none;
  cursor:pointer;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  margin-top: 8px;
  margin-bottom: 6px;
  font-weight: 900;
  letter-spacing: 0.3px;
  font-size: 12px;
}
summary.collapsibleSummary::-webkit-details-marker { display:none; }
summary.collapsibleSummary::after{
  content: '▾';
  font-weight: 900;
  font-size: 14px;
  opacity: .9;
}
details:not([open]) > summary.collapsibleSummary::after{ content: '▸'; }

.featureThumb{ width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }



/* give the app content room under the fixed bar */
.app {
    height: 100vh;
}
/* Notes Modal */
.modalBack{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:10000; }
.modalCard{ width:min(520px, calc(100vw - 24px)); border-radius:16px; background:rgba(20,20,24,.98); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 30px rgba(0,0,0,.4); padding:14px; }
.modalTitle{ font-weight:900; margin-bottom:10px; }
.modalText{ width:100%; resize:vertical; min-height:120px; border-radius:12px; padding:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:inherit; outline:none; font:14px/1.3 sans-serif; }
.modalRow{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.modalHint{ opacity:.8; font-size:12px; margin-top:10px; }

.app.app--solo {
    padding-top: 0 !important;
}

.black-dialog .mud-dialog {
    background-color: #000;
    color: #fff;
}

.black-paper {
    background-color: #000;
    color: #fff;
}