:root{
      --bg1:#f5f7fb;
      --bg2:#eef2f7;

      --card:#ffffff;
      --card-soft:#f8fafc;
      --card-soft-2:#eef2f7;

      --stroke:#d9e1ec;
      --stroke-strong:#cbd5e1;

      --text:#0f172a;
      --heading:#0f172a;
      --muted:#64748b;
      --placeholder:#94a3b8;

      --primary:#2563eb;
      --primary-soft:#eff6ff;
      --primary-soft-2:#dbeafe;
      --primary-border:#bfdbfe;
      --primary-border-strong:#93c5fd;
      --primary-text:#1d4ed8;

      --success-soft:#ecfdf5;
      --success-soft-2:#d1fae5;
      --success-border:#a7f3d0;
      --success-border-strong:#6ee7b7;
      --success-text:#047857;
      --success-dot:#22c55e;

      --danger-soft:#fef2f2;
      --danger-soft-2:#fee2e2;
      --danger-border:#fecaca;
      --danger-border-strong:#fca5a5;
      --danger-text:#b91c1c;
      --danger-dot:#ef4444;

      --warning-soft:#fff7ed;
      --warning-border:#fdba74;
      --warning-text:#c2410c;
      --warning-dot:#f59e0b;

      --gold-1:#f7c948;
      --gold-2:#f59e0b;
      --gold-border:rgba(255,215,0,.65);
      --gold-text:#1a1a1a;

      --focus-ring:0 0 0 3px rgba(59,130,246,.12);
      --shadow:0 14px 40px rgba(15,23,42,.08);
      --shadow-soft:0 4px 14px rgba(15,23,42,.04);
      --shadow-mid:0 8px 18px rgba(15,23,42,.08);

      --r:18px;
      --stroke-soft:#edf2f7;
      --primary-dot:#3b82f6;
      --success-text-strong:#059669;
      --danger-text-strong:#dc2626;
      --warning-text-strong:#d97706;
      --track:#e5e7eb;
      --track-border:#dbe3ee;
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
      color:var(--text);
      background:linear-gradient(180deg,var(--bg1),var(--bg2));
      min-height:100vh;
      padding:28px 18px 40px;
    }

    .wrap{max-width:1180px;margin:0 auto}

    .topbar{
      display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
      margin-bottom:14px;
    }

    .brand{display:flex;align-items:center;gap:10px;font-weight:700}

    .dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 14px rgba(37,99,235,.35);
    }

    .rightTop{display:flex;gap:10px;align-items:center}

    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 12px;border-radius:999px;
      background:var(--card);
      border:1px solid var(--stroke);
      color:var(--text);
      text-decoration:none;
      box-shadow:0 8px 24px rgba(15,23,42,.06);
      cursor:pointer;
      user-select:none;
    }

    .card{
      background:var(--card);
      border:1px solid var(--stroke);
      border-radius:var(--r);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .grid{
      display:grid;
      grid-template-columns:420px 1fr;
      gap:16px;
      align-items:start;
    }

    @media (max-width:980px){
      .grid{grid-template-columns:1fr}
    }

    .panel{padding:16px}

    h1{
      margin:0 0 6px;
      font-size:30px;
      letter-spacing:-.3px;
      color:var(--heading);
    }

    .muted{color:var(--muted);font-size:13px}
    .hr{height:1px;background:var(--stroke);margin:14px 0}

    .row{display:flex;gap:10px;flex-wrap:wrap}
    .row > *{flex:1}

    label{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin:10px 0 6px;
    }

    input, select, textarea{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--card);
      color:var(--text);
      outline:none;
    }

    input:focus, select:focus, textarea:focus{
      border-color:var(--primary-border-strong);
      box-shadow:var(--focus-ring);
    }

    textarea{min-height:90px;resize:vertical}

    input::placeholder, textarea::placeholder{
      color:var(--placeholder);
    }

    .btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

    button.btn,a.btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:12px 12px;border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--card);
      color:var(--text);
      text-decoration:none;
      cursor:pointer;
      transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
      user-select:none;
      min-width:140px;
      box-shadow:var(--shadow-soft);
    }

    button.btn:hover,a.btn:hover{
      transform:translateY(-1px);
      background:var(--card-soft);
      border-color:var(--stroke-strong);
      box-shadow:var(--shadow-mid);
    }

    .btnPrimary{
      background:var(--primary-soft);
      border-color:var(--primary-border);
      color:var(--primary-text);
    }

    .btnPrimary:hover{
      background:var(--primary-soft-2);
      border-color:var(--primary-border-strong);
    }

    .btnOk{
      background:var(--success-soft);
      border-color:var(--success-border);
      color:var(--success-text);
    }

    .btnOk:hover{
      background:var(--success-soft-2);
      border-color:var(--success-border-strong);
    }

    .btnDanger{
      background:var(--danger-soft);
      border-color:var(--danger-border);
      color:var(--danger-text);
    }

    .btnDanger:hover{
      background:var(--danger-soft-2);
      border-color:var(--danger-border-strong);
    }

    .disabled{opacity:.45;pointer-events:none}

    .previewCard{padding:16px}
    .previewTitle{font-size:18px;margin:0 0 6px}
    .mini{font-size:12px;color:var(--muted)}

    .coverWrap{margin-top:10px}

    .cover{
      border-radius:16px;
      overflow:hidden;
      border:1px solid var(--stroke);
      background:var(--card-soft);
      aspect-ratio:16 / 9;
      position:relative;
    }

    .cover img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .gallery{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin-top:10px;
    }

    .thumb{
      border-radius:14px;
      overflow:hidden;
      border:1px solid var(--stroke);
      background:var(--card-soft);
      aspect-ratio:4 / 3;
      position:relative;
    }

    .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .delBtn{
      position:absolute;
      top:8px;
      right:8px;
      width:30px;
      height:30px;
      padding:0;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.9);
      background:rgba(220,38,38,.92);
      color:transparent;
      cursor:pointer;
      font-size:0;
      font-weight:800;
      z-index:50;
      box-shadow:0 6px 18px rgba(0,0,0,.18);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .delBtn::before{
      content:"×";
      color:#fff;
      font-size:18px;
      line-height:1;
      font-weight:900;
    }

    .delBtn:hover{
      background:rgba(185,28,28,.96);
      border-color:#fff;
      transform:scale(1.04);
    }

    .delBtn:disabled{
      opacity:.5;
      cursor:default;
    }

    .statusLine{margin-top:10px;font-size:13px}
    .ok{color:var(--success-text-strong)}
    .bad{color:var(--danger-text-strong)}
    .tiny{font-size:12px;color:var(--muted)}

    .uploadBox{
      margin-top:10px;
      padding:12px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background:var(--card);
    }

    .uploadTitle{
      font-size:13px;
      color:var(--muted);
      font-weight:700;
      margin:0 0 8px;
    }

    .uploadRow{
      display:flex;gap:10px;flex-wrap:wrap;align-items:center
    }

    .uploadRow input[type="file"]{padding:10px}
    .smallBtn{min-width:160px}
    .progress{margin-top:8px;font-size:12px;color:var(--muted)}

    .has-badge{position:relative}

    .plan-badge{
      position:absolute;
      top:10px;
      left:10px;
      right:auto;
      z-index:20;
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background:rgba(255,255,255,.92);
      color:var(--text);
      font-weight:800;
      font-size:12px;
      backdrop-filter:blur(10px);
      pointer-events:none;
    }

    .cover .delBtn{z-index:25}

    .plan-badge.plan-free{
      background:var(--card);
      border-color:var(--stroke);
    }

    .plan-badge.plan-pro{
      background:var(--success-soft);
      border-color:var(--success-border);
      color:var(--success-text);
    }

    .plan-badge.plan-gold{
      background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
      border-color:var(--gold-border);
      color:var(--gold-text);
      font-weight:900;
    }

    .planSlide{
      margin-top:10px;
      padding:14px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background:var(--card);
      box-shadow:0 12px 30px rgba(15,23,42,.06);
    }

    .planSlideTop{display:flex;gap:12px;align-items:center}

    .planChip{
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background:var(--card-soft);
      font-weight:900;
      font-size:12px;
      letter-spacing:.5px;
      color:var(--heading);
    }

    .planName{font-size:14px;font-weight:900;color:var(--heading)}
    .planSub{font-size:12px;color:var(--muted);margin-top:2px}

    .planBarWrap{
      margin-top:10px;
      height:10px;
      border-radius:999px;
      background:var(--track);
      border:1px solid var(--track-border);
      overflow:hidden;
    }

    .planBar{height:100%;width:0%;border-radius:999px;transition:width .25s ease}

    .planRow{display:flex;gap:10px;margin-top:12px}

    .planStat{
      flex:1;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--card-soft);
      text-align:center;
    }

    .planStatNum{font-size:16px;font-weight:900;color:var(--heading)}
    .planStatLbl{font-size:11px;color:var(--muted);margin-top:2px}

    .planBullets{
      margin-top:12px;
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
    }

    .planBullet{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--card-soft);
    }

    .planBullet b{font-size:12px;color:var(--heading)}
    .planBullet span{font-size:12px;color:var(--muted)}

    .planIcon{
      width:26px;height:26px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      border:1px solid var(--stroke);
      background:var(--card);
      font-weight:900;
    }

    .planActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

    .planBtn{
      flex:1;
      min-width:160px;
      padding:11px 12px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--card);
      color:var(--text);
      cursor:pointer;
      font-weight:800;
    }

    .planBtn:hover{
      background:var(--card-soft);
      border-color:var(--stroke-strong);
    }

    .planBtnPrimary{
      background:var(--primary-soft);
      border-color:var(--primary-border);
      color:var(--primary-text);
    }

    .planBtnPrimary:hover{
      background:var(--primary-soft-2);
      border-color:var(--primary-border-strong);
    }

    .planBtnGhost{background:var(--card-soft)}

    .planHint{margin-top:10px;font-size:12px;color:var(--muted)}
    .planHot{color:var(--warning-text-strong);font-weight:900}

    .planTheme-free .planChip{background:var(--card-soft)}
    .planTheme-free .planBar{background:var(--placeholder)}

    .planTheme-pro .planChip{
      background:var(--success-soft);
      border-color:var(--success-border);
      color:var(--success-text);
    }

    .planTheme-pro .planBar{background:var(--success-dot)}

    .planTheme-gold .planChip{
      background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
      color:var(--gold-text);
      border-color:var(--gold-border);
    }

    .planTheme-gold .planBar{
      background:linear-gradient(90deg,var(--gold-1),var(--gold-2));
    }

    #planBadge{display:none !important}

    .aCard{
      min-width:130px;
      padding:12px 14px;
      border-radius:14px;
      background:var(--card);
      border:1px solid var(--stroke);
    }

    .aNum{
      font-size:22px;
      font-weight:900;
      line-height:1;
      color:var(--text);
    }

    .aLbl{
      font-size:12px;
      color:var(--muted);
      margin-top:6px;
    }

    select option{
      background:#ffffff;
      color:#111111;
    }

    #btnGeo{
      width:56px;
      min-width:56px;
      height:44px;
      padding:0;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      gap:0;
    }

    #btnGeo .txt{display:none !important}

    .mpTableWrap{
      max-height:420px;
      overflow:auto;
      border:1px solid var(--stroke);
      border-radius:14px;
      background:var(--card);
    }

    .mpTable{
      width:100%;
      border-collapse:collapse;
      min-width:780px;
    }

    .mpTable thead th{
      position:sticky;
      top:0;
      z-index:2;
      background:var(--card-soft);
      color:var(--heading);
      text-align:left;
      padding:12px 10px;
      font-size:13px;
      border-bottom:1px solid var(--stroke);
    }

    .mpTable tbody td{
      padding:10px;
      border-bottom:1px solid var(--stroke-soft);
      vertical-align:middle;
      font-size:13px;
      color:var(--text);
    }

    .mpTable tbody tr:hover{
      background:var(--card-soft);
    }

    .mpProdThumb{
      width:58px;
      height:58px;
      border-radius:10px;
      object-fit:cover;
      border:1px solid var(--stroke);
      display:block;
    }

    .mpProdNoPhoto{
      width:58px;
      height:58px;
      border-radius:10px;
      background:var(--card-soft);
      border:1px solid var(--stroke);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      color:var(--muted);
    }

    .mpBtnMini{
      min-width:auto !important;
      padding:8px 10px !important;
      font-size:12px;
    }

    .mpBadgeOn{
      display:inline-block;
      padding:4px 8px;
      border-radius:999px;
      background:var(--success-soft);
      border:1px solid var(--success-border);
      font-size:12px;
      color:var(--success-text);
    }

    .mpBadgeOff{
      display:inline-block;
      padding:4px 8px;
      border-radius:999px;
      background:var(--card-soft);
      border:1px solid var(--stroke);
      font-size:12px;
      color:var(--muted);
    }

    .mpBadgeStock{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:5px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      border:1px solid transparent;
    }

    .mpBadgeStock::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:999px;
    }

    .mpBadgeStockIn{
      background:var(--success-soft);
      border-color:var(--success-border);
      color:var(--success-text);
    }
    .mpBadgeStockIn::before{
      background:var(--success-dot);
    }

    .mpBadgeStockLow{
      background:var(--warning-soft);
      border-color:var(--warning-border);
      color:var(--warning-text);
    }

    .mpBadgeStockLow::before{
      background:var(--warning-dot);
    }

    .mpBadgeStockOut{
      background:var(--danger-soft);
      border-color:var(--danger-border-strong);
      color:var(--danger-text);
    }

    .mpBadgeStockOut::before{
      background:var(--danger-dot);
    }

    .mpBadgeStockPre{
      background:var(--primary-soft);
      border-color:var(--primary-border-strong);
      color:var(--primary-text);
    }

    .mpBadgeStockPre::before{
      background:var(--primary-dot);
    }

    #productSearchAdmin{
      width:100%;
      max-width:280px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:var(--card);
      color:var(--text);
      outline:none;
    }

    #productSearchAdmin::placeholder{
      color:var(--placeholder);
    }

