.mp-preview { --mp-accent:#6366f1; --mp-accent-soft:rgba(99,102,241,.1); position:relative; z-index:1; container-type:inline-size; margin:0; width:100%; min-width:0; color:hsl(var(--foreground)); text-align:start; font-size:13px; line-height:1.5; }
.mp-preview *, .mp-preview *::before, .mp-preview *::after { box-sizing:border-box; }
.mp-preview-window { overflow:hidden; border:1px solid hsl(var(--border)); border-radius:22px; background:hsl(var(--card)); box-shadow:0 28px 85px -40px rgba(15,23,42,.4),0 0 0 5px hsl(var(--foreground)/.025); }
.mp-preview-icon { width:20px; height:20px; flex-shrink:0; }
.mp-preview-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 22px; border-bottom:1px solid hsl(var(--border)); background:hsl(var(--background)/.5); }
.mp-preview-brand { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700; letter-spacing:-.04em; }
.mp-preview-brandmark { display:flex; align-items:center; justify-content:center; width:29px; height:29px; background:var(--mp-accent); color:#fff; border-radius:9px; }
.mp-preview-brandmark svg { width:17px; height:17px; }
.mp-preview-demo { padding:4px 7px; border:1px solid hsl(var(--border)); border-radius:5px; color:hsl(var(--muted-foreground)); font-size:9px; line-height:1.5; letter-spacing:.09em; white-space:nowrap; }
.mp-preview-workspace { padding:24px; }
.mp-preview-breadcrumb { display:flex; align-items:center; gap:9px; margin-bottom:20px; color:hsl(var(--muted-foreground)); font-size:11px; flex-wrap:wrap; }
.mp-preview-breadcrumb > span:first-child { color:var(--mp-accent); font-weight:600; }
.mp-preview-heading { display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.mp-preview-heading > strong { flex:1 1 220px; font-size:21px; font-weight:650; letter-spacing:-.045em; line-height:1.35; }
.mp-preview-status { display:inline-flex; align-items:center; gap:6px; font-size:10px; white-space:nowrap; color:hsl(var(--muted-foreground)); }
.mp-preview-status i { width:5px; height:5px; background:#10b981; border-radius:50%; }
.mp-preview-order { display:flex; align-items:center; gap:13px; padding:18px; border:1px solid hsl(var(--border)); background:hsl(var(--background)); border-radius:13px; }
.mp-preview-order-icon { display:flex; width:47px; height:55px; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(145deg,var(--mp-accent-soft),hsl(var(--muted))); color:var(--mp-accent); }
.mp-preview-order-icon svg { width:26px; height:26px; }
.mp-preview-order > div { display:flex; flex:1; flex-direction:column; gap:3px; }
.mp-preview-order > div > small { font-size:8px; color:hsl(var(--muted-foreground)); letter-spacing:.08em; }
.mp-preview-order > div > strong { font-size:13px; font-weight:600; }
.mp-preview-order > div > span { font-size:10px; color:hsl(var(--muted-foreground)); }
.mp-preview-order > b { font-size:24px; letter-spacing:-.04em; white-space:nowrap; font-weight:650; font-variant-numeric:tabular-nums; }
.mp-preview-order > b small { font-size:14px; color:hsl(var(--muted-foreground)); }
.mp-preview-tabs { display:flex; gap:20px; margin:24px 0 20px; border-bottom:1px solid hsl(var(--border)); }
.mp-preview-tabs > span { padding:0 0 11px; color:hsl(var(--muted-foreground)); font-size:12px; }
.mp-preview-tabs > .is-selected { color:var(--mp-accent); box-shadow:0 2px 0 var(--mp-accent); font-weight:600; }
.mp-preview-credit-provider { display:flex; align-items:center; gap:12px; padding:18px; border:1px solid var(--mp-accent); border-radius:11px; background:var(--mp-accent-soft); }
.mp-preview-provider-icon { display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid hsl(var(--border)); border-radius:10px; color:var(--mp-accent); background:hsl(var(--card)); }
.mp-preview-credit-provider > div { display:flex; flex:1; flex-direction:column; gap:3px; }
.mp-preview-credit-provider strong { font-size:13px; font-weight:600; }
.mp-preview-credit-provider div > span { font-size:11px; color:hsl(var(--muted-foreground)); }
.mp-preview-radio { display:block; flex-shrink:0; width:15px; height:15px; border:1px solid hsl(var(--border)); border-radius:50%; }
.mp-preview-credit-provider .mp-preview-radio, .mp-preview-method.is-selected .mp-preview-radio { border:4px solid var(--mp-accent); }
.mp-preview-steps { display:flex; align-items:center; gap:10px; margin:24px 0; color:hsl(var(--muted-foreground)); font-size:10px; }
.mp-preview-steps span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.mp-preview-steps b { font-weight:500; }
.mp-preview-steps i { flex:1; height:1px; background:hsl(var(--border)); }
.mp-preview-steps .is-current { color:var(--mp-accent); font-weight:700; }
.mp-preview-steps .is-done { color:#059669; }
.mp-preview-action { display:flex; align-items:center; justify-content:center; gap:12px; padding:13px 10px; border-radius:10px; color:#fff; background:var(--mp-accent); font-weight:600; font-size:12px; }
.mp-preview-action > span { font-size:18px; line-height:1; }
.mp-preview-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 22px; border-top:1px solid hsl(var(--border)); background:hsl(var(--background)/.6); color:hsl(var(--muted-foreground)); font-size:9px; }
.mp-preview-bottom > span:first-child { display:flex; align-items:center; gap:6px; }
.mp-preview-bottom svg { width:12px; height:12px; }
.mp-preview-bottom > span:last-child { font-weight:600; }
.mp-preview figcaption { padding:13px 10px 0; font-size:10px; line-height:1.7; color:hsl(var(--muted-foreground)); text-align:center; text-wrap:pretty; }
.mp-preview-note { display:flex; align-items:center; gap:8px; margin-top:20px; padding:12px; border-radius:9px; color:hsl(var(--muted-foreground)); background:hsl(var(--muted)/.4); font-size:10px; line-height:1.7; }
.mp-preview-note svg { width:15px; height:15px; color:var(--mp-accent); }
.mp-preview-route-input { display:flex; align-items:center; gap:12px; padding:16px; border-radius:12px; background:hsl(var(--background)); border:1px solid hsl(var(--border)); }
.mp-preview-route-input > span { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; background:var(--mp-accent-soft); color:var(--mp-accent); }
.mp-preview-route-input > div { display:flex; flex:1; flex-direction:column; gap:4px; }
.mp-preview-route-input small { color:hsl(var(--muted-foreground)); font-size:10px; }
.mp-preview-route-input strong { display:flex; justify-content:space-between; gap:12px; font-weight:600; font-size:13px; }
.mp-preview-route-input b { font-weight:600; }
.mp-preview-route-engine { display:flex; align-items:center; flex-direction:column; }
.mp-preview-route-engine > i { display:block; width:1px; height:25px; background:linear-gradient(var(--mp-accent),hsl(var(--border))); }
.mp-preview-route-engine > div { display:grid; grid-template-columns:26px 1fr; gap:3px 9px; padding:15px 20px; min-width:210px; border:1px solid var(--mp-accent); border-radius:13px; background:var(--mp-accent-soft); }
.mp-preview-route-engine svg { grid-row:span 2; color:var(--mp-accent); align-self:center; }
.mp-preview-route-engine strong { font-size:14px; font-weight:600; }
.mp-preview-route-engine small { font-size:9px; color:hsl(var(--muted-foreground)); }
.mp-preview-route-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; position:relative; }
.mp-preview-route-options::before { content:""; position:absolute; top:-12px; left:16.66%; right:16.66%; height:12px; border:1px solid hsl(var(--border)); border-bottom:0; border-radius:9px 9px 0 0; }
.mp-preview-route-options > div { display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; padding:16px 6px; border:1px solid hsl(var(--border)); border-radius:11px; background:hsl(var(--background)); }
.mp-preview-option-dot { width:6px; height:6px; border-radius:50%; background:hsl(var(--muted-foreground)/.5); }
.mp-preview-route-options strong { font-size:11px; font-weight:600; }
.mp-preview-route-options small { font-size:9px; color:hsl(var(--muted-foreground)); }
.mp-preview-route-options .is-selected { border-color:var(--mp-accent); background:var(--mp-accent-soft); }
.mp-preview-route-options .is-selected .mp-preview-option-dot { background:var(--mp-accent); }
.mp-preview-rows { display:flex; flex-direction:column; }
.mp-preview-rows > div { display:flex; align-items:center; gap:11px; padding:14px 0; border-bottom:1px solid hsl(var(--border)); }
.mp-preview-rows > div:last-child { border-bottom:0; }
.mp-preview-row-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:33px; height:33px; border:1px solid hsl(var(--border)); border-radius:9px; color:var(--mp-accent); background:hsl(var(--background)); }
.mp-preview-row-icon svg { width:16px; height:16px; }
.mp-preview-rows > div > div { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.mp-preview-rows strong { font-size:12px; font-weight:550; }
.mp-preview-rows small { color:hsl(var(--muted-foreground)); font-size:10px; }
.mp-preview-rows b { max-width:38%; text-align:end; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.mp-preview-list-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 0 5px; font-size:12px; font-weight:600; }
.mp-preview-list-heading > span { color:hsl(var(--muted-foreground)); font-size:9px; font-weight:400; }
.mp-preview-balance { padding:24px; border-radius:15px; background:linear-gradient(125deg,#4338ca,#6366f1); color:#fff; }
.mp-preview-balance > span { font-size:11px; opacity:.8; }
.mp-preview-balance > strong { display:block; margin:12px 0 22px; font-size:41px; line-height:1; font-weight:600; letter-spacing:-.055em; }
.mp-preview-balance > strong small { font-size:24px; opacity:.7; }
.mp-preview-balance > div { display:flex; gap:20px; font-size:10px; opacity:.9; }
.mp-preview-balance > div > span { display:flex; align-items:center; gap:7px; }
.mp-preview-balance svg { width:15px; height:15px; }
.mp-preview-token-card { max-width:340px; margin:0 auto 20px; padding:24px; border:1px solid #8b8bf34d; border-radius:17px; color:#fff; background:radial-gradient(ellipse at 90% 0,rgba(99,102,241,.6),transparent 65%),#1e293b; box-shadow:0 16px 25px -20px #312e81; }
.mp-preview-token-card > div { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; }
.mp-preview-token-card > strong { display:block; margin:32px 0 15px; font-size:19px; font-weight:500; letter-spacing:.06em; white-space:nowrap; }
.mp-preview-token-card > small { font-size:8px; letter-spacing:.12em; color:#cbd5e1; }
.mp-preview-device-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:20px; margin-bottom:10px; }
.mp-preview-device-photo { display:flex; justify-content:center; padding:18px 8px; border:1px solid hsl(var(--border)); border-radius:14px; background:#fff; }
.mp-preview-device-photo img { width:100%; max-height:215px; height:auto; object-fit:contain; }
.mp-preview-device-order > small { font-size:10px; color:hsl(var(--muted-foreground)); }
.mp-preview-device-order > strong { display:block; margin:10px 0; font-size:28px; letter-spacing:-.05em; font-weight:600; }
.mp-preview-device-order strong small { font-size:16px; font-weight:400; }
.mp-preview-device-order p { font-size:10px; color:hsl(var(--muted-foreground)); line-height:1.7; }
.mp-preview-contactless { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:20px; color:var(--mp-accent); font-size:10px; }
.mp-preview-contactless svg { width:30px; height:30px; }
.mp-preview-world { display:flex; align-items:center; gap:20px; margin-bottom:15px; padding:24px 18px; background:radial-gradient(ellipse at top left,var(--mp-accent-soft),transparent 80%); border:1px solid hsl(var(--border)); border-radius:14px; }
.mp-preview-world > svg { width:63px; height:63px; color:var(--mp-accent); stroke-width:1; }
.mp-preview-world > div { display:flex; flex-direction:column; gap:8px; }
.mp-preview-world small { font-size:8px; letter-spacing:.09em; color:hsl(var(--muted-foreground)); }
.mp-preview-world strong { font-size:15px; font-weight:600; }
.mp-preview-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mp-preview-metrics > div { display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid hsl(var(--border)); border-radius:10px; background:hsl(var(--background)); }
.mp-preview-metrics small { font-size:9px; color:hsl(var(--muted-foreground)); }
.mp-preview-metrics strong { font-size:24px; font-weight:600; letter-spacing:-.04em; }
.mp-preview-chart { margin:22px 0 10px; }
.mp-preview-chart > div { display:flex; align-items:flex-end; height:100px; gap:7px; padding:0 6px; border-bottom:1px solid hsl(var(--border)); background:repeating-linear-gradient(0deg,transparent,transparent 32px,hsl(var(--border)/.3) 32px,hsl(var(--border)/.3) 33px); }
.mp-preview-chart i { flex:1; height:var(--bar); border-radius:4px 4px 0 0; background:var(--mp-accent); opacity:.65; }
.mp-preview-chart i:nth-child(3n) { opacity:1; }
.mp-preview-chart > span { display:block; margin-top:8px; font-size:9px; color:hsl(var(--muted-foreground)); }
.mp-preview-console { padding:18px; border:1px solid #334155; border-radius:12px; background:#0b1220; color:#e2e8f0; font-size:10px; }
.mp-preview-console > div:first-child { display:flex; align-items:center; gap:7px; margin-bottom:22px; font-size:8px; color:#94a3b8; }
.mp-preview-console > div:first-child > span { width:5px; height:5px; border-radius:50%; background:#34d399; }
.mp-preview-console b { margin-inline-start:auto; font-weight:400; }
.mp-preview-console p { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:10px 0; border-bottom:1px solid #1e293b; font-family:ui-monospace,SFMono-Regular,monospace; }
.mp-preview-console time { color:#64748b; }
.mp-preview-console code { color:#a5b4fc; }
.mp-preview-console p > span { margin-inline-start:auto; color:#6ee7b7; }
.mp-preview-console-footer { display:flex; align-items:center; margin-top:20px; color:#94a3b8; font-size:9px; }
.mp-preview-console-footer i { width:6px; height:11px; margin-inline-start:auto; background:#a5b4fc; }
.mp-preview-timeline > div { display:flex; align-items:center; gap:13px; position:relative; padding:18px 0; }
.mp-preview-timeline > div:not(:last-child)::after { content:""; position:absolute; width:1px; height:26px; background:hsl(var(--border)); top:calc(50% + 19px); inset-inline-start:18px; }
.mp-preview-step-number { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:37px; height:37px; border:1px solid var(--mp-accent); color:var(--mp-accent); border-radius:11px; background:var(--mp-accent-soft); font-size:10px; font-weight:600; }
.mp-preview-timeline > div > div { flex:1; }
.mp-preview-timeline strong { font-size:13px; font-weight:600; }
.mp-preview-timeline p { font-size:11px; color:hsl(var(--muted-foreground)); margin:4px 0 0; }
.mp-preview-timeline b { font-size:10px; color:var(--mp-accent); font-weight:500; }
.mp-preview-signal-strip { display:flex; gap:12px; align-items:center; margin-top:20px; padding:14px; border:1px dashed hsl(var(--border)); border-radius:10px; color:hsl(var(--muted-foreground)); font-size:11px; line-height:1.7; }
.mp-preview-signal-strip svg { color:var(--mp-accent); }
.mp-preview-summary-icon { display:flex; align-items:center; gap:15px; padding:22px; margin-bottom:12px; border:1px solid hsl(var(--border)); border-radius:13px; background:var(--mp-accent-soft); }
.mp-preview-summary-icon > svg { width:38px; height:38px; color:var(--mp-accent); stroke-width:1.2; }
.mp-preview-summary-icon > div { display:flex; flex-direction:column; gap:8px; }
.mp-preview-summary-icon small { font-size:10px; color:hsl(var(--muted-foreground)); }
.mp-preview-summary-icon strong { font-size:24px; font-weight:600; letter-spacing:-.035em; }
.mp-preview-allocation-bar { display:flex; gap:5px; height:7px; margin:18px 0 4px; }
.mp-preview-allocation-bar i:first-child { flex:1.4; background:var(--mp-accent); border-radius:4px; }
.mp-preview-allocation-bar i:last-child { flex:1; background:#14b8a6; border-radius:4px; }
.mp-preview-method-list { display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.mp-preview-method { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid hsl(var(--border)); border-radius:10px; background:hsl(var(--background)); }
.mp-preview-method > svg { color:var(--mp-accent); width:17px; height:17px; }
.mp-preview-method strong { flex:1; font-size:12px; font-weight:500; }
.mp-preview-method.is-selected { border-color:var(--mp-accent); background:var(--mp-accent-soft); }
.mp-preview-form { display:flex; flex-direction:column; gap:14px; margin:22px 0; }
.mp-preview-form > div:not(.mp-preview-form-pair), .mp-preview-form-pair > div { display:flex; flex:1; flex-direction:column; gap:7px; min-width:0; }
.mp-preview-form small { font-size:10px; color:hsl(var(--muted-foreground)); }
.mp-preview-form span { display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border:1px solid hsl(var(--border)); border-radius:8px; background:hsl(var(--background)); font-size:12px; }
.mp-preview-form svg { width:17px; height:17px; color:hsl(var(--muted-foreground)); }
.mp-preview-form-pair { display:flex; gap:12px; }
.mp-preview-link-card { display:flex; align-items:center; gap:18px; margin-top:22px; padding:22px 16px; border:1px solid hsl(var(--border)); border-radius:13px; }
.mp-preview-qr { display:flex; justify-content:center; align-items:center; padding:12px; background:#fff; border-radius:10px; color:#111827; }
.mp-preview-qr > svg { width:67px; height:67px; stroke-width:1.3; }
.mp-preview-link-card strong { font-size:14px; font-weight:600; }
.mp-preview-link-card p { margin:7px 0 12px; color:hsl(var(--muted-foreground)); font-size:11px; }
.mp-preview-link-card code { font-size:10px; padding:4px 7px; border-radius:5px; background:var(--mp-accent-soft); color:var(--mp-accent); }
.mp-preview-floor > div:last-child { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:18px 0; }
.mp-preview-floor > div:last-child > span { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:13px 8px; border:1px solid hsl(var(--border)); border-radius:9px; background:hsl(var(--background)); color:hsl(var(--muted-foreground)); }
.mp-preview-floor strong { font-size:10px; font-weight:500; }
.mp-preview-floor .is-selected { border-color:var(--mp-accent) !important; background:var(--mp-accent-soft) !important; color:var(--mp-accent) !important; }
.mp-preview-concept { display:flex; align-items:center; flex-direction:column; gap:14px; padding:24px 12px; text-align:center; }
.mp-preview-concept > span { display:flex; align-items:center; justify-content:center; width:124px; height:124px; margin-bottom:12px; border:1px solid var(--mp-accent); border-radius:50%; box-shadow:0 0 0 12px var(--mp-accent-soft),0 0 0 25px hsl(var(--border)/.4); color:var(--mp-accent); }
.mp-preview-concept svg { width:54px; height:54px; stroke-width:1; }
.mp-preview-concept small { color:var(--mp-accent); font-size:8px; letter-spacing:.1em; }
.mp-preview-concept strong { font-size:17px; font-weight:600; }
.mp-preview-concept p { font-size:11px; color:hsl(var(--muted-foreground)); margin:0; }
.mp-preview--wallet { --mp-accent:#0d9488; --mp-accent-soft:rgba(13,148,136,.1); }
.mp-preview--risk { --mp-accent:#d97706; --mp-accent-soft:rgba(217,119,6,.1); }
.mp-preview--matching, .mp-preview--iot, .mp-preview--fleet { --mp-accent:#0891b2; --mp-accent-soft:rgba(8,145,178,.1); }
html.dark .mp-preview { --mp-accent:#a5b4fc; --mp-accent-soft:rgba(129,140,248,.09); }
html.dark .mp-preview-brandmark, html.dark .mp-preview-action { background:#6366f1; }
html.dark .mp-preview--wallet { --mp-accent:#5eead4; --mp-accent-soft:rgba(45,212,191,.08); }
html.dark .mp-preview--risk { --mp-accent:#fbbf24; --mp-accent-soft:rgba(251,191,36,.08); }
html.dark .mp-preview--matching, html.dark .mp-preview--iot, html.dark .mp-preview--fleet { --mp-accent:#67e8f9; --mp-accent-soft:rgba(34,211,238,.08); }
@container (max-width:360px) {
    .mp-preview-topbar { padding:14px; }
    .mp-preview-workspace { padding:16px; }
    .mp-preview-heading > strong { font-size:20px; }
    .mp-preview-order { padding:12px; gap:9px; }
    .mp-preview-order > b { font-size:21px; }
    .mp-preview-order-icon { width:35px; height:45px; }
    .mp-preview-order-icon svg { width:21px; height:21px; }
    .mp-preview-order > div > strong { font-size:11px; }
    .mp-preview-credit-provider { padding:12px; gap:9px; }
    .mp-preview-credit-provider strong { font-size:11px; }
    .mp-preview-provider-icon { width:30px; height:34px; }
    .mp-preview-steps { gap:7px; font-size:9px; }
    .mp-preview-bottom { padding:12px 14px; }
    .mp-preview-bottom > span:last-child { display:none; }
    .mp-preview-route-options { gap:6px; }
    .mp-preview-route-options strong { font-size:10px; }
    .mp-preview-route-options small { font-size:8px; }
    .mp-preview-token-card { padding:18px; }
    .mp-preview-token-card > strong { font-size:15px; }
    .mp-preview-rows strong { font-size:11px; }
    .mp-preview-rows b { font-size:10px; }
    .mp-preview-world { gap:14px; padding:18px 12px; }
    .mp-preview-world > svg { width:44px; height:44px; }
    .mp-preview-world strong { font-size:13px; }
    .mp-preview-metrics { gap:7px; }
    .mp-preview-metrics > div { padding:10px; }
    .mp-preview-metrics small { font-size:8px; }
    .mp-preview-metrics strong { font-size:20px; }
    .mp-preview-link-card { gap:12px; padding:16px 12px; }
    .mp-preview-qr { padding:8px; }
    .mp-preview-qr > svg { width:48px; height:48px; }
    .mp-preview-link-card strong { font-size:12px; }
    .mp-preview-console { padding:14px; font-size:9px; }
}