:root{
  --mh-bg:#0f172a;
  --mh-card:#121a2f;
  --mh-sec:#1a2442;
  --mh-sec-hover:#202c50;
  --mh-border:#2a3a63;
  --mh-chip:#17233f;
  --mh-chip-on:#243b6b;
  --mh-text:#e5e7eb;
  --mh-muted:#cbd5e1;
  --mh-primary:#6366f1;
  --mh-primary-2:#3b82f6;
  --mh-focus: rgba(99,102,241,.35);
}

.mh-int-card{background:var(--mh-card);color:var(--mh-text);border:1px solid var(--mh-border);border-radius:16px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.mh-int-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mh-int-header h3{margin:0;font-size:20px;font-weight:800}

.mh-int-section{border-radius:12px;background:var(--mh-sec);margin-bottom:10px;border:1px solid var(--mh-border);overflow:hidden}
.mh-int-section__head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.mh-int-section__head:hover{background:var(--mh-sec-hover)}
.mh-int-parent{display:flex;align-items:center;gap:10px}
.mh-int-section__head input[type=checkbox]{transform:scale(1.2)}
.mh-int-section__title{font-weight:700;cursor:pointer}
.mh-int-arrow{margin-left:auto;transition:transform .2s ease;opacity:.8}
.mh-int-section.is-open .mh-int-arrow{transform:rotate(180deg)}
.mh-int-body{display:none;padding:12px}
.mh-int-section.is-open .mh-int-body{display:block}

.mh-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mh-chip{display:flex;align-items:center;gap:8px;background:var(--mh-chip);border:1px solid var(--mh-border);border-radius:10px;padding:10px 12px}
.mh-chip input{transform:scale(1.15)}
.mh-chip.is-checked{background:var(--mh-chip-on);border-color:var(--mh-primary)}
@media (max-width:800px){ .mh-chips{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .mh-chips{grid-template-columns:1fr;} }

.mh-int-section:focus-within{outline:2px solid var(--mh-focus);outline-offset:2px}

/* --- Sticky footer with Save button --- */
.mh-int-footer{
  position: sticky;
  bottom: -1px; /* avoids small gap on some browsers */
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
  padding:12px 16px;
  margin-top:12px;
  border-top:1px solid var(--mh-border);
  background:
    linear-gradient(to top, rgba(18,26,47,1), rgba(18,26,47,.92) 60%, rgba(18,26,47,0));
  backdrop-filter: blur(2px);
}
.mh-int-msg{margin-right:auto;font-size:14px;color:var(--mh-muted)}
.mh-int-msg.ok{color:#86efac}
.mh-int-msg.err{color:#fecaca}

.mh-int-save{
  background:linear-gradient(135deg,var(--mh-primary),var(--mh-primary-2));
  border:0;color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;
  box-shadow:0 6px 18px rgba(59,130,246,.25); cursor:pointer;
}

/* --- Toast (bottom-right) --- */
.mh-toast{
  position:fixed; right:16px; bottom:16px;
  background:#0b1224; color:#e5e7eb;
  border:1px solid #24324f; border-radius:12px;
  padding:10px 14px; box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
  z-index:9999;
}
.mh-toast.show{ opacity:1; transform:translateY(0); }
