*{box-sizing:border-box}
:root{
  color-scheme:dark;
  --bg:#0b0d12;
  --panel:#12151c;
  --panel-2:#0e1117;
  --border:#252b36;
  --border-strong:#303746;
  --text:#f5f7fb;
  --muted:#9098a8;
  --muted-2:#6f7787;
  --accent:#ffffff;
}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100dvh}
button,input,select,textarea{font:inherit}
button{border:0;border-radius:11px;background:#fff;color:#0a0c10;font-weight:800;padding:12px 17px;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #aab5c7;outline-offset:2px}
.secondary{background:#1d222c;color:#e7ebf2}
.small{padding:9px 12px;font-size:13px}
.danger{background:#3a1820;color:#ffb8c3}
.muted{color:var(--muted);font-size:13px}
.brand{font-size:21px;font-weight:800;letter-spacing:-.03em}
input,select,textarea{width:100%;border:1px solid #2b313d;background:var(--panel-2);color:#fff;border-radius:11px;outline:none}
input,select{height:46px;padding:0 13px}
textarea{min-height:340px;padding:14px;resize:vertical;line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
input:focus,select:focus,textarea:focus{border-color:#687388;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
label{display:grid;gap:7px;color:#cdd3df;font-size:13px;font-weight:700}
.app-shell{width:min(100% - 28px,980px);margin:0 auto;padding:28px 0 60px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}
h1{font-size:25px;line-height:1.15;margin:0 0 7px;letter-spacing:-.035em}
.tabs{display:flex;gap:7px;overflow:auto;margin-bottom:12px;padding:4px}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;color:#8f98a9;border-radius:10px;padding:10px 15px;cursor:pointer;font-weight:700;white-space:nowrap}
.tab.active{background:#1c212b;color:#fff}
.tab-panel{display:none}
.tab-panel.active{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.actions{display:flex;gap:10px;align-items:center;margin-top:17px}
.actions.full{margin-top:0}
.result{white-space:pre-wrap;margin:17px 0 0;min-height:0;color:#b9f7cf;font-size:13px;line-height:1.5}
.result[data-error="true"]{color:#ffabb5}
.key-box code,.endpoint code{word-break:break-all;color:#fff;font-size:13px}
.switch-row{display:flex;align-items:center;gap:10px;font-weight:700;margin:15px 0}
.switch-row input{width:18px;height:18px}
.endpoint{display:grid;gap:9px;padding:13px;border-radius:12px;background:#0e1117;border:1px solid #242a34;margin-bottom:16px}
.endpoint span{font-size:12px;color:#8f98a8}
.endpoint-actions{display:flex;gap:8px;flex-wrap:wrap}
.endpoint-actions .small{width:max-content}
.api-usage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border-radius:12px;background:#0e1117;border:1px solid #242a34;margin:0 0 16px}.api-usage span{font-size:12px;color:#8f98a8}.api-usage strong{font-size:14px;color:#fff}
.notice{margin-top:18px;padding:13px;border-radius:12px;background:#181c25;color:#aab2c1;font-size:13px;line-height:1.5}

/* Auth page */
.auth-page{display:grid;place-items:center;padding:24px}
.auth-shell{width:min(100%,460px)}
.auth-card{background:rgba(18,21,28,.96);border:1px solid var(--border);border-radius:24px;padding:30px;box-shadow:0 28px 90px rgba(0,0,0,.32)}
.auth-brand-row{display:flex;align-items:center;gap:11px;margin-bottom:34px}
.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:#0a0c10;font-size:12px;font-weight:900;letter-spacing:-.03em}
.auth-copy{margin-bottom:24px}
.eyebrow{margin:0 0 10px;color:#8f98a8;font-size:11px;font-weight:900;letter-spacing:.16em}
.auth-copy h1{font-size:34px;margin-bottom:9px}
.auth-copy .muted{font-size:14px;line-height:1.55;max-width:39ch}
.auth-form{display:grid;gap:15px}
.primary-button{width:100%;height:48px;margin-top:2px}
.divider{display:flex;align-items:center;gap:12px;margin:21px 0;color:#6e7685;font-size:12px}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--border)}
.google-button{width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#101319}
.google-icon{display:grid;place-items:center;width:20px;height:20px}
.google-icon svg{width:20px;height:20px;display:block}
.mode-button{width:100%;margin-top:10px;height:46px}
.status{min-height:20px;margin:15px 0 0;color:#b9f7cf;font-size:13px;line-height:1.45}
.status[data-error="true"]{color:#ffabb5}
.auth-footnote{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border);color:var(--muted-2);font-size:11px;line-height:1.5;text-align:center}


/* Onboarding */
.onboarding-page{display:grid;place-items:center;padding:24px}
.onboarding-shell{width:min(100%,560px)}
.onboarding-card{background:rgba(18,21,28,.96);border:1px solid var(--border);border-radius:24px;padding:30px;box-shadow:0 28px 90px rgba(0,0,0,.32)}
.onboarding-copy{margin-bottom:24px}
.onboarding-copy h1{font-size:34px;margin:0 0 9px;letter-spacing:-.04em}
.onboarding-grid{gap:15px}
.profile-preview{display:grid;gap:5px;padding:14px;border:1px solid var(--border);background:var(--panel-2);border-radius:12px}
.profile-preview-label{font-size:11px;color:var(--muted-2);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.profile-preview strong{font-size:18px;letter-spacing:-.02em}
.profile-preview small{font-size:12px}

@media(max-width:680px){
  .app-shell{width:min(100% - 18px,980px);padding-top:14px}
  .panel{padding:17px;border-radius:15px}
  .panel-head{flex-direction:column}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .topbar{align-items:flex-start}
  .tabs{margin-left:-4px;margin-right:-4px}
  textarea{min-height:290px}
  .auth-page{padding:14px}
  .auth-card{padding:24px 19px;border-radius:20px}
  .auth-brand-row{margin-bottom:28px}
  .auth-copy h1{font-size:30px}
  .onboarding-page{padding:14px}
  .onboarding-card{padding:24px 19px;border-radius:20px}
  .onboarding-copy h1{font-size:30px}
}