/* =====================================================
HB BUILDER — BASE SYSTEM
===================================================== */

/* ======================================
STAGE
====================================== */

#hb-stage-2-area{
  display:flex;
  justify-content:flex-start;
  width:100%;
}

#hb-builder{
  width:1600px;
  margin-left:0;
}

.pickup-panel.hidden{
  display:none;
}

/* ======================================
MAIN LAYOUT
====================================== */

#hb-builder .hb-builder-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

/* ======================================
PANELS — BASE
====================================== */

#hb-builder .hb-panel{
  border:1px solid #555;
  background:#2f2f2f;
  padding:15px;
  box-sizing:border-box;
}

/* ======================================
PANEL SIZES (LOCKED)
====================================== */

#hb-panel-chosen{
  width:230px;
  height:240px;
  flex:0 0 210px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  gap:10px;

  text-align:center;

  border-radius:10px;
  border:1px solid #ffeb3b;

  box-shadow:
    0 0 5px #ffeb3b,
    0 0 10px rgba(255,235,59,0.8);
}

#hb-panel-coils{
  width:420px;
  height:640px;

  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#hb-panel-global{
  width:360px;
  height:640px;

  overflow-y:auto;
  overflow-x:hidden;
}

#hb-panel-preview{
  width:490px;
  height:560px;
  border-radius:10px;
  position:relative;
}
.hb-baseplate-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ======================================
PANEL TITLES
====================================== */

#hb-builder .hb-panel h3{
  margin:0;
  font-size:11px;
  letter-spacing:1.2px;
  font-weight:600;
  color:#ffeb3b;
  text-align:center;
  width:100%;
}

#hb-panel-coils h3,
#hb-panel-global h3{
  border-bottom:1px solid #ffeb3b;
  padding-bottom:6px;
  margin-bottom:14px;
}


/* ======================================
SPACING SYSTEM (8px GRID)
====================================== */

.hb-row{
  align-items:center;
  margin-bottom:8px;
  font-size:12px;
}

.hb-setting-group{
  margin-bottom:16px;
}

.hb-divider{
  height:1px;
  background:rgba(255,255,255,0.15);
  margin:16px 0;
}

/* ======================================
LABEL SYSTEM
====================================== */

.hb-row label{
  display:flex;
  align-items:center;
  line-height:1;

  font-size:12px;
  font-weight:500;
  color:#e0e0e0;
}

.hb-row span{
  width:32px;
  flex-shrink:0;
  font-size:12px;
  color:#ddd;
}

/* ---------- CHOSEN ONE LABELS ---------- */

.hb-chosen-one-box label{

  font-size:11px;
  letter-spacing:.5px;

  margin-bottom:6px !important;

  color:#d8d8d8;

}

/* ======================================
SELECT SYSTEM (NEUTRAL)
====================================== */

.hb-select{
  background:#444;
  color:#fff;
  border:1px solid #777;
  padding:4px 6px;
  font-size:11px;

  width:auto;
}

.hb-select:hover{
  border-color:#ffeb3b;
}

.hb-select:focus{
  outline:none;
  border-color:#ffeb3b;
  box-shadow:0 0 4px rgba(255,235,59,0.6);
}

.hb-select:disabled{
  opacity:0.4;
  background:#2a2a2a;
  color:#777;
  border-color:#555;
  cursor:not-allowed;
}

/* ======================================
GLOBAL GRID SYSTEM
====================================== */

#hb-panel-global .hb-row{
  display:grid;
  grid-template-columns:90px 1fr;
  column-gap:10px;
  row-gap:8px;
}

/* ======================================
FLEX AREAS (NON-GLOBAL)
====================================== */

#hb-panel-coils .hb-row,
.hb-output-box .hb-row,
.hb-slug-table .hb-row,
.hb-screw-table .hb-row{
  display:flex;
}
/* =====================================================
COIL PANEL
===================================================== */

/* ======================================
COIL BOX
====================================== */

.hb-coil-box{
  flex:1;
  display:flex;
  flex-direction:column;

  background:#262626;
  border:1px solid #666;
  border-radius:6px;

  padding:8px;
  min-height:0;
}

.hb-coil-box + .hb-coil-box{
  margin-top:16px;
}

.hb-coil-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hb-coil-preview {
  display: flex;
  gap: 4px;
}

.hb-coil-preview span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coil-color, #000);
  border: 1px solid rgba(0,0,0,0.2);
}

.hb-units-highlight {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.hb-units-highlight .hb-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hb-units-highlight .hb-unit {
  opacity: 0.5;
  font-size: 13px;
  transition: 0.2s;
}

.hb-units-highlight .hb-unit.active {
  opacity: 1;
  color: #ffeb3b;
  font-weight: 600;
}

/* ======================================
COIL TITLE
====================================== */

.hb-coil-title{
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  color:#ffffff;

  margin-bottom:8px;

  border-bottom:1px solid #ffeb3b;
  padding-bottom:4px;

  box-shadow:0 2px 4px rgba(0,0,0,0.3);
}

/* ======================================
COIL CONTENT
====================================== */

.hb-coil-content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;

  font-size:12px;
  padding-right:6px;
}

/* ======================================
COIL ROW
====================================== */

.hb-coil-row{
  display:flex;
  align-items:center;
  gap:16px;

  margin-bottom:8px;
  padding-bottom:8px;

  border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:12px;
}

.hb-coil-row:last-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.hb-coil-row > label:not(.hb-switch){
     min-width:120px;
}

.hb-coil-row select{
  flex:0 0 auto;
}

/* ======================================
INDIVIDUAL MAGNET ROWS
====================================== */

.south-pole-individual .hb-coil-row,
.south-slug-individual .hb-coil-row,
.south-screw-individual .hb-coil-row,
.north-pole-individual .hb-coil-row,
.north-slug-individual .hb-coil-row,
.north-screw-individual .hb-coil-row{
  border-bottom:none;
  margin-bottom:4px;
  padding-bottom:0;
}

.south-pole-individual,
.south-slug-individual,
.south-screw-individual,
.north-pole-individual,
.north-slug-individual,
.north-screw-individual{

  margin-top:10px;
  padding:10px;

  background:rgba(0,0,0,0.15);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:4px;
}

/* ======================================
WINDING BOX
====================================== */

.hb-winding-box{
  margin-bottom:16px;
}
/* ======================================
COLOR PICKER
====================================== */

.hb-color-picker{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}

.hb-color-option{
  display:flex;
  flex-direction:column;
  align-items:center;

  font-size:10px;
  color:#ccc;
  cursor:pointer;
}

.hb-color-circle{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #777;
  margin-bottom:3px;
}

.hb-color-option.selected .hb-color-circle{
  border:2px solid #ffeb3b;
}

.hb-black{
  background:#111111;
}

.hb-cream{
  background:#E2D4B5;
}

.hb-yellow{
  background:#F5D300;
}

.hb-orange{
  background:#E67A12;
}

.hb-red{
  background:#D94A43;
}

