.mps{--mps-blue:#0b61fd;--mps-ink:#14213d;--mps-muted:#5b6475;--mps-line:#dbe3f0;--mps-soft:#f1f6ff;box-sizing:border-box;margin:1.5rem 0;color:var(--mps-ink)}
.mps *{box-sizing:border-box}
.mps-form{background:#fff;border:1px solid var(--mps-line);border-radius:14px;padding:20px;box-shadow:0 4px 18px rgba(20,33,61,.07)}
.mps-head{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.mps-head span{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--mps-blue)}
.mps-head small{color:var(--mps-muted)}
.mps-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mps-wide{grid-column:1/-1}
.mps label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}
.mps label span{font-weight:400;color:var(--mps-muted);font-size:.8rem}
.mps input,.mps select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #c4cfe2;border-radius:8px;font-size:1rem;background:#fff;color:var(--mps-ink)}
.mps input:focus,.mps select:focus,.mps summary:focus-visible,.mps button:focus-visible{outline:3px solid rgba(11,97,253,.35);outline-offset:1px}
.mps-presets{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mps-presets>span{font-size:.9rem;font-weight:600}
.mps-presets div{display:flex;gap:8px}
.mps-presets button{min-height:38px;padding:6px 16px;border:1px solid var(--mps-blue);border-radius:999px;background:#fff;color:var(--mps-blue);font-weight:600;cursor:pointer}
.mps-presets button[aria-pressed=true]{background:var(--mps-blue);color:#fff}
.mps-optional summary{cursor:pointer;font-weight:600;padding:8px 0}
.mps-optional summary span{margin-left:8px;font-weight:400;color:var(--mps-muted);font-size:.8rem}
.mps-optional-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:6px}
.mps-live{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0;padding:14px;background:var(--mps-soft);border-radius:10px}
.mps-live p{margin:0;font-size:.8rem;color:var(--mps-muted)}
.mps-live strong{display:block;margin-top:2px;font-size:1.05rem;color:var(--mps-ink)}
.mps-primary{display:block;width:100%;min-height:50px;padding:12px 18px;border:0;border-radius:8px;background:var(--mps-blue);color:#fff;font-size:1rem;font-weight:700;cursor:pointer}
.mps-primary:hover{background:#0a52d6}
.mps-micro{margin:12px 0 0;font-size:.8rem;color:var(--mps-muted)}
.mps-example{padding:10px 14px;background:#fff8e1;border-left:4px solid #f0b429;border-radius:6px;font-size:.9rem}
.mps-summary{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:center;padding:20px;border-radius:14px;background:var(--mps-soft);border:1px solid var(--mps-line)}
.mps-summary>div small{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--mps-blue)}
.mps-summary>div strong{display:block;font-size:2rem;line-height:1.15;margin:4px 0}
.mps-summary>div span{font-size:.85rem;color:var(--mps-muted)}
.mps-summary dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.mps-summary dt{font-size:.8rem;color:var(--mps-muted)}
.mps-summary dd{margin:0;font-weight:700}
.mps-warning{margin:16px 0 8px;padding:12px 14px;background:#fff8e1;border-left:4px solid #f0b429;border-radius:6px;font-size:.9rem}
.mps-edit{font-weight:700}
.mps-h{margin:1.4rem 0 .8rem;font-size:1.3rem}
.mps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mps-grid article{padding:14px;border:1px solid var(--mps-line);border-radius:10px;background:#fff}
.mps-grid article.is-current{border-color:var(--mps-blue);box-shadow:0 0 0 2px rgba(11,97,253,.15)}
.mps-grid small{display:block;font-weight:700;color:var(--mps-muted)}
.mps-grid strong{display:block;font-size:1.2rem;margin:4px 0}
.mps-grid span{display:block;font-size:.85rem;color:var(--mps-muted)}
.mps-grid em{display:block;margin-top:6px;font-size:.75rem;font-style:normal;color:var(--mps-blue)}
.mps-loading{padding:24px;text-align:center;color:var(--mps-muted)}
@media(max-width:640px){
  .mps-fields,.mps-optional-fields,.mps-summary{grid-template-columns:1fr}
  .mps-live{grid-template-columns:1fr}
  .mps-grid{grid-template-columns:1fr 1fr}
  .mps-summary>div strong{font-size:1.7rem}
  .mps-form{padding:16px}
}