:root { color-scheme: light; --ink:#172033; --muted:#687187; --blue:#19a7d8; --blue-dark:#087ea4; --panel:#fff; --bg:#f3f7fa; --line:#dce5eb; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; background:linear-gradient(145deg,#eef8fc,#f8fafc 45%,#eef3f7); color:var(--ink); min-height:100vh; }
.shell { max-width:1220px; margin:0 auto; padding:44px 24px 70px; }
header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:26px; }
h1 { font-size:46px; line-height:1; margin:3px 0 10px; letter-spacing:-.04em; }
h2,h3,p { margin-top:0; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:800; color:var(--blue-dark); margin-bottom:8px; }
.safety { background:#e9f8ef; border:1px solid #bfe6ce; color:#237441; padding:10px 14px; border-radius:999px; font-weight:700; font-size:14px; white-space:nowrap; }
.safety span { display:inline-block; width:9px; height:9px; border-radius:50%; background:#36ad63; margin-right:6px; }
.grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:20px; align-items:start; }
.panel { background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 18px 50px rgba(30,66,92,.08); }
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.panel-title h2 { margin:0; font-size:20px; }
.panel-title button { border:0; background:transparent; color:var(--blue-dark); cursor:pointer; font-weight:700; }
label { display:block; font-size:13px; font-weight:750; margin:0 0 16px; }
input,textarea { display:block; width:100%; margin-top:7px; border:1px solid #cbd8df; border-radius:11px; padding:12px; font:inherit; color:var(--ink); background:#fbfdfe; }
textarea { resize:vertical; line-height:1.5; }
input:focus,textarea:focus { outline:3px solid rgba(25,167,216,.16); border-color:var(--blue); }
.check { display:flex; gap:9px; align-items:flex-start; font-weight:600; line-height:1.4; }
.check input { width:auto; margin:3px 0 0; }
.primary { width:100%; border:0; border-radius:11px; padding:13px; color:#fff; background:var(--blue-dark); font-weight:800; cursor:pointer; font-size:15px; }
.primary:hover { background:#076b8b; }
.note { color:var(--muted); font-size:12px; margin:12px 0 0; line-height:1.5; }
.empty { color:var(--muted); text-align:center; padding:90px 30px; border:1px dashed #cad8df; border-radius:14px; }
#mode { font-size:12px; color:var(--muted); background:#f1f4f6; padding:6px 9px; border-radius:7px; }
dl { display:grid; grid-template-columns:145px 1fr; margin:0; gap:0; }
dt,dd { padding:10px 0; border-bottom:1px solid #edf1f3; margin:0; }
dt { color:var(--muted); font-size:13px; } dd { font-weight:700; overflow-wrap:anywhere; }
.box { border:1px solid var(--line); border-radius:12px; padding:15px; margin-top:16px; background:#fafcfd; }
.box h3 { font-size:14px; margin-bottom:8px; }.box ul { padding-left:20px; margin:0; white-space:pre-line; }.box li+li { margin-top:7px; }
.question { background:#fff8e8; border-color:#f1d48d; }.warning { background:#fff2f0; border-color:#edc6bf; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; margin:0; }
details { margin-top:16px; } summary { cursor:pointer; color:var(--blue-dark); font-weight:700; font-size:13px; } details pre { margin-top:10px; background:#172033; color:#dceaf0; padding:14px; border-radius:10px; max-height:380px; overflow:auto; }
.all-fields { margin-top:24px; }.all-fields h3 { font-size:16px; }.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }table { width:100%; border-collapse:collapse; min-width:760px; font-size:12px; }th { text-align:left; color:var(--muted); background:#f4f7f9; }th,td { padding:10px; border-bottom:1px solid #e7edf0; vertical-align:top; }td:first-child { font-weight:750; }.status-ok { color:#237441; font-weight:750; }.status-warn { color:#a05a05; font-weight:750; }.field-note { display:block; color:var(--muted); margin-top:4px; font-size:11px; }
@media (max-width:820px){ .grid{grid-template-columns:1fr} header{flex-direction:column} h1{font-size:38px} }