.hb-red_mp{
  background:#B73A32;
}

.hb-green{
  background:#008C73;
}

.hb-green_mp{
  background:#0B6E4F;
}

.hb-white_warm{
  background:#F2EFE8;
  border:1px solid #777;
}

.hb-white{
  background:#FFFFFF;
  border:1px solid #777;
}

.hb-blue{
  background:#1F5EFF;
}

.hb-transparent{
  background:
    repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 10px 10px;
  border:1px solid #777;
}

.hb-candy_cream_pink{
  background:#F7D2D9;
}

.hb-electric_magenta{
  background:#E0008A;
}

.hb-color-picker-wrap{
  flex:1;
}

.hb-color-picker{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  gap:10px;
  margin-top:0;
}

/* =====================================================
MAGNET SYSTEM
===================================================== */

/* ======================================
MAGNET BOX
====================================== */

.hb-magnet-box{
  margin-top:12px;
  padding:10px;

  background:#4a4a4a;
  border-radius:4px;
  border:1px solid #666;
    margin-bottom:16px;
}

/* ======================================
UNIFORM CONTROL
====================================== */

.hb-uniform{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#ffffff;
  margin-bottom:6px;
}

.hb-uniform-row{
  display:flex;
  gap:6px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

/* ======================================
POLE TABLE
====================================== */

.hb-magnet-table{
  display:flex;
  flex-direction:column;
}

.hb-magnet-table .hb-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}

.hb-magnet-table .hb-row span{
  width:32px;
  flex-shrink:0;
}

.hb-magnet-table .hb-select{
  flex:1;
  min-width:70px;
  padding:2px 6px;
  font-size:11px;
}

/* ======================================
SLUG TABLE (SINGLE SOURCE)
====================================== */

.hb-slug-table{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.hb-slug-table .hb-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  flex-wrap: nowrap;

}

.hb-slug-table .hb-row label{
  min-width:70px;
}

.hb-slug-uniform-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

.hb-slug-uniform-row select{
  flex:1;
}
.hb-slug-table .hb-row span{
  width:auto;
  min-width:60px;
}
/* ======================================
SCREW TABLE (SINGLE SOURCE)
====================================== */

.hb-screw-table{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.hb-screw-table .hb-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
}

.hb-screw-table .hb-row span{
  width:32px;
  flex-shrink:0;
}

.hb-screw-table .hb-select{
  flex:0 0 auto;
  min-width:110px;
}

.hb-screw-uniform-row{
  display:flex;
  align-items:center;
  gap:40px;
}

.hb-screw-uniform-row .hb-row{
  display:flex;
  align-items:center;
  gap:8px;
}
/* ======================================
BAR MAGNET
====================================== */

.hb-bar-magnet-box label{
  display:inline-block;
  margin-right:30px;
}

/* ======================================
HIDDEN TABLES (DEFAULT STATE)
====================================== */

.hb-bar-magnet-box,
.hb-screw-table,
.hb-slug-table{
  display:none;
}

/* =====================================================
GLOBAL PANEL
===================================================== */

/* ======================================
GLOBAL SELECTS (CONTROLLED WIDTH)
====================================== */

#hb-panel-global .hb-select{
  flex:0 0 auto;
  width:auto;
}

/* ======================================
GLOBAL LABELS
====================================== */

#hb-panel-global label{
  margin-bottom:8px;
  white-space:normal;
}

/* ======================================
GLOBAL TOGGLES
====================================== */

#hb-panel-global .hb-toggle{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ======================================
UNIT TOGGLE
====================================== */

.hb-toggle{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
}

.hb-unit{
  width:55px;
  text-align:center;
  font-size:11px;
  color:#888;
}

.hb-unit.active{
  color:#ffeb3b;
}

/* ======================================
SWITCH
====================================== */

.hb-switch{
  position:relative;
  display:inline-block;
  width:34px;
  height:16px;
}

.hb-switch input{
  opacity:0;
  width:0;
  height:0;
}

.hb-slider{
  position:absolute;
  cursor:pointer;
  inset:0;

  background:#555;
  border-radius:20px;
  transition:0.2s;
}

.hb-slider:before{
  content:"";
  position:absolute;

  height:12px;
  width:12px;

  left:2px;
  bottom:2px;

  background:#fff;
  border-radius:50%;
  transition:0.2s;
}

.hb-switch input:checked + .hb-slider{
  background:#ffeb3b;
}

.hb-switch input:checked + .hb-slider:before{
  transform:translateX(12px);
}

/* ======================================
RANGE SLIDERS
====================================== */

.hb-spacing-slider,
#hb-panel-global input[type="range"]{
  -webkit-appearance:none;
  appearance:none;

  width:140px;
  height:4px;

  background:#444;
  border-radius:3px;

  outline:none;
  cursor:pointer;
}

/* TRACK */

.hb-spacing-slider::-webkit-slider-runnable-track,
#hb-panel-global input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  background:#444;
  border-radius:3px;
}

/* THUMB */

.hb-spacing-slider::-webkit-slider-thumb,
#hb-panel-global input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;

  width:14px;
  height:14px;
  border-radius:50%;

  background:#fff;
  border:2px solid #ffd400;

  margin-top:-5px;
  cursor:pointer;
}

/* ACTIVE GLOW */

.hb-spacing-slider:hover::-webkit-slider-thumb,
#hb-panel-global input[type="range"]:hover::-webkit-slider-thumb{
  box-shadow:0 0 8px #ffd400;
}

.hb-spacing-slider:focus::-webkit-slider-thumb,
#hb-panel-global input[type="range"]:focus::-webkit-slider-thumb{
  box-shadow:0 0 10px #ffd400;
}
/* FIREFOX */

.hb-spacing-slider::-moz-range-thumb,
#hb-panel-global input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;

  background:#fff;
  border:2px solid #ffd400;
  cursor:pointer;
}
.hb-uniform input[type="checkbox"]{
  accent-color:#000000;
}

.hb-uniform-row{
  justify-content:center;
}

/* DISABLED */

.hb-spacing-slider:disabled{

  opacity:0.5;
  cursor:not-allowed;

}

.hb-spacing-slider:disabled::-webkit-slider-thumb{

  background:#777;
  border:2px solid #555;
  cursor:not-allowed;
  box-shadow:none;

}

.hb-spacing-slider:disabled::-moz-range-thumb{

  background:#777;
  border:2px solid #555;
  cursor:not-allowed;

}

/* ======================================
POLARITY DISABLED
====================================== */

.hb-switch:has(
    input:disabled
){
    opacity:0.4;
    cursor:not-allowed;
}

.hb-switch:has(
    input:disabled
) + .hb-unit{

    opacity:0.4;

}

.hb-toggle:has(
    input:disabled
) .hb-unit{

    opacity:0.4;

}

.hb-toggle:has(
    input:disabled
) .hb-slider{

    opacity:0.4;

}

.hb-toggle:has(
    input:disabled
){

    cursor:not-allowed;

}

