/* ============================================================================
   Meta Inspector: styles (Nitro Sites tools hub)

   SKINNED TO THE HOST. Everything here is driven by nitrosites' design tokens
   (src/styles/tokens.css) and reuses its component recipes (.btn/.btn-primary/
   .btn-ghost, .panel/.card, .field, .eyebrow/.lede/.section-header) which the
   BaseLayout shell loads globally via global.css. No raw brand colours, fonts,
   spacing or radii here, only `var(--…)` host tokens (STANDARDS §4 ethos).

   The ONLY literal hex values are inside the platform PREVIEW cards (Google,
   Facebook, X, LinkedIn, Pinterest, Slack, Discord, WhatsApp), which must
   reproduce those external brands pixel-for-pixel, they are deliberately NOT
   host-skinned. They are clearly fenced off below.
   ========================================================================== */
.mti{
  /* audit/severity aliases → host tokens (keeps the rest of the file DRY) */
  --mti-ok: var(--color-success);
  --mti-bad: var(--color-danger);
  --mti-warn: var(--color-status-partial);
  --mti-info: var(--color-accent-2);

  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 56rem;
  margin: 0 auto;
  width: 100%;
}
.mti *{box-sizing:border-box}
.mti ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* ---------- search form ---------- */
.mti-form{display:flex; gap:var(--sp-2); align-items:stretch; margin:var(--sp-4) auto var(--sp-3); max-width:42rem}
/* host .field is a column with bottom margin; flatten it into the inline search row.
   NB: app.css loads BEFORE the host bundle, so .mti-field vs .field is same specificity
   and the host wins on load-order. Use a parent to gain specificity. */
.mti-form .mti-field{flex:1; min-width:0; margin:0}
.mti-input{font-size:var(--fs-lg)}
.mti-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.mti-btn{white-space:nowrap; font-size:var(--fs-base)}
.mti-btn-ico{display:inline-flex; width:1.1em; height:1.1em}
.mti-btn-ico svg{width:100%; height:100%}

/* ---------- status / error ---------- */
.mti-status{min-height:1.4em; text-align:center; color:var(--color-muted); margin:var(--sp-2) 0; font-size:var(--fs-base)}
.mti-status.is-live{color:var(--color-primary-soft)}
.mti-spin{display:inline-block; width:1em; height:1em; border:2px solid var(--color-border); border-top-color:var(--color-primary);
  border-radius:var(--r-full); animation:mti-spin .7s linear infinite; vertical-align:-2px; margin-right:var(--sp-2)}
@keyframes mti-spin{to{transform:rotate(360deg)}}
.mti-error{display:flex; gap:var(--sp-3); align-items:flex-start; max-width:36rem; margin:var(--sp-6) auto; padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-lg); border:1px solid var(--color-danger); background:color-mix(in srgb, var(--color-danger) 10%, var(--color-surface))}
.mti-error-ico{font-size:1.5em; line-height:1; color:var(--color-danger)}
.mti-error strong{color:var(--color-danger)}
.mti-error-msg{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1)}

/* ---------- results ---------- */
.mti-results:not(:empty){margin-top:var(--sp-6); animation:mti-rise var(--dur) var(--ease) both}
@keyframes mti-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}

/* ---------- score hero (standard scorecard — SCORECARD-STANDARD.md) ---------- */
.mti .tone-ok{--tone:var(--color-success)}  .mti .tone-good{--tone:var(--color-accent-2)}
.mti .tone-warn{--tone:var(--color-status-partial)}  .mti .tone-bad{--tone:var(--color-danger)}
.mti .tone-mut{--tone:var(--color-muted)}
.mti-hero{display:flex; gap:var(--sp-6); align-items:center}
.mti-ring{position:relative; width:132px; height:132px; flex:none}
.mti-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.mti-ring-bg{fill:none; stroke:var(--color-border); stroke-width:10}
.mti-ring-fg{fill:none; stroke:var(--tone,var(--color-primary)); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset var(--dur-slow) var(--ease)}
.mti-ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.mti-score{font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:900; line-height:1; color:var(--color-text)}
.mti-of{color:var(--color-muted); font-size:var(--fs-xs); margin-top:2px}
.mti-grade-badge{flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:2em; height:2em; padding:0 .4em;
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--tone,var(--color-text)); border-radius:var(--r-md);
  border:2px solid var(--tone,var(--color-border)); background:color-mix(in srgb, var(--tone,var(--color-border)) 14%, transparent)}
