/* EcuEdit – racing theme: anthracite + red */
:root{
  --bg:#0b0b0d; --panel:#141417; --panel2:#1b1b20; --line:#26262c; --line2:#34343b;
  --text:#f3f3f3; --muted:#9b9ba3; --dim:#64646c;
  --red:#e10600; --red2:#ff2b1c; --red-soft:rgba(225,6,0,.12);
  --ok:#2fd16f; --warn:#ffb020; --info:#4aa3ff;
  --head:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --cut:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px)}
a{color:var(--red2); text-decoration:none} a:hover{color:#fff}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.narrow{max-width:440px; margin:0 auto}
.muted{color:var(--muted)} .dim{color:var(--dim)} .mono{font-family:var(--mono)}

/* top bar */
.topbar{background:#08080a; border-bottom:3px solid var(--red); position:sticky; top:0; z-index:10}
header.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; flex-wrap:wrap}
.logo{font:800 26px/1 var(--head); letter-spacing:1px; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:0}
.logo b{background:var(--red); color:#fff; padding:3px 12px 3px 10px; margin-left:4px; clip-path:var(--cut); font-weight:800}
.logo:hover{color:#fff}
nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
nav a{font:600 15px/1 var(--head); letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:10px 12px}
nav a:hover,nav a.on{color:#fff}
nav a.cta{background:var(--red); color:#fff; clip-path:var(--cut); padding:10px 20px}
nav a.cta:hover{background:var(--red2)}

/* hero */
.hero{position:relative; padding:64px 0 46px; overflow:hidden}
.hero::after{content:""; position:absolute; right:-120px; top:-40px; width:520px; height:140%; background:linear-gradient(90deg,transparent,var(--red-soft)); transform:skewX(-18deg); pointer-events:none}
.hero::before{content:""; position:absolute; right:60px; top:0; width:14px; height:100%; background:var(--red); transform:skewX(-18deg); opacity:.85}
.eyebrow{font:700 14px/1 var(--head); letter-spacing:4px; text-transform:uppercase; color:var(--red2)}
h1{font:800 clamp(52px,9vw,104px)/.9 var(--head); text-transform:uppercase; letter-spacing:-1px; margin:14px 0 18px; position:relative; z-index:1}
h1 span{color:var(--red)}
.bar{width:120px; height:6px; background:var(--red); margin:0 0 20px; clip-path:var(--cut)}
.tagline{font:700 22px/1.2 var(--head); letter-spacing:3px; text-transform:uppercase; color:#fff; margin:0 0 10px}
.lead{color:var(--muted); max-width:560px; margin:0; font-size:16px; position:relative; z-index:1}
.page-h{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:30px 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.page-h h1{font-size:44px; margin:0; letter-spacing:0}
.page-h p{margin:6px 0 0; color:var(--muted)}

/* cards */
.card{background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--line2); padding:24px; margin-bottom:18px; position:relative}
.card.hot{border-top-color:var(--red)}
.card h2{font:700 24px/1.1 var(--head); text-transform:uppercase; letter-spacing:.8px; margin:0 0 6px}
.card .sub{margin:0 0 20px; color:var(--muted); font-size:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:860px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* forms */
label.f{display:block; font:700 13px/1 var(--head); letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.field{margin-bottom:16px}
input.in,select.in,textarea.in{width:100%; padding:13px 14px; font:inherit; color:var(--text); background:var(--panel2); border:1px solid var(--line2); border-radius:0; outline:none; transition:.15s}
textarea.in{min-height:96px; resize:vertical}
textarea.code{font-family:var(--mono); font-size:13px; min-height:260px}
.in:focus{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.hint{font-size:13px; color:var(--dim); margin-top:7px}
.drop{border:2px dashed var(--line2); padding:28px 20px; text-align:center; cursor:pointer; transition:.15s; background:var(--panel2);
  min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px}
.drop:hover,.drop.over{border-color:var(--red); background:#1e1416}
.drop .ic{width:52px; height:52px; display:grid; place-items:center; background:var(--red); color:#fff; margin-bottom:8px; clip-path:var(--cut)}
.drop strong{font:700 19px/1.2 var(--head); letter-spacing:1px; text-transform:uppercase}
.drop small{color:var(--dim)}
.drop.has strong{color:#fff; font:600 14px var(--mono); text-transform:none; word-break:break-all}

.btn{appearance:none; border:0; cursor:pointer; font:700 17px/1 var(--head); letter-spacing:1.5px; text-transform:uppercase; padding:15px 28px;
  display:inline-flex; align-items:center; gap:10px; justify-content:center; color:#fff; transition:.15s; clip-path:var(--cut)}
.btn-gold,.btn-red{background:var(--red); color:#fff}
.btn-gold:hover,.btn-red:hover{background:var(--red2); color:#fff}
.btn-gold:disabled,.btn-red:disabled{background:#3a1d1d; color:#8a6b6b; cursor:not-allowed}
.btn-ghost{background:var(--panel2); color:#fff; box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost:hover{background:#26262c; color:#fff}
.btn-danger{background:transparent; color:var(--red2); box-shadow:inset 0 0 0 1px var(--red)}
.btn-danger:hover{background:var(--red-soft); color:#fff}
.btn-sm{padding:9px 16px; font-size:14px}
.btn-block{width:100%}
.actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px; flex-wrap:wrap}
.spin{width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:r .8s linear infinite}
@keyframes r{to{transform:rotate(360deg)}}

.alert{padding:12px 16px; font-size:14px; margin:18px 0; border-left:4px solid; background:var(--panel)}
.alert.ok{border-color:var(--ok); color:#bff3d3}
.alert.err{border-color:var(--red); color:#ffc2bd}
.alert.info{border-color:var(--warn); color:#ffe2a8}

/* chips & badges */
.chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.chip{font-size:13px; padding:6px 12px; background:var(--panel2); border:1px solid var(--line2); color:var(--muted)}
.chip b{color:#fff; font-weight:600}
.chip.g{background:var(--red); border-color:var(--red); color:#fff; font:700 15px/1.1 var(--head); letter-spacing:1px; text-transform:uppercase}
.status{display:inline-block; font:700 13px/1 var(--head); letter-spacing:1.2px; text-transform:uppercase; padding:6px 10px; white-space:nowrap; border-left:3px solid}
.s-select{color:var(--info); border-color:var(--info); background:rgba(74,163,255,.08)}
.s-review{color:var(--warn); border-color:var(--warn); background:rgba(255,176,32,.08)}
.s-ready{color:#fff; border-color:var(--red); background:var(--red-soft)}
.s-paid{color:var(--ok); border-color:var(--ok); background:rgba(47,209,111,.08)}
.s-rejected{color:var(--dim); border-color:var(--dim); background:rgba(255,255,255,.03)}
.sup{font:700 12px/1 var(--head); letter-spacing:1px; text-transform:uppercase; padding:5px 8px}
.sup-verified{color:#fff; background:var(--red)}
.sup-davinci{color:var(--ok); background:rgba(47,209,111,.1)}
.sup-unknown{color:var(--warn); background:rgba(255,176,32,.1)}
.paid-yes{color:var(--ok); font-weight:600} .paid-no{color:var(--dim)}

/* tables */
.tbl{border:1px solid var(--line); background:var(--panel); overflow:auto}
.tbl.scroll{max-height:480px}
table{width:100%; border-collapse:collapse; font-size:14px}
thead th{position:sticky; top:0; z-index:1; background:#0f0f12; text-align:left; font:700 13px/1 var(--head); letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); padding:13px 14px; border-bottom:2px solid var(--red); white-space:nowrap}
tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.link{cursor:pointer} tbody tr.link:hover{background:#1a1a1f}
td.code{font-family:var(--mono); font-weight:600; color:#fff; white-space:nowrap}
.pick tbody tr{cursor:pointer} .pick tbody tr:hover{background:#1a1a1f} .pick tr.sel{background:#22100f}
.pick tr.sel td.code{color:var(--red2)}
.pill{font:700 13px/1 var(--head); letter-spacing:1.2px; padding:6px 12px; background:var(--panel2); color:var(--ok); box-shadow:inset 0 0 0 1px var(--line2); display:inline-block; min-width:56px; text-align:center}
tr.sel .pill{color:#fff; background:var(--red); box-shadow:none}
.ck{appearance:none; width:20px; height:20px; border:2px solid var(--line2); display:grid; place-items:center; cursor:pointer; margin:0; background:var(--panel2)}
.ck:checked{background:var(--red); border-color:var(--red)}
.ck:checked::after{content:""; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg)}
.empty{padding:40px; text-align:center; color:var(--dim)}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar .in{flex:1; min-width:200px}

/* misc */
dl.kv{display:grid; grid-template-columns:150px 1fr; gap:10px 16px; margin:0; font-size:14px}
dl.kv dt{font:700 13px/1.5 var(--head); letter-spacing:1.2px; text-transform:uppercase; color:var(--dim)}
dl.kv dd{margin:0; word-break:break-word}
.timeline{list-style:none; margin:0; padding:0; font-size:13.5px}
.timeline li{padding:8px 0 8px 18px; border-left:2px solid var(--line2); position:relative; color:var(--muted)}
.timeline li::before{content:""; position:absolute; left:-5px; top:14px; width:8px; height:8px; background:var(--red)}
.timeline time{display:block; font-size:12px; color:var(--dim)}
pre.report{background:#0e0e11; border:1px solid var(--line); padding:16px; font:12.5px/1.6 var(--mono); color:var(--muted); overflow:auto; max-height:380px; margin:0}
.price{font:800 48px/1 var(--head); color:#fff}
.price small{font-size:20px; color:var(--muted)}
.codes{display:flex; flex-wrap:wrap; gap:6px}
.codes span{font:600 12.5px var(--mono); padding:5px 9px; background:var(--red-soft); border-left:2px solid var(--red); color:#fff}
.stat{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--red); padding:16px 18px}
.stat .n{font:800 36px/1 var(--head); color:#fff}
.stat .l{font:700 13px/1 var(--head); letter-spacing:1.4px; text-transform:uppercase; color:var(--dim); margin-top:6px}
.feat{background:var(--panel); border:1px solid var(--line); padding:22px; position:relative}
.feat i{font:800 46px/1 var(--head); color:var(--red); font-style:normal; display:block; margin-bottom:8px}
.feat b{display:block; font:700 20px/1.1 var(--head); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px}
.feat span{color:var(--muted); font-size:14px}
.steps{display:flex; gap:0; margin:0 0 18px; flex-wrap:wrap}
.step{font:700 15px/1 var(--head); letter-spacing:1.4px; text-transform:uppercase; color:var(--dim); background:var(--panel); padding:12px 26px 12px 20px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%); margin-right:-6px}
.step:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.step.on{background:var(--red); color:#fff} .step.done{color:#fff; background:#2a2a30}
footer{margin-top:50px; padding:24px 0 34px; border-top:1px solid var(--line); color:var(--dim); font-size:13px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
footer a{color:var(--dim)}
[hidden]{display:none!important}

/* service picker */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
.svc{display:flex; align-items:center; gap:12px; padding:14px; background:var(--panel2); border:1px solid var(--line2); cursor:pointer; transition:.12s; user-select:none}
.svc:hover{border-color:#55555e}
.svc.on{border-color:var(--red); background:#22100f}
.svc-name{flex:1; font:700 17px/1.1 var(--head); letter-spacing:.8px; text-transform:uppercase}
.svc-tag{font:700 11px/1 var(--head); letter-spacing:1.2px; text-transform:uppercase; padding:4px 7px; color:var(--dim); background:rgba(255,255,255,.04)}
.svc.sup-ok .svc-tag{color:var(--ok); background:rgba(47,209,111,.1)}
.svc-badges{display:flex; flex-wrap:wrap; gap:4px}
.svc-badges span{font:700 11.5px/1 var(--head); letter-spacing:1px; text-transform:uppercase; padding:4px 7px; background:var(--panel2); color:var(--muted); border:1px solid var(--line2)}

/* instant detection */
.detect{margin-top:12px; padding:14px 16px; background:var(--panel2); border:1px solid var(--line2); border-left:4px solid var(--line2); font-size:14px; color:var(--muted); display:flex; flex-direction:column; gap:8px}
.detect .spin{display:inline-block; vertical-align:-3px; margin-right:6px}
.detect.ok{border-left-color:var(--ok)}
.detect.warn{border-left-color:var(--warn); color:#ffe2a8}
.det-h{font:700 20px/1.1 var(--head); letter-spacing:1px; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.det-h b{color:var(--red2)}
.det-m b{color:#fff; font-family:var(--mono); font-weight:600}

/* ===== Premium order page ===== */
.pm{--pr:18px; padding-top:34px}
.pm-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.pm-eyebrow{font:600 12px/1 Inter,sans-serif; letter-spacing:2.5px; text-transform:uppercase; color:var(--red2)}
.pm-title{font:800 clamp(40px,6vw,60px)/1 var(--head); letter-spacing:1px; margin:8px 0 6px; text-transform:uppercase}
.pm-meta{color:var(--muted); font-size:14px}
.pm .status{border-radius:99px; border:0; font:600 12.5px/1 Inter,sans-serif; letter-spacing:.2px; text-transform:none; padding:8px 14px 8px 12px; display:inline-flex; align-items:center; gap:7px}
.pm .status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor}

.pm-steps{list-style:none; display:flex; gap:0; margin:28px 0 26px; padding:0; counter-reset:s}
.pm-steps li{flex:1; display:flex; align-items:center; gap:12px; color:var(--dim); font:600 14px/1.2 Inter,sans-serif; position:relative; padding-right:16px}
.pm-steps li::after{content:""; flex:1; height:2px; background:var(--line2); border-radius:2px; margin-left:4px}
.pm-steps li:last-child::after{display:none}
.pm-steps li span{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line2); font-size:13px; color:var(--muted); background:var(--bg)}
.pm-steps li.on{color:#fff} .pm-steps li.on span{border-color:var(--red); background:var(--red); color:#fff; box-shadow:0 0 0 5px rgba(225,6,0,.18)}
.pm-steps li.done{color:#d6d6da} .pm-steps li.done span{border-color:var(--red); color:var(--red2)} .pm-steps li.done::after{background:linear-gradient(90deg,var(--red),var(--line2))}
@media (max-width:640px){.pm-steps li{font-size:0; gap:0} .pm-steps li span{font-size:13px}}

.pm-layout{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:start}
@media (max-width:980px){.pm-layout{grid-template-columns:1fr}}
.pm-side{position:sticky; top:90px; display:flex; flex-direction:column; gap:12px}
@media (max-width:980px){.pm-side{position:static}}
.pm-two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:760px){.pm-two{grid-template-columns:1fr}}

.pm-card{position:relative; background:linear-gradient(180deg,#161619,#111114); border:1px solid #232328; border-radius:var(--pr); padding:24px;
  margin-bottom:18px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -34px rgba(0,0,0,.9)}
.pm-card-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:16px}
.pm-card-h h2{font:700 18px/1.2 Inter,sans-serif; letter-spacing:-.2px; margin:0; text-transform:none}
.pm-card-h span{color:var(--dim); font-size:13px}
.pm-group{font:600 11.5px/1 Inter,sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:var(--dim); margin:22px 0 12px}
.pm-card-h + .pm-group{margin-top:4px}
.pm .in{border-radius:12px}

/* ECU hero card */
.pm-ecu{display:grid; grid-template-columns:auto 1fr; gap:18px 20px; align-items:center; overflow:hidden}
.pm-ecu::after{content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(225,6,0,.16),transparent 65%); pointer-events:none}
.pm-ecu-ic{width:64px; height:64px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#ff3b2f,#a30a04); box-shadow:0 12px 30px -10px rgba(225,6,0,.7)}
.pm-ecu-name small{display:block; color:var(--muted); font-size:12.5px; letter-spacing:.3px}
.pm-ecu-name strong{display:inline-block; font:800 36px/1.05 var(--head); letter-spacing:1px; color:#fff; margin:2px 12px 0 0; vertical-align:middle}
.pm-sup{display:inline-block; vertical-align:middle; font:600 12px/1 Inter,sans-serif; padding:6px 10px; border-radius:99px}
.pm-sup-verified{background:var(--red); color:#fff}
.pm-sup-davinci{background:rgba(47,209,111,.12); color:var(--ok)}
.pm-sup-unknown{background:rgba(255,176,32,.12); color:var(--warn)}
.pm-ecu-grid{grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0}
@media (max-width:640px){.pm-ecu-grid{grid-template-columns:1fr 1fr}}
.pm-ecu-grid div{background:rgba(255,255,255,.03); border:1px solid #232328; border-radius:12px; padding:12px 14px; min-width:0}
.pm-ecu-grid dt{font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; font-weight:600}
.pm-ecu-grid dd{margin:4px 0 0; font:600 15px/1.3 var(--mono); color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* service cards */
.pm-svcs{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.pm-svc{position:relative; display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; cursor:pointer; user-select:none;
  background:rgba(255,255,255,.025); border:1px solid #26262c; transition:border-color .15s, background .15s, transform .15s}
.pm-svc:hover{border-color:#3a3a42; transform:translateY(-1px)}
.pm-svc input{position:absolute; opacity:0; pointer-events:none}
.pm-svc-ic{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.05); color:var(--muted); transition:.15s}
.pm-svc.is-sup .pm-svc-ic{color:#fff}
.pm-svc-txt{flex:1; min-width:0; display:flex; flex-direction:column}
.pm-svc-txt b{font:600 14.5px/1.25 Inter,sans-serif; color:#fff}
.pm-svc-txt small{font-size:12px; color:var(--dim); margin-top:2px}
.pm-svc.is-sup .pm-svc-txt small{color:var(--ok)}
.pm-svc-price{font:600 13.5px/1 var(--mono); color:var(--muted)}
.pm-svc-ck{flex:none; width:22px; height:22px; border-radius:7px; border:2px solid #3a3a42; display:grid; place-items:center; transition:.15s}
.pm-svc.on{border-color:var(--red); background:linear-gradient(135deg,rgba(225,6,0,.16),rgba(225,6,0,.04)); box-shadow:0 0 0 3px rgba(225,6,0,.12)}
.pm-svc.on .pm-svc-ic{background:var(--red); color:#fff}
.pm-svc.on .pm-svc-price{color:#fff}
.pm-svc.on .pm-svc-ck{background:var(--red); border-color:var(--red)}
.pm-svc.on .pm-svc-ck::after{content:""; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg)}
.pm-dtc .tbl{border-radius:14px}

/* summary */
.pm-summary{margin:0}
.pm-summary .pm-card-h span{font-family:var(--mono)}
.pm-lines{list-style:none; margin:0 0 6px; padding:0}
.pm-lines li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed #2a2a30; font-size:14px}
.pm-lines li span{display:flex; align-items:center; gap:10px; color:#e6e6ea}
.pm-lines li span svg{color:var(--red2); width:17px; height:17px}
.pm-lines li b{font:600 13.5px var(--mono); color:#fff}
.pm-lines .pm-empty{color:var(--dim); justify-content:center; border:0; padding:18px 0}
.pm-total{display:flex; justify-content:space-between; align-items:baseline; margin:12px 0 18px}
.pm-total span{color:var(--muted); font-weight:500}
.pm-total b{font:800 40px/1 var(--head); color:#fff; letter-spacing:.5px}
.pm .btn{clip-path:none; border-radius:13px; font:600 15px/1 Inter,sans-serif; letter-spacing:.2px; text-transform:none; padding:16px 22px}
.pm .btn-red{background:linear-gradient(180deg,#f2271e,#c50d06); box-shadow:0 14px 30px -12px rgba(225,6,0,.85), inset 0 1px 0 rgba(255,255,255,.2)}
.pm .btn-red:hover{background:linear-gradient(180deg,#ff3b2f,#d6120b)}
.pm .btn-red:disabled{background:#2a1716; color:#7d5e5c; box-shadow:none}
.pm .btn-ghost{border-radius:13px; background:rgba(255,255,255,.05)}
.pm-fine{font-size:12.5px; color:var(--dim); margin:12px 0 0; text-align:center}
.pm-trust{list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid #232328; display:flex; flex-direction:column; gap:10px}
.pm-trust li{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.pm-trust svg{width:16px; height:16px; color:var(--ok)}

/* state cards */
.pm-state{text-align:center; padding:38px 28px}
.pm-state h2{font:700 24px/1.2 Inter,sans-serif; letter-spacing:-.4px; margin:16px 0 8px; text-transform:none}
.pm-state p{color:var(--muted); margin:0 auto 18px; max-width:520px}
.pm-state-ic{width:62px; height:62px; border-radius:50%; margin:0 auto; display:grid; place-items:center}
.pm-state-ic.ok{background:rgba(47,209,111,.12); color:var(--ok); box-shadow:0 0 0 8px rgba(47,209,111,.05)}
.pm-state-ic.warn{background:rgba(255,176,32,.12); color:var(--warn); box-shadow:0 0 0 8px rgba(255,176,32,.05)}
.pm-state-ic.bad{background:rgba(225,6,0,.14); color:var(--red2); box-shadow:0 0 0 8px rgba(225,6,0,.05)}
.pm-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:560px; margin:0 auto}
@media (max-width:560px){.pm-facts{grid-template-columns:1fr}}
.pm-facts div{background:rgba(255,255,255,.03); border:1px solid #232328; border-radius:12px; padding:12px}
.pm-facts small{display:block; color:var(--dim); font-size:11.5px; text-transform:uppercase; letter-spacing:1px; font-weight:600}
.pm-facts b{color:#fff; font-weight:600; font-size:14px}
.pm-note{margin:18px auto 0; max-width:560px; text-align:left; background:rgba(255,255,255,.03); border-left:3px solid var(--red); border-radius:10px; padding:12px 14px; color:#ddd; font-size:14px}
.pm-note small{display:block; color:var(--dim); font-size:12px; margin-bottom:4px}
.pm .codes span{border-radius:7px; border-left:0; background:rgba(225,6,0,.14); color:#ffd1ce}
.pm-kv{margin:0; display:flex; flex-direction:column; gap:12px}
.pm-kv dt{font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; font-weight:600}
.pm-kv dd{margin:4px 0 0}
.pm .timeline li::before{border-radius:50%}
.pm pre.report{border-radius:12px}