.hb-toggle:has(
    input:disabled
){
    opacity:0.4;
    cursor:not-allowed;
}
/* ======================================
SPACING CONTROL (COIL)
====================================== */

.hb-spacing-control{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:60;
}

.hb-spacing-slider{
  width:120px;
  -webkit-appearance:none;
  appearance:none;
}
.hb-spacing-value{
  font-size:11px;
  color:#bbb;
  min-width:40px;
  text-align:right;
}

/* ======================================
CHOSEN PANEL
====================================== */

#hb-display-chosen-img{
  max-width:80px;
  display:block;
  margin:5px auto;
}

#hb-display-chosen-style-select{
  width:90%;
  margin-top:5px;

  background:#333;
  color:#fff;
  border:1px solid #ffeb3b;

  font-size:12px;
  padding:3px;
}

#hb-display-chosen-style-select:focus{
  outline:none;
  border-color:#ffeb3b;
  box-shadow:0 0 4px rgba(255,235,59,0.6);
}
/* =====================================================
COVER SYSTEM
===================================================== */

/* ======================================
COVER BOX
====================================== */

.hb-cover-box{
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid #555;
}

/* ======================================
COVER ROW (CONTROLLED FLEX)
====================================== */

.hb-cover-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

/* kaikki selectit EI veny */
.hb-cover-row .hb-select{
  flex:0 0 auto;
}

/* ======================================
FIELD WIDTHS (EXPLICIT CONTROL)
====================================== */

/* STYLE */
.hb-cover-row [data-hb-field="cover-style"]{
  width:160px;
}

/* STANDARD COLOR */
.hb-cover-standard{
  width:120px;
}

/* OPEN FRAME COLOR */
.hb-cover-open-color{
  width:110px;
}

/* MESH */
.hb-cover-open-mesh{
  width:150px;
}


/* ======================================
DIRECTION BUTTON
====================================== */

.hb-cover-direction{
  flex-shrink:0;
}

/* ======================================
UNIFIED FLIP BUTTON STYLE
====================================== */

.hb-flip-btn,
.hb-flip-ui{
  background:#333;
  border:1px solid #777;
  color:#fff;
  font-size:14px;
  padding:4px 6px;
  border-radius:4px;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* hover sama molemmille */

.hb-flip-btn:hover,
.hb-flip-ui:hover{
  border-color:#ffeb3b;
}

/* aktiivinen (jos käytät) */

.hb-flip-btn.active,
.hb-flip-ui.active{
  border-color:#ffeb3b;
  color:#ffeb3b;
}
/* ======================================
SPECIAL CASE (OPEN COLOR SMALL)
====================================== */

#hb-panel-global
.hb-cover-row select[data-hb-field="cover-open-color"]{
  flex:0 0 auto;
  width:70px;
  min-width:70px;
  max-width:70px;
}

#hb-panel-global .hb-row select[data-hb-field="cover-style"]{
  width:160px;
}

#hb-panel-global .hb-cover-row{
  display:flex;
  gap:8px;
  margin-top:6px;
}
#hb-panel-global .hb-cover-box > .hb-row{
  display:grid;
  grid-template-columns:90px 1fr;
  column-gap:10px;
}
#hb-panel-global .hb-cover-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
/* =====================================================
OUTPUT WIRES
===================================================== */

/* ======================================
OUTPUT BOX
====================================== */

.hb-output-box{
  margin-top:20px;
}

/* ======================================
HEADER (TITLE + TOGGLE)
====================================== */

#hb-panel-global .hb-output-header{
  display:grid;
  grid-template-columns:90px 1fr;
  align-items:center;
}

.hb-output-toggle-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}

.hb-output-toggle-wrap span{
  font-size:12px;
  color:#888;
  white-space:nowrap;
}

.hb-output-toggle-wrap span.active{
  color:#ffc107;
}

/* ======================================
ROW SYSTEM
====================================== */

.hb-output-box .hb-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.hb-output-box .hb-row label{
  white-space:nowrap;
}

/* ======================================
2-CONDUCTOR (HOT + GROUND)
====================================== */

.hb-output-wires-row{
  display:flex;
  align-items:center;
  gap:24px;
}

.hb-output-wires-row label{
  font-size:12px;
  color:#aaa;
}

.hb-output-wires-row .hb-select{
  width:auto;
}

/* ======================================
4-CONDUCTOR PAIRS
====================================== */

.hb-output-wire-pair{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.hb-output-wire-pair label{
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}

.hb-output-wire-pair select{
  width:auto;
}

/* ======================================
WIRE COLORS
====================================== */

.hb-wire-white{ color:#ffffff; }
.hb-wire-black{ color:#111111; text-shadow:0 0 2px #ffffff; }
.hb-wire-red{ color:#ff4d4d; }
.hb-wire-green{ color:#4caf50; }

/* ======================================
LENGTH CONTROL
====================================== */

#hb-panel-global .hb-output-length-row{
  display:grid;
grid-template-columns:90px auto auto;
  align-items:center;
  column-gap:4px;
}

.hb-length-slider{
  width:100%;
  height:4px;
  background:#444;
  border-radius:2px;
  outline:none;
}

.hb-length-value{
  font-size:11px;
  color:#bbb;
  font-weight:600;
  white-space:nowrap;
  min-width: 55px;
}

/* ======================================
SLIDER THUMB
====================================== */

.hb-length-slider::-webkit-slider-thumb{
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ffc107;
  cursor:pointer;
}

.hb-length-slider:active::-webkit-slider-thumb{
  box-shadow:0 0 10px rgba(255,193,7,0.8);
}

.hb-length-slider::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ffc107;
  cursor:pointer;
}
#hb-panel-global .hb-output-toggle-wrap{
  flex-wrap:nowrap;
}
#hb-panel-global .hb-output-box label{
  font-size:12px;
  font-weight:500;
}
#hb-panel-global .hb-output-box .hb-select{
  width:90px;
}

.hb-wire-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  margin-left:6px;
  border:1px solid #999;
}

.hb-wire-dot{
  width:18px;
  height:5px;
  border-radius:3px;
  display:inline-block;
  margin-left:6px;

  /* “johto” look */
  box-shadow:0 1px 2px rgba(0,0,0,0.6), inset 0 0 2px rgba(255,255,255,0.3);
}

