/* Poly Craft - hub palette: dark base, cyan/amber accents */
:root{
  /* tells the browser to render native widgets (dropdown popups, scrollbars,
     number spinners, file pickers) dark instead of the default white */
  color-scheme:dark;
  /* Spacing scale. Every vertical gap in a panel comes from one of these
     three, so the rhythm is a decision made once instead of per rule. */
  --pc-gap-tight:6px;
  --pc-gap:10px;
  --pc-gap-section:16px;
  --pc-bg:#0a0a0b;
  --pc-bg-2:#141416;
  --pc-bg-3:#1c1c1f;
  --pc-panel:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 55%,rgba(0,0,0,.22));
  --pc-field:#151517;
  --pc-border:rgba(190,195,205,.16);
  --pc-border-2:rgba(190,195,205,.26);
  --pc-accent:#4ECDC4;
  --pc-accent-2:#FFA726;
  --pc-text:#e2e4e8;
  --pc-dim:#9a9da4;
  /* per-group button colours, echoing the hub's section-coloured look */
  --pc-g-file:#FFA726;    /* save / load / export      */
  --pc-g-build:#4ECDC4;   /* primitives                */
  --pc-g-parts:#b98cff;   /* parts, duplicate, mirror  */
  --pc-g-select:#5fa8ff;  /* selection modes           */
  --pc-g-view:#8fa3b8;    /* camera, display           */
  --pc-g-xform:#ff9f6a;   /* move / rotate / scale     */
  --pc-g-shape:#ff6b81;   /* merge, smooth, delete     */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--pc-bg);
  background-image:linear-gradient(168deg,#242427 0%,#171719 38%,#0d0d0f 72%,#070708 100%);
  background-attachment:fixed;
  color:var(--pc-text);
  font-family:'Segoe UI',system-ui,Arial,sans-serif;font-size:13px;
  overflow:hidden;
}
#pc-app{display:flex;flex-direction:column;height:100vh}

/* Two decks. The upper one holds the project field and is deliberately
   mostly empty - that space is reserved for tools added later. The lower
   one is the real toolbar: identity, tabs, history, file actions, exit. */
#pc-top{
  display:flex;flex-direction:column;flex:0 0 auto;
  border-bottom:1px solid var(--pc-border);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  backdrop-filter:blur(6px);
}
/* Each deck is a left cluster and a right cluster, pushed apart by
   space-between. Placement is stated by which cluster an item sits in -
   no invisible spacer elements, no ordering tricks. */
#pc-rowtop,#pc-rowmain{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;height:44px;
  overflow-x:auto;overflow-y:hidden;
}
.pc-row-left,.pc-row-right{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
}
#pc-rowtop{
  border-bottom:1px solid var(--pc-border);
  background:rgba(0,0,0,.22);
}

/* a visually bound cluster of related buttons */
.pc-group{
  display:flex;align-items:center;gap:5px;
  padding:4px;border:1px solid var(--pc-border);border-radius:10px;
  background:rgba(0,0,0,.22);
}
.pc-tool-sep{width:1px;height:22px;margin:0 4px;background:var(--pc-border)}
.pc-tool-label{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--pc-dim);
}
.pc-logo{
  font-size:16px;letter-spacing:.4px;color:var(--pc-accent);
  line-height:1;margin-left:6px;
}
.pc-logo b{color:var(--pc-accent-2);font-weight:700}

/* id specificity so the generic .pc-input width:100% cannot win */
#pc-rowtop .pc-name{width:220px;flex:0 0 220px}
#pc-top .pc-btn,
#pc-top .pc-input{
  height:30px;padding:0 12px;display:inline-flex;align-items:center;
  border-radius:8px;font-size:12px;
}
#pc-top .pc-btn kbd{margin-left:7px}

.pc-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  color:var(--pc-text);
  border:1px solid var(--pc-border);border-radius:7px;
  padding:6px 11px;cursor:pointer;font-size:12px;line-height:1.2;
  transition:border-color .15s,color .15s,background .15s;
}
.pc-btn:hover{border-color:var(--pc-accent);color:var(--pc-accent)}
.pc-btn-accent{border-color:rgba(78,205,196,.6);color:var(--pc-accent)}
.pc-btn-accent:hover{background:rgba(78,205,196,.12)}
.pc-btn-secondary{color:var(--pc-dim)}
.pc-wide{display:block;width:100%;margin-top:var(--pc-gap);text-align:left}
.pc-btn kbd{
  float:right;font-size:10px;color:var(--pc-dim);
  border:1px solid var(--pc-border);border-radius:4px;padding:0 4px;
}
.pc-file{position:relative;overflow:hidden;display:inline-block}
.pc-file input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* File dropdown - the toolbar keeps one button, the rest lives in the pop */
.pc-menu{position:relative;display:inline-flex}
/* The toolbar row clips its overflow, so the pop is moved to <body> and
   placed in viewport coordinates - that is why it is fixed, not absolute. */
