:root {

  --mt-primary: #1e4d8c;

  --mt-primary-dark: #163a6b;

  --mt-accent: #e67e22;

  --mt-bg: #f5f7fa;

  --mt-card: #fff;

  --mt-border: #d8e0ea;

  --mt-text: #1a2332;

  --mt-muted: #5c6b7a;

  /* legacy aliases */

  --gp-green: var(--mt-primary);

  --gp-green-light: var(--mt-primary);

  --gp-bg: var(--mt-bg);

  --gp-card: var(--mt-card);

  --gp-border: var(--mt-border);

  --gp-text: var(--mt-text);

  --gp-muted: var(--mt-muted);

}



* { box-sizing: border-box; }



body {

  margin: 0;

  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;

  background: var(--mt-bg);

  color: var(--mt-text);

  line-height: 1.5;

}



.gp-wrap {

  max-width: 720px;

  margin: 0 auto;

  padding: 24px 16px 48px;

}



.gp-header {

  text-align: center;

  margin-bottom: 24px;

}



.mt-brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 8px;

}



.mt-logo {

  width: 40px;

  height: 40px;

  border-radius: 10px;

  background: linear-gradient(135deg, var(--mt-primary) 0%, var(--mt-primary-dark) 100%);

  color: #fff;

  font-weight: 800;

  font-size: 1.1rem;

  line-height: 40px;

  text-align: center;

  letter-spacing: -0.02em;

}



.mt-wordmark {

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--mt-primary-dark);

  letter-spacing: -0.03em;

}



.mt-wordmark span { color: var(--mt-accent); }

.mt-brand-link { text-decoration: none; }
.mt-brand-link:hover .mt-wordmark { color: var(--mt-primary); }



.gp-header h1 {

  margin: 0 0 8px;

  font-size: 1.75rem;

  color: var(--mt-primary-dark);

}



.gp-card {

  background: var(--mt-card);

  border: 1px solid var(--mt-border);

  border-radius: 12px;

  padding: 24px;

  margin-bottom: 16px;

  box-shadow: 0 2px 12px rgba(30, 77, 140, 0.06);

}



.gp-card h2 {

  margin-top: 0;

  font-size: 1.15rem;

  color: var(--mt-primary-dark);

}



label {

  display: block;

  font-weight: 600;

  margin: 12px 0 4px;

}



input[type=text], input[type=email], input[type=password] {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid var(--mt-border);

  border-radius: 8px;

  font-size: 1rem;

}



.gp-btn {

  display: inline-block;

  margin-top: 16px;

  padding: 12px 20px;

  border: none;

  border-radius: 8px;

  background: var(--mt-primary);

  color: #fff;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;

}



.gp-btn:hover { background: var(--mt-primary-dark); }

.gp-btn:disabled,
.gp-btn[disabled] { opacity: .45; cursor: not-allowed; }

.gp-btn:disabled:hover,
.gp-btn[disabled]:hover { background: var(--mt-primary); }