/* värit gradientilla */
.hb-wire-dot.white{
  background:linear-gradient(90deg,#eee,#bbb);
}

.hb-wire-dot.black{
  background:linear-gradient(90deg,#222,#555);
}

.hb-wire-dot.red{
  background:linear-gradient(90deg,#ff4d4d,#a30000);
}

.hb-wire-dot.green{
  background:linear-gradient(90deg,#4caf50,#1b5e20);
}
/* pakotetaan kaikki wire-rivit flexiksi (poistaa gridin vaikutuksen) */
.hb-output-box .hb-row{
  display:flex !important;
  align-items:center;
  gap:12px;
}

/* label linjaan kuten muu UI */
.hb-output-box .hb-row label{
  min-width:90px;
}

/* dropdown sopivan kokoiseksi */
.hb-output-box .hb-row select{
  min-width:100px;
  flex:0 0 auto;
}

/* johto (dot) kiinni selectiin */
.hb-wire-dot{
  margin-left:4px;
  flex-shrink:0;
}

/* =====================================================
MOUNTING SYSTEM
===================================================== */

#hb-mounting-options{
  display:flex;
}

/* LEFT / RIGHT COLUMNS */

.hb-mounting-left,
.hb-mounting-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* INLINE GROUPS */

.hb-mounting-inline{
  display:flex;
  align-items:center;
  gap:30px;
}

.hb-inline-group{
  display:flex;
  align-items:center;
  gap:8px;
}

.hb-inline-group:first-child{
  min-width:140px;
}

/* COLORS */

.hb-mounting-colors{
  display:flex;
  gap:10px;
}

/* FINISH WRAP */

#hb-mounting-finish{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ROW OVERRIDE (NO GRID HERE) */

#hb-panel-global .hb-mounting-box .hb-row{
  display:flex;
  align-items:center;
  gap:10px;
}

#hb-panel-global .hb-mounting-box .hb-row span{
  min-width:140px;
}

#hb-panel-global .hb-mounting-box .hb-row label{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* NOTE */

.hb-mounting-note{
  margin-top:10px;
  opacity:0.7;
  font-size:10px;
}

/* =====================================================
WINDING SYSTEM
===================================================== */

.hb-winding-box{
  background:#2a2a2a;
  border:1px solid #444;
  border-radius:6px;
  padding:10px;
  margin-top:10px;
}

.hb-winding-title{
  font-size:12px;
  margin-bottom:6px;
  color:#ccc;
}

.hb-winding-box .hb_winding_row{
  display:flex;
  align-items:center;
  gap:8px;
}

.hb-winding-box .hb_winding_wire_select{
  flex:1;
  min-width:0;

  background:#555;
  color:#fff;
  border:1px solid #777;
  font-size:11px;
  padding:4px 6px;
}

.hb-winding-box .hb_winding_rounds_input{
  width:60px;

  background:#555;
  color:#fff;
  border:1px solid #777;
  font-size:11px;
  padding:4px 6px;
}

/* PROGRESS */

.hb-winding-footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
}

.hb-winding-total{
  font-size:11px;
  color:#bbb;
}

.hb-winding-progress{
  width:120px;
  height:6px;
  background:#777;
  border-radius:4px;
  overflow:hidden;
}

.hb-winding-bar{
  width:0%;
  height:100%;
  background:#ffd400;
}

/* DIRECTION */

.hb-direction-toggle{
  display:flex;
  gap:6px;
  margin-left:auto;
}

.hb-direction-option{
  width:40px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:10px;
  font-weight:500;

  border:1px solid #777;
  background:#444;
  cursor:pointer;
}

.hb-direction-option.selected{
  border-color:#ffeb3b;
  background:#222;
  color:#ffeb3b;
}
/* =====================================================
PREVIEW SYSTEM
===================================================== */

#hb-panel-preview .preview-box{
  width:440px;
  min-height:440px;

  background:#000;
  position:relative;

  border-radius:8px;
  padding:5px;
  margin:0 auto;
}

#hb-panel-preview .product-image-area{

  position:relative;
  width:440px;
  height:440px;

  margin:0 auto;
  overflow:hidden;

  box-shadow:0 0 10px 5px #00FF41;
}

/* LAYERS */
#hb-layer-version{
  z-index:1;
  pointer-events:none;
}

#hb-panel-preview .hb-layer{
  position:absolute;
  width:440px;
  height:440px;
  top:0;
  left:0;
  pointer-events:none;
  transition:opacity 0.8s ease;
}

/* Z-INDEX STACK */

#hb-layer-cover{ z-index:10; }
#hb-layer-cover-open{ z-index:20; }
#hb-layer-cover-mesh{ z-index:30; }

/* WIRE FADE */

#hb-layer-wire-south,
#hb-layer-wire-north{
  transition:opacity 0.8s ease;
}

/* =====================================================
FINAL VISUAL DETAILS
===================================================== */

.hb-toggle-active{
  color:#ffeb3b;
}

.hb-toggle-inactive{
  color:#888;
}

.hb-silver{background:#cfcfcf;}
.hb-gold{background:#d4af37;}
.hb-relic{background:#6f6a5f;}
/* =====================================================
UNIFIED SLIDER SYSTEM (ALL PANELS)
===================================================== */

/* =========================
BASE RESET (kaikille)
========================= */

.hb-spacing-slider,
.hb-length-slider,
#hb-panel-global input[type="range"]{
  -webkit-appearance:none;
  appearance:none;

  height:4px;
  background:#444;
  border-radius:3px;

  outline:none;
  cursor:pointer;
}

/* =========================
TRACK (WEBKIT)
========================= */

.hb-spacing-slider::-webkit-slider-runnable-track,
.hb-length-slider::-webkit-slider-runnable-track,
#hb-panel-global input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  background:#444;
  border-radius:3px;
}

/* =========================
THUMB (WEBKIT)
========================= */

.hb-spacing-slider::-webkit-slider-thumb,
.hb-length-slider::-webkit-slider-thumb,
#hb-panel-global input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;

  width:14px;
  height:14px;
  border-radius:50%;

  background:#fff;
  border:2px solid #ffd400;

  margin-top:-5px;
  cursor:pointer;

  transition:box-shadow 0.15s ease, transform 0.1s ease;
}

.hb-spacing-slider:hover::-webkit-slider-thumb,
.hb-length-slider:hover::-webkit-slider-thumb,
#hb-panel-global input[type="range"]:hover::-webkit-slider-thumb{
  box-shadow:0 0 8px #ffd400;
}

.hb-spacing-slider:focus::-webkit-slider-thumb,
.hb-length-slider:focus::-webkit-slider-thumb,
#hb-panel-global input[type="range"]:focus::-webkit-slider-thumb{
  box-shadow:0 0 10px #ffd400;
}

.hb-spacing-slider:active::-webkit-slider-thumb,
.hb-length-slider:active::-webkit-slider-thumb,
#hb-panel-global input[type="range"]:active::-webkit-slider-thumb{
  transform:scale(1.1);
}

/* =========================
FIREFOX TRACK
========================= */

.hb-spacing-slider::-moz-range-track,
.hb-length-slider::-moz-range-track,
#hb-panel-global input[type="range"]::-moz-range-track{
  height:4px;
  background:#444;
  border-radius:3px;
}

/* =========================
FIREFOX THUMB
========================= */

.hb-spacing-slider::-moz-range-thumb,
.hb-length-slider::-moz-range-thumb,
#hb-panel-global input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;

  background:#fff;
  border:2px solid #ffd400;

  cursor:pointer;

  transition:box-shadow 0.15s ease, transform 0.1s ease;
}

