:root{--mtg-primary:var(--mtg-primary);--mtg-secondary:var(--mtg-secondary);}
.mtg-hub-overlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  padding:18px;
}
.mtg-hub-modal{
  width:min(900px, 96vw);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.mtg-hub-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
}
.mtg-hub-list{ display:grid; gap:12px; }
.mtg-hub-card{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:12px;
}
.mtg-hub-card-header{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.mtg-hub-badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
}
.mtg-hub-subject{ font-weight:700; flex: 1 1 auto; }
.mtg-hub-date{ font-size:12px; opacity:.7; }
.mtg-hub-actions{ margin-top:10px; display:flex; gap:10px; }
.mtg-hub-btn{
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

/* Shortcode trigger button */
.mtg-hub-acknowledged-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.mtg-hub-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.mtg-hub-btn-primary{
  border-color:transparent;
  background:#111;
  color:#fff;
}
.mtg-hub-content{
  margin-top:12px;
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:12px;
}
.mtg-hub-content img{ max-width:100%; height:auto; }

.mtg-hub-content-scroll{
  max-height: 46vh;
  overflow: auto;
  padding-right: 6px;
}

/* Gate notice */
.mtg-hub-gate{
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: 13px;
}

/* Pastel tags by notification type */
.mtg-hub-badge{
  border: 1px solid rgba(0,0,0,.08);
}

/* Urgent Notice */
.mtg-type-urgent-notice{ background: rgba(255, 99, 132, .18); }
/* Compliance Notice */
.mtg-type-compliance-notice{ background: rgba(255, 205, 86, .22); }
/* Supplier Update */
.mtg-type-supplier-update{ background: rgba(54, 162, 235, .18); }
/* Supplier STOP SELL */
.mtg-type-supplier-stop-sell{ background: rgba(255, 159, 64, .22); border-color: rgba(255,159,64,.35); }
/* Accounts Notice */
.mtg-type-accounts-notice{ background: rgba(153, 102, 255, .18); }
/* General Information */
.mtg-type-general-information{ background: rgba(75, 192, 192, .18); }
/* Operational Notice */
.mtg-type-operational-notice{ background: rgba(201, 203, 207, .30); }


/* ===============================
   Settings-driven colors (frontend)
   =============================== */
.mtg-hub-modal .mtg-hub-btn,
.mtg-hub-modal button,
.mtg-hub-modal .button{
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid var(--mtg-primary);
  color: var(--mtg-primary);
  background: transparent;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.mtg-hub-modal .mtg-hub-btn:hover,
.mtg-hub-modal button:hover,
.mtg-hub-modal .button:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
}
.mtg-hub-modal .mtg-hub-btn-primary,
.mtg-hub-modal .mtg-hub-ack-btn{
  background: var(--mtg-secondary);
  border-color: var(--mtg-secondary);
  color: #fff;
}
.mtg-hub-modal .mtg-hub-btn-primary:hover,
.mtg-hub-modal .mtg-hub-ack-btn:hover{
  filter: brightness(.90);
}
.mtg-hub-modal .mtg-hub-type-badge{
  border-color: var(--mtg-primary);
}
.mtg-hub-modal .mtg-hub-modal-title{
  color: var(--mtg-primary);
}


/* Rich content typography */
.mtg-hub-modal .mtg-hub-content-scroll{
  line-height: 1.7;
  font-size: 15px;
}
.mtg-hub-modal .mtg-hub-content-scroll p{ margin: 0 0 14px; }
.mtg-hub-modal .mtg-hub-content-scroll h1,
.mtg-hub-modal .mtg-hub-content-scroll h2,
.mtg-hub-modal .mtg-hub-content-scroll h3{
  margin: 16px 0 10px;
  line-height: 1.25;
}
.mtg-hub-modal .mtg-hub-content-scroll ul,
.mtg-hub-modal .mtg-hub-content-scroll ol{ margin: 0 0 14px 22px; }
.mtg-hub-modal .mtg-hub-content-scroll li{ margin: 0 0 6px; }
.mtg-hub-modal .mtg-hub-content-scroll img{ max-width:100%; height:auto; border-radius: 10px; }
.mtg-hub-modal .mtg-hub-content-scroll iframe{ max-width:100%; }
.mtg-hub-modal .mtg-hub-content-scroll strong{ font-weight: 700; }
.mtg-hub-modal .mtg-hub-content-scroll em{ font-style: italic; }


/* STOP SELL enforced read UX */
.mtg-hub-modal .mtg-hub-gate{
  border-radius: 12px;
}
.mtg-hub-modal .mtg-hub-gate-msg{
  margin-bottom: 8px;
}
.mtg-hub-modal .mtg-hub-gate-countdown{
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--mtg-primary);
}
.mtg-hub-modal .mtg-hub-gate-progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
.mtg-hub-modal .mtg-hub-gate-progress-bar{
  height: 100%;
  width: 0%;
  background: var(--mtg-secondary);
  border-radius: 999px;
  transition: width .12s linear;
}