.mti-hero-body{flex:1; min-width:0}
.mti-hero-host{display:flex; align-items:center; gap:var(--sp-2); color:var(--color-muted); font-size:var(--fs-sm)}
.mti-hero-fav{width:18px; height:18px; border-radius:var(--r-sm); flex:none}
.mti-hero-title{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--color-text); margin:var(--sp-1) 0 var(--sp-3);
  word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-stats{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.mti-pill{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  background:var(--color-surface-2); border:1px solid var(--color-border); font-size:var(--fs-xs); color:var(--color-muted)}
.mti-pill b{color:var(--color-text)}
.mti-pill.tone-ok{border-color:color-mix(in srgb, var(--mti-ok) 45%, transparent)}
.mti-pill.tone-ok b{color:var(--mti-ok)}
.mti-pill.tone-warn{border-color:color-mix(in srgb, var(--mti-warn) 45%, transparent)}
.mti-pill.tone-warn b{color:var(--mti-warn)}

/* ---------- segmented nav ---------- */
.mti-nav{display:flex; gap:var(--sp-1); margin:var(--sp-5) 0 var(--sp-4); padding:var(--sp-1); border-radius:var(--r-lg);
  background:var(--color-surface); border:1px solid var(--color-border)}
.mti-tab{flex:1; padding:var(--sp-3) var(--sp-2); border:0; border-radius:var(--r-md); background:transparent; color:var(--color-muted);
  cursor:pointer; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease)}
.mti-tab:hover{color:var(--color-text)}
.mti-tab.is-on{background:var(--color-primary); color:var(--color-primary-fg); box-shadow:0 6px 18px var(--color-glow-soft)}
.mti-tab-badge{font-style:normal; font-size:var(--fs-xs); font-weight:800; background:var(--color-danger); color:#fff;
  border-radius:var(--r-full); padding:.05em .45em; margin-left:var(--sp-2); vertical-align:1px}
.mti-tab.is-on .mti-tab-badge{background:color-mix(in srgb, var(--color-primary-fg) 30%, transparent); color:var(--color-primary-fg)}

.mti-panel{animation:mti-fade var(--dur) var(--ease) both}
@keyframes mti-fade{from{opacity:0} to{opacity:1}}

/* ---------- editor (host .card + .field rows) ---------- */
.mti-editor{padding:0; overflow:hidden; margin-bottom:var(--sp-4)}
.mti-editor-toggle{width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border:0; background:transparent; color:var(--color-text); cursor:pointer;
  font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; text-align:left}
.mti-editor-toggle:hover{background:var(--color-glow-faint)}
.mti-editor-hint{color:var(--color-muted); font-size:var(--fs-xs); font-weight:400}
.mti-editor-fields{display:none; padding:0 var(--sp-4) var(--sp-4); flex-direction:column; gap:var(--sp-3)}
.mti-editor.is-open .mti-editor-fields{display:flex}
.mti-editor-fields .mti-ef{margin-bottom:0} /* host .field margin; parent selector beats load-order */
.mti-ef-top{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2)}
.mti-ef-lbl{font-size:var(--fs-sm); font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em}
.mti-ef-count{font-size:var(--fs-xs); color:var(--color-muted); font-variant-numeric:tabular-nums}
.mti-ef-count.tone-ok{color:var(--mti-ok)} .mti-ef-count.tone-warn{color:var(--mti-warn)} .mti-ef-count.tone-bad{color:var(--mti-bad)}
.mti-ef-input{font:inherit; resize:vertical}
.mti-editor-actions{display:flex; gap:var(--sp-2)}

/* small ghost buttons (host .btn.btn-ghost) used for mini actions + code tabs */
.mti-mini{padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); font-weight:700; gap:var(--sp-2)}
.mti-mini svg{width:1em; height:1em}
.mti-mini.is-on{background:var(--color-primary); color:var(--color-primary-fg); border-color:var(--color-primary)}
.mti-mini.done{color:var(--mti-ok); border-color:var(--mti-ok)}

/* ---------- preview tab strip ---------- */
.mti-pv-tabs{display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:var(--sp-2); margin-bottom:var(--sp-4); scrollbar-width:thin}
.mti-pv-tab{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); flex:none;
  border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-muted); cursor:pointer;
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}
.mti-pv-tab:hover{border-color:var(--color-primary); color:var(--color-text)}
.mti-pv-tab.is-on{border-color:var(--color-primary); color:var(--color-text); background:var(--color-glow-faint); box-shadow:inset 0 0 0 1px var(--color-glow-soft)}
.mti-pv-ico{display:inline-flex; width:18px; height:18px}
.mti-pv-ico svg{width:18px; height:18px; display:block}

