.agent-preview-page{
    margin-left:320px;
    min-height:100vh;
    background:#f8fafc;
    color:#0f172a;
    padding:28px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.agent-preview-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:22px;
}
.agent-preview-title{
    margin:0 0 8px;
    font-size:30px;
    font-weight:900;
    letter-spacing:-.045em;
}
.agent-preview-lead{
    margin:0;
    color:#64748b;
    font-weight:650;
}
.agent-preview-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.agent-preview-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,.28);
    background:#fff;
    color:#0f172a;
    text-decoration:none;
    font-weight:850;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.agent-preview-btn.primary{
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    border-color:transparent;
}
.agent-preview-btn.danger{
    background:linear-gradient(135deg,#dc2626,#f97316);
    color:#fff;
    border-color:transparent;
}
.agent-preview-grid{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);
    gap:18px;
    align-items:start;
}
.agent-preview-card{
    background:#fff;
    border:1px solid rgba(148,163,184,.22);
    border-radius:20px;
    padding:18px;
    box-shadow:0 16px 42px rgba(15,23,42,.06);
}
.agent-preview-card h2{
    margin:0 0 12px;
    font-size:18px;
    font-weight:900;
}
.agent-risk-score{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(239,68,68,.10));
    border:1px solid rgba(245,158,11,.26);
    margin-bottom:14px;
}
.agent-risk-score strong{
    display:block;
    font-size:34px;
    line-height:1;
}
.agent-risk-meter{
    height:10px;
    background:#e2e8f0;
    border-radius:999px;
    overflow:hidden;
    margin-top:10px;
}
.agent-risk-meter span{
    display:block;
    height:100%;
    width:68%;
    background:linear-gradient(90deg,#22c55e,#f59e0b,#ef4444);
    border-radius:999px;
}
.agent-impact-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.agent-impact-item{
    border:1px solid rgba(148,163,184,.22);
    border-radius:16px;
    background:#f8fafc;
    padding:14px;
}
.agent-impact-item strong{
    display:block;
    margin-bottom:6px;
}
.agent-impact-item small{
    color:#64748b;
    font-weight:650;
}
.agent-approval-gate{
    border:1px solid rgba(37,99,235,.24);
    background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.08));
    border-radius:18px;
    padding:16px;
    margin-top:14px;
}
.agent-approval-gate h3{
    margin:0 0 8px;
}
.agent-check-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid rgba(148,163,184,.18);
}
.agent-check-row:last-child{
    border-bottom:0;
}
.agent-check-icon{
    width:24px;
    height:24px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#dcfce7;
    color:#15803d;
    font-weight:900;
    flex:0 0 auto;
}
.agent-preview-table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:16px;
}
.agent-preview-table th{
    background:#0f172a;
    color:#fff;
    text-align:left;
    padding:12px;
    font-size:13px;
}
.agent-preview-table td{
    padding:12px;
    border-bottom:1px solid #e5e7eb;
    font-weight:650;
}
.agent-run-log-preview{
    background:#0f172a;
    color:#dbeafe;
    border-radius:16px;
    padding:16px;
    overflow:auto;
    line-height:1.7;
    font-size:13px;
}
.agent-mini-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:850;
}
.agent-mini-badge.warn{
    background:#fef3c7;
    color:#b45309;
}
.agent-mini-badge.danger{
    background:#fee2e2;
    color:#b91c1c;
}
.agent-mini-badge.ok{
    background:#dcfce7;
    color:#15803d;
}
@media(max-width:1100px){
    .agent-preview-grid{grid-template-columns:1fr;}
}
@media(max-width:960px){
    .agent-preview-page{margin-left:0;padding:18px;}
    .agent-impact-list{grid-template-columns:1fr;}
}