.pc-menu-pop{
  position:fixed;top:0;left:0;z-index:400;
  min-width:186px;display:none;flex-direction:column;gap:1px;padding:5px;
  border:1px solid var(--pc-border);border-radius:10px;
  background:linear-gradient(180deg,#1b1b1f,#141417);
  box-shadow:0 12px 28px rgba(0,0,0,.62);
}
.pc-menu-pop.pc-open{display:flex}
.pc-menu.pc-open>.pc-btn{border-color:var(--pc-accent-2);color:var(--pc-accent-2)}
.pc-menu-item{
  display:block;width:100%;text-align:left;box-sizing:border-box;
  background:none;border:0;border-radius:6px;color:var(--pc-text);
  padding:7px 10px;font-size:12px;line-height:1.2;cursor:pointer;
}
.pc-menu-item:hover{background:rgba(255,255,255,.085);color:var(--pc-accent-2)}
.pc-menu-file{position:relative;overflow:hidden}
.pc-menu-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pc-menu-sep{height:1px;margin:4px 2px;background:var(--pc-border)}
.pc-menu-head{
  padding:3px 10px 4px;font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--pc-dim);
}

.pc-input{
  background:var(--pc-field);color:var(--pc-text);
  border:1px solid var(--pc-border);border-radius:6px;
  padding:5px 8px;font-size:12px;width:100%;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.pc-input:focus{outline:none;border-color:var(--pc-accent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 2px rgba(78,205,196,.16)}
select.pc-input{
  appearance:none;cursor:pointer;padding-right:24px;
  background-image:linear-gradient(45deg,transparent 50%,var(--pc-dim) 50%),
                   linear-gradient(135deg,var(--pc-dim) 50%,transparent 50%);
  background-position:calc(100% - 13px) 51%,calc(100% - 8px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select.pc-input option,select.pc-input optgroup{background:var(--pc-bg-3);color:var(--pc-text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(150,175,200,.22);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(78,205,196,.45)}

/* ONE spacing scale for every panel, so nothing has to be judged by eye:
   tight  - controls that belong to the same thought (a label and its field)
   gap    - one block to the next (a button row, a checkbox, a list)
   section- before a sub-heading, where a new topic starts
   Anything that sat flush against the block above it - a "New layer" row
   welded to the bottom of the tree - was a rule missing its margin, not a
   deliberate choice. */
.pc-field{display:flex;align-items:center;gap:8px;margin-top:var(--pc-gap-tight);min-width:0}
.pc-field span{flex:1 1 auto;color:var(--pc-dim);font-size:11px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-field .pc-input{flex:1 1 auto;width:auto;min-width:0}
/* numbers: ~5 digits is all that's meaningful, don't stretch the row */
.pc-field input[type=number]{flex:0 0 68px;width:68px;padding:5px 6px}
.pc-check{display:flex;align-items:center;gap:7px;margin-top:var(--pc-gap);cursor:pointer}
.pc-check input{accent-color:var(--pc-accent);width:15px;height:15px}
.pc-check span{font-size:11px;color:var(--pc-dim)}
.pc-modes{display:flex;gap:5px;margin-top:var(--pc-gap)}
.pc-modes .pc-btn{flex:1;padding:6px 4px;text-align:center;font-size:11px}
.pc-modes .pc-btn kbd{float:none;display:block;margin-top:2px}
/* A heading already provides the separation, so the first block under one
   never doubles up on margin. */
.pc-panel h3 + *,.pc-sub + *{margin-top:0}
.pc-btn-on{border-color:var(--pc-accent-2);color:var(--pc-accent-2);
  background:rgba(255,167,38,.12)}

#pc-body{flex:1;display:flex;min-height:0}

#pc-left{
  width:var(--pc-side,220px);flex:0 0 var(--pc-side,220px);
  padding:12px;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008) 40%,transparent);
}
/* The object list is not a tab: it is the model's table of contents and has
   to stay readable whichever tool panel is open on the left, so it gets its
   own column on the right with its own drag handle. */
#pc-right{
  width:var(--pc-side-r,268px);flex:0 0 var(--pc-side-r,268px);
  padding:12px 12px 16px;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008) 40%,transparent);
}
#pc-resizer,#pc-resizer-r{
  flex:0 0 5px;cursor:col-resize;
  background:linear-gradient(90deg,transparent,rgba(150,175,200,.28),transparent);
  transition:background .15s;
}
#pc-resizer:hover,#pc-resizer.pc-dragging,
#pc-resizer-r:hover,#pc-resizer-r.pc-dragging{
  background:linear-gradient(90deg,transparent,var(--pc-accent),transparent)}
