:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#08111f; color:#eef6ff; }
* { box-sizing: border-box; }
body { margin:0; background: radial-gradient(circle at top left,#15365f 0,#08111f 42%,#050910 100%); min-height:100vh; }
main { width:min(1180px, calc(100% - 28px)); margin:0 auto; padding:28px 0 60px; }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:22px; }
.eyebrow { color:#6ee7d8; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; margin:0 0 8px; }
h1 { font-size:clamp(2.2rem,6vw,4.8rem); margin:0; line-height:.95; }
.sub { color:#aec3d8; max-width:720px; font-size:1.08rem; }
.panel { background:rgba(9,20,38,.86); border:1px solid rgba(130,190,255,.18); border-radius:24px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); backdrop-filter: blur(10px); }
.narrow { max-width:440px; }
input, button, textarea { width:100%; border-radius:14px; border:1px solid rgba(160,200,240,.22); padding:12px 14px; margin:8px 0; background:#0c1728; color:#eef6ff; font:inherit; }
button { cursor:pointer; background:linear-gradient(135deg,#2dd4bf,#3b82f6); border:0; font-weight:700; }
button.secondary { background:#14233a; border:1px solid rgba(160,200,240,.22); }
.hidden { display:none; }
.grid { display:grid; grid-template-columns:320px 1fr; gap:18px; }
.toolbar { display:flex; gap:10px; margin-bottom:18px; align-items:center; }
.toolbar button { width:auto; white-space:nowrap; }
.card { border:1px solid rgba(160,200,240,.16); border-radius:20px; padding:16px; margin:0 0 14px; background:rgba(255,255,255,.035); }
.cardHead { display:flex; justify-content:space-between; gap:12px; }
.score { font-size:2rem; font-weight:800; color:#6ee7d8; }
.badge { display:inline-block; padding:4px 9px; border-radius:999px; background:#17365d; color:#b9dcff; font-size:.78rem; margin-right:6px; }
.reason { color:#b6c7db; }
.draftBox { background:#07101e; padding:14px; border-radius:16px; margin-top:10px; border:1px solid rgba(160,200,240,.14); white-space:pre-wrap; min-height:170px; }
.diff { background:#050b14; color:#b8c7d6; padding:10px; border-radius:12px; overflow:auto; }
.actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.actions button { font-size:.88rem; padding:10px; margin:0; }
.metric span { display:block; font-size:3rem; font-weight:800; color:#6ee7d8; }
.metric small { color:#aec3d8; }
.guardrails { color:#b8c7d6; padding-left:18px; }
.error { color:#fca5a5; }
.sectionTitle { display:flex; justify-content:space-between; align-items:center; gap:16px; }
a { color:#7dd3fc; }
.systemActions{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.status,.cardStatus{margin:10px 0;padding:10px 12px;border:1px solid rgba(96,165,250,.25);border-radius:12px;background:rgba(59,130,246,.08);color:#bfdbfe;font-size:14px}
.status.success,.cardStatus.success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#bbf7d0}
.status.error,.cardStatus.error{border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.10);color:#fecaca}
button:disabled{opacity:.55;cursor:wait}
@media (max-width: 850px) { .hero, .toolbar { flex-direction:column; align-items:stretch; } .grid { grid-template-columns:1fr; } .actions { grid-template-columns:1fr 1fr; } }