/* lab/rust-wasm-fraud — page-specific styles */
.container{max-width:740px;margin:0 auto;padding:40px 24px 60px;}

.header{margin-bottom:32px;}
.header a{font-family:var(--mono);font-size:13px;color:var(--accent);text-decoration:none;}
.header a:hover{color:#fff;}
.header h1{font-size:28px;font-weight:600;margin-top:14px;line-height:1.3;}
.header p{font-size:14px;color:var(--text-dim);margin-top:8px;max-width:600px;}

.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;padding:24px;margin-bottom:20px;}

.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:8px;}
.controls label{font-family:var(--mono);font-size:12px;color:var(--text-dim);}
.controls select,.controls button{
  font-family:var(--mono);font-size:12px;background:var(--bg);color:var(--text);
  border:1px solid var(--panel-border);border-radius:6px;padding:8px 14px;cursor:pointer;
  transition:border-color 0.2s;
}
.controls select:hover,.controls button:hover{border-color:var(--accent);}
.run-btn{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:var(--bg)!important;font-weight:600;border:none!important;padding:8px 20px!important;}
.run-btn:hover{opacity:0.9;box-shadow:0 0 16px var(--glow);}
.run-btn:disabled{opacity:0.4;cursor:not-allowed;}

.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
@media (max-width:500px){.results-grid{grid-template-columns:1fr;}}

.result-card{background:var(--bg);border:1px solid var(--panel-border);border-radius:10px;padding:20px;position:relative;overflow:hidden;}
.result-card.winner{border-color:var(--accent);box-shadow:0 0 20px var(--glow);}
.result-card h3{font-family:var(--mono);font-size:13px;color:var(--text-dim);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.result-card h3 .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot-js{background:var(--warning);}
.dot-wasm{background:var(--accent);}
.metric{margin-bottom:10px;}
.metric .label{font-family:var(--mono);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;}
.metric .value{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--text);margin-top:2px;}
.metric .value.accent{color:var(--accent);}
.metric .unit{font-size:12px;color:var(--text-dim);font-weight:400;}

.bar-chart{margin-top:20px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.bar-label{font-family:var(--mono);font-size:11px;color:var(--text-dim);width:50px;text-align:right;flex-shrink:0;}
.bar-track{flex:1;height:24px;background:rgba(255,255,255,0.03);border-radius:4px;overflow:hidden;position:relative;}
.bar-fill{height:100%;width:0;border-radius:4px;transition:width 0.8s cubic-bezier(0.22,1,0.36,1);display:flex;align-items:center;padding-left:8px;font-family:var(--mono);font-size:10px;color:var(--bg);font-weight:600;min-width:0;}
.bar-fill.js{background:linear-gradient(90deg,var(--warning),#ffaa00);}
.bar-fill.wasm{background:linear-gradient(90deg,var(--accent),var(--accent2));}

.speedup{text-align:center;margin-top:20px;padding:16px;border:1px dashed var(--panel-border);border-radius:8px;}
.speedup .number{font-family:var(--mono);font-size:36px;font-weight:600;color:var(--accent);}
.speedup .text{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-top:4px;}

.txn-feed{margin-top:20px;max-height:180px;overflow-y:auto;font-family:var(--mono);font-size:11px;line-height:1.8;color:var(--text-muted);scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent;}
.txn-feed::-webkit-scrollbar{width:4px;}
.txn-feed::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:2px;}
.txn-line{display:flex;gap:8px;}
.txn-line .flag{width:60px;text-align:right;flex-shrink:0;}
.txn-line .flag.fraud{color:var(--error);}
.txn-line .flag.clean{color:var(--accent);}
.txn-line .detail{color:var(--text-muted);}

.explanation{margin-top:24px;font-size:13px;color:var(--text-dim);line-height:1.7;}
.explanation strong{color:var(--text);}
.explanation a{color:var(--accent);text-decoration:none;}
.explanation a:hover{color:#fff;}
.explanation code{font-family:var(--mono);font-size:12px;background:rgba(255,255,255,0.04);padding:2px 6px;border-radius:3px;}
.explanation-note{margin-top:10px;}

.footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--panel-border);font-family:var(--mono);font-size:12px;color:var(--text-muted);}
.footer a{color:var(--accent);text-decoration:none;}
.footer a:hover{color:#fff;}

.hidden{display:none;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.running{animation:pulse 0.8s infinite;}