* { box-sizing: border-box }
html,body { margin:0; padding:0; background:#020608; color:#d8ffe6; font-family:'JetBrains Mono','SF Mono',Menlo,monospace; line-height:1.5; min-height:100vh }
body { background:
  radial-gradient(ellipse 60% 45% at 15% 10%, rgba(0,255,136,.14), transparent 60%),
  radial-gradient(ellipse 50% 40% at 90% 30%, rgba(0,255,204,.10), transparent 60%),
  #020608;
  background-attachment:fixed;
  background-image: linear-gradient(rgba(0,255,136,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,136,.03) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
}
a { color:#00ff88; text-decoration:none } a:hover { color:#4dffaa; text-shadow:0 0 6px rgba(0,255,136,.4) }
.bar { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid rgba(0,255,136,.18); background:rgba(2,12,8,.85); backdrop-filter:blur(12px); position:sticky; top:0; z-index:5 }
.bar .t { color:#00ff88; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-shadow:0 0 6px rgba(0,255,136,.3) }
.bar .meta { color:#5a7a70; font-size:.78rem; letter-spacing:.06em }
.bar .back { color:#8fa9a0; font-size:.85rem }
.wrap { max-width:1240px; margin:0 auto; padding:28px 22px 56px }
h1 { font-size:1.8rem; font-weight:600; color:#e0ffe9; margin:0 0 8px; letter-spacing:-.02em; display:flex; align-items:center; gap:12px }
.meta { color:#8fa9a0; font-size:.84rem; margin:0 0 18px }
.meta code, code { background:rgba(0,255,136,.06); border:1px solid rgba(0,255,136,.18); color:#00ff88; padding:1px 6px; border-radius:5px; font-size:.84em }
p { color:#8fa9a0 }
.muted { color:#5a7a70; font-size:.86rem; margin:18px 0 22px }

.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 22px }
@media (max-width:680px){ .grid4 { grid-template-columns:repeat(2,1fr) } }
.card { background:rgba(0,12,6,.5); border:1px solid rgba(0,255,136,.18); border-radius:14px; padding:14px 16px; position:relative; overflow:hidden }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#00ff88,transparent); opacity:.6 }
.card .lbl { color:#5a7a70; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px }
.card .val { font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:600; color:#e0ffe9; letter-spacing:-.02em }
.card .val.g { color:#00ff88; text-shadow:0 0 10px rgba(0,255,136,.35) }
.card .val.y { color:#ffe600; text-shadow:0 0 10px rgba(255,230,0,.3) }
.card .val.r { color:#ff5577; text-shadow:0 0 10px rgba(255,85,119,.3) }

.b { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.16em; padding:3px 9px; border-radius:999px; border:1px solid }
.b.pass { color:#00ff88; border-color:rgba(0,255,136,.4); background:rgba(0,255,136,.08); text-shadow:0 0 6px rgba(0,255,136,.3) }
.b.warn { color:#ffe600; border-color:rgba(255,230,0,.4); background:rgba(255,230,0,.08) }
.b.fail { color:#ff5577; border-color:rgba(255,85,119,.4); background:rgba(255,85,119,.08) }

.rows { display:flex; flex-direction:column; gap:6px }
.row { display:grid; grid-template-columns:38px 1fr 80px 90px 80px; align-items:center; gap:12px; padding:10px 14px; background:rgba(0,12,6,.4); border:1px solid rgba(0,255,136,.12); border-radius:10px; color:#d8ffe6; transition:all .2s }
.row:hover { background:rgba(0,14,8,.6); border-color:rgba(0,255,136,.35); text-shadow:none }
.row.fail { border-left:3px solid #ff5577 }
.row.warn { border-left:3px solid #ffe600 }
.row.pass { border-left:3px solid #00ff88 }
.row .ico { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(0,255,136,.1); border:1px solid rgba(0,255,136,.3); border-radius:8px; color:#00ff88 }
.row .n b { color:#e0ffe9; font-family:'Space Grotesk',sans-serif; font-weight:600; display:block }
.row .n small { color:#5a7a70; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase }
.row .pcount, .row .lat { color:#8fa9a0; font-size:.84rem; text-align:right }
@media (max-width:680px){ .row { grid-template-columns:32px 1fr 70px 70px } .row .lat { display:none } }

.conv { display:flex; flex-direction:column; gap:14px; margin-top:14px }
.turn { background:rgba(0,12,6,.55); border:1px solid rgba(0,255,136,.15); border-radius:12px; padding:14px 16px }
.turn.fail { border-color:rgba(255,85,119,.4); border-left:3px solid #ff5577 }
.turn.warn { border-color:rgba(255,230,0,.4); border-left:3px solid #ffe600 }
.turn.pass { border-left:3px solid #00ff88 }
.turn .hd { display:flex; align-items:center; gap:10px; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#5a7a70; margin-bottom:8px }
.turn .hd .kind { color:#00ff88 }
.turn .hd .lat { margin-left:auto }
.turn .q { color:#67e8f9; margin:0 0 8px; font-size:.92rem }
.turn .q b { color:#00ff88; margin-right:6px }
.turn .a { white-space:pre-wrap; word-wrap:break-word; color:#d8ffe6; font-family:'Inter',sans-serif; font-size:.92rem; line-height:1.55 }
.turn .note, .turn .err { font-size:.78rem; color:#8fa9a0; margin-top:8px; padding-top:8px; border-top:1px solid rgba(0,255,136,.08); letter-spacing:.04em }
.turn .err { color:#ff7799 }
.alert { padding:12px 16px; border-radius:10px; margin:14px 0; font-size:.88rem }
.alert.fail { background:rgba(255,85,119,.08); border:1px solid rgba(255,85,119,.35); color:#ffaab3; border-left:3px solid #ff5577 }