.hb-spacing-slider:hover::-moz-range-thumb,
.hb-length-slider:hover::-moz-range-thumb,
#hb-panel-global input[type="range"]:hover::-moz-range-thumb{
  box-shadow:0 0 8px #ffd400;
}

.hb-spacing-slider:focus::-moz-range-thumb,
.hb-length-slider:focus::-moz-range-thumb,
#hb-panel-global input[type="range"]:focus::-moz-range-thumb{
  box-shadow:0 0 10px #ffd400;
}

.hb-spacing-slider:active::-moz-range-thumb,
.hb-length-slider:active::-moz-range-thumb,
#hb-panel-global input[type="range"]:active::-moz-range-thumb{
  transform:scale(1.1);
}
#hb-panel-global input[type="radio"]{
  accent-color:#000000;
}
.hb-mounting-note{
  text-align:center;
}
.hb-analyze-btn {
  width: 100%;
  background: #ffeb3b;
  color: #000;
  font-weight: bold;
  padding: 14px;
  border: none;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s ease;
}

.hb-analyze-btn:hover {
  background: #fff176;
  transform: scale(1.02);
}

/* =====================================================
HB SCANLINE (ALWAYS ON)
===================================================== */

.hb-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 120, 0.08) 0px,
    rgba(0, 255, 120, 0.08) 1px,
    transparent 2px,
    transparent 4px
  );

  animation: hb_scanline_move 10s linear infinite;
}


/* subtle movement */

@keyframes hb_scanline_move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 40px;
  }
}
.product-image-area {
  position: relative;
  overflow: hidden;
}
/* =====================================================
HB SCAN SWEEP (ANALYZE STYLE LINE)
===================================================== */

.hb-scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(0,255,120,0.9),
    transparent
  );

  box-shadow:
    0 0 6px rgba(0,255,120,0.6),
    0 0 12px rgba(0,255,120,0.4);

  top: -10px;
  opacity: 0;

  pointer-events: none;
  z-index: 60;
}

/* ACTIVE STATE */

.hb-scan-sweep.active {
  animation: hb_scan_sweep_anim 2.5s linear infinite;
  opacity: 1;
}

@keyframes hb_scan_sweep_anim {
  0%   { top: -10px; }
  100% { top: 100%; }
}
/* =====================================================
HB GLITCH EFFECT
===================================================== */

.hb-glitch-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  display: none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,0,0,0.05) 0px,
      transparent 2px,
      rgba(0,255,255,0.05) 4px
    );
}

/* TRIGGER */

.hb-glitch-layer.active {
  display: block;
  animation: hb_glitch_anim 0.15s linear 6;
}

@keyframes hb_glitch_anim {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-2px,1px); }
  40%  { transform: translate(2px,-1px); }
  60%  { transform: translate(-1px,2px); }
  80%  { transform: translate(1px,-2px); }
  100% { transform: translate(0,0); }
}

/* =====================================================
HB ANALYZE BUTTON (SC STYLE MATCH)
===================================================== */

.hb-analyze-btn {
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;

  background: linear-gradient(
    to bottom,
    #ffe94d,
    #e6d200
  );

  color: #000;
  font-weight: 700;
  font-size: 15px;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    0 2px 0 #000,
    0 0 8px rgba(255, 235, 59, 0.25);

  transition: all 0.15s ease;
}

/* HOVER */

.hb-analyze-btn:hover {
  background: linear-gradient(
    to bottom,
    #fff176,
    #fdd835
  );

  box-shadow:
    0 2px 0 #000,
    0 0 14px rgba(255, 235, 59, 0.5);
}

/* CLICK (pressed feel) */

.hb-analyze-btn:active {
  transform: translateY(2px);

  box-shadow:
    0 0 6px rgba(255, 235, 59, 0.3);
}

/* DISABLED (future use) */

.hb-analyze-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* =====================================================
HB READY (ADD TO CART)
===================================================== */

.hb-analyze-btn.hb-ready {

  background: linear-gradient(
    to bottom,
    #fff176,
    #ffd600
  );

  box-shadow:
    0 2px 0 #000,
    0 0 16px rgba(255, 235, 59, 0.65),
    0 0 32px rgba(255, 235, 59, 0.35);

}

.hb-analyze-btn.hb-ready:hover {

  background: linear-gradient(
    to bottom,
    #fff59d,
    #ffeb3b
  );

  box-shadow:
    0 2px 0 #000,
    0 0 24px rgba(255, 235, 59, 0.9),
    0 0 40px rgba(255, 235, 59, 0.5);

}

/* =====================================================
HB TOOLTIP STYLE
===================================================== */
.hb-tooltip{
  position:absolute;
  z-index:9999;

  max-width:260px;
  padding:8px 10px;

  background:#111;
  color:#fff;

  font-size:11px;
  line-height:1.4;

  border:1px solid #ffeb3b;
  border-radius:4px;

  box-shadow:0 0 8px rgba(255,235,59,0.3);

  display:none;
  pointer-events:none;

}
.hb-tooltip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;

  background: #ffeb3b;
  border-radius: 2px 0 0 2px;
}
.hb-info:hover {
  text-shadow: 0 0 6px rgba(255,235,59,0.6);
}

.hb-terminal-text {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;

  background: none;
  border: none;

  font-size: 11px;
  line-height: 1.4;
  color: #00ff41;

  pointer-events: none;
  z-index: 80;
}

.hb-preview-text strong{
  color:#ffeb3b;
  font-weight:600;
}

.hb-preview-line{
  margin-bottom:4px;
}

/* ======================================
HB SCANLINE BASE (IDLE)
====================================== */

.hb-scanline{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  pointer-events:none;
  z-index:1000;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,0,0.08) 0px,
    rgba(0,255,0,0.08) 1px,
    transparent 2px,
    transparent 4px
  );

  opacity:1;

  animation: hb_scanline_move 10s linear infinite;
}
/* ======================================
HB IDLE SWEEP (VIHREÄ)
====================================== */

.hb-scanline:not(.analyze-mode)::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:0.3px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 222, 4, 0.35),
    transparent
  );
  box-shadow: 0 0 15px 1px #ffeb3b;

  animation: hb-scan-sweep 6s linear infinite;
}

@keyframes hb-scan-sweep{
  0%{
    top:-100px;
  }
  100%{
    top:100%;
  }
}

/* ======================================
HB ANALYZE SCANLINE (PUNAINEN, SC STYLE)
====================================== */

#hb-builder .hb-scanline.analyze-mode::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;

  background: rgba(255,0,0,0.9);

  box-shadow:
    0 0 10px #ff0000,
    0 0 20px rgba(255,0,0,0.6);

animation: hb_scanMoveFast 0.9s linear infinite;}
/* ======================================
NYKIVÄ LIIKE (SC COPY)
====================================== */

