@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Unbounded:wght@600;700&display=swap');
:root{--bg:#17171c;--bg2:#1e1e25;--bg3:#272730;--line:#2f2f3a;--text:#e8e8ef;--mute:#8d8da0;--acc:#4b63fb;--acc2:#6a7dff;--red:#ef5b6b;--ok:#3fb67a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}
header.top{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:5}
header.top img{width:30px;height:30px;border-radius:8px}
header.top b{font-size:16px}header.top span{color:var(--mute)}header.top .sp{flex:1}
main{max-width:860px;margin:0 auto;padding:26px 18px 80px}
h1{font-size:26px;margin:0 0 6px}h2{font-size:18px;margin:30px 0 10px}h3{font-size:15px;margin:0 0 8px}
p.lead{color:var(--mute);margin:0 0 18px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 12px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.grow{flex:1;min-width:0}
.av{width:48px;height:48px;border-radius:50%;background:var(--acc);display:grid;place-items:center;font-weight:700;font-size:20px;overflow:hidden;position:relative;flex:none;color:#fff}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av.big{width:84px;height:84px;font-size:34px}
small,.mute{color:var(--mute)}
label.fld{display:block;margin:0 0 12px;font-weight:600;font-size:13px;color:var(--mute)}
input[type=text],textarea,select{display:block;width:100%;margin-top:5px;background:var(--bg3);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:9px 11px;font:inherit}
textarea{resize:vertical;min-height:70px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acc);outline-offset:-1px}
button,.btn{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;display:inline-block}
button:hover,.btn:hover{background:var(--acc2);text-decoration:none}
button.ghost{background:var(--bg3);color:var(--text);border:1px solid var(--line)}button.ghost:hover{background:#31313c}
button.dng{background:transparent;color:var(--red);border:1px solid var(--red)}button.dng:hover{background:var(--red);color:#fff}
button:disabled{opacity:.5;cursor:default}
.err{color:var(--red);margin:8px 0;min-height:1em}.okmsg{color:var(--ok)}
.tok{display:flex;gap:8px;align-items:stretch}.tok input{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
pre{background:#101015;border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;margin:8px 0}
code{background:var(--bg3);padding:1px 6px;border-radius:5px;font-size:13px}
.perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px;margin:8px 0 12px}
.perms label{display:flex;gap:8px;align-items:flex-start;font-weight:500;color:var(--text);font-size:14px;cursor:pointer}
.perms input{margin-top:4px}
.warn{background:#3a2a14;border:1px solid #7a5420;color:#f3d49a;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}
.badge{background:var(--acc);color:#fff;border-radius:5px;padding:1px 6px;font-size:11px;font-weight:700;vertical-align:middle;margin-left:6px}
.center{max-width:480px;margin:60px auto;text-align:center}
.hide{display:none!important}

/* ===== 0.50 — Developer Portal Visual Refresh (layered over base styles) ===== */
:root{--bg:#09090f;--bg2:#13131b;--bg3:#1c1c27;--line:rgba(255,255,255,.09);--acc:#4d65fb;--acc2:#7b8cff;--vio:#9b5cff}
html,body{background:var(--bg);font-family:Onest,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:
  radial-gradient(600px 500px at 0% -10%,rgba(77,101,251,.32),transparent 70%),
  radial-gradient(520px 480px at 100% 10%,rgba(155,92,255,.2),transparent 70%),var(--bg);background-attachment:fixed}
::selection{background:var(--acc);color:#fff}
header.top{background:rgba(9,9,15,.7);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line);padding:14px 24px}
header.top img{width:38px;height:38px;border-radius:0;filter:drop-shadow(0 4px 12px rgba(77,101,251,.55))}
header.top b{font:600 16px Unbounded,Onest,sans-serif;letter-spacing:-.01em}
header.top a{color:var(--mute);font-weight:500;padding:8px 14px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);transition:color .2s,background .2s}
header.top a:hover{color:var(--text);background:rgba(255,255,255,.06);text-decoration:none}
main{padding-top:40px}
h1{font:700 clamp(26px,4vw,38px)/1.15 Unbounded,Onest,sans-serif;letter-spacing:-.03em;margin-bottom:10px}
h2{font:700 19px Unbounded,Onest,sans-serif;letter-spacing:-.02em;margin-top:36px}
p.lead{font-size:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:20px;margin-bottom:14px;transition:box-shadow .25s,transform .25s;animation:dvUp .5s cubic-bezier(.2,.8,.2,1) backwards}
.card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 20px 40px -24px rgba(0,0,0,.9)}
@keyframes dvUp{from{opacity:0;transform:translateY(12px)}}
.av{background:linear-gradient(135deg,var(--acc),var(--vio));box-shadow:0 8px 20px -8px rgba(91,90,250,.8)}
.av.big{border-radius:26px}
input[type=text],textarea,select{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px;padding:11px 13px;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc2);box-shadow:0 0 0 4px rgba(77,101,251,.2)}
button,.btn{background:linear-gradient(180deg,#6077ff,#4459f0);border-radius:12px;padding:10px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -8px rgba(77,101,251,.8);transition:transform .15s,filter .15s,box-shadow .15s}
button:hover,.btn:hover{background:linear-gradient(180deg,#6077ff,#4459f0);filter:brightness(1.1);transform:translateY(-1px)}
button:active,.btn:active{transform:scale(.97)}
button.ghost,.btn.ghost{background:rgba(255,255,255,.06);border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
button.ghost:hover,.btn.ghost:hover{background:rgba(255,255,255,.1);filter:none}
button.dng{background:transparent;box-shadow:inset 0 0 0 1px var(--red);border:0}button.dng:hover{background:var(--red);filter:none}
button:disabled{transform:none;filter:none}
pre{background:#0b0b12;border-color:var(--line);border-radius:14px;padding:16px}
code{background:rgba(123,140,255,.12);color:#c3cbff}
.perms label{padding:8px 10px;border-radius:10px;transition:background .15s}.perms label:hover{background:rgba(255,255,255,.04)}
.perms input{accent-color:var(--acc)}
.badge{background:linear-gradient(90deg,var(--acc),var(--vio));border-radius:6px}
.warn{border-radius:14px;background:rgba(240,178,50,.1);border-color:rgba(240,178,50,.35)}
.center{margin-top:72px}
.center .av.big{margin:0 auto}
@media(prefers-reduced-motion:reduce){.card{animation:none}*{transition-duration:.01ms!important}}