/* ───────────── MTClean pages — teal palette on top of base.css / site.css ───────────── */
html.mtc{
  --primary:#0fb890;--primary-2:#0ea5e9;--indigo:#0fb890;--violet:#0ea5e9;
  --grad:linear-gradient(135deg,#5ef2c6 0%,#19d3a2 45%,#0ea5e9 100%);
  --grad-soft:linear-gradient(135deg,rgba(25,211,162,.14),rgba(14,165,233,.10));
  --ring:0 0 0 3px rgba(25,211,162,.28);
  --primary-bg:#ecfdf7;
}
html.mtc[data-theme="dark"]{
  --bg:#070d17;--surface:#0f1a2a;--surface-2:#152238;--surface-3:#1d2d47;--border:#1e2b41;--border-2:#2a3a57;
  --primary-bg:rgba(25,211,162,.12);
}
html.mtc ::selection{background:rgba(25,211,162,.3)}
html.mtc .btn-primary{color:#06101b;box-shadow:0 10px 24px -10px rgba(25,211,162,.7)}
html.mtc .btn-primary svg{color:#06101b}
html.mtc .site-nav .brand img{box-shadow:0 4px 12px rgba(0,0,0,.25)}
html.mtc .hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html.mtc .mtc-hero::before{background:radial-gradient(60% 60% at 80% 10%,rgba(25,211,162,.22),transparent 60%),radial-gradient(40% 50% at 10% 90%,rgba(14,165,233,.18),transparent 60%)}
html.mtc .feature .ic{background:var(--grad-soft);color:var(--primary)}
html.mtc .price.featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow-lg)}
html.mtc .price .badge{background:var(--grad);color:#06101b}
html.mtc .badge-primary{background:var(--primary-bg);color:var(--primary)}
html.mtc .mtc-cta{background:linear-gradient(135deg,#0b1a2b,#0e2a3a 55%,#0fb890 170%)}
html.mtc .step::before{background:var(--grad);color:#06101b}

/* license key */
.mtc-key{margin:18px auto 10px;padding:16px 18px;border-radius:14px;background:var(--primary-bg);border:1px dashed var(--primary);color:var(--primary);font-family:var(--mono);font-size:22px;font-weight:800;letter-spacing:2px;direction:ltr;text-align:center;word-break:break-all;user-select:all}
.mtc-feat-list{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:14px}
.mtc-feat-list li{display:flex;align-items:center;gap:8px;color:var(--text-2)}
.mtc-feat-list svg{color:var(--primary);flex:none}
.mtc-buy{max-width:560px}
@media (max-width:560px){.mtc-feat-list{grid-template-columns:1fr}}

/* app mock window */
.mtc-window{width:100%;max-width:560px;aspect-ratio:16/10.5;border-radius:18px;overflow:hidden;background:#0b1424;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(25,211,162,.15);color:#f2f6fa;font-size:11px;display:flex;flex-direction:column;position:relative}
.mtc-window::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 40% at 75% 10%,rgba(25,211,162,.18),transparent 60%);pointer-events:none}
.mtc-win-bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;flex-direction:row-reverse;justify-content:flex-end}
.mtc-win-bar i{width:9px;height:9px;border-radius:50%;background:#3a4556}
.mtc-win-bar i:nth-child(1){background:#ff5f57}.mtc-win-bar i:nth-child(2){background:#febc2e}.mtc-win-bar i:nth-child(3){background:#28c840}
.mtc-win-body{flex:1;display:flex;min-height:0}
.mtc-side{width:34%;background:rgba(8,15,27,.8);border-inline-start:1px solid rgba(255,255,255,.06);padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.mtc-side-brand{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12px}
.mtc-side-brand .m{width:20px;height:20px;border-radius:6px;background:var(--grad);color:#06101b;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:11px}
.mtc-side-item{padding:6px 8px;border-radius:8px;color:#9aa8bd}
.mtc-side-item.active{background:rgba(25,211,162,.14);color:#f2f6fa;border:1px solid rgba(25,211,162,.35)}
.mtc-side-disk{margin-top:auto;font-size:9.5px;color:#9aa8bd}
.mtc-side-disk .bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);margin:5px 0}
.mtc-side-disk .bar i{display:block;height:100%;border-radius:3px;background:#ff5c7a}
.mtc-main{flex:1;padding:10px 12px;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;align-content:start}
.mtc-ring{position:relative;width:100%;aspect-ratio:1;max-width:120px;margin:0 auto}
.mtc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mtc-ring .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9}
.mtc-ring .arc{fill:none;stroke:url(#mtcgrad);stroke:#19d3a2;stroke-width:9;stroke-linecap:round}
.mtc-ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.mtc-ring .v b{font-size:16px}.mtc-ring .v small{font-size:8px;color:#9aa8bd}
.mtc-rows{display:flex;flex-direction:column;gap:5px}
.mtc-row{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.mtc-row .cb{width:11px;height:11px;border-radius:3px;border:1.5px solid #5c6b82;flex:none}
.mtc-row .cb.on{background:#19d3a2;border-color:#19d3a2}
.mtc-row .n{flex:1;color:#e6edf5}.mtc-row .s{color:#9aa8bd;font-variant-numeric:tabular-nums}
.mtc-clean{grid-column:1/-1;margin-top:2px;padding:8px;border-radius:999px;background:var(--grad);color:#06101b;text-align:center;font-weight:800;font-size:11px;box-shadow:0 8px 20px -8px rgba(25,211,162,.8)}
html.mtc .mock-badge.b1{color:#0fb890}
html.mtc .mock-badge.b2{color:#0ea5e9}