@keyframes hb_scanMoveFast{

  0% { top: 0; opacity: 0; }
  5% { opacity: 1; }

  15% { top: 80px; }
  20% { top: 80px; }

  35% { top: 160px; }
  40% { top: 160px; }

  60% { top: 260px; }
  65% { top: 260px; }

  100% { top: 440px; opacity: 0; }
}
/* ======================================
HB ANALYZE TEXT FLICKER
====================================== */

body.hb-analyze-lock #hb-preview-texts{
  animation: hb_analyzeTextFlicker 0.12s infinite alternate;
}

@keyframes hb_analyzeTextFlicker{
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}
/* ======================================
HB TERMINAL CURSOR
====================================== */

.hb-cursor{
  display:inline-block;
  margin-left:4px;
  animation: hb_cursorBlink 0.8s infinite;
}

@keyframes hb_cursorBlink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.hb-cursor{
  display:inline-block;
  margin-left:2px;
  animation: hb-blink 1s steps(2, start) infinite;
}

@keyframes hb-blink{
  to{ visibility:hidden; }
}
/* ======================================
HB TERMINAL FONT (SC STYLE)
====================================== */

.hb-terminal-text,
#hb-terminal-status{

  font-family:'VT323', monospace;

  font-size:16px;
  line-height:1.4;

  letter-spacing:1px;
  text-transform:uppercase;

color: #ffeb3b;
text-shadow:
  0 0 1px rgba(255,235,59,0.8),
  0 0 3px rgba(255,235,59,0.4),
  0 0 6px rgba(255,235,59,0.4);
}

#hb-terminal-status{
  position:absolute;
  top:10px;
  left:20px;
}
.hb-preview-line{
  position:absolute;
  font-family:'VT323', monospace;
  font-size:14px;
  color:#00ff41;
  text-shadow:
  0 0 1px rgba(255,235,59,0.4),
  0 0 3px rgba(255,235,59,0.4),
  0 0 6px rgba(255,235,59,0.2);

  pointer-events:none;
}

.hb-preview-line,
#hb-terminal-status{
  text-transform: uppercase;
}

/* =========================
POSITION CONFIG
========================= */

/* COVER */
#hb-line-cover{ top:60px; left:215px; }
#hb-line-cover{
  white-space: pre;
}

/* WAX POTTING */
#hb-line-wax{ top:110px; left:215px; }

/* MAGNET NORTH */
#hb-line-mag-n{ top:155px; left:215px; }

/* COIL NORTH */
#hb-line-coil-n{ top:170px; left:215px; }

/* BOBBIN NORTH */
#hb-line-bobbin-n{ top:185px; left:215px; }

/* MAGNET SOUTH */
#hb-line-mag-s{ top:250px; left:215px; }

/* POLARITY N */
#hb-line-polarity-n{top:200px; left:215px; }

/* COIL SOUTH */
#hb-line-coil-s{ top:265px; left:215px; }

/* BOBBIN SOUTH */
#hb-line-bobbin-s{ top:280px; left:215px; }

/* POLARITY S */
#hb-line-polarity-s{top:295px; left:215px; }

/* BASEPLATE */
#hb-line-baseplate-material{
    top:320px;
    left:245px;
}

#hb-line-baseplate-color{
    top:340px;
    left:245px;
}

/* MOUNTING HARDWARE */
#hb-line-mounting{ top:390px; left:300px; }

/* OUTPUT WIRES */
#hb-line-output{ top:410px; left:300px; }



/* =========================
HB ANALYZE LOCK
========================= */

/* 🔥 ÄLÄ blokkaa koko builderia */
#hb-builder.hb-locked {
  user-select: none;
}

/* 🔥 blokkaa vain interaktiot */
#hb-builder.hb-locked #hb-builder-controls .hb-panel,
#hb-builder.hb-locked #hb-builder-controls .hb-coil-box,
#hb-builder.hb-locked #hb-builder-controls select,
#hb-builder.hb-locked #hb-builder-controls input,
#hb-builder.hb-locked #hb-builder-controls button {
  pointer-events: none;
}

/* overlay (valinnainen visuaali) */
#hb-builder .hb-lock-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);

  z-index: 999;
  display: none;
}

#hb-builder-controls .hb-lock-overlay{
  display:none;
}

#hb-builder.hb-locked #hb-builder-controls .hb-lock-overlay{
  display:block;
}

/* =========================
HB ANALYZE TEXT FLICKER (SC STYLE)
========================= */

#hb-builder.hb-locked .hb-preview-line {
  animation: hbAnalyzeTextFlicker 0.12s infinite alternate;
}

@keyframes hbAnalyzeTextFlicker {
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ======================================
HB PICKUP NAME (PREVIEW)
====================================== */

.hb-preview-name {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: #ffeb3b;
  opacity: 0.85;

  pointer-events: none;
  user-select: none;

  white-space: nowrap;
}

/* =====================================================
   PICKUP DESIGN AI - HB
===================================================== */

#hb-panel-ai{

width:230px;

padding:11px;

border:1px solid rgba(0,255,65,0.18) !important;

background:#000 !important;



box-shadow:
0 0 4px rgba(0,255,65,0.04),
inset 0 0 2px rgba(0,255,65,0.03);

border-radius:8px;

overflow:hidden;

box-sizing:border-box;

animation: hbAiBoxPulse 4s ease-in-out infinite;
}

#hb-panel-ai .hb-ai-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:10px;
}

#hb-panel-ai .hb-ai-title{

font-size:10px;

letter-spacing:1.5px;

color:#ffeb3b;

text-transform:uppercase;
}

#hb-panel-ai .hb-ai-tags{

display:flex;

flex-wrap:wrap;

gap:6px;

justify-content:center;

margin-bottom:14px;
}

#hb-panel-ai .hb-ai-tag{

font-size:9px;

letter-spacing:0.8px;

padding:5px 7px;

border:1px solid rgba(51,255,0,0.22);

background:rgba(0,0,0,0.65);

color:#9eff9e;

font-family:'VT323', monospace;

text-transform:uppercase;

box-shadow:
0 0 6px rgba(51,255,0,0.08);

white-space:nowrap;
}

#hb-panel-ai .hb-ai-input{

width:100%;

background:#050505;

border:1px solid #444;

color:#33ff00;

padding:8px;

font-size:11px;

box-sizing:border-box;

outline:none;

font-family:Arial,sans-serif;

transition:
border-color .2s ease,
box-shadow .2s ease;
}

#hb-panel-ai .hb-ai-input:focus{

border-color:#33ff00;

box-shadow:
0 0 8px rgba(51,255,0,0.2);
}

#hb-panel-ai .hb-ai-input::placeholder{

color:#666;
}

#hb-panel-ai .hb-ai-chat-history{

display:flex;

flex-direction:column;

gap:10px;

margin-top:10px;

margin-bottom:12px;

max-height:260px;

overflow-y:auto;
}

#hb-panel-ai .hb-ai-toggle-btn{

background:none;

border:none;

color:#33ff00;

font-size:18px;

line-height:1;

cursor:pointer;

