body{font-family: Arial, sans-serif;background:#0f172a;color:#f8fafc;padding:0;margin:0}
header{background:#1e293b;padding:16px}
header h1{margin:0 0 8px}
nav a{color:#7dd3fc;margin-right:16px}
main{padding:16px}
.callout-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.button-link{display:inline-block;background:#0ea5e9;color:#fff;text-decoration:none;padding:10px 14px;border-radius:6px;font-weight:700}
.button-link:hover{opacity:.9}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:10px 0}
.card{background:#111827;padding:12px;border-radius:8px;border:1px solid #334155}
button{background:#0ea5e9;color:white;border:none;padding:10px 14px;border-radius:6px}
button:hover{opacity:.9}
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{border:1px solid #334155;padding:8px}
pre{white-space:pre-wrap;background:#111827;padding:12px;border-radius:8px}
input,select,textarea{width:100%;max-width:100%;box-sizing:border-box;background:#0b1220;color:#f8fafc;border:1px solid #334155;border-radius:6px;padding:10px;margin:6px 0}
.viewer-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:16px}
.viewer-panel,.viewer-sidebar,.diff-wrap{background:#111827;padding:16px;border-radius:10px;border:1px solid #334155}
.annotation-form{margin-bottom:18px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 20px}
.tabs a{background:#111827;color:#cbd5e1;padding:10px 14px;border-radius:999px;border:1px solid #334155;text-decoration:none}
.tabs a:hover{background:#1f2937}
.section-panel{background:#0b1220;border:1px solid #334155;border-radius:12px;padding:16px;margin-bottom:18px}
.section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.muted{color:#94a3b8}
.warning-box{background:#4c1d1d;border:1px solid #ef4444;color:#fecaca;padding:14px;border-radius:10px;margin:12px 0}
.status-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#1f2937;border:1px solid #334155;color:#cbd5e1;font-size:.9rem}
.copy-row,.export-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 16px}
.copy-status{color:#86efac;font-weight:700;min-width:72px}
.code-block{width:100%;min-height:220px;resize:vertical}
.history-table td,.history-table th{vertical-align:top}
.plan-list{display:grid;gap:12px}
.plan-item{background:#111827;border:1px solid #334155;border-radius:10px;padding:14px}
@media (max-width: 900px){.viewer-grid{grid-template-columns:1fr}}
@media (max-width: 900px){.viewer-grid{grid-template-columns:1fr}}