/* Modal header row + counter */
.mtg-hub-header-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.mtg-hub-awaiting{
  font-size: 13px;
  font-weight: 700;
  color: var(--mtg-primary);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Card header layout */
.mtg-hub-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.mtg-hub-meta{ flex:1; min-width: 0; }
.mtg-hub-meta-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.mtg-hub-subject{
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:8px;
}
.mtg-hub-date{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Actions stay on same row */
.mtg-hub-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 0;
}

/* Pager */
.mtg-hub-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top: 14px;
}
.mtg-hub-page-label{
  font-weight: 700;
  font-size: 13px;
  color: rgba(0,0,0,.65);
}
.mtg-hub-btn-pager{
  padding: 10px 12px;
}

/* Shortcode: acknowledged modal search */
.mtg-hub-search-row{
  margin-top:10px;
}

.mtg-hub-search-input{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  font-size:14px;
  outline:none;
}

.mtg-hub-search-input:focus{
  border-color: rgba(79,70,229,.45);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}


/* Modern pagination for acknowledged shortcode modal */
.mtg-hub-pages{
  display:flex;
  align-items:center;
  gap:8px;
}
.mtg-hub-btn-pager.is-active{
  font-weight:700;
  border:2px solid rgba(0,0,0,.18);
}
.mtg-hub-dots{
  padding:0 4px;
  opacity:.7;
}

/* Document form shortcode */
.mtg-hub-doc-form-wrap{margin-top:16px;padding:16px;border:1px solid rgba(79,70,229,.14);background:#f8fafc;border-radius:16px;}
.mtg-hub-doc-form-header{margin-bottom:14px;}
.mtg-hub-doc-form-title{font-size:18px;font-weight:700;color:#111827;margin-bottom:4px;}
.mtg-hub-doc-form-copy{font-size:13px;line-height:1.5;color:#475569;}
.mtg-hub-doc-form{display:grid;gap:12px;}
.mtg-hub-doc-form-field label{display:block;font-weight:600;color:#111827;margin-bottom:6px;}
.mtg-hub-doc-form-field input,
.mtg-hub-doc-form-field textarea{width:100%;max-width:100%;border:1px solid rgba(148,163,184,.55);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.4;background:#fff;box-sizing:border-box;}
.mtg-hub-doc-form-field textarea{min-height:110px;resize:vertical;}
.mtg-hub-doc-form-date-locked{background:#f1f5f9 !important;color:#334155;cursor:not-allowed;}
.mtg-hub-doc-form-help{margin-top:5px;font-size:12px;color:#64748b;}
.mtg-hub-doc-required{color:#dc2626;}
.mtg-hub-doc-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.mtg-hub-doc-form-status{font-size:13px;color:#475569;}
.mtg-hub-doc-form-status.is-working{color:#1d4ed8;}
.mtg-hub-doc-form-status.is-success{color:#166534;}
.mtg-hub-doc-form-status.is-error{color:#b91c1c;}
.mtg-hub-doc-form.is-submitted{opacity:.92;}
.mtg-hub-doc-form-error{margin-top:16px;padding:12px 14px;border-radius:12px;background:#fef2f2;color:#991b1b;border:1px solid rgba(239,68,68,.18);}
.mtg-hub-doc-form-config{display:none!important;}
.mtg-hub-signature-wrap{border:1px solid rgba(148,163,184,.55);border-radius:12px;background:#fff;padding:10px}
.mtg-hub-signature-canvas{width:100%;height:180px;display:block;background:#fff;border:1px dashed rgba(148,163,184,.7);border-radius:10px;touch-action:none}
.mtg-hub-signature-actions{margin-top:8px;display:flex;justify-content:flex-end}

.mtg-hub-btn-secondary{background:#fff;color:var(--mtg-primary)}
.mtg-hub-doc-form-field.is-hidden-by-logic{display:none}
.mtg-hub-doc-preview-modal{position:fixed;inset:0;background:rgba(15,23,42,.68);display:none;align-items:center;justify-content:center;z-index:999999;padding:24px}
.mtg-hub-doc-preview-modal.is-open{display:flex}
.mtg-hub-doc-preview-inner{width:min(960px,96vw);height:min(88vh,860px);background:#fff;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px}
.mtg-hub-doc-preview-header,.mtg-hub-doc-preview-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mtg-hub-doc-preview-frame{flex:1 1 auto;width:100%;border:1px solid rgba(148,163,184,.45);border-radius:12px;background:#fff}