/* ===== FIX BOTONES SUPERIORES OCULTOS ===== */

.mpShell{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  align-items: start;
}

.mpCenter,
.mpLeft{
  min-width: 0;
  position: relative;
  z-index: 1;
}

.mpCenter{
  z-index: 5;
}

.mpTopBar{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  position: relative;
  z-index: 50;
  overflow: visible !important;
}

.mpTitleWrap{
  flex: 1 1 auto;
  min-width: 240px;
}

.mpTopActions{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  flex: 0 0 auto !important;
  position: relative;
  z-index: 60;
  overflow: visible !important;
  margin-left: auto;
}

.mpTopActions .mpBtn,
.mpTopActions a.mpBtn,
.mpTopActions button.mpBtn{
  min-width: 120px;
  height: 46px;
  padding: 0 16px;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow-soft);
  border-radius: 14px;
  position: relative;
  z-index: 70;
}

.mpTopActions .mpBtn:hover,
.mpTopActions a.mpBtn:hover,
.mpTopActions button.mpBtn:hover{
  background:var(--card-soft);
  border-color:var(--stroke-strong);
}

#btnLogoutTop{
  background:var(--danger-soft) !important;
  border-color:var(--danger-border) !important;
  color:var(--danger-text) !important;
}

#btnLogoutTop:hover{
  background:var(--danger-soft-2) !important;
  border-color:var(--danger-border-strong) !important;
}