.pc-panel{
  background:var(--pc-panel);border:1px solid var(--pc-border-2);
  border-radius:12px;padding:12px;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 6px 16px rgba(0,0,0,.45);
}
.pc-panel h3{
  margin:0 0 var(--pc-gap);font-size:12px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;color:var(--pc-accent);
}

#pc-viewport{position:relative;flex:1;min-width:0}
#pc-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#pc-marquee{
  position:absolute;display:none;pointer-events:none;
  border:1px dashed var(--pc-accent-2);background:rgba(255,167,38,.08);
}
#pc-counts{
  position:absolute;right:10px;top:8px;pointer-events:none;
  color:var(--pc-dim);font-size:11px;
  background:rgba(14,16,19,.66);border:1px solid var(--pc-border);
  border-radius:8px;padding:4px 9px;
}

.pc-sub{
  margin:var(--pc-gap-section) 0 var(--pc-gap-tight);
  font-size:10px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--pc-dim);
}
.pc-xyz{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:var(--pc-gap-tight)}
.pc-xyz .pc-input{width:100%;min-width:0;padding:5px 6px;text-align:right}
.pc-xyz .pc-input:nth-child(1){border-left:3px solid #ff5f6d}
.pc-xyz .pc-input:nth-child(2){border-left:3px solid #6ddf6d}
.pc-xyz .pc-input:nth-child(3){border-left:3px solid #5fa8ff}
.pc-note{margin-top:var(--pc-gap-tight);font-size:10px;color:var(--pc-dim);line-height:1.5}

#pc-readout{
  position:absolute;left:10px;top:8px;pointer-events:none;display:none;
  font-family:Consolas,'Courier New',monospace;font-size:12px;line-height:1.6;
  color:var(--pc-text);background:rgba(0,0,15,.72);
  border:1px solid var(--pc-border);border-radius:8px;padding:6px 10px;
  white-space:pre;
}
#pc-readout .rx{color:#ff5f6d}
#pc-readout .ry{color:#6ddf6d}
#pc-readout .rz{color:#5fa8ff}
#pc-readout .rt{color:var(--pc-accent-2)}

/* Tab bar lives in the top bar, not the sidebar: adding more tabs there
   would keep widening the panel, which is exactly what we want to avoid. */
#pc-tabs{
  display:flex;gap:4px;flex:0 0 auto;
  border:1px solid var(--pc-border);border-radius:10px;padding:4px;
  background:rgba(0,0,0,.22);
}
.pc-tab-btn{
  background:transparent;color:var(--pc-dim);
  border:0;border-radius:7px;padding:0 16px;height:30px;cursor:pointer;
  font-size:11px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;
  transition:background .15s,color .15s;
}
.pc-tab-btn:hover{color:var(--pc-accent)}
.pc-tab-btn.pc-on{background:linear-gradient(180deg,rgba(78,205,196,.22),rgba(78,205,196,.08));
  color:var(--pc-accent);box-shadow:inset 0 0 0 1px rgba(78,205,196,.35)}
.pc-tab{display:none}
.pc-tab.pc-on{display:block}

.pc-twisty{color:var(--pc-text)}

/* Each panel declares its group colour once; its buttons, heading and hover
   states all read from --acc, so a group is recoloured in a single place. */
.pc-panel{--acc:var(--pc-accent)}
.pc-panel[data-acc="file"]{--acc:var(--pc-g-file)}
.pc-panel[data-acc="build"]{--acc:var(--pc-g-build)}
.pc-panel[data-acc="parts"]{--acc:var(--pc-g-parts)}
.pc-panel[data-acc="select"]{--acc:var(--pc-g-select)}
.pc-panel[data-acc="view"]{--acc:var(--pc-g-view)}
.pc-panel[data-acc="xform"]{--acc:var(--pc-g-xform)}
.pc-panel[data-acc="shape"]{--acc:var(--pc-g-shape)}
.pc-panel[data-acc="numeric"]{--acc:var(--pc-g-build)}
/* Render group: a warm light colour for the lamp settings and a cooler one
   for the image output, so the two halves of the tab read apart at a glance. */
.pc-panel[data-acc="light"]{--acc:#ffd166}
.pc-panel[data-acc="snap"]{--acc:#7fd8ff}
/* Print is its own colour because its buttons CHANGE GEOMETRY, unlike the
   render group next to it, which only changes how the model is drawn. */
.pc-panel[data-acc="print"]{--acc:#8ce99a}

/* Report rows. Each is a button: reading a count and acting on it are the
   same gesture, so the row selects what it found and frames it. */
.pc-report{display:flex;flex-direction:column;gap:2px;margin-top:var(--pc-gap)}
.pc-report-row{display:flex;align-items:center;gap:8px;width:100%;
  padding:3px 8px;border:0;border-left:3px solid transparent;border-radius:4px;
  background:transparent;color:var(--pc-text);font:inherit;font-size:12px;
  text-align:left;cursor:pointer}
.pc-report-row:hover{background:rgba(255,255,255,.07)}
.pc-report-row .n{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.9}
.pc-report-ok{border-left-color:#8ce99a;opacity:.65;cursor:default}
.pc-report-ok:hover{background:transparent}
.pc-report-warn{border-left-color:#ffd166}
.pc-report-bad{border-left-color:#ff6b81}
.pc-report-head{margin-top:6px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.6}
#pc-top{--acc:var(--pc-g-file)}

.pc-panel h3{color:var(--acc)}
.pc-panel .pc-btn{border-left:2px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.pc-btn:hover{border-color:var(--acc);color:var(--acc)}
.pc-btn.pc-btn-on{
  border-color:var(--acc);color:var(--acc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 20%,transparent),transparent);
}
.pc-btn-accent{
  border-color:var(--acc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 26%,transparent),
                                    color-mix(in srgb,var(--acc) 8%,transparent));
  color:#fff;
}
.pc-input:focus{border-color:var(--acc);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 2px color-mix(in srgb,var(--acc) 22%,transparent)}

/* A tool with a running modal pulses in its own group colour, so it is
   never a mystery which mode swallowed the mouse. */
.pc-btn.pc-btn-live{
  border-color:var(--acc);color:var(--acc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 30%,transparent),
                                    color-mix(in srgb,var(--acc) 10%,transparent));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent),
             0 0 12px color-mix(in srgb,var(--acc) 30%,transparent);
  animation:pc-live 1.1s ease-in-out infinite;
}
@keyframes pc-live{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 60%,transparent),
                                  0 0 18px color-mix(in srgb,var(--acc) 45%,transparent)}}

/* keyboard focus should be visible, but a mouse click must not leave the
   button looking latched */
.pc-btn:focus{outline:none}
.pc-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Pane plates. Purely an overlay - pointer events must fall straight through
   to the canvas, or clicking a pane would never reach the picker. */
#pc-panes{position:absolute;inset:0;pointer-events:none;z-index:2}
.pc-pane-label{
  position:absolute;box-sizing:border-box;
  border:1px solid var(--pc-border);pointer-events:none;
}
.pc-pane-label span{
  position:absolute;left:8px;top:6px;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pc-dim);
}
.pc-pane-label.pc-pane-on{border-color:var(--acc)}
.pc-pane-label.pc-pane-on span{color:var(--acc)}

/* Text-based scene tree. A row is one 20px line - two state letters, the
   name, the count - so three times as many rows fit as when every control
   was a bordered button. The letters ARE the buttons; at one character wide
   a border adds nothing but height. */
.pc-tree{
  margin-top:var(--pc-gap);max-height:46vh;overflow:auto;
  font-size:11px;line-height:1.05;
  border:1px solid var(--pc-border);border-radius:6px;
  padding:0 0 6px;background:rgba(0,0,0,.16);
}
/* The scene tree is the one list worth keeping tall: it is read constantly
   and a three-row-high box with a scrollbar was most of why the panel felt
   cramped. The light list stays as short as its contents. */
#pc-tree{min-height:150px}
.pc-tree-bar{display:flex;align-items:center;gap:4px;margin-top:var(--pc-gap)}
.pc-tree-bar .pc-input{flex:1 1 auto;min-width:0;padding:4px 7px;font-size:11px}
.pc-tree-bar .pc-flag{flex:0 0 20px;width:20px;font-size:10px}

.pc-row{
  display:flex;align-items:center;gap:5px;
  height:24px;padding:0 6px;
  cursor:pointer;color:var(--pc-text);white-space:nowrap;
}
.pc-row:hover{background:rgba(255,255,255,.07)}
.pc-row-empty{color:var(--pc-dim);cursor:default;padding-left:8px}
.pc-row-empty:hover{background:none}

/* LAYER row: a banded header that sticks to the top of the box while its
   objects scroll under it, so with many layers you always know which one you
   are looking inside.
   It also has to read as a DIFFERENT KIND of thing from the object rows under
   it - at the same height, weight and colour the whole box looked like one
   flat list. So a layer is taller, carries a coloured spine on its left edge
   in the panel's own group colour, sets its name in caps, and takes a clear
   gap above it; the objects below stay tight together, which is what turns
   the spacing itself into the grouping. */
.pc-row-layer{
  position:sticky;top:0;z-index:1;
  height:28px;margin-top:8px;padding-left:6px;
  background:linear-gradient(180deg,#1b2430,#161d27);
  border-top:1px solid var(--pc-border);
  border-bottom:1px solid rgba(0,0,0,.5);
  border-left:3px solid color-mix(in srgb,var(--acc) 70%,transparent);
}
.pc-row-layer:first-child{margin-top:0}
.pc-row-layer:hover{background:#1f2a38}
.pc-row-layer .pc-row-name{
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;
}
.pc-row-layer .pc-row-num::after{content:' obj'}
/* The active layer is where new objects are filed, so it is worth seeing
   without reading: the spine lights up fully and the band warms. */
.pc-row-layer.pc-row-active{
  border-left-color:var(--acc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 22%,#1b2430),#161d27);
}
.pc-row-layer.pc-row-active .pc-row-name{color:var(--acc)}

/* Colour dot at the end of a tree row. An unset colour reads as a hollow
   ring rather than a filled swatch, so "inherits" never looks like a choice. */
.pc-swatch{
  flex:0 0 10px;width:10px;height:10px;border-radius:50%;
  margin-left:6px;border:1px solid var(--pc-border);
}
.pc-swatch-off{background:transparent;opacity:.45}

/* OBJECT row: indented, with a guide line running up to its layer. The line
   starts under the layer's spine, so the two read as one bracket. */
.pc-row-obj{padding-left:26px;position:relative}
.pc-row-obj::before{
  content:'';position:absolute;left:14px;top:0;bottom:0;
  border-left:1px solid var(--pc-border);
}
.pc-row-obj .pc-row-num::after{content:' v'}

/* A light row borrows the object row so the tree reads as one list, but its
   number column holds a TYPE, not a vertex count - the ' v' suffix would be
   a lie. The void flag is an inert spacer standing in for the lock column a
   light does not have, so every name in the tree starts at the same x. */
.pc-row-light .pc-row-num::after{content:''}
.pc-row-light .pc-row-num{text-transform:uppercase;letter-spacing:.04em;font-size:9px}
.pc-flag-void{cursor:default;pointer-events:none}

/* The material ball sits centred above its fields, on the panel background
   so the checkerboard it draws is the only thing reading as transparency. */
#pc-mat-preview{
  display:block;margin:2px auto 8px;width:72px;height:72px;
  border:1px solid var(--pc-border);border-radius:8px;
}

.pc-row-glyph{
  flex:0 0 auto;color:var(--pc-dim);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;
}
.pc-flag{
  flex:0 0 12px;width:12px;padding:0;
  background:none;border:none;cursor:pointer;
  font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--pc-dim);text-align:center;line-height:1;
}
.pc-flag:hover{color:var(--acc)}
.pc-flag-on{color:var(--pc-text)}
.pc-flag:focus{outline:none}
.pc-twisty{color:var(--pc-dim)}
.pc-row-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pc-row-num{flex:0 0 auto;color:var(--pc-dim);font-size:10px}
.pc-row-active .pc-row-name{color:var(--acc)}
.pc-row-active .pc-row-glyph{color:var(--acc)}
.pc-row-sel{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.pc-row-sel .pc-row-name{color:var(--acc)}
/* PART of the object is selected - a few nodes, not the whole body. Half the
   tint and a dashed spine, because the difference matters: an op run on a
   half-selected object tears it, and the tree is where that is noticed. */
.pc-row-part{background:color-mix(in srgb,var(--acc) 7%,transparent)}
.pc-row-part .pc-row-name{color:color-mix(in srgb,var(--acc) 55%,var(--pc-text))}
.pc-row-obj.pc-row-sel::before,
.pc-row-obj.pc-row-part::before{border-left-color:var(--acc)}
.pc-row-obj.pc-row-part::before{border-left-style:dashed}
/* A layer holding any touched object says so, without pretending to be the
   ACTIVE layer - that is a different fact and keeps its stronger band. */
.pc-row-layer.pc-row-touch:not(.pc-row-active){
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,#1b2430),#161d27);
}
.pc-row-layer.pc-row-touch:not(.pc-row-active) .pc-row-name{
  color:color-mix(in srgb,var(--acc) 55%,var(--pc-text));
}
.pc-row-hidden{opacity:.45}
.pc-row-locked .pc-row-name{color:var(--pc-dim)}

/* Hover tooltip. Fixed position because it is placed against viewport
   coordinates and must escape every panel's overflow:auto - inside a
   scrolling panel an absolute tip would simply be clipped away. */
#pc-tip{
  position:fixed;z-index:60;max-width:280px;
  padding:7px 9px;border-radius:7px;
  border:1px solid var(--pc-border);
  background:#141a24;color:var(--pc-text);
  font-size:11px;line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s;
}
#pc-tip.pc-tip-on{opacity:1;visibility:visible}

/* A note that carries a data-tip is a summary line, not a paragraph: it says
   the short version and hands the long one to the tooltip. */
.pc-note[data-tip]{cursor:help;border-bottom:1px dotted var(--pc-border);
  display:inline-block;padding-bottom:2px}

#pc-status{
  padding:6px 12px;border-top:1px solid var(--pc-border);
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.05));
  color:var(--pc-dim);font-size:11px;min-height:26px;
}

