:root{
  --bg:#fff;
  --bg-2:#f3f4f6;
  --bd:#e5e7eb;
  --tx:#111827;
  --mut:#6b7280;
  --shadow:0 1px 2px rgba(0,0,0,.06);
  --focus:#fb923c;
}

*{box-sizing:border-box}
body{
  margin:0;
  padding:16px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#f7f7f7;
}

/* Sidebar shell (compact) */
.panel-sidebar{
  width:320px;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;
}

/* Header compact */
.wp-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:#fff;
}
.wp-item__left{display:flex;align-items:center;gap:10px;}
.wp-item__icon{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:#f9fafb;border:1px solid var(--bd);
  font-weight:800;color:var(--tx);font-size:.9rem;
}
.wp-item__label{font-weight:800;color:var(--tx);font-size:.95rem;}

/* Tabs compact */
.wp-tabs{
  display:flex;gap:6px;
  padding:3px;
  background:var(--bg-2);
  border:1px solid var(--bd);
  border-radius:12px;
}
.wp-tab{
  width:30px;height:26px;
  border-radius:10px;
  border:0;background:transparent;
  cursor:pointer;color:var(--mut);font-weight:800;
}
.wp-tab.active{
  background:#fff;color:var(--tx);
  box-shadow:var(--shadow);
}

.wp-content{padding:10px 12px 12px;}

/* Sector */
.sector{border-top:1px solid var(--bd);padding-top:8px;}
.sector__title{
  display:flex;align-items:center;gap:8px;
  padding:8px 8px;
  border-radius:12px;
}
.sector__caret{color:var(--mut);}
.sector__label{font-weight:900;color:var(--tx);font-size:.95rem;}

.props{display:flex;flex-direction:column;gap:10px;margin-top:6px;}

/* Properties */
.prop{display:flex;flex-direction:column;gap:6px;}
.prop--inline{
  display:grid;
  grid-template-columns: 92px 1fr; /* label à gauche, champ à droite */
  gap:10px;
  align-items:center;
}
.prop__label{
  font-size:.78rem;
  font-weight:800;
  color:var(--mut);
  line-height:1.1;
}
.prop__label--top{margin-bottom:2px;}
.prop--stack .prop__label--top{color:var(--mut);}

.field{
  width:100%;
  height:32px;
  border-radius:12px;
  border:1px solid var(--bd);
  background:#fff;
  color:var(--tx);
  padding:0 10px;
  font-size:.82rem;
  outline:none;
  box-shadow:var(--shadow);
}
.field:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}

/* Segmented (compact) */
.seg{
  display:flex;
  gap:4px;
  border:1px solid var(--bd);
  background:var(--bg-2);
  border-radius:12px; /* comme select */
  padding:4px;
}
.seg--tight{padding:3px;}
.seg__item{flex:1;position:relative;display:block;}
.seg__input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.seg__btn{
  display:flex;align-items:center;justify-content:center;
  height:26px;
  border-radius:10px;
  font-size:.72rem;
  font-weight:900;
  color:var(--mut);
  user-select:none;
  transition:.15s ease;
  white-space:nowrap;
}
.seg__input:checked + .seg__btn{
  background:#fff;
  color:var(--tx);
  box-shadow:var(--shadow);
}

/* Offsets grid (compact) */
.dir{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.dir__title{
  font-size:.75rem;
  font-weight:900;
  color:var(--tx);
  margin-bottom:6px;
}

/* combo (auto + unit + arrows) = 1 champ */
.combo{
  display:flex;
  align-items:stretch;
  height:32px;
  border:1px solid var(--bd);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
}
.combo:focus-within{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
.combo__input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  padding:0 10px;
  font-size:.82rem;
  color:var(--tx);
}
.combo__unit{
  width:62px;
  border:0;
  outline:0;
  background:transparent;
  border-left:1px solid var(--bd);
  padding:0 8px;
  font-size:.82rem;
  color:var(--tx);
}
.combo__arrows{
  width:28px;
  border-left:1px solid var(--bd);
  display:flex;
  flex-direction:column;
  background:#fff;
}
.combo__up,.combo__down{flex:1;position:relative;}
.combo__up::before{
  content:"";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-60%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:6px solid var(--mut);
}
.combo__down::before{
  content:"";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-40%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--mut);
}