.mpPreviewBox,
#previewBox,
.mpRight .mpCard{
  position: relative;
  z-index: 1;
}

@media (max-width: 1200px){
  .mpShell{
    grid-template-columns: 360px minmax(0, 1fr);
  }

  .mpRight{
    grid-column: 1 / -1;
  }

  .mpTopBar{
    flex-wrap: wrap !important;
  }

  .mpTitleWrap{
    width: 100%;
  }

  .mpTopActions{
    width: 100%;
    justify-content: flex-start !important;
  }
}

@media (max-width: 780px){
  .mpShell{
    grid-template-columns: 1fr;
  }

  .mpTopActions .mpBtn,
  .mpTopActions a.mpBtn,
  .mpTopActions button.mpBtn{
    flex: 1 1 calc(50% - 10px);
    min-width: unset;
  }

  #btnLogoutTop{
    flex: 1 1 100%;
  }
}

/* ===== MODAL PRODUCTO COMPACTO Y PROFESIONAL ===== */

.mpModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

.mpModal.open{
  display: flex;
}

.mpModalCard{
  width: min(920px, 96vw) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background:var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.18);
  padding: 18px 18px 16px;
}

#modalProduct .mpModalCard{
  width: min(880px, 96vw) !important;
  max-height: 90vh !important;
}

.mpModalHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  position: sticky;
  top: 0;
  background:var(--card);
  z-index: 5;
}

.mpModalTitle{
  font-size: 18px;
  font-weight: 900;
  color: var(--heading);
}

.mpX{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background:var(--card-soft);
  color:var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mpX:hover{
  background:var(--card-soft-2);
}

#modalProduct .mpGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

#modalProduct .mpField{
  min-width: 0;
}

#modalProduct .mpSpan2{
  grid-column: 1 / -1;
}

#modalProduct label{
  margin: 6px 0 5px;
}

#modalProduct input,
#modalProduct select,
#modalProduct textarea{
  padding: 11px 12px;
  min-height: 46px;
}

#modalProduct .mpSmall{
  margin-top: 6px;
  line-height: 1.35;
}

#productPhotoPreview{
  max-width: 150px !important;
  max-height: 150px !important;
  object-fit: cover;
  border-radius: 14px !important;
  border: 1px solid var(--stroke) !important;
  display: block;
}

.mpModalFoot{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
  padding:16px 0 0;
  border-top:1px solid var(--stroke);
  background:var(--card);
  position:static;
}

.mpModalFoot .mpBtn{
  min-width:180px;
}

#productStockQty:disabled,
#productStockStatus:disabled{
  background:var(--card-soft);
  color:var(--placeholder);
  cursor:not-allowed;
  opacity:.8;
}