@media(max-width:767px){
  #pc-body{flex-direction:column}
  #pc-left{width:100%;flex:0 0 auto;max-height:38vh;
    border-bottom:1px solid var(--pc-border)}
  #pc-right{width:100%;flex:0 0 auto;max-height:32vh;
    border-top:1px solid var(--pc-border)}
  #pc-resizer,#pc-resizer-r{display:none}
  #pc-top{flex-wrap:wrap}
}


/* ── COLLAPSIBLE PANELS ──────────────────────────────────────────────
   The heading is the toggle. A twisty glyph on the left says which way
   it goes; collapsed panels keep only their heading, so a tab with six
   panels can be reduced to six lines. */
.pc-panel > h3 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pc-panel > h3::before {
    content: "\25BE";              /* down triangle = open */
    font-size: .7em;
    opacity: .6;
    transition: transform .12s ease;
}

.pc-panel.pc-shut > h3::before { transform: rotate(-90deg); }

/* Everything under the heading folds away. Using a child selector keeps
   nested headings inside the body untouched. */
.pc-panel.pc-shut > *:not(h3) { display: none; }

/* ── COMMAND PALETTE ─────────────────────────────────────────────────
   The one control that does not grow with the feature count: everything
   is reachable by typing. Fixed, not absolute, so no panel's overflow
   can clip it. */
