:root {











  --z-view: 99998;
  --z-panel: 99999;
  --z-sub: 100000;




  --panel-radius: 0px;
  --panel-control-radius: 0px;


  --panel-pad: 8px;
  --panel-gap: 4px;












  --panel-micro: 9px;






  --panel-text: 10px;
  --panel-text-2: 11px;
  --panel-title: 15px;







  --panel-text-prose: 13px;





  --panel-control-h: 24px;



  --panel-surface: #e8e8e8;
  --panel-ink: #4d4d4d;
  --panel-ink-2: rgba(77,77,77,.84);
  --panel-ink-faint: rgba(77,77,77,.65);
  --panel-border: rgba(77,77,77,.70);
  --panel-fill: rgba(77,77,77,.10);
  --panel-fill-hover: rgba(77,77,77,.18);
  --panel-shadow: 0 2px 8px rgba(0,0,0,.18);
  --panel-shadow-over: 0 6px 16px rgba(0,0,0,.34);
  --panel-accent-ref: #15539c;
  --panel-accent-func: #186b2c;
  --panel-accent-warn: #a81f1f;



  --panel-accent-ai: #0b6d60;
  --panel-accent-human: #9a3412;
}




@media (pointer: coarse) {
  :root {
    --panel-control-h: 44px;


    --panel-micro: 12px;
    --panel-text: 13px;
    --panel-text-2: 14px;
    --panel-title: 18px;
    --panel-text-prose: 16px;
  }
}









.panel-surface,
.shape-dropdown {
  background: var(--panel-surface);
  color: var(--panel-ink);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--panel-pad);
  font-family: 'Poppins', sans-serif;
  font-size: var(--panel-text-2);
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
}



.panel-surface--over { box-shadow: var(--panel-shadow-over); }


.panel-surface--flush { padding: 0; gap: 0; }




.panel-title {
  font-size: var(--panel-title);
  font-weight: 600;
  letter-spacing: -.005em;
}



.panel-muted { color: var(--panel-ink-2); }

.panel-row {
  display: flex;
  align-items: center;
  gap: var(--panel-gap);
  min-height: var(--panel-control-h);
  padding: 0 10px;
  border-radius: var(--panel-control-radius);
  white-space: nowrap;
}



.panel-name  { font-weight: 500; }
.panel-value { margin-left: auto; color: var(--panel-ink-2); display: flex; align-items: center; gap: 8px; }


.panel-row--action { cursor: pointer; background: var(--panel-fill); }
.panel-row--action:hover { background: var(--panel-fill-hover); }



























.panel-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--panel-control-h);
  padding: 0 10px;
  border-radius: var(--panel-control-radius);
  background: var(--panel-fill);
  color: var(--panel-ink);
  font-size: var(--panel-text);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.panel-pill:hover { background: var(--panel-fill-hover); }

.panel-pill--primary {
  background: var(--panel-ink);
  color: var(--panel-surface);
  font-weight: 500;
}
.panel-pill--primary:hover { background: var(--panel-ink); opacity: .85; }










.panel-pill--on {
  background: color-mix(in srgb, var(--panel-ink) 24%, transparent);
  color: var(--panel-ink);
  font-weight: 500;
}
.panel-pill--on:hover { background: color-mix(in srgb, var(--panel-ink) 30%, transparent); }















.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.panel-toggle > .panel-pill + .panel-pill {
  border-left: 1px solid var(--panel-surface);
}

.panel-pill--icon {
  min-height: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}









































.panel-input {
  height: calc(var(--panel-control-h) - 6px);
  padding: 0 2px;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--panel-fill-hover);
  border-radius: 0;
  background: transparent;
  color: var(--panel-ink);
  font: inherit;
  font-size: var(--panel-text-2);
  outline: none;
}
.panel-input::placeholder { color: var(--panel-ink-2); opacity: .55; }





.panel-input--box {
  height: auto;
  padding: 5px 7px;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-control-radius);
}



