:root{--teal:#014d4e;--mint:#dff6f1;--ink:#17242d;--line:#d9e2e7;--bad:#a52f38}*{box-sizing:border-box}body{margin:0;background:#f3f7f8;color:var(--ink);font:14px "Segoe UI",sans-serif}header{background:var(--teal);color:white;padding:17px calc((100% - 1240px)/2);display:flex;justify-content:space-between}main{max-width:1240px;margin:28px auto;padding:0 18px}footer{text-align:center;padding:28px;color:#667}.heading,.cardtop,.actions{display:flex;justify-content:space-between;gap:18px;align-items:center}.panel,.card,.auth,.alert,.key{background:white;border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px;box-shadow:0 8px 30px #193c4810}.auth{max-width:460px;margin:80px auto}.grid,.update{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}.cards{display:grid;gap:20px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.metrics div{background:#f1f7f7;padding:14px;border-radius:12px}.metrics b,.metrics span{display:block}.metrics b{font-size:18px}.metrics span,dt{color:#68767d;font-size:12px}dl{display:grid;grid-template-columns:170px 1fr;gap:8px}dd{margin:0}.errors{white-space:normal;max-height:110px;overflow:auto}.pill{padding:6px 10px;border-radius:99px;background:#eef1f2;font-weight:700}.pill.ok{background:#dff5e7;color:#17623b}.pill.bad{background:#ffe5e5;color:#8e2630}.key{border-color:#e7be55;background:#fff8dd}.key code{display:block;font-size:16px;margin:10px 0;overflow-wrap:anywhere}label{display:grid;gap:6px;font-weight:650}input,select,textarea,button{font:inherit;border:1px solid #b9c8ce;border-radius:9px;padding:10px}button{background:var(--teal);color:white;border:0;font-weight:750;cursor:pointer}.secondary{background:#e9f1f2;color:var(--teal)}.danger{background:var(--bad)}.update{grid-template-columns:150px 1fr 190px auto;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.update h3,.wide{grid-column:1/-1}.error{border-color:#e8a8ad;background:#fff1f2}.success{border-color:#a8dabc;background:#effcf4}@media(max-width:760px){header,.heading,.cardtop{align-items:flex-start;flex-direction:column}.grid,.update,.metrics{grid-template-columns:1fr}.wide,.update h3{grid-column:auto}dl{grid-template-columns:1fr}.heading form{align-self:flex-end}}