@media (max-width: 900px){
  #modalProduct .mpModalCard{
    width: min(760px, 96vw) !important;
  }
}

@media (max-width: 760px){
  .mpModal{
    padding:10px;
    align-items:flex-start;
  }

  .mpModalCard{
    width:100% !important;
    max-height:94vh !important;
    margin-top:8px;
    border-radius:18px;
    padding:14px;
  }

  #modalProduct .mpGrid2{
    grid-template-columns:1fr;
    gap:10px;
  }

  #modalProduct .mpSpan2{
    grid-column:auto;
  }

  .mpModalFoot{
    justify-content:stretch;
  }

  .mpModalFoot .mpBtn{
    flex:1 1 100%;
    min-width:100%;
  }

  .mpX{
    width:46px;
    height:46px;
    font-size:24px;
  }
}

/* ===== PREVIEW NUEVO ===== */
.mpRight{
  min-width:0;
  position:relative;
  z-index:1;
  display:block;
}

.mpCard{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:16px;
}

.mpCardTitle{
  font-size:18px;
  font-weight:800;
  margin-bottom:12px;
  color:var(--heading);
}

.mpPreviewBox,
#previewBox{
  width:100%;
  height:740px;
  min-height:740px;
  max-height:740px;
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
}

.previewMount{
  width:100%;
  height:100%;
  min-height:100%;
  background:var(--card);
  overflow:hidden;
}

.previewMount iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:var(--card);
  border-radius:16px;
}

#btnExtraAvisos,
#btnExtraHorario,
#btnExtraServicios{
  min-width:140px;
}

@media (max-width:680px){
  #btnExtraAvisos,
  #btnExtraHorario,
  #btnExtraServicios{
    flex:1 1 100%;
  }
}

/* ===== THEMES DEL EDITOR ===== */

body.theme-slate{
  --bg1:#f1f5f9;
  --bg2:#e2e8f0;
  --card:#ffffff;
  --card-soft:#f8fafc;
  --card-soft-2:#eef2f7;
  --stroke:#cbd5e1;
  --stroke-strong:#94a3b8;
  --text:#0f172a;
  --heading:#0f172a;
  --muted:#475569;
  --placeholder:#94a3b8;

  --primary:#334155;
  --primary-soft:#e2e8f0;
  --primary-soft-2:#cbd5e1;
  --primary-border:#cbd5e1;
  --primary-border-strong:#94a3b8;
  --primary-text:#1e293b;

  --focus-ring:0 0 0 3px rgba(51,65,85,.12);
  --track:#e2e8f0;
  --track-border:#cbd5e1;
}

body.theme-midnight{
  --bg1:#0f172a;
  --bg2:#111827;
  --card:#111827;
  --card-soft:#1f2937;
  --card-soft-2:#273449;
  --stroke:#334155;
  --stroke-strong:#475569;
  --text:#e5eefb;
  --heading:#f8fbff;
  --muted:#94a3b8;
  --placeholder:#64748b;

  --primary:#38bdf8;
  --primary-soft:#082f49;
  --primary-soft-2:#0c4a6e;
  --primary-border:#155e75;
  --primary-border-strong:#0891b2;
  --primary-text:#bae6fd;

  --success-soft:#052e26;
  --success-soft-2:#064e3b;
  --success-border:#065f46;
  --success-border-strong:#10b981;
  --success-text:#6ee7b7;
  --success-dot:#34d399;

  --danger-soft:#3f1d1d;
  --danger-soft-2:#4c1d1d;
  --danger-border:#7f1d1d;
  --danger-border-strong:#b91c1c;
  --danger-text:#fca5a5;
  --danger-dot:#ef4444;

  --warning-soft:#3b2a12;
  --warning-border:#92400e;
  --warning-text:#fdba74;
  --warning-dot:#f59e0b;

  --focus-ring:0 0 0 3px rgba(56,189,248,.18);
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --shadow-soft:0 4px 14px rgba(0,0,0,.25);
  --shadow-mid:0 8px 18px rgba(0,0,0,.30);

  --track:#1f2937;
  --track-border:#334155;
  --stroke-soft:#243041;
}