.gp-btn-secondary { background: #546e7a; }

.gp-btn-block { display: block; width: 100%; text-align: center; }



.gp-status-ok { color: #2e7d32; font-weight: 600; }

.gp-status-warn { color: #ef6c00; font-weight: 600; }

.gp-status-bad { color: #c62828; font-weight: 600; }



.gp-help { color: var(--mt-muted); font-size: .95rem; }

.gp-error { color: #c62828; margin-top: 8px; }

.gp-hidden { display: none !important; }



#qrCanvas { display: block; margin: 16px auto; }



.gp-msg-list { list-style: none; padding: 0; margin: 0; }

.gp-msg-list li {

  border-bottom: 1px solid var(--mt-border);

  padding: 12px 0;

}

.gp-msg-list .from { font-weight: 600; }

.gp-msg-list .when { color: var(--mt-muted); font-size: .85rem; }



.mt-footer {

  text-align: center;

  margin-top: 24px;

  font-size: .9rem;

  color: var(--mt-muted);

}


/* ============================================================
   Server-blind triage app (app.html) ? Phase 3/4 additions
   ============================================================ */
.gp-wrap-wide { max-width: 760px; }
.mt-privacy-banner {
  background: #eef7ee; border: 1px solid #bcdcbc; color: #1f5130;
  border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 8px;
}
.mt-privacy-banner .mt-sub { color: var(--mt-muted); }
.mt-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gp-status { margin-top: 12px; padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.gp-status-ok { background: #eef7ee; border: 1px solid #bcdcbc; color: #1f5130; }
.gp-status-bad { background: #fdecea; border: 1px solid #f5b7b1; color: #8c2c22; }
.mt-results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mt-results-tools { display: flex; align-items: center; gap: 12px; }
/* Base look for every small triage button — see the unified button system
   further down for hover/active/done states. Overrides .gp-btn / -secondary. */
.mt-mini-btn {
  margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 600; line-height: 1.2;
  border-radius: 8px; border: 1px solid #d0d5dd; background: #fff; color: #344054;
  box-shadow: 0 1px 2px rgba(16,24,40,.04); cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .04s ease;
}
.mt-mini-btn:hover {
  background: #f8fafc; border-color: #98a2b3; color: #101828;
  box-shadow: 0 2px 6px rgba(16,24,40,.08);
}
.mt-mini-btn:active { transform: translateY(1px); }
.mt-mini-btn:disabled, .mt-mini-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.mt-result { border: 1px solid var(--mt-border); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #fff; }
.mt-result-done { opacity: .6; background: #f6f7f8; }
.mt-result-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.mt-done-btn { margin-top: 0; padding: 4px 12px; font-size: 12px; margin-left: 8px; }
.mt-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; letter-spacing: .04em; }
.mt-urgency-critical { background: #b3261e; }
.mt-urgency-high { background: #d9534f; }
.mt-urgency-medium { background: #e0922f; }
.mt-urgency-low { background: #5b8a72; }
.mt-urgency-ignore { background: #8a93a0; }
.mt-urgency-error { background: #555; }
.mt-cat { font-size: 11px; text-transform: uppercase; color: var(--mt-muted); border: 1px solid var(--mt-border); padding: 1px 6px; border-radius: 4px; }
.mt-from { font-size: 12px; color: var(--mt-muted); margin-left: auto; }
.mt-num { font-size: 12px; font-weight: 700; color: var(--mt-muted); min-width: 28px; }
.mt-priority-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.mt-summary-total { font-size: 13px; font-weight: 700; color: var(--mt-muted); }
.mt-summary-chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; letter-spacing: .04em; text-transform: capitalize; }
.mt-subject { font-weight: 600; margin: 2px 0; }
.mt-summary { font-size: 14px; margin: 4px 0; }
.mt-action { font-size: 14px; color: var(--mt-primary-dark); margin: 2px 0; }
.mt-deadline { font-size: 13px; color: #8c2c22; }
.mt-reason { font-size: 12px; color: var(--mt-muted); }
.mt-meta { font-size: 11px; color: var(--mt-muted); margin-top: 4px; }
.mt-error { font-size: 13px; color: #8c2c22; }
.mt-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mt-border); }
textarea { width: 100%; box-sizing: border-box; font-family: inherit; padding: 8px; border: 1px solid var(--mt-border); border-radius: 6px; }

/* Two-factor UI (Phase 6) */
.mt-secret { font-size: 16px; letter-spacing: 1px; background: #f0f3f7; padding: 2px 6px; border-radius: 4px; }
.mt-recovery { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mt-recovery li { font-family: ui-monospace, Consolas, monospace; background: #f0f3f7; border: 1px solid var(--mt-border); border-radius: 4px; padding: 6px 8px; letter-spacing: 1px; }

/* Consent / disclosure (Phase 8) */
#consentCard { border-left: 4px solid var(--mt-accent); }
.mt-consent-list { margin: 8px 0; padding-left: 18px; }
.mt-consent-list li { margin: 4px 0; }

/* Server-triage dashboard (Phase 4) */
.mt-connect-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mt-connect-row input { flex: 1 1 220px; padding: 8px; border: 1px solid var(--mt-border); border-radius: 6px; }
.mt-connect-row .gp-btn { margin-top: 0; white-space: nowrap; }
.mt-scan-opts { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; font-size: 14px; color: var(--mt-muted); }
.mt-scan-opts select { padding: 6px 8px; border: 1px solid var(--mt-border); border-radius: 6px; background: #fff; }

/* Priority template picker */
.mt-prefs-select-row { margin: 2px 0 10px; }
.mt-prefs-select {
  width: 100%; max-width: 460px; cursor: pointer; color: var(--mt-text);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.mt-prefs-select:focus { outline: none; border-color: var(--mt-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

/* Exclusions + ranked-priority inputs in the priorities step */
.mt-prefs-sublabel { display: block; margin: 18px 0 2px; font-weight: 700; font-size: 14px; color: var(--mt-primary-dark); }
.mt-prefs-help { margin: 0 0 8px; }
.mt-prefs-count { display: block; margin-top: 4px; }
.mt-rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mt-rank-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; background: #1f3a5f; color: #fff;
  font-size: 13px; font-weight: 800;
}
.mt-rank-input { flex: 1 1 auto; }

/* Inbox volume preview — two-click window buttons */
.mt-inbox-counts { margin-top: 14px; padding: 12px; border: 1px solid var(--mt-border); border-radius: 8px; background: #fbfdff; }
.mt-counts-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mt-counts-title { font-weight: 700; font-size: 14px; color: var(--mt-primary-dark); }
.mt-inbox-counts #inboxCountsStatus { font-weight: 600; color: #2c6e49; }
.mt-counts-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-count-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 150px; padding: 10px 14px; border: 1px solid var(--mt-border); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.mt-count-chip:hover { border-color: #2c6e49; box-shadow: 0 1px 4px rgba(44, 110, 73, .15); }
.mt-count-chip:active { transform: translateY(1px); }
.mt-count-label { font-size: 14px; font-weight: 600; color: var(--mt-primary-dark); line-height: 1.2; }
.mt-count-sub { font-size: 12px; color: var(--mt-muted); }
.mt-count-sub.mt-count-err { color: #8c2c22; }
.mt-count-chip.mt-count-loading { cursor: default; }
.mt-count-chip.mt-count-loading:hover { border-color: var(--mt-border); box-shadow: none; }
.mt-progress-err { color: #8c2c22; }
.mt-progress { margin-top: 14px; border: 1px solid var(--mt-border); border-radius: 8px; padding: 12px; background: #fbfdff; }
.mt-progress-head { display: flex; align-items: center; gap: 8px; }
.mt-spinner { width: 16px; height: 16px; flex: none; border: 2px solid var(--mt-border); border-top-color: #2c6e49; border-radius: 50%; animation: mt-spin .8s linear infinite; }
@keyframes mt-spin { to { transform: rotate(360deg); } }
.mt-progress-bar { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.mt-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2c6e49, #3a8d5f); transition: width .3s ease; }
.mt-progress-log { font-size: 12px; }
.mt-progress-log summary { cursor: pointer; color: var(--mt-muted); }
.mt-progress-log ul { list-style: none; max-height: 170px; overflow: auto; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--mt-border); }
.mt-progress-log li { color: var(--mt-muted); margin: 0; padding: 3px 0; border-bottom: 1px dashed #eef2f7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mt-log-err { color: #8c2c22; }
.mt-log-ok { color: #2c6e49; font-weight: 600; }
.mt-btn-busy { opacity: .65; cursor: progress; }
.mt-card-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #1f3a5f; color: #fff; font-size: 12px; font-weight: 700; }
.mt-mailbox { border: 1px solid var(--mt-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.mt-mailbox-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-mailbox-email { font-weight: 600; }
.mt-mailbox-meta { margin: 4px 0; }
.mt-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: var(--mt-muted); }
.mt-status-connected { background: #e3f4ec; color: #2c6e49; }
.mt-status-needs_reauth, .mt-status-error, .mt-status-token_expired { background: #fdecea; color: #8c2c22; }
.mt-status-paused { background: #fef5e7; color: #8a5a14; }
.mt-reply { background: #e7eefc; color: #2a4d9b; }
.mt-deadline { background: #fdecea; color: #8c2c22; }
.mt-pill-secondary { background: #eef2f7; color: var(--mt-muted); }
.mt-source-pill { background: #eef4ff; color: #2a4d9b; text-transform: none; letter-spacing: 0; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-mailbox-locked { font-size: 12px; color: var(--mt-muted); padding: 0 4px; align-self: center; }

.mt-card { border: 1px solid var(--mt-border); border-left-width: 4px; border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #fff; transition: opacity .25s ease, transform .25s ease, max-height .3s ease, margin .3s ease, padding .3s ease; max-height: 4000px; overflow: hidden; }
.mt-card-done { opacity: .6; background: #f6f7f8; }
.mt-card-removing { opacity: 0; transform: translateX(16px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

/* Expandable card details */
.mt-card-details { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mt-border); }
.mt-detail-reason { margin-bottom: 10px; }
.mt-detail-reason strong { display: block; font-size: 13px; color: var(--mt-primary-dark); margin-bottom: 2px; }
.mt-detail-reason p { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.mt-detail-grid { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 13px; }
.mt-detail-k { color: var(--mt-muted); }
.mt-detail-v { color: var(--mt-text, inherit); word-break: break-word; }
.mt-detail-note { margin-top: 10px; font-style: italic; }
.mt-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.mt-card-sender { font-size: 13px; color: var(--mt-muted); }
.mt-card-subject { font-weight: 600; margin: 3px 0; }
.mt-card-summary { font-size: 14px; margin: 4px 0; }
.mt-card-action { font-size: 14px; color: var(--mt-primary-dark); margin: 3px 0; }
.mt-card-reply { margin: 4px 0; font-size: 13px; }
.mt-card-reply summary { cursor: pointer; color: var(--mt-accent); }
.mt-card-risks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mt-risk { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #fdecea; color: #8c2c22; }
/* Priority color coding — saturated ONLY on the small badge. Cards stay clean and
   white with a colored left edge and a very faint tint, so the list is elegant and
   readable instead of full blocks of harsh color. */
.mt-badge.mt-l-critical { background: #b42318; }
.mt-badge.mt-l-high { background: #c2410c; }
.mt-badge.mt-l-medium { background: #b45309; }
.mt-badge.mt-l-low { background: #15803d; }
.mt-badge.mt-l-info { background: #475569; }
.mt-badge.mt-l-spam { background: #6b7280; }

/* Priority is shown with matching wide vertical bars down both edges of the
   card, so urgency reads instantly while the text itself stays elegant and
   neutral. Colors mirror the priority badge. */
.mt-card.mt-l-critical { border-left-color: #b42318; border-right-color: #b42318; }
.mt-card.mt-l-high { border-left-color: #ea580c; border-right-color: #ea580c; }
.mt-card.mt-l-medium { border-left-color: #d97706; border-right-color: #d97706; }
.mt-card.mt-l-low { border-left-color: #16a34a; border-right-color: #16a34a; }
.mt-card.mt-l-info { border-left-color: #64748b; border-right-color: #64748b; }
.mt-card.mt-l-spam { border-left-color: #9ca3af; border-right-color: #9ca3af; }
.gp-status-err { background: #fdecea; border: 1px solid #f5b7b1; color: #8c2c22; }
.mt-trial-banner { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #eef5ff; border: 1px solid #cfe0fb; color: #2a4d9b; font-size: 14px; }
.mt-trial-banner.mt-trial-urgent { background: #fef5e7; border-color: #f5d79e; color: #8a5a14; font-weight: 600; }

/* Compact subscription / trial bar at top of the dashboard */
.mt-billing-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
  background: #eef5ff; border: 1px solid #cfe0fb;
}
.mt-billing-bar.mt-billing-urgent { background: #fef5e7; border-color: #f5d79e; }
.mt-billing-text { font-size: 14px; color: #2a4d9b; }
.mt-billing-bar.mt-billing-urgent .mt-billing-text { color: #8a5a14; font-weight: 600; }
.mt-billing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mt-billing-btn { margin-top: 0; padding: 8px 14px; font-size: 14px; }
.mt-billing-bar .gp-status { margin-top: 0; flex-basis: 100%; }

/* Empty / first-run states */
.mt-empty { text-align: center; padding: 32px 20px; border: 1px dashed var(--mt-border); border-radius: 12px; background: rgba(0,0,0,.015); }
.mt-empty-icon { font-size: 36px; line-height: 1; margin-bottom: 10px; }
.mt-empty-title { font-size: 17px; font-weight: 700; color: var(--mt-primary-dark); margin-bottom: 6px; }
.mt-empty-sub { font-size: 14px; color: var(--mt-muted); max-width: 460px; margin: 0 auto; line-height: 1.5; }

/* Admin metrics (Phase 6 UI) */
.mt-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mt-metric { border: 1px solid var(--mt-border); border-radius: 8px; padding: 12px; background: #fff; text-align: center; }
.mt-metric-val { font-size: 26px; font-weight: 700; color: var(--mt-primary-dark); }
.mt-metric-label { font-size: 12px; color: var(--mt-muted); margin-top: 2px; }
.mt-subhead { font-size: 14px; margin: 14px 0 6px; }
.mt-ip-list { list-style: none; padding: 0; margin: 0; }
.mt-ip-list li { padding: 4px 0; border-bottom: 1px solid var(--mt-border); }

/* ============================================================
   App chrome: top bar, profile menu, footer, user management
   ============================================================ */
.gp-wrap-wide { max-width: 1080px; }

.mt-appbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; text-align: left; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--mt-border);
}
.mt-appbar .mt-brand { margin-bottom: 0; }
.mt-userbox { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mt-admin-tag { margin-top: 0; }

/* Profile menu */
.mt-profile { position: relative; }
.mt-profile-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1px solid var(--mt-border); border-radius: 999px;
  padding: 5px 12px 5px 5px; font-size: 14px; color: var(--mt-text); font-weight: 600;
}
.mt-profile-btn:hover { border-color: var(--mt-primary); }
.mt-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-dark));
  color: #fff; font-size: 12px; font-weight: 700; line-height: 30px; text-align: center;
  background-size: cover; background-position: center;
}
.mt-avatar-img { background-color: #ccc; }
.mt-profile-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-caret { color: var(--mt-muted); font-size: 11px; }
.mt-profile-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 240px; background: #fff; border: 1px solid var(--mt-border);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(20,40,70,.16); padding: 8px;
}
.mt-profile-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--mt-border); margin-bottom: 6px; }
.mt-profile-dn { font-weight: 700; }
.mt-profile-em { font-size: 13px; color: var(--mt-muted); overflow: hidden; text-overflow: ellipsis; }
.mt-profile-id { font-size: 11px; color: var(--mt-muted); margin-top: 2px; }
.mt-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--mt-text);
  cursor: pointer; text-decoration: none;
}
.mt-menu-item:hover { background: #f1f5fb; }
.mt-menu-danger { color: #b3261e; }
.mt-menu-danger:hover { background: #fdecea; }

/* Rich footer */
.mt-footer { border-top: 1px solid var(--mt-border); margin-top: 32px; padding-top: 20px; text-align: left; }
.mt-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; }
.mt-footer-brand { font-weight: 700; color: var(--mt-primary-dark); letter-spacing: -0.02em; }
.mt-footer-brand span { color: var(--mt-accent); }
.mt-footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.mt-footer-links a { color: var(--mt-muted); text-decoration: none; font-size: 14px; }
.mt-footer-links a:hover { color: var(--mt-primary); text-decoration: underline; }
.mt-footer-copy { color: var(--mt-muted); font-size: 13px; width: 100%; }

/* User management table */
.mt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mt-search { width: auto; min-width: 220px; margin: 0; }
.gp-input { padding: 9px 12px; border: 1px solid var(--mt-border); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
.mt-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.mt-chip {
  border: 1px solid var(--mt-border); background: #fff; color: var(--mt-muted);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.mt-chip:hover { border-color: var(--mt-primary); }
.mt-chip-on { background: var(--mt-primary); color: #fff; border-color: var(--mt-primary); }

.mt-table-wrap { overflow-x: auto; }
.mt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mt-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mt-muted); padding: 8px 10px; border-bottom: 2px solid var(--mt-border); white-space: nowrap;
}
.mt-table td { padding: 10px; border-bottom: 1px solid var(--mt-border); vertical-align: middle; }
.mt-table tr:hover td { background: #f8fafd; }
.mt-table .mt-num { text-align: center; font-weight: 700; color: var(--mt-text); }
.mt-u-name { font-weight: 600; }
.mt-u-sub { font-size: 12px; color: var(--mt-muted); }
.mt-u-id { font-size: 11px; color: var(--mt-muted); margin-top: 2px; }
.mt-you { font-size: 10px; font-weight: 700; background: var(--mt-accent); color: #fff; padding: 1px 6px; border-radius: 999px; letter-spacing: .04em; }
.mt-mini { padding: 5px 8px; font-size: 13px; width: auto; min-width: 96px; }
.mt-row-actions { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; }
.gp-btn-mini { margin-top: 0; padding: 6px 12px; font-size: 13px; }
.mt-btn-danger { background: #b3261e; }
.mt-btn-danger:hover { background: #8c1d17; }

.mt-badge-green { background: #e3f4ec; color: #2c6e49; }
.mt-badge-amber { background: #fef5e7; color: #8a5a14; }
.mt-badge-red { background: #fdecea; color: #8c2c22; }
.mt-badge-grey { background: #eef2f7; color: var(--mt-muted); }
.mt-table .mt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: 0; text-transform: capitalize; }

.mt-footer-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mt-footer-actions .gp-btn { margin-top: 0; }

/* Account settings page */
.mt-page-title { font-size: 1.5rem; color: var(--mt-primary-dark); margin: 4px 0 16px; }
.mt-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mt-field { display: flex; flex-direction: column; }
.mt-field label { margin: 0 0 4px; }
.mt-field .gp-input { width: 100%; }
.gp-input:disabled { background: #f1f4f8; color: var(--mt-muted); }
.mt-form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.mt-form-actions .gp-btn { margin-top: 0; }
.mt-form-actions .gp-status { margin-top: 0; }
.mt-code { max-width: 220px; letter-spacing: 4px; font-size: 18px; font-family: ui-monospace, Consolas, monospace; }
.mt-danger-card { border-left: 4px solid #b3261e; }
.mt-toggle-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; }
.mt-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.mt-toggle input { width: 16px; height: 16px; }
.mt-health-overall { margin-bottom: 14px; font-size: 1.05rem; }
.mt-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mt-health-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0,0,0,.03); border-radius: 8px; }
.mt-admin-warn { padding: 12px 16px; margin: 0 0 16px; background: #fff4e5; border: 1px solid #f0c270; border-left: 4px solid #e08a00; border-radius: 8px; color: #6b4500; }
.mt-admin-warn a { color: #9a5b00; font-weight: 600; }
.mt-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,32,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 1000; overflow-y: auto; }
.mt-modal { background: #fff; border-radius: 12px; max-width: 720px; width: 100%; box-shadow: 0 12px 48px rgba(0,0,0,.3); }
.mt-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e3e8ee; }
.mt-modal-head h3 { margin: 0; }
.mt-modal-body { padding: 16px 20px; max-height: 70vh; overflow-y: auto; }
.mt-modal-body h4 { margin: 16px 0 6px; }
.mt-hist-list { list-style: none; margin: 0; padding: 0; }
.mt-hist-list li { padding: 6px 0; border-bottom: 1px solid #f0f3f7; font-size: .9rem; }

/* Admin sticky section nav */
.mt-admin-nav {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; margin: 0 0 16px; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px); border: 1px solid var(--mt-border);
  border-radius: 10px; box-shadow: 0 2px 10px rgba(30,77,140,.06);
}
.mt-admin-nav a {
  font-size: 12px; font-weight: 600; color: var(--mt-muted); text-decoration: none;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.mt-admin-nav a:hover { background: #eef3fb; color: var(--mt-primary); }
.gp-wrap-wide .gp-card { scroll-margin-top: 64px; }
#twoFaSetup, #twoFaOn, #recoveryCodes, #codeEntry { margin-top: 12px; }

/* ============================================================
   Marketing landing page (index.html)
   ============================================================ */
.mt-landing { background: #fff; }
.mt-landing main { display: block; }

.gp-btn-lg { padding: 14px 26px; font-size: 1.02rem; border-radius: 10px; }

/* Giant "can't-miss" call to action — drives visitors straight to triage.html */
.gp-btn-giant {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 20px 44px;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  border-radius: 14px;
  background: var(--mt-accent);
  border: none;
  color: #fff;
  box-shadow: 0 10px 28px rgba(230, 126, 34, .42);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  animation: gp-btn-giant-pulse 2.4s ease-in-out infinite;
}
.gp-btn-giant:hover {
  background: #d9701c;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 16px 38px rgba(230, 126, 34, .5);
  animation-play-state: paused;
}
.gp-btn-giant .gp-btn-giant-sub {
  font-size: .82rem;
  font-weight: 600;
  opacity: .92;
  letter-spacing: 0;
}
@keyframes gp-btn-giant-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(230, 126, 34, .42); }
  50% { box-shadow: 0 10px 36px rgba(230, 126, 34, .62); }
}
@media (prefers-reduced-motion: reduce) {
  .gp-btn-giant { animation: none; }
}
.gp-btn-mini { margin-top: 0; padding: 8px 16px; font-size: .9rem; }

/* Sticky nav */
.mt-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--mt-border);
}
.mt-nav-inner {
  max-width: 1140px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px;
}
.mt-nav .mt-brand { margin-bottom: 0; }
.mt-nav-links { display: flex; gap: 22px; margin-left: 18px; flex: 1; }
.mt-nav-links a { color: var(--mt-muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.mt-nav-links a:hover { color: var(--mt-primary); }
.mt-nav-cta { display: flex; gap: 10px; align-items: center; }

/* Shared section scaffolding */
.mt-section { max-width: 1140px; margin: 0 auto; padding: 84px 20px; }
.mt-section-alt { background: var(--mt-bg); max-width: none; }
.mt-section-alt > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.mt-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.mt-section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--mt-primary-dark); margin: 10px 0 12px; letter-spacing: -0.02em; }
.mt-section-head p { color: var(--mt-muted); font-size: 1.08rem; margin: 0; }
.mt-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .74rem; font-weight: 800; color: var(--mt-accent);
}
.mt-eyebrow-light { color: #ffd9b0; }

/* Hero */
.mt-hero { background: radial-gradient(1200px 480px at 80% -10%, #e9f0fb 0%, #fff 60%); overflow: hidden; }
.mt-hero-inner {
  max-width: 1140px; margin: 0 auto; padding: 72px 20px 84px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.mt-hero-copy h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--mt-primary-dark); margin: 14px 0 18px;
}
.mt-hero-copy h1 span { color: var(--mt-accent); }
.mt-lede { font-size: 1.16rem; color: var(--mt-text); max-width: 560px; margin: 0 0 26px; }
.mt-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mt-trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mt-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; color: var(--mt-muted); font-weight: 600; }
.mt-trust svg { width: 18px; height: 18px; fill: #2c7a4b; flex: none; }

/* Hero app mockup */
.mt-hero-art { display: flex; justify-content: center; }
.mt-mock {
  width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--mt-border);
  border-radius: 16px; box-shadow: 0 30px 70px rgba(30,77,140,.18); overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transform-origin: center;
}
.mt-mock-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #f1f5fa; border-bottom: 1px solid var(--mt-border); }
.mt-dot { width: 10px; height: 10px; border-radius: 50%; background: #cdd6e2; }
.mt-mock-title { margin-left: 10px; font-size: .82rem; font-weight: 700; color: var(--mt-muted); }
.mt-mock-body { padding: 16px; }
.mt-mock-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mt-mock-card { border: 1px solid var(--mt-border); border-left-width: 4px; border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; background: #fff; }
.mt-mock-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mt-mock-from { font-size: .78rem; color: var(--mt-muted); margin-left: auto; }
.mt-mock-subject { font-weight: 700; font-size: .94rem; margin: 2px 0; }
.mt-mock-sum { font-size: .85rem; color: var(--mt-muted); }

/* Value strip */
.mt-strip { background: var(--mt-primary-dark); color: #eaf1fb; }
.mt-strip-inner {
  max-width: 1140px; margin: 0 auto; padding: 26px 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; font-size: .98rem;
}
.mt-strip strong { color: #fff; }

/* Features */
.mt-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mt-feature {
  background: #fff; border: 1px solid var(--mt-border); border-radius: 14px; padding: 26px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.mt-feature:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(30,77,140,.10); }
.mt-feature-ic {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e9f0fb, #d6e4f7); margin-bottom: 14px;
}
.mt-feature-ic svg { width: 24px; height: 24px; fill: var(--mt-primary); }
.mt-feature h3 { margin: 0 0 8px; font-size: 1.12rem; color: var(--mt-primary-dark); }
.mt-feature p { margin: 0; color: var(--mt-muted); }

/* Steps */
.mt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mt-step { background: #fff; border: 1px solid var(--mt-border); border-radius: 14px; padding: 28px; text-align: center; }
.mt-step-num {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-dark));
  color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
}
.mt-step h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--mt-primary-dark); }
.mt-step p { margin: 0; color: var(--mt-muted); }

/* Privacy band */
.mt-privacy-band { background: linear-gradient(135deg, var(--mt-primary-dark) 0%, #0f2950 100%); color: #dce7f6; }
.mt-privacy-inner { max-width: 900px; margin: 0 auto; padding: 84px 20px; text-align: center; }
.mt-privacy-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; margin: 10px 0 14px; letter-spacing: -0.02em; }
.mt-privacy-inner > p { font-size: 1.1rem; max-width: 720px; margin: 0 auto 30px; }
.mt-privacy-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 32px; text-align: left; }
.mt-privacy-points h4 { margin: 0 0 6px; color: #fff; font-size: 1.02rem; }
.mt-privacy-points p { margin: 0; color: #b9c9e0; font-size: .94rem; }

/* Pricing */
.mt-pricing { display: flex; justify-content: center; }
.mt-price-card {
  position: relative; background: #fff; border: 1px solid var(--mt-border); border-radius: 18px;
  padding: 34px; width: 100%; max-width: 420px; box-shadow: 0 10px 36px rgba(30,77,140,.08); text-align: center;
}
.mt-price-feature { border-color: var(--mt-primary); box-shadow: 0 20px 50px rgba(30,77,140,.16); }
.mt-price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--mt-accent); color: #fff; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; padding: 5px 14px; border-radius: 999px;
}
.mt-price-card h3 { margin: 4px 0 6px; color: var(--mt-primary-dark); font-size: 1.2rem; }
.mt-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 8px 0 2px; }
.mt-price-amt { font-size: 3.2rem; font-weight: 800; color: var(--mt-primary-dark); letter-spacing: -0.03em; }
.mt-price-per { color: var(--mt-muted); font-weight: 600; }
.mt-price-trial { color: var(--mt-accent); font-weight: 700; margin: 0 0 18px; }
.mt-price-list { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; }
.mt-price-list li { padding: 9px 0 9px 30px; border-bottom: 1px solid var(--mt-border); position: relative; }
.mt-price-list li:before {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; background: #e3f4ec
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232c7a4b'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.mt-price-foot { margin: 12px 0 0; }

/* FAQ */
.mt-faq { max-width: 780px; margin: 0 auto; }
.mt-faq details {
  background: #fff; border: 1px solid var(--mt-border); border-radius: 12px;
  padding: 4px 18px; margin-bottom: 12px;
}
.mt-faq summary {
  cursor: pointer; font-weight: 700; color: var(--mt-primary-dark); padding: 14px 0;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.mt-faq summary::-webkit-details-marker { display: none; }
.mt-faq summary:after { content: "+"; font-size: 1.4rem; color: var(--mt-accent); font-weight: 400; }
.mt-faq details[open] summary:after { content: "\2212"; }
.mt-faq details p { margin: 0 0 16px; color: var(--mt-muted); }

/* Final CTA */
.mt-cta { background: var(--mt-bg); }
.mt-cta-inner { max-width: 720px; margin: 0 auto; padding: 80px 20px; text-align: center; }
.mt-cta-inner h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--mt-primary-dark); margin: 0 0 10px; letter-spacing: -0.02em; }
.mt-cta-inner p { color: var(--mt-muted); font-size: 1.1rem; margin: 0 0 26px; }

/* Landing footer spans full width */
.mt-landing .mt-footer { max-width: 1140px; margin: 0 auto; padding: 28px 20px; }

/* Responsive */
@media (max-width: 900px) {
  .mt-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .mt-hero-art { order: -1; }
  .mt-mock { transform: none; max-width: 380px; }
  .mt-feature-grid, .mt-steps, .mt-privacy-points, .mt-strip-inner { grid-template-columns: 1fr; }
  .mt-nav-links { display: none; }
}
@media (max-width: 560px) {
  .mt-section { padding: 56px 18px; }
  .mt-nav-inner { gap: 10px; }
  .mt-nav .mt-wordmark { font-size: 1.2rem; }
  .mt-hero-actions .gp-btn { width: 100%; text-align: center; }
}

/* Auth pages (login / signup) ? centered card on branded backdrop */
.mt-auth { background: radial-gradient(1000px 460px at 50% -10%, #e9f0fb 0%, var(--mt-bg) 60%); min-height: 100vh; }
.mt-auth .gp-wrap { max-width: 460px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 32px; padding-bottom: 32px; }
.mt-auth .gp-header { margin-bottom: 18px; }
.mt-auth .gp-card { box-shadow: 0 18px 50px rgba(30,77,140,.12); }
.mt-auth .mt-footer { border-top: none; margin-top: 18px; padding-top: 8px; }

/* Error pages (404 / 500) */
.mt-error-card { text-align: center; }
.mt-error-card h1 { font-size: 1.5rem; color: var(--mt-primary-dark); margin: 6px 0 8px; }
.mt-error-code { font-size: 4.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--mt-accent); }
.mt-error-card .mt-btn-row { justify-content: center; margin-top: 18px; }
.mt-error-card .gp-btn-block { max-width: 200px; }

/* ============================================================
   Limited Release Preview Mode
   ============================================================ */
body.mt-modal-open { overflow: hidden; }

/* "Private Preview" pill / badge */
.mt-preview-pill {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; vertical-align: middle;
  margin-right: 8px; background: linear-gradient(135deg, #1e4d8c, #2f72c9); color: #fff;
}
.mt-preview-badge {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--mt-primary);
  background: #eef3fb; border: 1px solid #d4e1f3; border-radius: 999px;
  padding: 5px 12px; text-decoration: none; line-height: 1; transition: background .15s, box-shadow .15s;
}
.mt-preview-badge:hover { background: #e2ecfb; box-shadow: 0 2px 8px rgba(30,77,140,.12); }
.mt-preview-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f72c9; box-shadow: 0 0 0 3px rgba(47,114,201,.18); }

.mt-preview-modal { max-width: 560px; }
.mt-preview-modal .mt-modal-head h3 { font-size: 1.12rem; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mt-preview-modal .mt-modal-body p { margin: 0 0 12px; color: var(--mt-ink, #1c2733); line-height: 1.55; }
.mt-preview-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mt-preview-actions .gp-btn { margin-top: 0; }
.mt-preview-ack { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: .9rem; line-height: 1.45; }
.mt-preview-ack input { margin-top: 3px; flex: 0 0 auto; }

.mt-preview-done { text-align: center; padding: 18px 8px; }
.mt-preview-done-icon {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px; display: flex;
  align-items: center; justify-content: center; font-size: 28px; font-weight: 800;
  background: #e3f4ec; color: #2c6e49;
}

/* Privacy-page redemption section */
.mt-redeem-card { border: 1px solid #d4e1f3; background: linear-gradient(180deg, #f7faff, #fff); }
.mt-redeem-card h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mt-redeem-form { margin-top: 14px; max-width: 460px; }
/* 6-digit preview code: six underline boxes, digits only */
.mt-code-digits { display: flex; justify-content: center; gap: 10px; margin: 4px 0 2px; }
.mt-code-digit {
  width: 44px; height: 56px; box-sizing: border-box; text-align: center;
  font-size: 1.7rem; font-weight: 800; color: #101828; caret-color: var(--mt-primary);
  border: 0; border-bottom: 3px solid var(--mt-border); background: transparent;
  border-radius: 0; padding: 0; transition: border-color .12s, box-shadow .12s;
}
.mt-code-digit:focus {
  outline: none; border-bottom-color: var(--mt-primary);
  box-shadow: 0 3px 0 -1px rgba(30,77,140,.25);
}
@media (max-width: 480px) {
  .mt-code-digits { gap: 7px; }
  .mt-code-digit { width: 38px; height: 50px; font-size: 1.5rem; }
}

.mt-code-input {
  font-size: 1.8rem; font-weight: 700; letter-spacing: .5rem; text-align: center;
  padding: 12px; width: 100%; box-sizing: border-box; border: 1px solid var(--mt-border);
  border-radius: 10px; font-variant-numeric: tabular-nums;
}
.mt-redeem-ack { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: .92rem; line-height: 1.45; }
.mt-redeem-ack input { margin-top: 3px; flex: 0 0 auto; }
.mt-redeem-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
  background: #e3f4ec; color: #1f5135; font-weight: 600; margin-top: 14px;
}
.mt-redeem-banner.mt-redeem-err { background: #fdecea; color: #8c2c22; }

/* ---- Limited Release Preview — homepage intro card ---- */
.mt-pv-card {
  position: relative; max-width: 540px; width: 100%; border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 24px 60px rgba(15,30,55,.35); margin: auto;
}
.mt-pv-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1;
  background: rgba(255,255,255,.18); color: #fff; transition: background .15s;
}
.mt-pv-close:hover { background: rgba(255,255,255,.32); }

.mt-pv-header {
  position: relative; height: 76px;
  background: linear-gradient(135deg, #1e4d8c 0%, #163a6b 100%);
}
.mt-pv-shield {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2f72c9, #1e4d8c); color: #fff;
  border: 4px solid #fff; box-shadow: 0 6px 16px rgba(30,77,140,.35);
}
.mt-pv-shield svg { width: 30px; height: 30px; }

.mt-pv-body { padding: 46px 30px 26px; text-align: center; }
.mt-pv-title { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--mt-primary-dark); letter-spacing: -.01em; }
.mt-pv-sub { margin: 8px 0 0; font-size: .98rem; color: var(--mt-text); }
.mt-pv-sub strong { color: var(--mt-accent); font-weight: 700; }
.mt-pv-lead { margin: 10px auto 0; max-width: 430px; font-size: .86rem; line-height: 1.5; color: var(--mt-muted); }

.mt-pv-rows { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 18px; text-align: left; }
.mt-pv-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--mt-border); border-radius: 12px; background: #f8fafd;
}
.mt-pv-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2f72c9, #1e4d8c); color: #fff;
}
.mt-pv-ico svg { width: 20px; height: 20px; }
.mt-pv-row-txt h4 { margin: 1px 0 3px; font-size: .92rem; font-weight: 700; color: var(--mt-primary-dark); line-height: 1.3; }
.mt-pv-row-txt p { margin: 0; font-size: .83rem; line-height: 1.45; color: var(--mt-muted); }

.mt-pv-compliance {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #1e4d8c 0%, #163a6b 100%); color: #eaf1fb;
  border-radius: 12px; padding: 12px 14px; font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.mt-pv-compliance-ico { display: inline-flex; color: #8fc0ff; }
.mt-pv-compliance-ico svg { width: 16px; height: 16px; }

.mt-pv-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.mt-pv-btn {
  margin: 0; padding: 11px 18px; border-radius: 10px; font-size: .92rem; font-weight: 700;
  cursor: pointer; border: 1px solid transparent; transition: background .15s, box-shadow .15s, color .15s;
}
.mt-pv-btn-primary { background: var(--mt-accent); color: #fff; box-shadow: 0 4px 12px rgba(230,126,34,.3); }
.mt-pv-btn-primary:hover { background: #cf6f1a; }
.mt-pv-btn-outline { background: #fff; color: var(--mt-primary-dark); border-color: var(--mt-border); }
.mt-pv-btn-outline:hover { border-color: var(--mt-primary); background: #f3f7fd; }
.mt-pv-btn-link {
  margin: 0; padding: 11px 10px; background: none; border: 0; cursor: pointer;
  font-size: .92rem; font-weight: 600; color: var(--mt-primary); text-decoration: underline;
}
.mt-pv-btn-link:hover { color: var(--mt-primary-dark); }
/* Render the button-styled anchor (Request access) identically to a button. */
a.mt-pv-btn { display: inline-block; text-decoration: none; text-align: center; }

/* Preview-code entry */
.mt-pv-codebox {
  margin: 18px auto 0; max-width: 360px; display: flex; flex-direction: column; gap: 10px;
  background: #f7f9fc; border: 1px solid var(--mt-border); border-radius: 14px; padding: 18px;
}
.mt-pv-codelabel { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mt-muted); text-align: left; }
.mt-pv-codeinput {
  text-align: center; font-size: 1.5rem; font-weight: 800; letter-spacing: .35rem;
  text-transform: uppercase; padding: 12px; border-radius: 10px;
}
.mt-pv-codebox .mt-pv-btn-primary { width: 100%; }
.mt-pv-msg { margin: 2px 0 0; font-size: .86rem; font-weight: 600; }
.mt-pv-msg-err { color: #b3261e; }
.mt-pv-msg-ok { color: #1a7f37; }
.mt-pv-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px auto 0; max-width: 360px;
  color: var(--mt-muted); font-size: .82rem;
}
.mt-pv-divider::before, .mt-pv-divider::after { content: ""; flex: 1; height: 1px; background: var(--mt-border); }
.mt-pv-fineprint { margin: 16px auto 0; max-width: 400px; font-size: .76rem; color: var(--mt-muted); line-height: 1.45; }

/* Admin: per-code activity facts grid */
.mt-kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; margin: 4px 0 8px; }
.mt-kv { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--mt-border); }
.mt-kv-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mt-muted); }
.mt-kv-v { font-size: .92rem; font-weight: 600; color: var(--mt-text); }

@media (max-width: 520px) {
  .mt-pv-body { padding: 44px 18px 22px; }
  .mt-pv-title { font-size: 1.45rem; }
  .mt-pv-actions { flex-direction: column; }
  .mt-pv-actions .mt-pv-btn, .mt-pv-actions .mt-pv-btn-link { width: 100%; text-align: center; }
}

/* Preview code request form */
.mt-request-modal { max-width: 520px; }
.mt-request-body { text-align: left; }
.mt-request-body .mt-pv-title,
.mt-request-body .mt-pv-sub,
.mt-request-body .mt-pv-lead { text-align: center; }
.mt-request-fields { margin-top: 18px; }
.mt-request-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-request-field { margin: 0 0 10px; }
.mt-request-field label { display: block; margin-bottom: 4px; font-size: .84rem; font-weight: 600; color: var(--mt-primary-dark); }
.mt-request-textarea { min-height: 72px; resize: vertical; }
.mt-optional { font-weight: 400; color: var(--mt-muted); }
.mt-request-ack { margin-top: 4px; }
@media (max-width: 560px) {
  .mt-request-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Progressive single-page triage flow (triage.html)
   ============================================================ */
body.mt-flow { background: radial-gradient(1100px 460px at 50% -12%, #e9f0fb 0%, var(--mt-bg) 55%); }
.gp-wrap-flow { max-width: 1080px; }

/* Each revealed step animates in gently so the next action is obvious. */
.mt-step { animation: mt-reveal .28s ease; }
@keyframes mt-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mt-step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-dark));
  color: #fff; font-size: 13px; font-weight: 800; vertical-align: middle;
}
.mt-step-prefix {
  display: inline-block; margin-right: 6px;
  font-size: 1rem; font-weight: 800; color: #1e4d8c; vertical-align: middle;
}
.mt-exclude-word { color: #b42318; font-weight: 800; }

/* Auth card */
.mt-auth-card { max-width: 460px; margin-left: auto; margin-right: auto; }
.mt-auth-title { text-align: center; font-size: 1.5rem; margin: 4px 0 6px; }
.mt-auth-sub { text-align: center; margin: 0 0 14px; }

/* Step 1 lead-in sitting to the left of the sign-in card */
.mt-auth-row {
  display: flex; align-items: center; justify-content: center;
  gap: 56px; flex-wrap: wrap; margin: 12px auto 0; max-width: 920px;
}
.mt-step-lead { flex: 0 1 320px; max-width: 340px; text-align: left; }
.mt-step-lead-num {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #1e4d8c;
  background: linear-gradient(135deg, #eaf1fb 0%, #e3ecfb 100%);
  border: 1px solid #d4e2f7; padding: 5px 14px; border-radius: 999px;
}
.mt-step-lead-text {
  margin: 18px 0 0; font-size: 1.7rem; line-height: 1.32; font-weight: 700;
  letter-spacing: -.01em; color: #16243a;
}
.mt-step-lead-text strong { font-weight: 800; }
.mt-step-lead-text strong span { color: #2f6fd6; }

/* Steps 2–5: a lead-in column to the LEFT of each flow card. The whole row hides
   itself automatically whenever its card is hidden — so leads only appear as
   their card cascades into view. No JS toggling required. */
.mt-step-row { display: flex; align-items: flex-start; gap: 44px; margin-bottom: 16px; }
.mt-step-row:has(> .gp-card.gp-hidden) { display: none; }
.mt-step-row > .gp-card { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.mt-step-row > .mt-step-lead { flex: 0 0 280px; max-width: 280px; padding-top: 8px; }
.mt-step-row .mt-step-lead-text { font-size: 1.3rem; margin-top: 16px; }

/* The counts and scan-progress cards are centered horizontally on the page. */
.mt-step-row-centered { justify-content: center; }
.mt-step-row-centered > .mt-step-lead { display: none; }
#countsCard, #progressCard { margin-left: auto; margin-right: auto; max-width: 756px; width: 100%; }

/* Results: no lead-in column — the card spans the FULL page width (matching the
   footer) so triaged messages get the most room to read. */
.mt-step-row-results { display: block; }
.mt-step-row-results > .gp-card { max-width: none; width: 100%; }

@media (max-width: 760px) {
  .mt-auth-row { gap: 22px; }
  .mt-step-lead { flex-basis: auto; max-width: 460px; text-align: center; }
  .mt-step-lead-text { font-size: 1.35rem; }
}
@media (max-width: 920px) {
  .mt-step-row { flex-direction: column; gap: 14px; }
  .mt-step-row > .mt-step-lead { flex-basis: auto; max-width: none; padding-top: 0; }
  .mt-step-row .mt-step-lead-text { font-size: 1.2rem; }
  #countsCard, #progressCard { margin-left: auto; margin-right: auto; max-width: none; }
}
.mt-auth-switch { margin-top: 16px; text-align: center; color: var(--mt-muted); }
.mt-auth-switch a { color: var(--mt-primary); font-weight: 600; }

/* Connected accounts */
.mt-acct {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border: 1px solid var(--mt-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff;
}
.mt-acct-role { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mt-muted); font-weight: 700; }
.mt-acct-email { font-weight: 600; font-size: 1.02rem; word-break: break-all; }
.mt-acct-meta { margin-top: 2px; }
.mt-acct-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.mt-acct-actions { margin-top: 0; justify-content: flex-end; }
.mt-acct-lock { font-size: 12px; }

/* Per-account "Remove access" (trash) button — subtle until hovered, then red. */
.mt-remove-btn { display: inline-flex; align-items: center; gap: 6px; color: #b3261e; border-color: #f2c4c0; background: #fff; }
.mt-remove-btn:hover { background: #fdecea; border-color: #e1948e; color: #8c1d18; }
.mt-remove-ico { font-size: 13px; line-height: 1; }

/* Verify button: turns green once the connection + counts come back successfully. */
.mt-btn-verified, .mt-btn-verified:hover { background: #1b8a4b; border-color: #1b8a4b; cursor: default; }
.mt-verify-note { margin: 10px 0 0; font-size: .9rem; font-weight: 600; color: #1b8a4b; }

/* Phone / text placeholder */
.mt-pill-soon { background: #fef5e7; color: #8a5a14; }
.mt-phone-panel { margin-top: 16px; padding: 16px; border: 1px dashed var(--mt-border); border-radius: 10px; background: #fbfdff; }
.mt-phone-panel h3 { margin: 0 0 8px; color: var(--mt-primary-dark); }
.mt-phone-steps { margin: 12px 0; padding-left: 20px; color: var(--mt-text); }
.mt-phone-steps li { margin: 4px 0; }
.mt-qr-placeholder {
  width: 140px; height: 140px; margin: 8px 0; border: 2px dashed var(--mt-border); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--mt-muted); font-size: 13px; background: #fff;
}

/* Counts */
.mt-counts-block { margin-bottom: 14px; }
.mt-counts-block-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mt-muted); font-weight: 700; margin-bottom: 6px; }
.mt-count-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--mt-border); font-size: 14px; }
.mt-count-line strong { color: var(--mt-primary-dark); }
.mt-count-rw strong { color: var(--mt-text); }
.mt-count-errtxt { color: #8c2c22; font-weight: 600; }

/* Per-account count matrix (rows = time windows, columns = accounts + total) */
.mt-counts-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; }
.mt-counts-table { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 14px; }
.mt-counts-table th, .mt-counts-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--mt-border); white-space: nowrap; }
.mt-counts-table thead th { font-size: 12px; color: var(--mt-muted); font-weight: 700; border-bottom: 2px solid var(--mt-border); vertical-align: bottom; }
.mt-counts-table th.mt-ct-range { text-align: left; font-weight: 600; color: var(--mt-text); }
.mt-counts-table thead th.mt-ct-range { color: var(--mt-muted); font-weight: 700; }
.mt-counts-table .mt-ct-acct { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.mt-counts-table .mt-ct-primary { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mt-accent); }
.mt-counts-table td { color: var(--mt-text); }
.mt-counts-table .mt-ct-na { color: #8c2c22; font-weight: 600; }
.mt-counts-table .mt-ct-total { background: #f3f7fd; }
.mt-counts-table td.mt-ct-total strong { color: var(--mt-primary-dark); }
.mt-counts-table thead th.mt-ct-total { color: var(--mt-primary-dark); }
.mt-counts-table tbody tr:last-child th, .mt-counts-table tbody tr:last-child td { border-bottom: none; }

/* Scan buttons (legacy) */
.mt-scan-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.mt-scan-btn { margin-top: 0; text-align: center; }
.mt-scan-custom { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; color: var(--mt-muted); font-size: 14px; }
.mt-scan-custom input { width: 84px; padding: 8px; border: 1px solid var(--mt-border); border-radius: 6px; }

/* New-user button under the login form */
.mt-auth-newuser { margin-top: 14px; }

/* Choose view — two stacked buttons shown on load */
.mt-auth-choose { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }

/* "Remember me on this computer" checkbox, sitting under the username field */
.mt-remember {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 12px;
  font-weight: 500; color: var(--mt-muted); cursor: pointer; user-select: none;
}
.mt-remember input { width: auto; margin: 0; flex: none; cursor: pointer; }
.mt-remember span { font-size: .92rem; }

/* Subtle back link returning to the two-button choose view */
.mt-auth-back {
  display: block; margin: 14px auto 0; background: none; border: none; padding: 4px 8px;
  color: var(--mt-muted); font-size: .9rem; cursor: pointer;
}
.mt-auth-back:hover { color: var(--mt-primary); text-decoration: underline; }

/* Verified sign-in — turn the submit button green + locked once login succeeds */
.gp-btn.mt-btn-success, .gp-btn.mt-btn-success:hover {
  background: #1b8a4b; border-color: #1b8a4b; color: #fff; cursor: default; opacity: 1;
}

/* Signed-in confirmation (auth card stays visible after login) */
.mt-signedin-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 6px 0 16px;
  background: #eafaf0; border: 1px solid #bfe8cf; border-radius: 10px; }
.mt-signedin-ico { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%; background: #1b8a4b; color: #fff; font-weight: 700; font-size: 16px; }
.mt-signedin-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mt-muted); font-weight: 700; }
.mt-signedin-user { font-size: 1.08rem; font-weight: 700; color: #14532d; word-break: break-all; }

/* Counts lead line */
.mt-counts-lead { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: var(--mt-text); }

/* Scan range radios */
.mt-scan-radios { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.mt-scan-radio { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--mt-border); border-radius: 10px; cursor: pointer; font-size: 15px; transition: border-color .12s, background .12s; }
.mt-scan-radio:hover { border-color: var(--mt-primary); }
.mt-scan-radio input { width: 18px; height: 18px; accent-color: var(--mt-primary); cursor: pointer; }
.mt-scan-radio:has(input:checked) { border-color: var(--mt-primary); background: #f1f7ff; }
.mt-scan-radio-off { opacity: .5; cursor: not-allowed; }
.mt-scan-radio-off:hover { border-color: var(--mt-border); }
.mt-triage-now { margin-top: 14px; }
.mt-scan-note { margin-top: 8px; font-size: 12px; }
.mt-scan-eta { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--mt-primary); min-height: 1.25em; }

/* Result card extras */
.mt-card-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mt-prio-label { margin: 0; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.mt-prio-sel { padding: 4px 8px; border: 1px solid var(--mt-border); border-radius: 6px; background: #fff; font-size: 13px; }
.mt-prio-note { font-size: 12px; font-weight: 700; color: var(--mt-accent); background: #fdf1e5; padding: 2px 8px; border-radius: 999px; }
.mt-card-actions { margin-top: 10px; }
.mt-card-replied { background: #f4faf6; }
.mt-filter-summary { margin: 6px 0 0; }
.mt-filter-banner {
  display: block;
  margin: 0 0 16px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #1e4d8c;
  background: linear-gradient(135deg, #eef4fb 0%, #e3edfa 100%);
  border: 2px solid #2f6fbf;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(30, 77, 140, .12);
}
.mt-filter-banner strong { font-weight: 800; }
.mt-filter-banner .mt-unhide-all {
  margin-left: 12px;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}

/* Dismiss-this-email — primary blue call-to-action in More Actions */
.mt-dismiss-btn {
  background: #1e4d8c;
  border-color: #1e4d8c;
  color: #fff;
  font-weight: 700;
}
.mt-dismiss-btn:hover {
  background: #163d70;
  border-color: #163d70;
  color: #fff;
}
.mt-results-tools { gap: 8px; }

/* Modal footer + filter/customize controls */
.mt-modal-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--mt-border); }
.mt-modal-foot .gp-btn { margin-top: 0; }
.mt-modal-sm { max-width: 480px; }
.mt-modal-x { width: auto; padding: 4px 10px; font-size: 16px; color: var(--mt-muted); }

/* Log-out choice dialog — stacked, full-width actions. */
.mt-logout-body p { margin: 0; line-height: 1.5; color: #344054; }
.mt-logout-foot { flex-direction: column; align-items: stretch; gap: 12px; }
.mt-logout-foot .gp-btn-block { width: 100%; font-size: 1rem; line-height: 1.35; padding: 14px 18px; }
.mt-logout-wipe {
  background: #fff; color: #b42318; border: 2px solid #fda29b;
  box-shadow: none;
}
.mt-logout-wipe:hover { background: #fef3f2; color: #912018; border-color: #f97066; }
.mt-logout-note { margin: 0; text-align: center; line-height: 1.45; font-size: .9rem; }
.mt-logout-applyclose { align-items: flex-start; margin: 0; line-height: 1.45; font-size: .92rem; color: #475467; }
.mt-logout-applyclose input { margin-top: 4px; flex-shrink: 0; }
.mt-fl-group { margin-bottom: 16px; }
.mt-fl-group h4 { margin: 0 0 8px; font-size: .95rem; color: var(--mt-primary-dark); }
.mt-fl-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mt-fl-senders { max-height: 180px; overflow-y: auto; padding: 6px; border: 1px solid var(--mt-border); border-radius: 8px; }
.mt-fl-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; text-transform: capitalize; cursor: pointer; }
.mt-fl-check input { width: 16px; height: 16px; }
.mt-summary-text { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: #f6f8fb; border: 1px solid var(--mt-border); border-radius: 8px; padding: 14px; max-height: 50vh; overflow: auto; }

@media (max-width: 560px) {
  .mt-acct { flex-direction: column; }
  .mt-acct-side { align-items: flex-start; }
  .mt-acct-actions { justify-content: flex-start; }
}

/* ============================================================
   Triage results + dialogs — elegant, professional redesign
   (placed last so it intentionally overrides the older rules)
   ============================================================ */
#results { display: flex; flex-direction: column; gap: 12px; }

.mt-card {
  border: 1px solid #e6e9ee; border-left-width: 7px; border-right-width: 7px; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 0; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.06);
}
.mt-card:hover { box-shadow: 0 6px 18px rgba(16,24,40,.10); }

.mt-card-head { gap: 10px; margin-bottom: 6px; align-items: center; }
.mt-card-num { min-width: 24px; height: 24px; background: #eef2f7; color: #475569; font-weight: 700; font-size: 12px; border-radius: 8px; }
.mt-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; letter-spacing: .01em; text-transform: none; }
.mt-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #64748b; background: #f1f4f8; border: none; padding: 3px 8px; border-radius: 6px; }

.mt-card-sender { font-size: 14px; color: #475467; }
.mt-card-sender strong { color: #101828; font-weight: 700; }
.mt-card-subject { font-size: 15.5px; font-weight: 700; color: #101828; margin: 6px 0 2px; line-height: 1.35; }
.mt-card-summary { font-size: 14px; color: #475467; margin: 6px 0; line-height: 1.5; }

/* Message body preview — the actual content of the message */
.mt-card-body { margin: 10px 0; padding: 12px 14px; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; }
.mt-card-body-text { font-size: 14px; color: #344054; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.mt-card-body-text.mt-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mt-card-body-empty { color: #98a2b3; font-style: italic; font-size: 13px; background: #fafbfc; }
.mt-body-toggle { margin-top: 8px; padding: 0; background: none; border: none; color: var(--mt-primary); font-weight: 600; font-size: 13px; cursor: pointer; }
.mt-body-toggle:hover { text-decoration: underline; }

.mt-card-action { font-size: 14px; color: #344054; margin: 8px 0 2px; line-height: 1.5; }
.mt-card-action-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1d4ed8; background: #eaf0ff; padding: 1px 8px; border-radius: 6px; margin-right: 6px; }

/* Layout for the toolbar, card action row, and footer — buttons themselves all
   share the unified .mt-mini-btn look defined above. */
.mt-results-head { margin-bottom: 6px; }
.mt-results-head h2 { margin: 0; }
.mt-results-tools { gap: 8px; flex-wrap: wrap; padding: 10px 0 12px; border-bottom: 1px solid #eef1f5; margin-bottom: 14px; }
.mt-card-actions { gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f3f7; }

/* "Action taken" — ONE consistent, elegant highlighted state for every button
   whose action is complete (replied, reviewed, added to Calendar/Tasks). The
   soft green tint + check makes it instantly clear without being loud. */
.mt-mini-btn.mt-done {
  border-color: #12b76a;
  background: #ecfdf3;
  color: #027a48;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(18,183,106,.25), 0 1px 2px rgba(2,122,72,.10);
}
.mt-mini-btn.mt-done:hover {
  background: #d1fadf; border-color: #039855; color: #05603a;
  box-shadow: inset 0 0 0 1px rgba(18,183,106,.4), 0 2px 6px rgba(2,122,72,.14);
}

/* Persistent "done" state for the summary modal's Copy / Download / Save buttons. */
.mt-btn-done, .mt-btn-done:hover { background: #1b8a4b; border-color: #1b8a4b; color: #fff; cursor: default; }
.mt-btn-done::before { content: '\2713\00a0'; font-weight: 700; }

/* Hide-this confirm dialog + task confirm button */
.mt-hide-confirm { margin: 0; line-height: 1.55; color: #1c2733; }
.mt-hide-yes { background: #b42318; border-color: #b42318; color: #fff; font-weight: 700; }
.mt-hide-yes:hover { background: #912018; border-color: #912018; color: #fff; }
#simpleModal { align-items: center; }
.mt-task-confirm { font-weight: 700; }

/* Account-creation result modal */
.mt-signup-modal .mt-modal-head { background: linear-gradient(135deg, #1e4d8c 0%, #2f6fbf 100%); border-bottom: none; }
.mt-signup-modal .mt-modal-head h3 { color: #fff; }
.mt-signup-modal .mt-modal-x { color: rgba(255,255,255,.85); }
.mt-signup-modal .mt-modal-x:hover { background: rgba(255,255,255,.18); }
.mt-signup-lead { margin: 0 0 16px; line-height: 1.55; color: #1c2733; }
.mt-signup-fail { font-weight: 700; color: #b42318; }
.mt-signup-failmsg { margin: 0 0 12px; padding: 10px 12px; background: #fef3f2; border: 1px solid #fda29b; border-radius: 10px; color: #912018; line-height: 1.5; }
.mt-signup-tip { margin-top: 14px; }
.mt-cred-card { background: #f6f9fd; border: 1px solid #d8e1ee; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.mt-cred-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #667085; }
.mt-cred-row { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.mt-cred-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.mt-cred-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.mt-cred-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.mt-cred-val { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 15px; font-weight: 700; color: #101828; word-break: break-all; }
.mt-cred-btn { font-size: 13px; font-weight: 700; padding: 6px 9px; border: 1px solid #d8e1ee; background: #fff; color: #1e4d8c; border-radius: 8px; cursor: pointer; line-height: 1; flex: 0 0 auto; }
.mt-cred-btn:hover { background: #eef4fb; border-color: #1e4d8c; }

/* Sign-up success: warning + "Next" steps */
.mt-signup-warn { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: #b54708; }
.mt-next-section { margin-top: 18px; }
.mt-next-head { margin: 8px 0 12px; font-weight: 700; color: #101828; }
.mt-next-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.mt-next-list li { position: relative; padding-left: 26px; color: #344054; line-height: 1.45; }
.mt-next-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #2f6fbf; font-weight: 700; }

/* Sign-up success: footer is a full-width primary button + a plain "later" link */
.mt-signup-modal .mt-modal-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.mt-signup-later { background: none; border: none; color: #2f6fbf; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px; text-align: center; }
.mt-signup-later:hover { text-decoration: underline; }

/* Center the sign-up success dialog dead-center in the viewport */
#signupResultModal { align-items: center; }

/* Center the "Before I triage your messages" consent dialog horizontally + vertically */
#consentModal { align-items: center; }

/* Smaller "Add another Gmail / Add phone" buttons with a + icon */
.mt-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.mt-add-btn { display: inline-flex; align-items: center; gap: 6px; }
.mt-add-ico { font-weight: 800; font-size: 1.05em; line-height: 1; }

/* Separate admin sign-in overlay */
body.admin-locked .gp-wrap { display: none; }
.mt-admin-login-overlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(135deg, #0f1720 0%, #1e3a5f 100%);
}
.mt-admin-login-overlay.gp-hidden { display: none; }
.mt-admin-login-card {
  width: 100%; max-width: 400px; background: #fff; border-radius: 16px;
  padding: 28px 26px; box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.mt-admin-login-brand { justify-content: center; margin-bottom: 14px; }
.mt-admin-login-card h2 { margin: 0 0 4px; text-align: center; }
.mt-admin-login-card p.gp-help { text-align: center; margin: 0 0 18px; }
.mt-admin-login-card label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; }

/* Password field with a "Show Password" toggle */
.mt-pass-wrap { position: relative; display: block; }
.mt-pass-wrap input { width: 100%; box-sizing: border-box; padding-right: 120px; }
.mt-pass-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: #eef3fb; border: 1px solid #d4e1f3; color: var(--mt-primary);
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  line-height: 1;
}
.mt-pass-toggle:hover { background: #e1ebf9; }

/* Triage results summary totals */
.mt-results-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 16px; }
.mt-rsum-item {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid #e6e9ee; background: #fff;
}
.mt-rsum-num { font-size: 26px; font-weight: 800; line-height: 1.1; color: #101828; }
.mt-rsum-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #667085; }
.mt-rsum-total { background: #f1f7ff; border-color: #cfe0f6; }
.mt-rsum-total .mt-rsum-num { color: #1e4d8c; }
.mt-rsum-high { background: #fef3f2; border-color: #fda29b; }
.mt-rsum-high .mt-rsum-num { color: #b42318; }
.mt-rsum-medium { background: #fffaeb; border-color: #fec84b; }
.mt-rsum-medium .mt-rsum-num { color: #b54708; }
.mt-rsum-low { background: #f0fdf4; border-color: #86efac; }
.mt-rsum-low .mt-rsum-num { color: #15803d; }

/* Prominent Summarize Results action */
.mt-summary-cta {
  font-size: 1rem; font-weight: 800; padding: 12px 22px;
  box-shadow: 0 2px 8px rgba(47, 111, 214, .28);
}
.mt-summary-cta:hover { box-shadow: 0 4px 14px rgba(47, 111, 214, .36); }

/* Consent modal acknowledgment checkbox */
.mt-consent-check {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: 14px; line-height: 1.45; color: #344054; cursor: pointer;
}
.mt-consent-check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }

/* ============================================================
   Intro / hero card — the only thing shown on page load
   ============================================================ */
.mt-intro { max-width: 580px; margin: 24px auto; padding: 28px 32px 24px; }
.mt-intro-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.mt-intro-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; color: var(--mt-primary); }
.mt-intro-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--mt-primary); color: #fff; font-size: 12px; line-height: 1; }
.mt-intro-title { margin: 0 0 22px; font-size: 1.6rem; line-height: 1.3; font-weight: 800; color: #101828; letter-spacing: -0.02em; }
.mt-intro-title span { color: var(--mt-primary); }
.mt-intro-steps { display: flex; gap: 10px; padding: 16px 0; border-top: 1px solid var(--mt-border); border-bottom: 1px solid var(--mt-border); }
.mt-intro-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #475467; line-height: 1.3; }
.mt-intro-ico { font-size: 18px; line-height: 1; }
.mt-intro-callout { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; padding: 14px 16px; background: #eef4fb; border: 1px solid #d6e4f5; border-radius: 12px; }
.mt-intro-callout-ico { font-size: 22px; line-height: 1.2; flex: 0 0 auto; }
.mt-intro-callout p { margin: 0; line-height: 1.5; color: #344054; font-size: 14px; }
.mt-intro-callout-strong { display: block; margin-top: 6px; color: var(--mt-primary-dark); }
.mt-intro-cta { margin-top: 4px; font-size: 1.05rem; padding: 14px 20px; }
.mt-intro-secure { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--mt-muted); }

@media (max-width: 560px) {
  .mt-intro { padding: 22px 18px; }
  .mt-intro-steps { flex-wrap: wrap; }
  .mt-intro-step { flex: 1 1 44%; }
}

/* Follow-up scheduling dialog */
.mt-followup-intro { margin: 0 0 16px; line-height: 1.55; color: #1c2733; }
.mt-followup-fields { display: flex; gap: 14px; flex-wrap: wrap; }
.mt-followup-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; color: #344054; }
.mt-followup-field .gp-input { margin-top: 0; }
.mt-followup-suggest { margin: 12px 0 0; }
.mt-followup-err { margin: 10px 0 0; }
.mt-followup-preview { margin-top: 16px; }
.mt-followup-preview summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #475467; }
.mt-followup-preview summary:hover { color: #101828; }
.mt-followup-preview .mt-summary-text { margin-top: 10px; }
.mt-followup-confirm { font-weight: 700; }

/* Dialogs — professional appearance */
.mt-modal { border-radius: 14px; box-shadow: 0 24px 64px rgba(16,24,40,.30); border: 1px solid #e6e9ee; overflow: hidden; }
.mt-modal-head { padding: 18px 22px; border-bottom: 1px solid #eef1f5; background: #fcfdfe; }
.mt-modal-head h3 { font-size: 17px; font-weight: 700; color: #101828; }
.mt-modal-body { padding: 20px 22px; }
.mt-modal-foot { padding: 16px 22px; border-top: 1px solid #eef1f5; background: #fcfdfe; justify-content: flex-end; }
.mt-modal-x { border-radius: 8px; }
.mt-modal-x:hover { background: #f2f4f7; }

.mt-fl-group { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #f2f4f7; }
.mt-fl-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mt-fl-group h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.mt-fl-checks { gap: 10px 12px; }
.mt-fl-check {
  padding: 7px 12px; border: 1px solid #e6e9ee; border-radius: 8px; background: #fff;
  font-weight: 500; font-size: 13.5px; color: #344054; transition: border-color .12s, background .12s;
}
.mt-fl-check:hover { border-color: #98a2b3; }
.mt-fl-check:has(input:checked) { border-color: var(--mt-primary); background: #f1f7ff; color: #101828; }
.mt-fl-check input { accent-color: var(--mt-primary); width: 16px; height: 16px; }
.mt-fl-senders { max-height: 200px; border-color: #e6e9ee; border-radius: 10px; background: #fcfdfe; padding: 10px; }
#flSort { max-width: 340px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid #d0d5dd; background: #fff; font-size: 14px; }

/* Summary / action list — elegant sectioned layout */
.mt-summary-render { color: #344054; }
.mt-sum-head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #eef1f5; }
.mt-sum-title { margin: 0; font-size: 20px; font-weight: 800; color: #101828; letter-spacing: -.01em; }
.mt-sum-date { margin-top: 2px; font-size: 13px; color: #98a2b3; }
.mt-sum-intro { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #475467; }
.mt-sum-section { margin: 0 0 22px; }
.mt-sum-section:last-child { margin-bottom: 0; }
.mt-sum-sec-head { display: flex; align-items: center; gap: 10px; }
.mt-sum-sec-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #101828; }
.mt-sum-dot { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; flex: none; }
.mt-sum-count { margin-left: auto; font-size: 12px; font-weight: 700; color: #475467; background: #eef2f7; padding: 2px 10px; border-radius: 999px; }
.mt-sum-sec-desc { margin: 4px 0 10px 20px; font-size: 13px; color: #667085; line-height: 1.5; }
.mt-sum-list { margin: 0 0 0 20px; padding: 0; list-style: none; counter-reset: mtsum; display: flex; flex-direction: column; gap: 8px; }
.mt-sum-list li {
  counter-increment: mtsum; position: relative; padding: 10px 12px 10px 40px;
  background: #fff; border: 1px solid #eef1f5; border-radius: 10px; font-size: 14px; line-height: 1.45;
}
.mt-sum-list li::before {
  content: counter(mtsum); position: absolute; left: 10px; top: 10px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #475467; background: #f1f4f8; border-radius: 6px;
}
.mt-sum-sender { font-weight: 700; color: #101828; }
.mt-sum-sender::after { content: ' — '; color: #98a2b3; font-weight: 400; }
.mt-sum-what { color: #475467; }
.mt-sum-empty { color: #98a2b3; font-style: italic; text-align: center; padding: 24px 0; }

/* Tier accent dots */
.mt-sum-critical .mt-sum-dot { background: #b42318; }
.mt-sum-high .mt-sum-dot { background: #ea580c; }
.mt-sum-medium .mt-sum-dot { background: #d97706; }
.mt-sum-low .mt-sum-dot { background: #16a34a; }
.mt-sum-informational .mt-sum-dot { background: #64748b; }
.mt-sum-spam .mt-sum-dot { background: #9ca3af; }
.mt-sum-critical li { border-left: 3px solid #f0c4bf; }
.mt-sum-high li { border-left: 3px solid #f6c9ac; }

.mt-drive-file { font-weight: 600; color: #101828; background: #f1f7ff; border: 1px solid #d6e4ff; border-radius: 8px; padding: 10px 12px; }
a.gp-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* ============================================================
   Structured dashboard result cards — scannable 3-column layout
   (urgency rail · message · timestamp + actions). Placed last so
   it intentionally overrides the earlier .mt-card rules.
   ============================================================ */
#results { display: flex; flex-direction: column; gap: 16px; }

.mt-card {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr) 171px;
  align-items: stretch;
  padding: 0;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-left: 6px solid #cbd5e1;
  border-right-width: 1px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
}
.mt-card:hover { box-shadow: 0 10px 28px rgba(16,24,40,.10); }
.mt-card-done { opacity: .62; }

/* --- Left rail: who sent it + when, then urgency at a glance --- */
.mt-card-urg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 14px 10px 14px 12px;
  background: #f8fafc;
  border-right: 1px solid #eef1f5;
}

/* Position number ("3 of 166") so the list is easy to scan and scroll. */
.mt-card-seq {
  display: inline-flex; align-items: baseline; gap: 4px; margin-bottom: 12px;
  padding: 3px 10px; border-radius: 999px; background: #eef2f7; color: #475467;
}
.mt-seq-num { font-size: 15px; font-weight: 800; line-height: 1; color: #1f3a5f; }
.mt-seq-total { font-size: 10px; font-weight: 600; color: #98a2b3; }

/* Sender + "how long ago" — the stupid-simple, at-a-glance identity block. */
.mt-card-from { display: flex; flex-direction: column; gap: 1px; width: 100%; margin-bottom: 12px; }
.mt-from-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; }
.mt-from-name { font-size: 13.5px; font-weight: 700; color: #101828; line-height: 1.25; word-break: break-word; margin-bottom: 6px; }
.mt-ago { font-size: 13px; font-weight: 600; color: #344054; line-height: 1.25; letter-spacing: .01em; }
.mt-when-line { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #667085; margin-top: 1px; }
.mt-when-line .mt-when-ico { font-size: 10px; opacity: .85; line-height: 1; }
.mt-urg-block {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding-top: 10px; border-top: 1px dashed #e4e8ee;
}
.mt-card-urg .mt-badge {
  margin-bottom: 8px; font-size: 9px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #fff;
}
.mt-urg-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; }
.mt-urg-score { display: flex; align-items: baseline; gap: 4px; margin: 1px 0 2px; }
.mt-urg-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #475467; }
.mt-urg-den { font-size: 14px; font-weight: 600; color: #98a2b3; }
.mt-urg-desc { font-size: 12.5px; font-weight: 700; color: #475467; margin-bottom: 14px; }
.mt-urg-cue { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #475467; }
.mt-urg-cue-ico { font-size: 11px; line-height: 1; }

/* --- Middle: message content --- */
.mt-card-main { padding: 16px 20px; min-width: 0; }
.mt-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.mt-card-ico { color: #98a2b3; font-size: 16px; line-height: 1; }
.mt-card-sender { font-size: 14px; color: #475467; }
.mt-card-sender strong { color: #101828; font-weight: 700; font-size: 15px; }
.mt-card-head .mt-cat { background: #eef2ff; color: #4f46e5; border: none; border-radius: 6px; padding: 3px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.mt-card-subject { font-size: 15px; font-weight: 700; color: #101828; margin: 4px 0 12px; line-height: 1.35; }
.mt-card.mt-l-critical .mt-card-subject { color: #dc2626; }
.mt-card.mt-l-high .mt-card-subject { color: #ea580c; }

.mt-card-line { display: block; margin: 9px 0; }
.mt-line-label { display: block; font-size: 13px; font-weight: 700; text-decoration: underline; color: #344054; margin-bottom: 3px; }
.mt-line-body { display: block; font-size: 13.5px; color: #475467; line-height: 1.55; word-break: break-word; }
.mt-act-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 5px; margin-right: 8px; vertical-align: 1px;
}
.mt-act-do { background: #fef2f2; color: #dc2626; }
.mt-act-review { background: #f0fdf4; color: #16a34a; }

/* --- Right rail: timestamp + actions --- */
.mt-card-side {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 10px 14px 12px; border-left: 1px solid #eef1f5; background: #fff;
}
.mt-card-when { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.mt-when-head { font-size: 11px; font-weight: 700; color: #475467; }
.mt-when-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #667085; white-space: nowrap; }
.mt-when-ico { font-size: 11px; opacity: .85; line-height: 1; }
.mt-card-actions { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: none; }
.mt-card-side .mt-mini-btn {
  width: 100%; justify-content: flex-start; text-align: left; gap: 6px;
  display: inline-flex; align-items: center; padding: 6px 9px; font-size: 11.5px;
}
.mt-btn-ico { font-size: 13px; line-height: 1; flex: none; }
.mt-act-primary {
  border-color: var(--mt-primary); color: var(--mt-primary); font-weight: 700;
  background: #f5f9ff;
}
.mt-act-primary:hover { background: #e9f1ff; border-color: var(--mt-primary-dark); color: var(--mt-primary-dark); }
.mt-more-btn { justify-content: space-between; color: #667085; }
.mt-more-dots { margin-left: auto; font-size: 16px; line-height: 1; }
.mt-more-btn.mt-more-open { background: #f8fafc; border-color: #98a2b3; color: #101828; }
.mt-card-more { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; margin-top: 2px; border-top: 1px solid #f0f3f7; }

/* --- Body preview / risks / details sit inside the middle column --- */
.mt-card-main .mt-card-body { margin: 10px 0 4px; }
.mt-card-main .mt-card-risks { margin: 8px 0 2px; }
.mt-card-main .mt-card-details { margin-top: 12px; padding-top: 12px; }
.mt-card-more .mt-prio-label { font-size: 12px; font-weight: 600; color: #475467; padding: 2px 0 0; }
.mt-card-more .mt-prio-note { align-self: flex-start; }

/* --- Per-tier accents: left border, badge, urgency rail tint, number/cue --- */
.mt-card.mt-l-critical { border-left-color: #ef4444; border-right-color: #e6e9ee; }
.mt-card.mt-l-high     { border-left-color: #f59e0b; border-right-color: #e6e9ee; }
.mt-card.mt-l-medium   { border-left-color: #22c55e; border-right-color: #e6e9ee; }
.mt-card.mt-l-low      { border-left-color: #0ea5e9; border-right-color: #e6e9ee; }
.mt-card.mt-l-info     { border-left-color: #64748b; border-right-color: #e6e9ee; }
.mt-card.mt-l-spam     { border-left-color: #9ca3af; border-right-color: #e6e9ee; }

.mt-badge.mt-l-critical { background: #ef4444; }
.mt-badge.mt-l-high     { background: #f59e0b; }
.mt-badge.mt-l-medium   { background: #22c55e; }
.mt-badge.mt-l-low      { background: #0ea5e9; }
.mt-badge.mt-l-info     { background: #64748b; }
.mt-badge.mt-l-spam     { background: #9ca3af; }

.mt-card.mt-l-critical .mt-card-urg { background: #fef2f2; }
.mt-card.mt-l-high     .mt-card-urg { background: #fffaf0; }
.mt-card.mt-l-medium   .mt-card-urg { background: #f0fdf4; }
.mt-card.mt-l-low      .mt-card-urg { background: #f0f9ff; }
.mt-card.mt-l-info     .mt-card-urg { background: #f8fafc; }
.mt-card.mt-l-spam     .mt-card-urg { background: #f9fafb; }

.mt-card.mt-l-critical .mt-urg-num, .mt-card.mt-l-critical .mt-urg-cue { color: #dc2626; }
.mt-card.mt-l-high     .mt-urg-num, .mt-card.mt-l-high     .mt-urg-cue { color: #d97706; }
.mt-card.mt-l-medium   .mt-urg-num, .mt-card.mt-l-medium   .mt-urg-cue { color: #16a34a; }
.mt-card.mt-l-low      .mt-urg-num, .mt-card.mt-l-low      .mt-urg-cue { color: #0284c7; }
.mt-card.mt-l-info     .mt-urg-num, .mt-card.mt-l-info     .mt-urg-cue { color: #475569; }
.mt-card.mt-l-spam     .mt-urg-num, .mt-card.mt-l-spam     .mt-urg-cue { color: #6b7280; }

/* --- Responsive: collapse to a single column on narrow screens --- */
/* On phones/tablets the 3-column card collapses to a single column. The left rail
   becomes a compact header strip (number · who · when · urgency), the message reads
   full width, and actions stack — clean and legible on a narrow screen. */
@media (max-width: 820px) {
  .mt-card { grid-template-columns: 1fr; }
  .mt-card-urg {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    border-right: none; border-bottom: 1px solid #eef1f5; padding: 11px 14px;
    background: #f8fafc;
  }
  .mt-card-seq { margin-bottom: 0; }
  .mt-card-from {
    width: auto; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap;
    align-items: baseline; gap: 2px 8px; margin-bottom: 0;
  }
  .mt-from-label { display: none; }
  .mt-from-name { margin-bottom: 0; font-size: 14px; }
  .mt-ago { font-size: 13px; }
  .mt-urg-block {
    width: auto; flex: 0 0 auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 8px; padding-top: 0; border-top: none; margin-left: auto;
  }
  .mt-urg-block .mt-badge { margin-bottom: 0; }
  .mt-urg-score { margin: 0; }
  .mt-urg-num { font-size: 22px; }
  .mt-urg-den { font-size: 12px; }
  .mt-urg-label, .mt-urg-cue, .mt-urg-desc { display: none; }
  .mt-card-main { padding: 14px 16px; }
  .mt-card-side { border-left: none; border-top: 1px solid #eef1f5; padding: 12px 14px; }
  /* Buttons stay full-width and stacked — big, easy tap targets on a phone. */
  .mt-card-side .mt-mini-btn { justify-content: center; text-align: center; padding: 10px 12px; font-size: 13px; }
}

/* Very small phones: keep the header strip readable and let urgency wrap below. */
@media (max-width: 480px) {
  .mt-card-urg { gap: 6px 10px; }
  .mt-urg-block { margin-left: 0; width: 100%; }
}