.pc-palette {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    background: rgba(0, 0, 0, .45);
}

.pc-palette[hidden] { display: none; }

.pc-palette-box {
    width: min(520px, 92vw);
    background: #16171a;
    border: 1px solid rgba(190, 195, 205, .28);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .65);
    overflow: hidden;
}

.pc-palette-input {
    width: 100%;
    padding: 13px 15px;
    font: inherit;
    font-size: .95rem;
    color: #eef2f8;
    background: #101114;
    border: 0;
    border-bottom: 1px solid rgba(190, 195, 205, .18);
    outline: none;
}

.pc-palette-list {
    max-height: 46vh;
    overflow-y: auto;
}

.pc-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    font-size: .86rem;
    color: rgba(235, 240, 250, .82);
    cursor: pointer;
}

.pc-palette-item.pc-on,
.pc-palette-item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* Where the command lives, so two similarly named actions can be told
   apart at a glance. */
.pc-palette-where {
    margin-left: auto;
    font-size: .74rem;
    color: rgba(235, 240, 250, .42);
    white-space: nowrap;
}

.pc-palette-state {
    font-size: .74rem;
    color: #4ECDC4;
}

.pc-palette-empty {
    padding: 14px 15px;
    font-size: .84rem;
    color: rgba(235, 240, 250, .45);
}

@media (max-width: 767px) {
    .pc-palette { padding-top: 8vh; }
}