padding:0;

transition:
transform .2s ease,
opacity .2s ease;
}

#hb-panel-ai .hb-ai-toggle-btn:hover{

opacity:0.7;
}

@keyframes hbAiBoxPulse{

0%{
box-shadow:
0 0 10px rgba(0,255,65,0.10),
inset 0 0 8px rgba(0,255,65,0.04);
}

50%{
box-shadow:
0 0 14px rgba(0,255,65,0.18),
inset 0 0 10px rgba(0,255,65,0.06);
}

100%{
box-shadow:
0 0 10px rgba(0,255,65,0.10),
inset 0 0 8px rgba(0,255,65,0.04);
}
}

.hb-left-column{
  width:230px;
  flex:0 0 230px;

  display:flex;
  flex-direction:column;
  gap:18px;
}

.hb-input{
  background:#000;
  color:#fff;

  border:1px solid #777;

  padding:4px 6px;

  font-size:11px;

  width:140px;
}

/* =====================================
   HB AI COLLAPSE
===================================== */

#hb-builder #hb-ai-body{

  max-height:700px;

  overflow:hidden;

  transition:
    max-height .28s ease,
    opacity .2s ease;

  opacity:1;

}

#hb-builder #hb-panel-ai.collapsed #hb-ai-body{

  max-height:0;

  opacity:0;

  pointer-events:none;

  margin-top:0;

}

#hb-builder #hb-panel-ai.collapsed{

  min-height:auto;

}

/* =====================================================
   HB TONE LAB BUTTON
===================================================== */

#hb-builder .hb-tl-help-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:16px;

  margin-left:8px;
  padding:0 8px;

  border:1px solid rgba(0,255,65,0.35);
  border-radius:4px;

  background:rgba(0,255,65,0.08);

  color:#9eff9e;

  font-size:8px;
  font-weight:600;

  letter-spacing:0.8px;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;

  box-shadow:
    0 0 6px rgba(0,255,65,0.12);

}

#hb-builder .hb-tl-help-btn:hover{

  transform:translateY(-1px);

  background:rgba(0,255,65,0.14);

  border-color:rgba(0,255,65,0.7);

  box-shadow:
    0 0 10px rgba(0,255,65,0.25);

}

#hb-builder .hb-tl-help-btn:active{

  transform:scale(0.98);

}

/* ======================================
MAGNET SECTION SPACING
====================================== */

.hb-magnet-section{
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.hb-bar-magnet-row{
    margin-top:8px;
}

/* ======================================
WINDING SYSTEM DISABLED STATE
====================================== */

.hb-winding-box.hb-disabled{

    opacity: 0.45;

    pointer-events: none;

}

/* =====================================================
HB WINDING STATUS COLORS
===================================================== */

.hb-winding-bar.underwound{

    background:
        linear-gradient(
            90deg,
            #29b6f6,
            #0288d1
        );

    box-shadow:
        0 0 6px
        rgba(
            41,
            182,
            246,
            0.7
        );

}

.hb-winding-bar.optimal{

    background:
        linear-gradient(
            90deg,
            #ffeb3b,
            #ffc107,
            #ff9800
        );

    box-shadow:
        0 0 6px
        rgba(
            255,
            193,
            7,
            0.7
        );

}

.hb-winding-bar.danger{

    background:
        linear-gradient(
            90deg,
            #ff5252,
            #d50000
        );

    box-shadow:
        0 0 10px
        rgba(
            255,
            82,
            82,
            0.9
        );

    animation:
        hbCoilPulse
        1.2s
        infinite;

}

@keyframes hbCoilPulse{

    0%{

        box-shadow:
            0 0 6px
            rgba(
                255,
                82,
                82,
                0.6
            );

    }

    50%{

        box-shadow:
            0 0 16px
            rgba(
                255,
                82,
                82,
                1
            );

    }

    100%{

        box-shadow:
            0 0 6px
            rgba(
                255,
                82,
                82,
                0.6
            );

    }

}

.schedule-container-bg{
    margin-top: 8px;
}

/* =====================================================
HB DISABLED UI
===================================================== */

.hb-disabled{

    opacity: 0.4;

    cursor: not-allowed;

    pointer-events: none;

}

/* =====================================================
   HB TONE LAB
===================================================== */

.hb-tl-overlay{

  position:fixed;
  inset:0;

  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

}

.hb-tl-overlay-bg{

  position:absolute;
  inset:0;

  background:rgba(0,0,0,0.82);

  backdrop-filter:blur(8px);

}

.hb-tl-overlay-window{

  position:relative;

  width:min(1200px,92vw);
  height:min(88vh,900px);

  background:#111;

  border:1px solid #444;
  border-radius:16px;

  overflow:hidden;

  box-shadow:
    0 0 60px rgba(0,0,0,0.6);

  z-index:2;

}

.hb-tl-overlay-content{

  width:100%;
  height:100%;

  overflow-y:auto;

  max-height:85vh;

  padding:28px;

  color:#fff;

}

.hb-tl-close-btn{

  position:absolute;

  top:14px;
  right:14px;

  width:36px;
  height:36px;

  border:none;
  border-radius:50%;

  background:#222;
  color:#fff;

  font-size:20px;
  cursor:pointer;

  z-index:5;

}

.hb-tl-close-btn:hover{

  background:#333;

}

/* =====================================================
   HB TONE LAB CONTENT FIXES
===================================================== */

#hb-tone-lab-overlay .hb-tl-overlay-window{

  overflow:hidden;

}

#hb-tone-lab-overlay .hb-tl-overlay-content{

  overflow-y:auto;

  max-height:85vh;

  padding:28px;

}

#hb-tone-lab-overlay #tone-lab{

  font-size:16px;
  line-height:1.5;

}

#hb-tone-lab-overlay .tl-card{

  border:none;
  background:transparent;
  padding:0;
  margin:0;

}

#hb-tone-lab-overlay .tl-card-header{

  margin-bottom:24px;

}


.sc-tl-overlay-window,
.hb-tl-overlay-window{

    width:min(1400px,96vw);
    height:min(92vh,1000px);

}

/* =====================================================
   HB AI DISABLED
===================================================== */

.hb-ai-disabled .hb-ai-title {

  opacity: 0.45;
  color: #777;
  letter-spacing: 1px;
  text-shadow: none;

}

.hb-ai-disabled .hb-ai-input {

  opacity: 0.5;
  cursor: not-allowed;

}

.hb-ai-disabled .hb-ai-tags {

  opacity: 0.4;

}

/* =====================================
   HB AI CHAT MESSAGES
===================================== */

#hb-builder .hb-ai-message {

  padding: 10px;

  font-size: 11px;

  line-height: 1.55;

  border-radius: 6px;

  white-space: pre-wrap;

}

#hb-builder .hb-ai-message-user {

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.06);

  color: #d8d8d8;

  align-self: flex-end;

  max-width: 88%;

}