body.theme-sand{
  --bg1:#fffaf0;
  --bg2:#f5e9d7;
  --card:#fffdf8;
  --card-soft:#faf4ea;
  --card-soft-2:#f4eadb;
  --stroke:#e7d7bf;
  --stroke-strong:#d6c2a3;
  --text:#3b2f2f;
  --heading:#2f241f;
  --muted:#7c6a58;
  --placeholder:#a08d78;

  --primary:#b7791f;
  --primary-soft:#fef3c7;
  --primary-soft-2:#fde68a;
  --primary-border:#fcd34d;
  --primary-border-strong:#f59e0b;
  --primary-text:#92400e;

  --success-soft:#f0fdf4;
  --success-soft-2:#dcfce7;
  --success-border:#bbf7d0;
  --success-border-strong:#86efac;
  --success-text:#166534;
  --success-dot:#22c55e;

  --danger-soft:#fff1f2;
  --danger-soft-2:#ffe4e6;
  --danger-border:#fecdd3;
  --danger-border-strong:#fda4af;
  --danger-text:#be123c;
  --danger-dot:#ef4444;

  --warning-soft:#fff7ed;
  --warning-border:#fdba74;
  --warning-text:#c2410c;
  --warning-dot:#f59e0b;

  --focus-ring:0 0 0 3px rgba(245,158,11,.15);
  --track:#f3eadc;
  --track-border:#e7d7bf;
}

body.theme-emerald{
  --bg1:#ecfdf5;
  --bg2:#d1fae5;
  --card:#ffffff;
  --card-soft:#f0fdf4;
  --card-soft-2:#dcfce7;
  --stroke:#bbf7d0;
  --stroke-strong:#86efac;
  --text:#064e3b;
  --heading:#065f46;
  --muted:#047857;
  --placeholder:#6ee7b7;

  --primary:#10b981;
  --primary-soft:#d1fae5;
  --primary-soft-2:#a7f3d0;
  --primary-border:#86efac;
  --primary-border-strong:#34d399;
  --primary-text:#065f46;

  --success-soft:#ecfdf5;
  --success-soft-2:#d1fae5;
  --success-border:#a7f3d0;
  --success-border-strong:#6ee7b7;
  --success-text:#047857;
  --success-dot:#22c55e;

  --danger-soft:#fef2f2;
  --danger-soft-2:#fee2e2;
  --danger-border:#fecaca;
  --danger-border-strong:#fca5a5;
  --danger-text:#b91c1c;
  --danger-dot:#ef4444;

  --warning-soft:#fffbeb;
  --warning-border:#fcd34d;
  --warning-text:#b45309;
  --warning-dot:#f59e0b;

  --focus-ring:0 0 0 3px rgba(16,185,129,.14);
  --track:#d1fae5;
  --track-border:#a7f3d0;
}

.mpH1{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.3px;
  color:var(--heading);
}

.mpHint{
  font-size:13px;
  color:var(--muted);
}

.colorLabelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 6px;
  font-size:12px;
  color:var(--muted);
}

.colorLabelRow span{
  flex:1;
  min-width:0;
}

.colorMini{
  width:42px !important;
  min-width:42px;
  height:32px;
  padding:2px !important;
  border-radius:10px !important;
  border:1px solid var(--stroke) !important;
  background:var(--card) !important;
  cursor:pointer;
}

.colorMini::-webkit-color-swatch-wrapper{
  padding:0;
}

.colorMini::-webkit-color-swatch{
  border:none;
  border-radius:8px;
}

.colorMini::-moz-color-swatch{
  border:none;
  border-radius:8px;
}

.colorPresets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px;
}

.colorDot{
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid #ffffff;
  background:var(--c);
  box-shadow:0 0 0 1px var(--stroke);
  cursor:pointer;
  padding:0;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.colorDot:hover{
  transform:scale(1.08);
}

.colorDot.is-active{
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--primary);
}

.colorPickerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.colorPickerRow .mpSmall{
  margin:0;
}