.mp-editor.mp2{
  --mp-gap: 10px;
  --mp-bg: #ffffff;
  --mp-border: #d0d7de;
  --mp-muted: #57606a;
  --mp-canvas-height: 70vh;
  --mp-radius: 12px;
  --mp-shadow: 0 1px 2px rgba(27,31,36,.12);
  border: 1px solid var(--mp-border);
  background: var(--mp-bg);
  border-radius: var(--mp-radius);
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: var(--mp-shadow);
}

.mp2-loading{
  padding: 16px;
  color: var(--mp-muted);
}

.mp2-shell{ 
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.mp2-topbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--mp-border);
  background: #fff;
}

.mp2-topbar__brand{
  font-weight: 700;
  letter-spacing: .2px;
  margin-right: 4px;
}

.mp2-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp2-field > span{
  font-size: 12px;
  color: var(--mp-muted);
}

.mp2-checkrow{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #111827;
}

.mp2-checkrow input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

.mp2-input,
.mp2-select{
  border: 1px solid var(--mp-border);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 14px;
  background: #fff;
  min-height: 38px;
}

.mp2-topbar__title{
  flex: 1 1 260px;
  min-width: 200px;
}

.mp2-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Mobile page picker (pages list is hidden on small screens) */
.mp2-pagepick{ display:none; }
@media (max-width: 720px){
  .mp2-pagepick{ display:block; min-width: 160px; }
}

/* External single-line tool link */
.mp2-open-single{ text-decoration: none; }
.mp2-open-single .mp2-icon{ font-size: 16px; line-height: 1; }
.mp2-open-single .mp2-text{ margin-left: 8px; }
@media (max-width: 720px){
  .mp2-open-single .mp2-text{ display: none; }
}

.mp2-btn{
  border: 1px solid var(--mp-border);
  border-radius: 10px;
  padding: 9px 12px;
  background: #f6f8fa;
  cursor: pointer;
  font-size: 14px;
  min-height: 38px;
}

.mp2-btn:hover{ filter: brightness(0.985); }
.mp2-btn:active{ transform: translateY(1px); }

.mp2-btn--primary{
  background: #0969da;
  border-color: #0969da;
  color: #fff;
}

.mp2-btn--danger{
  background: #cf222e;
  border-color: #cf222e;
  color: #fff;
}

.mp2-file{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mp2-file input{ display:none; }

.mp2-body{
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  min-height: 360px;
}

.mp2-pages{
  border-right: 1px solid var(--mp-border);
  background: #fff;
  padding: 12px;
}

.mp2-pages__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mp2-pages__header h3{
  margin: 0;
  font-size: 14px;
}

.mp2-pages__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp2-page{
  border: 1px solid var(--mp-border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  background: #fff;
}

.mp2-page[aria-current="true"]{
  border-color: #0969da;
  box-shadow: 0 0 0 2px rgba(9,105,218,.15);
}

.mp2-page__name{ font-weight: 600; font-size: 14px; }
.mp2-page__meta{ font-size: 12px; color: var(--mp-muted); margin-top: 4px; }

.mp2-canvaspane{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mp2-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mp-border);
  background: #fff;
}

.mp2-toolgroup{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mp2-chip{
  border: 1px solid var(--mp-border);
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

.mp2-chip[aria-pressed="true"]{
  border-color: #0969da;
  background: rgba(9,105,218,.08);
}

.mp2-symbols{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mp2-symbolbtn{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid var(--mp-border);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.mp2-symbolbtn[aria-pressed="true"]{
  border-color: #0969da;
  box-shadow: 0 0 0 2px rgba(9,105,218,.15);
}

.mp2-canvaswrap{
  position: relative;
  width: 100%;
  height: var(--mp-canvas-height);
  background: #fff;
}

.mp2-canvas{
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.mp2-props{
  border-left: 1px solid var(--mp-border);
  background: #fff;
  padding: 12px;
}

.mp2-props h3{
  margin: 0 0 10px 0;
  font-size: 14px;
}

.mp2-props .mp2-field{ margin-bottom: 10px; }

.mp2-props__empty{
  color: var(--mp-muted);
  font-size: 13px;
  line-height: 1.4;
}

.mp2-status{
  padding: 10px 12px;
  border-top: 1px solid var(--mp-border);
  color: var(--mp-muted);
  font-size: 13px;
  background: #fff;
}

.mp2-hint{
  margin-left: auto;
  color: var(--mp-muted);
  font-size: 12px;
}

.mp2-modalbackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.mp2-modalbackdrop[data-open="true"]{ display: flex; }

.mp2-modal{
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--mp-border);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: 14px;
}

.mp2-modal h2{ margin: 0 0 10px 0; font-size: 16px; }

.mp2-modal__row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.mp2-checklist{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mp2-checklist label{ display: flex; gap: 10px; align-items: center; }

.mp2-badge{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mp-border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--mp-muted);
  margin-left: 6px;
}

@media (max-width: 980px){
  .mp2-body{ grid-template-columns: 220px 1fr; }
  .mp2-props{ display:block; grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--mp-border); max-height: 280px; overflow:auto; }
}

@media (max-width: 720px){
  .mp2-body{ grid-template-columns: 1fr; }
  .mp2-pages{ display:none; }
  .mp2-topbar{ padding: 10px; }
  .mp2-toolbar{ position: sticky; top: 0; z-index: 2; }
  .mp2-symbolbtn{ width: 44px; height: 44px; }
}


/* --- v0.4 additions --- */
.mp2-section-title{
  font-weight: 800;
  margin: 0 0 8px;
}
.mp2-hr{
  margin: 12px 0;
  border: none;
  border-top: 1px solid var(--mp-border);
}
.mp2-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 720px){
  .mp2-grid2{ grid-template-columns: 1fr; }
}
.mp2-muted{
  color: var(--mp-muted);
  font-size: 12px;
}
.mp2-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #e5e7eb;
  color: #111;
  font-weight: 700;
  font-size: 12px;
}
.mp2-circuitrow{
  border: 1px solid var(--mp-border);
  border-radius: 12px;
  padding: 10px;
  margin: 10px 0;
  background: #fff;
}
.mp2-circuitrow__head{
  margin-bottom: 8px;
}


/* v0.6.1: inline field (input + small button) */
.mp2-inline{ display:flex; gap:6px; align-items:stretch; }
.mp2-inline .mp2-input{ flex:1; }
.mp2-inline .mp2-btn{ padding:9px 10px; }

/* v0.6.3: login gate (ELSTROM Connect) */
.mp2-gatewrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 320px;
}
.mp2-gate{
  padding: 22px;
  max-width: 560px;
  text-align:center;
}
.mp2-gate h3{
  margin: 0 0 10px;
  font-size: 18px;
}
.mp2-gate p{
  margin: 0 0 14px;
  color: var(--mp-muted);
  line-height: 1.45;
}
.mp2-gate__link{
  text-decoration:none;
  display:inline-block;
}
.mp2-gate__small{
  margin-top: 10px;
  font-size: 12px;
  color: var(--mp-muted);
}