#hb-builder .hb-ai-message-assistant {

  background: rgba(0,255,65,0.06);

  border: 1px solid rgba(0,255,65,0.14);

  color: #b7ffb7;

  align-self: flex-start;

  max-width: 88%;

}

/* =====================================
   HB AI LOADING DOTS
===================================== */

#hb-builder .hb-ai-dots {

  display: inline-block;

  animation: hbAiDotsBlink 1.2s infinite;

}

@keyframes hbAiDotsBlink {

  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }

}

/* =====================================================
HB ANALYZE OVERLAY
===================================================== */

#hb-analyze-terminal {

    position: absolute;

    inset: 0;

    z-index: 5000;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            0,
            0,
            0,
            .55
        );

    backdrop-filter:
        blur(10px);

}

#hb-analyze-terminal.active {

    display: flex;

}

/* =====================================================
   HB ANALYZE TERMINAL
===================================================== */

#hb-analyze-terminal {

    position: absolute;

    inset: 0;

    z-index: 5000;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            0,
            0,
            0,
            .55
        );

    backdrop-filter:
        blur(10px);

}

#hb-analyze-terminal.active {

    display: flex;

}

.hb-analyze-window {

    position: relative;

    width: 78%;

    max-width: 420px;

    min-height: 260px;

    padding: 24px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        rgba(
            0,
            0,
            0,
            .92
        );

    border: 1px solid
        rgba(
            0,
            255,
            120,
            .45
        );

    box-shadow:

        0 0 24px
        rgba(
            0,
            255,
            120,
            .25
        ),

        inset 0 0 24px
        rgba(
            0,
            255,
            120,
            .08
        );

    overflow: hidden;

}

/* -----------------------------------------
   CRT SCANLINES
----------------------------------------- */

.hb-analyze-window::before {

    content: '';

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        repeating-linear-gradient(

            to bottom,

            rgba(
                0,
                255,
                120,
                .03
            ) 0px,

            rgba(
                0,
                255,
                120,
                .03
            ) 1px,

            transparent 2px,

            transparent 4px

        );

}

/* -----------------------------------------
   CATEGORY
----------------------------------------- */

.hb-analyze-category {

    position: relative;

    z-index: 2;

    margin-bottom: 12px;

    font-family:
        'VT323',
        monospace;

    font-size: 14px;

    line-height: 1;

    letter-spacing: .20em;

    text-transform:
        uppercase;

    text-shadow:

        0 0 1px
        rgba(
            255,
            235,
            59,
            .8
        ),

        0 0 3px
        rgba(
            255,
            235,
            59,
            .4
        ),

        0 0 6px
        rgba(
            255,
            235,
            59,
            .2
        );

}

/* -----------------------------------------
   TITLE
----------------------------------------- */

.hb-analyze-title {

    position: relative;

    z-index: 2;

    margin-bottom: 20px;

    max-width: 100%;

    word-break: break-word;

    font-family:
        'VT323',
        monospace;

    font-size: 20px;

    line-height: 1.05;

    letter-spacing: .04em;

    text-transform:
        uppercase;

    color:
        #00ff41;

    text-shadow:

        0 0 1px
        rgba(
            255,
            235,
            59,
            .8
        ),

        0 0 3px
        rgba(
            255,
            235,
            59,
            .4
        ),

        0 0 6px
        rgba(
            255,
            235,
            59,
            .2
        );

}

/* -----------------------------------------
   MESSAGE
----------------------------------------- */

.hb-analyze-message {

    position: relative;

    z-index: 2;

    margin-bottom: 16px;

    font-family:
        'VT323',
        monospace;

    font-size: 16px;

    line-height: 1.4;

    letter-spacing: 1px;

    text-transform:
        uppercase;

    color:
        #00ff41;

    text-shadow:

        0 0 1px
        rgba(
            255,
            235,
            59,
            .8
        ),

        0 0 3px
        rgba(
            255,
            235,
            59,
            .4
        ),

        0 0 6px
        rgba(
            255,
            235,
            59,
            .2
        );

}

/* -----------------------------------------
   DETAILS
----------------------------------------- */

.hb-analyze-details {

    position: relative;

    z-index: 2;

    margin-bottom: 24px;

    font-family:
        'VT323',
        monospace;

    font-size: 15px;

    line-height: 1.4;

    letter-spacing: 1px;

    text-transform:
        uppercase;

    color:
        #00ff41;

    text-shadow:

        0 0 1px
        rgba(
            255,
            255,
            255,
            .15
        );

}

/* -----------------------------------------
   TERMINAL BUTTONS
----------------------------------------- */

.hb-analyze-window button {

    position: relative;

    z-index: 2;

    width: 100%;

    margin-top: 6px;

    padding: 8px 12px;

    background:
        transparent;

    border:
        1px solid
        #00ff41;

    color:
        #00ff41;

    font-family:
        'VT323',
        monospace;

    font-size:
        14px;

    line-height:
        1;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        all .15s ease;

    text-shadow:

        0 0 1px
        rgba(
            255,
            235,
            59,
            .6
        ),

        0 0 3px
        rgba(
            255,
            235,
            59,
            .3
        );

}

.hb-analyze-window button:hover {

    background:
        rgba(
            0,
            255,
            65,
            .12
        );

    box-shadow:

        0 0 10px
        rgba(
            0,
            255,
            65,
            .25
        );

}

/* -----------------------------------------
   CATEGORY COLORS
----------------------------------------- */

.hb-analyze-category.error {

    color:
        #ff5b5b;

}

.hb-analyze-category.action {

    color:
        #ffd54a;

}

.hb-analyze-category.warning {

    color:
        #ff9f43;

}

.hb-analyze-category.design-note {

    color:
        #58d6ff;

}

.hb-analyze-category.manufacturing-note {

    color:
        #d08cff;

}

.hb-analyze-category.pass {

    color:
        #00ff66;

}

.hb-findings-nav {

    display: flex;

    gap: 8px;

    margin-top: 10px;

}

.hb-findings-nav button {

    margin-top: 0;

}

.hb-findings-prev,
.hb-findings-next {

    flex: 0 0 60px;

}

.hb-analyze-return {

    flex: 1;

}

#hb-builder-controls{
    position:relative;
    display:flex;
    gap:10px;
}

.hb-analyze-help {

    display: block;

    width: fit-content;

margin: 6px 12px 0 auto;

    color: #00ff41;

    font-size: 10px;

    font-family: inherit;

    cursor: help;

    user-select: none;

    opacity: 0.85;

    text-shadow:
        0 0 4px rgba(0,255,65,0.5);

}

/* =====================================================
   LAPTOP HEIGHT OPTIMIZATION
===================================================== */

/* SCALE ENTIRE BUILDER ONLY ON LAPTOPS */

@media (max-width:1450px) and (max-height:900px){

  #hb-builder{

    zoom:0.9;

  }

}

/* EXTRA SMALL LAPTOPS */

@media (max-width:1450px) and (max-height:820px){

  #hb-builder{

    zoom:0.86;

  }

}