:root{font:14px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182436;background:#f5f7fa;--blue:#1674e8;--line:#e2e8f0;--muted:#677587;--shadow:0 12px 32px rgba(29,48,75,.045)}
*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #a6d0ff;outline-offset:2px}[hidden]{display:none!important}
header{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(30px,calc((100vw - 1200px)/2));gap:32px}.brand{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:700;letter-spacing:-.04em;white-space:nowrap}.brand-mark{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:8px;background:var(--blue);color:white;font-size:17px;font-weight:750;letter-spacing:-.07em}.brand span:last-child{color:#6a7788;font-weight:500}.brand span:last-child:before{content:"/";padding:0 9px;color:#bbc6d2}nav{display:flex;gap:5px}nav a{padding:9px 13px;border-radius:8px;color:#607083;font-weight:560}nav a:hover,nav a[aria-current=page]{background:#eaf2ff;color:#0865cf}.shell-foot{display:none}
main{max-width:1200px;margin:auto;padding:34px 30px 90px}.hero{margin:0 0 30px}.eyebrow{color:var(--blue);font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}h1{font-size:clamp(27px,3vw,34px);line-height:1.2;letter-spacing:-.04em;margin:0 0 8px;font-weight:690}h2{font-size:16px;letter-spacing:-.02em;margin:0 0 18px;font-weight:680}.hero p:last-child{color:var(--muted);margin:0}.card{background:white;border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid .card{margin:0 0 20px}
form{display:grid;gap:16px}label{display:grid;gap:7px;color:#46576b;font-size:12px;font-weight:620}input,select{width:100%;min-height:41px;padding:10px 12px;border:1px solid #d3dce8;border-radius:7px;background:#fff;color:#19283b;outline:none}input::placeholder{color:#9aa7b6}input:hover,select:hover{border-color:#a9bbcd}input:focus,select:focus{border-color:#3189ef;box-shadow:0 0 0 3px #e3f0ff}button{border:1px solid var(--blue);border-radius:7px;background:var(--blue);color:white;font-weight:650;padding:10px 16px;min-height:40px}button:hover{background:#075fc6}.subtle{background:#fff;border-color:#d4deeb;color:#33465c}.subtle:hover{background:#f3f7fc}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;color:#5f6d7d}.row{padding:15px 0;border-top:1px solid #edf1f6;display:flex;justify-content:space-between;gap:14px;align-items:center}.row:first-child{border-top:0}.row strong{font-weight:620}.row small{color:var(--muted)}.pill{border-radius:6px;padding:4px 9px;background:#eaf4ff;color:#0869ca;font-size:11px;font-weight:650;white-space:nowrap}.ok{color:#158363}.down{color:#d05358}code{display:block;overflow-wrap:anywhere;padding:13px;border-radius:7px;background:#eef3f9;color:#173c68}#message{min-height:24px;color:#bd4b4e;margin-top:14px}
#login{max-width:440px;padding:31px}#login h2{font-size:19px;margin-bottom:21px}#login form button{width:100%;margin-top:4px}body:not(.console) main{padding-top:75px}body:not(.console) .hero{max-width:550px}body:not(.console) .hero h1{font-size:clamp(32px,4vw,46px)}body:not(.console) #login{margin-top:35px}body:not(.console){background:radial-gradient(circle at 84% 27%,#dcecff 0,transparent 31%),#f5f7fa}
body.console header{position:fixed;left:0;top:0;bottom:0;width:222px;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:#111d2c;border:0;padding:25px 12px;z-index:10;color:#edf5ff}body.console .brand{padding:0 10px;margin:0 0 34px;font-size:16px}body.console .brand span:last-child{color:#a5b2c3}body.console nav{display:grid;gap:5px}body.console nav a{color:#a9b9cb;padding:11px 13px}body.console nav a:hover,body.console nav a[aria-current=page]{background:#243750;color:#fff}body.console .shell-foot{display:block;margin-top:auto;padding:15px 12px;color:#7f93a8;font-size:11px;letter-spacing:.05em;text-transform:uppercase}body.console main{margin:0 0 0 222px;max-width:none;padding:38px clamp(25px,4vw,64px) 90px}body.console .hero{border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:30px}
.empty{padding:24px;background:#f7f9fc;border:1px dashed #d5e0eb;border-radius:8px;color:var(--muted)}#newKey p,.card>p{color:var(--muted)}
.brand > .brand-name:before{content:none}.brand > .brand-name{color:#182436;font-weight:700}.brand > .brand-name > span{color:#6a7788;font-weight:500}body.console .brand > .brand-name{color:#f3f8ff}
.demo-card{max-width:520px}.demo-card #result{color:#42607f;margin-bottom:0}
@media(max-width:850px){.grid{grid-template-columns:1fr}body.console header{width:74px;padding:22px 9px}body.console .brand{padding:0 12px}body.console .brand .brand-name,body.console .shell-foot{display:none}body.console nav a{font-size:0;text-align:center;padding:10px 4px}body.console nav a:before{content:attr(data-icon);font-size:18px}body.console main{margin-left:74px}}
@media(max-width:580px){header{height:60px;padding:0 18px;gap:10px}nav{gap:0}nav a{padding:8px;font-size:12px}main{padding:28px 18px 60px}body:not(.console) main{padding-top:40px}body.console header{position:static;width:auto;height:60px;flex-direction:row;align-items:center;justify-content:space-between;padding:0 13px}body.console .brand{margin:0;padding:0}body.console .brand .brand-name{display:flex}body.console nav{display:flex}body.console nav a{font-size:12px;padding:8px}body.console nav a:before{display:none}body.console main{margin:0;padding:28px 18px 70px}.toolbar{flex-wrap:wrap}.row{align-items:flex-start}}