@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&display=swap');
:root{--teal:#56D1BC;--navy:#0B2735;--ink:#152B38;--gray:#5C5C5C;--line:#E6ECEF;--bg:#FFFFFF;--soft:#F4FAF9}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6}
.topbar{background:linear-gradient(90deg,var(--teal) 0%,var(--navy) 100%);color:#fff;font-size:13px;padding:8px 0}
.topbar .in{display:flex;justify-content:space-between;align-items:center}
.topbar a{color:#fff;text-decoration:none}
.in{max-width:1100px;margin:0 auto;padding:0 24px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.nav img{height:64px}
.nav .links a{color:var(--navy);text-decoration:none;font-family:Fraunces,serif;font-size:16px;margin-left:28px}
.nav .links a.active{color:var(--teal)}
h1,h2,h3{font-family:Fraunces,serif;font-weight:400;color:var(--navy);margin:0 0 12px;line-height:1.15}
h1{font-size:44px}h2{font-size:26px}h3{font-size:19px}
p{color:var(--gray);margin:0 0 14px}
.eyebrow{color:var(--teal);font-size:15px;margin-bottom:8px}
.btn{display:inline-block;border:0;cursor:pointer;font-family:Fraunces,serif;font-size:17px;color:#fff;padding:14px 34px;border-radius:999px;background:linear-gradient(90deg,var(--navy) 0%,var(--teal) 100%);text-decoration:none;transition:opacity .15s}
.btn:hover{opacity:.9}.btn:disabled{opacity:.5;cursor:default}
.btn.solid{background:var(--teal)}
.btn.ghost{background:#fff;color:var(--teal);border:1px solid var(--line)}
.btn.sm{font-family:Inter,sans-serif;font-size:13px;padding:7px 14px}
.btn.danger{background:#fff;color:#B00020;border:1px solid #F3C9CD}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 8px 30px rgba(11,39,53,.06)}
label{display:block;font-size:13px;color:var(--gray);margin:0 0 6px;font-weight:500}
input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff}
input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(86,209,188,.2)}
.field{margin-bottom:16px}
.msg{font-size:14px;margin-top:14px}.msg.err{color:#B00020}.msg.ok{color:#1F8A73}
.fine{font-size:12px;color:var(--gray);line-height:1.5}
.fine a{color:var(--navy)}
footer{margin-top:60px;background:var(--navy);color:#cfe5e0;font-size:13px;padding:28px 0}
footer a{color:#fff;text-decoration:none}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.pill.sent{background:#FFF4DB;color:#8A5A00}.pill.connected{background:#E3F7F2;color:#1F8A73}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
pre{background:var(--soft);border:1px solid var(--line);padding:14px;border-radius:12px;font-size:12px;overflow:auto;max-height:380px}
.check{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;color:var(--gray)}
.check svg{flex:none;margin-top:3px}