.panel-num { text-align: right; font-variant-numeric: tabular-nums; }





.panel-placeholder::before {
  content: attr(data-placeholder);
  color: var(--panel-ink-2);
  pointer-events: none;
}


.panel-sep { height: 1px; background: var(--panel-ink); opacity: .18; margin: 2px 0; }


















.panel-surface--sm {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 10px;
  min-height: var(--panel-control-h);
  gap: 0;
}



.panel-surface--sm { min-width: var(--panel-control-h); }







.panel-ref  { color: var(--panel-accent-ref); }
.panel-func { color: var(--panel-accent-func); }
.panel-warn { color: var(--panel-accent-warn); }






































.panel-rows {
  min-width: 208px;
  max-width: min(280px, calc(100vw - 24px));






  max-height: calc(100vh - 108px);
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;















  padding-top: 14px;
  padding-bottom: 11px;
}




























.panel-rows::-webkit-scrollbar,
.panel-sub::-webkit-scrollbar,
.shape-dropdown::-webkit-scrollbar,
.panel-scroll::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.panel-rows::-webkit-scrollbar-thumb,
.panel-sub::-webkit-scrollbar-thumb,
.shape-dropdown::-webkit-scrollbar-thumb,
.panel-scroll::-webkit-scrollbar-thumb {
  background: var(--panel-fill-hover);
  border-radius: 3px;
}

.panel-rows, .panel-sub, .shape-dropdown, .panel-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--panel-fill-hover) transparent;
}














.panel-sub {
  margin-right: 8px;
}
.panel-rows.panel-rows--inset {
  margin-right: 8px;
}









.panel-heading {
  font-size: var(--panel-title);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--panel-ink);
  padding: 0 10px 6px;
}

.panel-subject {
  font-size: var(--panel-text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--panel-ink-2);
  padding: 6px 10px 3px;




  border-top: 1px solid var(--panel-fill-hover);













  margin-top: 4px;
}




.panel-rows > .panel-subject:first-child,
.panel-grip + .panel-subject {
  border-top: 0;
  margin-top: 0;
  padding-top: 2px;
}






.panel-heading + .panel-row {
  border-top: 1px solid var(--panel-fill-hover);
  margin-top: 4px;
  padding-top: 4px;
}









.panel-field {
  padding: 0 10px;
  display: flex;
}
.panel-field > .panel-input { flex: 1; }
.panel-heading + .panel-field {
  border-top: 1px solid var(--panel-fill-hover);
  margin-top: 4px;
  padding-top: 8px;
}












.panel-sub .panel-heading:first-child {
  padding-top: 6px;
}












.panel-rows > .panel-row { padding-left: calc(10px + .5em); }




.panel-rows > .panel-row:hover { background: var(--panel-fill); }



.panel-rows > .panel-row--open { background: var(--panel-fill-hover); }










.panel-sub {
  position: fixed;
  z-index: var(--z-sub);
  min-width: 190px;







  max-width: min(420px, calc(100vw - 24px));

  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}















.panel-sheet {
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  top: auto;
  max-width: none;
  max-height: 80vh;
}




.panel-rows.panel-sheet { padding-top: 8px; }



.panel-grip {
  flex: 0 0 auto;
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--panel-ink);
  opacity: .28;
  margin: 2px auto 6px;
}







.panel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--panel-ink);
  box-sizing: border-box;
  flex: 0 0 auto;
}
.panel-dot.on { background: var(--panel-ink); }








.panel-dot--half {
  background: linear-gradient(90deg, var(--panel-ink) 0 50%, transparent 50% 100%);
}



.panel-step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-step b { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.panel-step span {
  cursor: pointer;
  padding: 0 4px;
  user-select: none;
  color: var(--panel-ink);
}




.panel-edit {
  min-width: 3ch;
  text-align: right;
  outline: none;
  color: var(--panel-ink);
  border-bottom: 1px solid transparent;
}
.panel-edit:focus { border-bottom-color: var(--panel-fill-hover); }