:root{
  --brand: #0EA5E9;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e5e7eb;
}

.mmx-app{box-sizing:border-box}
.mmx-app *,.mmx-app *::before,.mmx-app *::after{box-sizing:inherit;border-radius:0 !important}
.mmx-app .wrap{max-width: none; margin: 12px auto; padding: 0 12px; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; color: var(--ink);}
.mmx-app .title{font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 10px}

.mmx-app .tabs{display:flex;gap:8px;align-items:center;margin:8px 0 16px;flex-wrap:wrap}
.mmx-app .tabs .tab.site{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.mmx-app .tabs .tab.site.active{outline:2px solid var(--brand)}
.mmx-app .tabs .tab.site .x{background:transparent;border:1px solid var(--line);cursor:pointer}

.mmx-app .btn{background:var(--brand);border:1px solid var(--brand);color:#fff;padding:10px 12px;cursor:pointer}
.mmx-app .btn.light{background:#f8fafc;color:#111;border:1px solid var(--line)}
.mmx-app .grid{display:grid;grid-template-columns: 480px 1fr; gap: 16px}
@media (max-width: 1100px){ .mmx-app .grid{grid-template-columns:1fr}}

.mmx-app .card{background:#fff;border:1px solid var(--line)}
.mmx-app .card .hd{padding:12px 14px;border-bottom:1px solid var(--line);font-weight:800;background:#f8fafc;display:flex;align-items:center;gap:8px}
.mmx-app .card .bd{padding:12px}

.mmx-app details summary{cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:700}
.mmx-app details .caret{color:#64748b}

.mmx-app .row1{display:grid;grid-template-columns:1fr;gap:10px}
.mmx-app .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){ .mmx-app .row2{grid-template-columns:1fr}}

.mmx-app .lbl{display:block;margin:6px 0 4px;color:#475569;font-weight:600}
.mmx-app input,.mmx-app select,.mmx-app textarea{width:100%;padding:10px 11px;border:1px solid var(--line);background:#fff;color:#111;font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
.mmx-app textarea{min-height:70px;resize:vertical}

.mmx-app .multi{position:relative}
.mmx-app .multi .menu{position:absolute;z-index:20;display:none;left:0;top:100%;min-width:260px;background:#fff;border:1px solid var(--line);padding:8px}
.mmx-app .multi.open .menu{display:block}
.mmx-app .multi .menu label{display:flex;gap:8px;align-items:center;padding:6px 4px}

.mmx-app .warn{display:none;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:8px 10px;margin:6px 0;font-weight:700}

.mmx-app .list .chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 10px;margin-bottom:8px;background:#fff}
.mmx-app .list .chip .actions{display:flex;gap:6px}

.mmx-app .drawer{display:none;border:1px solid var(--line);margin-top:10px}
.mmx-app .drawer.show{display:block}
.mmx-app .drawer .hd{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:800;background:#f8fafc}
.mmx-app .drawer .bd{padding:12px}
.mmx-app .drawer .ft{padding:10px 12px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

.mmx-app .viewport{width:100%;height:70vh;min-height:600px;border:1px solid var(--line);background:#fff}
.mmx-app svg{width:100%;height:100%;display:block}