/* ---------- preview stage (host surface; cards inside are literal brand colours) ---------- */
.mti-pv-stage{padding:var(--sp-6); border-radius:var(--r-xl); border:1px solid var(--color-border);
  background:
    radial-gradient(120% 100% at 50% 0, transparent, var(--color-bg)),
    repeating-linear-gradient(45deg, var(--color-surface) 0 14px, var(--color-surface-2) 14px 28px);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); min-height:200px}
.mti-pv-warn{font-size:var(--fs-sm); color:var(--mti-warn); background:color-mix(in srgb, var(--mti-warn) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--mti-warn) 40%, transparent); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-md); max-width:34rem; text-align:center}

/* ====================== BRAND PREVIEW CARDS: literal hex on purpose ====================== */
/* These reproduce external platforms; they are intentionally NOT host-skinned. */
.mti-card{width:100%; max-width:524px; background:#fff; color:#1a1a1a; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-2); animation:mti-pop var(--dur) var(--ease) both}
@keyframes mti-pop{from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)}}
.mti-noimg{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3em;
  background:repeating-linear-gradient(45deg,#e9edf5 0 12px,#e1e6f0 12px 24px); color:#8a94a6; font-size:1.6em}
.mti-noimg-t{font-size:.5em; font-weight:600; letter-spacing:.03em}
.mti-imgerr{color:#c2693f; background:repeating-linear-gradient(45deg,#f6e7df 0 12px,#f0ddd2 12px 24px)}

/* Google */
.mti-g{background:#fff; padding:18px 18px 16px; max-width:600px}
.mti-g-top{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.mti-g-fav{width:26px; height:26px; border-radius:50%; border:1px solid #ececec; padding:4px; background:#f1f3f4; object-fit:contain; flex:none}
.mti-g-site{font-size:14px; color:#202124; line-height:1.2}
.mti-g-url{font-size:12px; color:#4d5156; line-height:1.3}
.mti-g-title{color:#1a0dab; font-size:20px; line-height:1.3; margin:2px 0 3px; font-family:arial,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mti-g-desc{color:#4d5156; font-size:14px; line-height:1.58; font-family:arial,sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* Facebook */
.mti-fb-img{width:100%; aspect-ratio:1.91/1; object-fit:cover; display:block; background:#e9edf5}
.mti-fb-body{background:#f2f3f5; padding:10px 12px; border-top:1px solid #dadde1}
.mti-fb-domain{font-size:12px; color:#606770; text-transform:uppercase; letter-spacing:.02em}
.mti-fb-title{font-size:17px; font-weight:600; color:#1c1e21; line-height:1.3; margin:3px 0 2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-fb-desc{font-size:14px; color:#606770; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* X / Twitter */
.mti-x{background:#000; border:1px solid #2f3336}
.mti-x-large{border-radius:16px}
.mti-x-imgwrap{position:relative}
.mti-x-img{width:100%; aspect-ratio:1.91/1; object-fit:cover; display:block; background:#16181c}
.mti-x-domain{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 8px; border-radius:6px; backdrop-filter:blur(2px)}
.mti-x-cap{color:#e7e9ea; font-size:15px; padding:10px 14px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mti-x-sum{display:flex; border-radius:16px}
.mti-x-sumimg{width:130px; height:130px; flex:none; object-fit:cover; border-right:1px solid #2f3336; background:#16181c}
.mti-x-sumbody{padding:10px 14px; min-width:0; display:flex; flex-direction:column; justify-content:center}
.mti-x-domain2{color:#71767b; font-size:13px}
.mti-x-title2{color:#e7e9ea; font-size:15px; font-weight:400; line-height:1.3; margin:1px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-x-desc2{color:#71767b; font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* LinkedIn */
.mti-li-img{width:100%; aspect-ratio:1.91/1; object-fit:cover; display:block; background:#e9edf5}
.mti-li-body{background:#fff; padding:10px 14px; border-top:1px solid #e0e0e0}
.mti-li-title{font-size:16px; font-weight:600; color:#000000d9; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-li-domain{font-size:12px; color:#00000099; margin-top:3px}

/* Pinterest */
.mti-pin{max-width:300px; background:transparent; box-shadow:none}
.mti-pin-imgwrap{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-2)}
.mti-pin-img{width:100%; display:block; object-fit:cover; background:#e9edf5; min-height:160px}
.mti-pin-save{position:absolute; top:10px; right:10px; background:#e60023; color:#fff; font-weight:700; font-size:13px; padding:6px 12px; border-radius:999px}
.mti-pin-title{color:var(--color-text); font-size:15px; font-weight:600; margin:9px 2px 1px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-pin-src{color:var(--color-muted); font-size:12px; margin:0 2px}

/* Slack */
.mti-slack{display:flex; background:#fff; border:1px solid #e8e8e8; padding:0}
.mti-slack-bar{width:4px; background:#1264a3; flex:none}
.mti-slack-body{padding:8px 12px 10px; min-width:0}
.mti-slack-site{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#1d1c1d}
.mti-slack-fav{width:16px; height:16px; border-radius:3px}
.mti-slack-title{color:#1264a3; font-size:15px; font-weight:700; line-height:1.3; margin:2px 0}
.mti-slack-desc{color:#1d1c1d; font-size:14px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.mti-slack-img{margin-top:8px; max-width:360px; width:100%; border-radius:8px; display:block; object-fit:cover; aspect-ratio:1.91/1}

/* Discord */
.mti-discord{display:flex; background:#2b2d31; border-radius:8px; padding:0; max-width:440px}
.mti-discord-bar{width:4px; background:#5865f2; border-radius:8px 0 0 8px; flex:none}
.mti-discord-body{padding:10px 14px 12px; min-width:0}
.mti-discord-site{color:#b5bac1; font-size:12px}
.mti-discord-title{color:#00a8fc; font-size:16px; font-weight:600; line-height:1.3; margin:2px 0}
.mti-discord-desc{color:#dbdee1; font-size:14px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.mti-discord-img{margin-top:10px; max-width:100%; width:100%; border-radius:6px; display:block; object-fit:cover; aspect-ratio:1.91/1}

/* WhatsApp */
.mti-wa-wrap{width:100%; max-width:380px; display:flex; flex-direction:column; gap:2px}
.mti-wa{max-width:none; background:#dcf8c6; border-radius:8px 8px 4px 8px; display:flex; flex-direction:column; box-shadow:var(--shadow-1)}
.mti-wa-img{width:100%; aspect-ratio:1.91/1; object-fit:cover; display:block; border-radius:8px 8px 0 0; background:#cfead8}
.mti-wa-body{padding:8px 10px}
.mti-wa-title{font-size:14px; font-weight:600; color:#111b21; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-wa-desc{font-size:13px; color:#3b4a54; line-height:1.35; margin:1px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-wa-host{font-size:12px; color:#667781}
.mti-wa-link{color:var(--color-accent-2); font-size:var(--fs-sm); padding:0 2px; word-break:break-all}

/* Instagram: DM link preview */
.mti-ig{background:#fff; max-width:400px; border-radius:14px}
.mti-ig-accent{height:3px; background:linear-gradient(90deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
.mti-ig-img{width:100%; aspect-ratio:1.91/1; object-fit:cover; display:block; background:#e9edf5}
.mti-ig-body{padding:10px 14px}
.mti-ig-title{font-size:14px; font-weight:600; color:#262626; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-ig-domain{font-size:12px; color:#8e8e8e; margin-top:3px}

/* TikTok: inbox/DM link card (dark) */
.mti-tt{background:#010101; border:1px solid #2f2f2f; max-width:400px}
.mti-tt-img{width:100%; aspect-ratio:1.91/1; object-fit:cover; display:block; background:#161616}
.mti-tt-body{padding:10px 14px}
.mti-tt-title{font-size:15px; font-weight:600; color:#fff; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mti-tt-domain{font-size:12px; color:#a1a1a1; margin-top:3px}
/* ==================== /brand preview cards ==================== */

/* ---------- audit ---------- */
.mti-audit-sum{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.mti-sumchip{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md);
  background:var(--color-surface); border:1px solid var(--color-border); font-size:var(--fs-sm); color:var(--color-muted)}
.mti-sumchip b{font-size:1.15em}
.mti-sumchip.lvl-bad{border-color:color-mix(in srgb, var(--mti-bad) 45%, transparent)} .mti-sumchip.lvl-bad b{color:var(--mti-bad)}
.mti-sumchip.lvl-warn{border-color:color-mix(in srgb, var(--mti-warn) 45%, transparent)} .mti-sumchip.lvl-warn b{color:var(--mti-warn)}
.mti-sumchip.lvl-good{border-color:color-mix(in srgb, var(--mti-ok) 45%, transparent)} .mti-sumchip.lvl-good b{color:var(--mti-ok)}
.mti-sumchip.lvl-info{border-color:color-mix(in srgb, var(--mti-info) 45%, transparent)} .mti-sumchip.lvl-info b{color:var(--mti-info)}
.mti-aud-list{display:flex; flex-direction:column; gap:var(--sp-2)}
.mti-aud-row{display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-md); background:var(--color-surface);
  border:1px solid var(--color-border); border-left-width:4px}
.mti-aud-row.lvl-bad{border-left-color:var(--mti-bad)}
.mti-aud-row.lvl-warn{border-left-color:var(--mti-warn)}
.mti-aud-row.lvl-info{border-left-color:var(--mti-info)}
.mti-aud-row.lvl-good{border-left-color:var(--mti-ok)}
.mti-aud-ico{flex:none; width:1.6em; height:1.6em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85em; color:var(--color-primary-fg)}
.lvl-bad .mti-aud-ico{background:var(--mti-bad)}
.lvl-warn .mti-aud-ico{background:var(--mti-warn)}
.lvl-info .mti-aud-ico{background:var(--mti-info)}
.lvl-good .mti-aud-ico{background:var(--mti-ok)}
.mti-aud-main{min-width:0}
.mti-aud-t{font-family:var(--font-display); font-weight:700; font-size:var(--fs-base)}
.mti-aud-d{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1); line-height:1.5}
.mti-aud-fix{display:flex; gap:var(--sp-2); align-items:baseline; margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--color-text)}
.mti-aud-fix-l{font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--color-primary-fg); background:var(--color-primary); padding:.15em .5em; border-radius:var(--r-sm); flex:none}

/* ---------- tags inspector ---------- */
.mti-tags{display:flex; flex-direction:column; gap:var(--sp-3)}
.mti-group{border:1px solid var(--color-border); border-radius:var(--r-lg); overflow:hidden; background:var(--color-surface)}
.mti-group.is-empty{opacity:.55}
.mti-grp-head{display:flex; align-items:center; justify-content:space-between; padding:var(--sp-2) var(--sp-4); background:var(--color-glow-faint)}
.mti-grp-name{font-family:var(--font-display); font-weight:700; font-size:var(--fs-base)}
.mti-grp-count{font-size:var(--fs-xs); font-weight:800; background:var(--color-primary); color:var(--color-primary-fg); padding:.1em .6em; border-radius:var(--r-full)}
.mti-grp-count.mut{background:var(--color-border); color:var(--color-muted)}
.mti-grp-body{display:flex; flex-direction:column}
.mti-row{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--color-border)}
.mti-key{flex:none; width:34%; max-width:160px; font-size:var(--fs-sm); font-weight:600; color:var(--color-muted); font-family:var(--font-mono); word-break:break-word}
.mti-val{flex:1; min-width:0; font-size:var(--fs-sm); color:var(--color-text); word-break:break-word; line-height:1.45}
.mti-val-url{color:var(--color-accent-2)}
.mti-val.tone-bad{color:var(--mti-bad)}
.mti-copy{flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:var(--r-sm); border:1px solid var(--color-border); background:var(--color-surface-2); color:var(--color-muted); cursor:pointer; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}
.mti-copy svg{width:15px; height:15px}
.mti-copy:hover{border-color:var(--color-primary); color:var(--color-text)}
.mti-copy.done{color:var(--mti-ok); border-color:var(--mti-ok)}

/* ---------- code generator ---------- */
.mti-code-top{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-2)}
.mti-codetabs{display:flex; gap:var(--sp-2)}
.mti-code-note{color:var(--color-muted); font-size:var(--fs-sm); margin:var(--sp-1) 0 var(--sp-3)}
.mti-pre{margin:0; padding:var(--sp-5) var(--sp-6); border-radius:var(--r-lg); background:var(--color-bg); border:1px solid var(--color-border); overflow:auto; max-height:460px}
.mti-pre code{font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.65; color:var(--color-text); white-space:pre}

/* ---------- responsive ---------- */
@media(max-width:560px){
  .mti-form{flex-direction:column}
  .mti-hero{flex-direction:column; text-align:center}
  .mti-hero-host,.mti-stats{justify-content:center}
  .mti-hero-title{-webkit-line-clamp:3}
  .mti-tab{font-size:var(--fs-xs); padding:var(--sp-2) var(--sp-1)}
  .mti-key{width:100%; max-width:none}
  .mti-row{flex-wrap:wrap}
  .mti-pv-tab .mti-pv-lbl{display:none}
}