/* 1NFER workspace — one responsive layout, shared by chat and native checkout. */
:root{
  --bg:#f5f7f8;
  --paper:#fff;
  --ink:#19262b;
  --muted:#586971;
  --line:#dce5e6;
  --mint:#edf7f2;
  --green:#145c49;
  --accent:#e1f2e9;
  --radius:18px;
  --shadow:0 8px 30px #172c3805
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a{
  color:var(--green);
  text-underline-offset:4px
}
button,input,select,textarea{
  font:inherit
}
button,a,input,textarea,select{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:disabled,select:disabled{
  opacity:.5;
  cursor:not-allowed
}
[hidden]{
  display:none!important
}
:focus-visible{
  outline:3px solid #50a98c;
  outline-offset:3px
}
code{
  font:12px/1.6 ui-monospace,SFMono-Regular,monospace;
  overflow-wrap:anywhere
}
h1,h2,h3,p{
  overflow-wrap:break-word
}
h1{
  font-size:clamp(26px,3vw,36px);
  line-height:1.18;
  letter-spacing:-1.1px;
  margin:0 0 10px;
  font-weight:750
}
h2{
  font-size:19px;
  line-height:1.3;
  margin:0;
  letter-spacing:-.4px
}
h3{
  font-size:17px;
  margin:0 0 8px
}
.muted{
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  margin:10px 0
}
.eyebrow{
  font-size:10px;
  font-weight:750;
  letter-spacing:1.5px;
  color:var(--muted);
  margin:0 0 10px
}
.lead{
  font-size:14px;
  line-height:1.7;
  max-width:660px;
  margin:0
}
.shell{
  max-width:1480px;
  margin:auto;
  padding:0 32px
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:23px;
  font-weight:800;
  letter-spacing:-.8px;
  text-decoration:none;
  color:var(--ink)
}
.brand-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:var(--ink);
  color:white;
  font-size:19px
}
.topbar nav{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:12px;
  flex-wrap:wrap
}
.topbar button{
  margin:0
}
.top-balance{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--paper);
  white-space:nowrap
}
.top-balance span{
  font-size:11px;
  font-weight:500;
  color:var(--muted)
}
.top-balance strong{
  font-size:13px;
  font-variant-numeric:tabular-nums
}
.intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin:26px 0 24px
}
.intro-status{
  flex:0 0 295px
}
.badge{
  display:inline-block;
  font-size:11px;
  font-weight:650;
  line-height:1.5;
  padding:8px 12px;
  border-radius:12px;
  background:var(--mint);
  border:1px solid #cfe4da;
  color:var(--green);
  margin:0
}
.privacy-promise{
  font-size:12px;
  color:var(--green);
  margin:10px 0 0
}
.intro-status .muted{
  display:none
}
.workspace{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:24px;
  align-items:start
}
.workspace>.chat-card{
  grid-column:2;
  grid-row:1
}
.workspace>.sidebar{
  grid-column:1;
  grid-row:1
}
.card{
  min-width:0;
  background:var(--paper);
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0
}
.sidebar .card{
  padding:20px
}
.sidebar .muted{
  font-size:12px
}
.sidebar .primary{
  width:100%
}
.sidebar .quiet{
  font-size:12px
}
.quick-start h2{
  font-size:20px
}
.quick-start .primary{
  margin-top:6px
}
.quick-start .quiet{
  margin:0;
  padding-left:0;
  padding-right:0
}
.quick-start #quick-account-state{
  font-size:11px;
  margin-bottom:0
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px
}
.small-chip{
  font-size:10px;
  line-height:1.4;
  padding:6px 10px;
  border-radius:8px;
  background:#f1f5f4;
  white-space:normal;
  color:var(--muted)
}
button{
  min-height:42px;
  padding:9px 14px;
  margin:5px 0;
  border:1px solid #cedbd6;
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  font-size:13px;
  font-weight:650;
  transition:background .15s,border-color .15s
}
button:hover:enabled{
  background:#eef4f1;
  border-color:#91b7a8
}
button.primary{
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
button.primary:hover:enabled{
  background:#104d3d;
  border-color:#104d3d
}
button.quiet{
  background:transparent;
  border-color:transparent;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:4px
}
.button-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}
label{
  display:block;
  font-size:12px;
  font-weight:650;
  margin:14px 0 6px
}
input:not([type=checkbox]),select,textarea{
  width:100%;
  min-width:0;
  border:1px solid #cddbd7;
  border-radius:10px;
  padding:11px 12px;
  background:#fbfcfc;
  color:var(--ink)
}
input[readonly]{
  font-family:ui-monospace,monospace;
  font-size:12px
}
textarea{
  resize:vertical;
  line-height:1.6
}
.check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12px;
  font-weight:500
}
.check input{
  margin:4px 0;
  flex-shrink:0
}
.secret-preview{
  background:var(--mint);
  border:1px solid #c6e1d3;
  border-radius:12px;
  padding:16px;
  margin-top:14px
}
.secret-preview .button-row{
  gap:6px
}
.secret-preview button{
  font-size:12px
}
.registration-status{
  font-size:12px;
  line-height:1.6;
  background:var(--mint);
  border:1px solid #c6e1d3;
  border-radius:10px;
  padding:12px;
  overflow-wrap:anywhere
}
.registration-status:empty{
  display:none
}
/* Frequently needed account access sits ahead of promotional and developer details. */
details{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line)
}
summary{
  font-size:12px;
  font-weight:650;
  line-height:1.6;
  cursor:pointer;
  overflow-wrap:anywhere
}
summary span{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted)
}
details[open]>summary{
  margin-bottom:12px
}
.account-drawer{
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper)
}
.account-drawer>summary{
  padding:17px 20px;
  font-size:13px;
  list-style:disclosure-closed
}
.account-drawer[open]>summary{
  margin:0;
  border-bottom:1px solid var(--line)
}
.drawer-content{
  display:grid;
  gap:0;
  padding:0 18px
}
.drawer-content .card{
  padding:18px 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  background:transparent
}
.drawer-content .card:last-child{
  border-bottom:0
}
.account-options,.funding-options,.business-options{
  margin:0;
  padding:0;
  border:0
}
.account-options>summary,.funding-options>summary{
  font-size:13px
}
.account-card .section-head{
  margin:16px 0 10px
}
.account-card h2{
  font-size:16px
}
.account-options summary span,.funding-options summary span{
  font-size:11px
}
.balance{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin:14px 0
}
.balance span{
  font-size:32px;
  font-weight:750;
  letter-spacing:-1px
}
.balance small{
  font-size:11px;
  color:var(--muted)
}
.tiny-ledger{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6px;
  font-size:12px;
  margin:12px 0
}
.tiny-ledger dt{
  color:var(--muted)
}
.tiny-ledger dd{
  margin:0;
  text-align:right
}
.offer-link,.offer-support{
  display:block;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere
}
.offer-link{
  background:var(--mint);
  font-weight:650
}
.offer-support{
  border:1px solid var(--line)
}
#referral-panel{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line)
}
#referral-link{
  overflow-wrap:anywhere
}
.chat-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:680px;
  height:calc(100dvh - 210px);
  padding:26px 28px
}
.chat-card .section-head{
  flex-shrink:0;
  margin-bottom:15px
}
.chat-card h2{
  font-size:22px
}
.model-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.model-toolbar label{
  margin:0;
  color:var(--muted)
}
.model-toolbar select{
  width:auto;
  max-width:100%;
  min-width:190px;
  font-size:13px;
  background:#f6f9f8;
  padding:9px 12px
}
.model-access{
  font-size:12px;
  color:var(--green);
  line-height:1.5;
  margin:0;
  flex-basis:100%
}
.chat-card #model-price{
  font-size:11px;
  line-height:1.6;
  margin:7px 0
}
.request-options{
  border:0;
  margin:0;
  padding:0
}
.request-options summary,.request-options .muted{
  font-size:11px;
  color:var(--muted)
}
.transcript{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:18px;
  min-height:200px;
  overflow:auto;
  overscroll-behavior:contain;
  margin:16px 0;
  padding:24px 4px;
  border-top:1px solid #e9eeeb;
  border-bottom:1px solid #e9eeeb
}
.welcome{
  max-width:450px;
  margin:auto;
  text-align:center;
  color:var(--muted)
}
.welcome-mark{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin:auto;
  background:var(--mint);
  color:var(--green);
  border-radius:18px;
  font-size:25px;
  font-weight:800
}
.welcome h3{
  font-size:22px;
  font-weight:650;
  letter-spacing:-.5px;
  color:var(--ink);
  margin:18px 0 10px
}
.welcome p{
  font-size:14px;
  margin:8px 0
}
.welcome small{
  display:block;
  max-width:400px;
  margin:14px auto;
  font-size:12px;
  line-height:1.7
}
.message{
  max-width:92%;
  padding:14px 18px;
  border-radius:14px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.7
}
.message.user{
  align-self:flex-end;
  background:#e9f4ed;
  border-bottom-right-radius:4px
}
.message.assistant{
  align-self:flex-start;
  background:#f3f5f6;
  border-bottom-left-radius:4px
}
.message.user::before,.message.assistant::before{
  display:block;
  font-size:10px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--muted)
}
.message.user::before{
  content:"You"
}
.message.assistant::before{
  content:"AI"
}
.message.unconfirmed{
  border:1px dashed #b69352;
  opacity:.8
}
.message-meta{
  font-size:11px;
  color:var(--muted)
}
.chat-card label[for=chat-input]{
  margin:0 0 7px
}
.chat-card textarea{
  font-size:14px;
  background:#f9fbfa;
  min-height:84px;
  max-height:220px;
  border-radius:12px
}
.chat-card .button-row{
  justify-content:flex-end
}
.chat-card #chat-state,.chat-card #chat-context{
  font-size:11px;
  line-height:1.6;
  margin:3px 0
}
.chat-purpose{
  margin-top:8px;
  padding-top:8px
}
.chat-purpose summary,.chat-purpose .muted{
  font-size:11px
}
.chat-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px
}
.chat-links:empty{
  display:none
}
.chat-links a{
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 12px;
  font-size:12px
}
.launch-card{
  background:linear-gradient(135deg,#f2faf5,#fff);
  border-color:#cce1d4
}
.launch-card .discount-number{
  color:var(--green);
  font-size:32px;
  letter-spacing:-1.4px;
  margin:0 3px
}
.launch-state{
  font-size:11px;
  line-height:1.6;
  padding:10px;
  border-radius:10px;
  background:#e7f2ec;
  color:var(--green)
}
.promo-conditions .muted,.discount-details .muted{
  font-size:11px
}
.budget-picks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:14px 0
}
.budget-picks>div{
  min-width:0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background:#fff
}
.budget-picks strong,.budget-picks span,.budget-picks small{
  display:block
}
.budget-picks strong{
  font-size:14px
}
.budget-picks span{
  font-size:11px;
  line-height:1.5;
  margin-top:6px
}
.budget-picks small{
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
  margin-top:5px
}
.discount-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  margin:10px 0
}
.discount-table th,.discount-table td{
  text-align:left;
  padding:7px 0;
  border-bottom:1px solid var(--line)
}
.discount-table th{
  color:var(--muted);
  font-weight:650
}
.discount-table th:last-child,.discount-table td:last-child{
  text-align:right
}
.coin-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px
}
.coin-chip{
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  font-size:10px;
  font-weight:650
}
.coin-chip .currency-logo{
  width:21px;
  height:21px;
  flex-basis:21px
}
.currency-footnote{
  font-size:11px;
  line-height:1.65;
  color:var(--muted);
  margin:10px 0 0
}
.agent-card>code,.agent-guidance>code{
  display:block;
  background:#f3f6f5;
  border-radius:8px;
  padding:10px
}
.agent-guidance h2{
  font-size:16px;
  margin-top:12px
}
.agent-steps{
  font-size:12px;
  line-height:1.7;
  padding-left:18px;
  color:var(--muted)
}
.agent-steps li{
  padding:4px 0
}
.roadmap-card h2{
  font-size:18px
}
.roadmap-card .muted{
  font-size:12px
}
.onboarding-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:var(--mint);
  border:1px solid #c6e1d3;
  border-radius:14px;
  padding:16px;
  margin-bottom:14px
}
.onboarding-banner h3{
  font-size:17px
}
.onboarding-banner p{
  font-size:12px;
  line-height:1.6;
  margin:5px 0
}
.onboarding-banner .eyebrow{
  font-size:9px
}
.banner-actions{
  display:flex;
  flex-direction:column;
  flex-shrink:0
}
.notice{
  background:#fff5e0;
  border:1px solid #e4c994;
  border-radius:12px;
  padding:14px 18px;
  margin:12px 0;
  font-size:13px;
  overflow-wrap:anywhere
}
/* Shared native invoice and currency controls;
secrets and merchant UI remain absent. */
.currency-options{
  display:grid;
  gap:8px;
  margin:12px 0 18px
}
.currency-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fafcfb
}
.currency-option[data-ready=no]{
  border-style:dashed
}
.currency-logo{
  display:block;
  width:28px;
  height:28px;
  flex:0 0 28px
}
.currency-copy{
  display:grid;
  gap:3px;
  min-width:0
}
.currency-copy strong{
  font-size:12px;
  line-height:1.4
}
.currency-copy small{
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  overflow-wrap:anywhere
}
.currency-status{
  color:var(--green)
}
.wallet-currency{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px
}
.invoice-card{
  margin:24px 0;
  overflow-wrap:anywhere
}
.invoice-grid{
  display:grid;
  grid-template-columns:minmax(100px,1fr) minmax(0,2fr);
  gap:9px;
  font-size:13px
}
.invoice-grid dt{
  color:var(--muted)
}
.invoice-grid dd{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere
}
/* One clear payment method, precise address and aligned actions. */
.wallet{
  background:#f3f6fa;
  border:1px solid #d5dde8;
  border-radius:14px;
  padding:22px;
  margin:18px 0;
  display:grid;
  gap:16px
}
.wallet code{
  display:block;
  word-break:break-all;
  padding:14px;
  border:1px solid #dbe2eb;
  border-radius:9px;
  background:#fff;
  margin:0;
  font-size:13px;
  line-height:1.8
}
.wallet button{
  min-height:46px;
  width:100%;
  margin:0;
  border-radius:9px
}
.wallet p{margin:0;line-height:1.65}
.wallet input{margin:0;width:100%}
.payment-method-picker{margin:14px 0}
.payment-method-picker summary{font-size:13px;color:#506074}
.payment-method-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.payment-method-buttons button{min-height:44px;min-width:92px;padding:10px 18px;border-radius:12px;background:#f4f7f9;border:1px solid #d8e1e8;color:#33465a;font-weight:650}
.payment-method-buttons button:hover:enabled{background:#eaf2ef;border-color:#a7c9bb;color:#174d3c}
.payment-method-buttons button[aria-pressed=true]{background:#163c33;color:#fff;border-color:#163c33;box-shadow:0 4px 12px #163c3320}
.payment-method-note{margin:8px 0;font-size:13px}
.sender-binding-note{
  border-top:1px solid #c6e1d3;
  padding-top:10px
}
.invoice-item{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
  overflow-wrap:anywhere
}
.invoice-item button{
  display:block
}
.invoice-countdown{
  font-size:23px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  color:#253d5b
}
.invoice-dialog{
  border:0;
  padding:0;
  background:transparent;
  color:var(--ink);
  width:min(660px,calc(100vw - 28px));
  max-height:calc(100dvh - 36px);
  border-radius:20px;
  box-shadow:0 20px 90px #152b3c40;
  overflow:auto
}
.invoice-dialog::backdrop{
  background:#10223185;
  backdrop-filter:blur(4px)
}
.invoice-dialog .invoice-card{
  margin:0;
  padding:30px;
  border-radius:18px;
  max-width:100%;
  background:#fff;
  color:#19273a;
  border:1px solid #dce3ec
}
#refresh-invoice{
  display:block;clear:both;width:100%;min-height:48px;background:#18283d;color:#fff;
  border:1px solid #18283d;border-radius:10px;margin:20px 0 12px
}
#refresh-invoice:hover{background:#28415f}
#sponsor-link{display:block;padding:12px 0;margin:0;line-height:1.7;overflow-wrap:anywhere}
#close-invoice{min-height:44px;min-width:84px;padding:10px 18px;margin:0}
#invoice-state{background:#edf2f8;color:#253d5b;border:1px solid #dae2ee}
.invoice-card .section-head{align-items:center;margin-bottom:22px;gap:20px}
.invoice-card .muted{line-height:1.7}
.invoice-grid{padding:18px 0;border-top:1px solid #e3e8ef;border-bottom:1px solid #e3e8ef;gap:13px 20px}
#invoice-total{font-size:19px;font-weight:750}
.invoice-back{display:block;width:100%;min-height:46px;margin:16px 0 0;border-radius:12px;border:1px solid #d5dfe7;background:#f7f9fa;color:#314257;font-weight:650}
.invoice-back:hover:enabled{background:#edf4f1;border-color:#b2cec3;color:#174d3c}
.invoice-back-note{margin:8px 0 16px;font-size:12px;line-height:1.6}
.device-key-controls{display:grid;gap:10px;margin:14px 0;padding:14px;border:1px solid #dbe3e9;border-radius:12px;background:#f8fafb}
.device-key-controls .check,.secret-preview .check,#login-panel .check{display:flex;align-items:flex-start;gap:9px;line-height:1.5;font-size:13px}
.device-key-controls .check,.secret-preview .check,#login-panel .check{width:fit-content;max-width:100%;align-self:flex-start}
.device-key-controls .check input,.secret-preview .check input,#login-panel .check input{width:16px;height:16px;min-width:16px;flex:0 0 16px;margin:3px 0 0}
.device-key-controls button{width:100%;min-height:42px;margin:0;border-radius:10px}
.device-key-controls p,.secret-preview .muted{font-size:12px;line-height:1.6;margin:4px 0}
.device-key-option{background:#fff}
.sponsor-intro .lead{
  max-width:700px
}
.text-link{
  overflow-wrap:anywhere;
  font-size:13px
}
footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:22px 0;
  margin-top:28px;
  font-size:11px;
  color:var(--muted)
}
footer div{
  display:flex;
  gap:18px;
  flex-wrap:wrap
}
.guide-shell{
  max-width:900px;
  margin:auto;
  padding:24px
}
.guide-shell article{
  margin:28px 0;
  padding:32px
}
.guide-shell article p,.guide-shell li{
  font-size:15px;
  line-height:1.7
}
.guide-shell h1{
  font-size:36px
}
.guide-shell h2{
  font-size:23px;
  margin-top:28px
}
.guide-shell .guide-state{
  padding:14px;
  border-left:3px solid #687cdb;
  background:#f3f5fb;
  border-radius:5px
}
.guide-shell a{
  overflow-wrap:anywhere
}
.start-steps{
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  font-size:12px;
  color:var(--muted);
  margin:20px 0
}
.start-steps span{
  display:flex;
  align-items:center;
  gap:8px
}
@media(max-width:1100px){
  .shell{
    padding:0 24px
  }
  .workspace{
    grid-template-columns:280px minmax(0,1fr);
    gap:18px
  }
  .chat-card{
    padding:24px
  }
  .intro-status{
    flex-basis:260px
  }
  .topbar nav{
    gap:12px
  }
  .topbar nav>a:last-child{
    display:none
  }
  .small-chip{
    display:none
  }
}
@media(max-width:860px){
  .shell{
    padding:0 20px
  }
  .intro{
    display:block;
    margin:22px 0
  }
  .intro-status{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:14px
  }
  .privacy-promise{
    margin:0
  }
  .intro h1{
    font-size:28px
  }
  .workspace{
    grid-template-columns:260px minmax(0,1fr);
    gap:16px
  }
  .sidebar .card{
    padding:18px
  }
  .chat-card{
    padding:20px;
    min-height:720px
  }
  .welcome h3{
    font-size:20px
  }
  .budget-picks{
    grid-template-columns:1fr
  }
  .chat-card #chat-context{
    display:none
  }
  .model-toolbar select{
    min-width:0;
    width:100%
  }
  .model-toolbar label{
    display:none
  }
}
@media(max-width:680px){
  .shell{
    padding:0 14px
  }
  .topbar{
    padding:14px 0;
    gap:12px
  }
  .topbar nav{
    gap:8px;
    flex-wrap:nowrap
  }
  .topbar nav>a{
    display:none
  }
  .brand{
    font-size:21px
  }
  .brand-icon{
    width:34px;
    height:34px;
    font-size:17px
  }
  .top-balance span{
    display:none
  }
  .top-balance strong{
    font-size:11px
  }
  .topbar button{
    padding:8px 10px;
    min-height:40px;
    font-size:12px
  }
  .intro{
    margin:20px 0
  }
  .intro h1{
    font-size:27px
  }
  .intro .lead{
    font-size:13px
  }
  .intro .eyebrow{
    font-size:9px
  }
  .intro-status{
    display:block;
    margin-top:12px
  }
  .privacy-promise{
    margin-top:8px;
    font-size:11px
  }
  .workspace{
    display:flex;
    flex-direction:column;
    gap:18px
  }
  .workspace>.chat-card{
    width:100%;
    height:auto;
    min-height:640px;
    order:0;
    padding:20px 17px
  }
  .workspace>.sidebar{
    width:100%;
    order:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .sidebar>.account-drawer,.sidebar>.agent-card,.sidebar>.roadmap-card{
    grid-column:1/-1
  }
  .sidebar .card{
    padding:18px
  }
  .transcript{
    min-height:240px;
    max-height:440px;
    padding:22px 0
  }
  .welcome h3{
    font-size:20px
  }
  .welcome p{
    font-size:13px
  }
  .welcome small{
    font-size:11px
  }
  .chat-card .section-head .eyebrow{
    display:none
  }
  .model-toolbar select{
    width:100%
  }
  .chat-card textarea{
    min-height:88px
  }
  .chat-card .button-row{
    gap:8px
  }
  .chat-card .button-row button{
    font-size:12px
  }
  .onboarding-banner{
    display:block
  }
  .banner-actions{
    flex-direction:row;
    gap:8px;
    margin-top:10px
  }
  .onboarding-banner p{
    font-size:11px
  }
  .drawer-content{
    padding:0 20px
  }
  .invoice-dialog .invoice-card{
    padding:20px
  }
  .invoice-grid{
    grid-template-columns:minmax(80px,1fr) minmax(0,1.6fr)
  }
  footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }
  .guide-shell{
    padding:14px
  }
  .guide-shell article{
    padding:22px
  }
  .guide-shell h1{
    font-size:28px
  }
}
@media(max-width:440px){
  .workspace>.sidebar{
    display:flex;
    flex-direction:column
  }
  .budget-picks{
    grid-template-columns:1fr 1fr
  }
  .intro h1{
    font-size:25px
  }
  .chat-card .button-row{
    justify-content:space-between
  }
  .topbar nav{
    gap:6px
  }
  .invoice-card .section-head{
    gap:10px
  }
  .invoice-card h2{
    font-size:19px
  }
}
@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    transition:none!important
  }
}
/* Keep the disclosure indicator inside its card, including narrow sidebars. */
.account-drawer > summary {
  position: relative;
  display: block;
  list-style: none;
  padding-right: 42px;
}
.account-drawer > summary::-webkit-details-marker {
  display: none;
}
.account-drawer > summary::after {
  content: "›";
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--muted);
  font-size: 23px;
  line-height: 1;
}
.account-drawer[open] > summary::after {
  transform: rotate(90deg);
}

/* Completed payment metadata is separate from receiving instructions. */
.payment-receipt{margin:22px 0;padding:22px;border:1px solid #dbe2eb;border-radius:16px;background:#f6f8fb;min-width:0}
.payment-receipt h3{margin:0 0 18px;font-size:17px;color:#17243b}
.receipt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px 20px;margin:0}
.receipt-grid dt{color:#627087;font-size:13px;line-height:1.5}
.receipt-grid dd{margin:0;text-align:right;font-size:14px;font-weight:600;overflow-wrap:anywhere;color:#17243b}
.payment-receipt code{display:block;padding:14px;border:1px solid #dbe2eb;border-radius:10px;background:#fff;overflow-wrap:anywhere;word-break:break-all;line-height:1.7;font-size:12px;color:#24334b}
.receipt-address-label{margin:20px 0 8px;font-size:13px;font-weight:600;color:#627087}
.payment-receipt .muted{margin:16px 0 0;line-height:1.7;font-size:12px}
@media(max-width:480px){.payment-receipt{padding:16px}.receipt-grid{gap:12px}.receipt-grid dd{font-size:13px}}

.top-balance small{font-size:10px;color:var(--muted);font-weight:500;white-space:nowrap}
.balance-detail{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;padding:12px 0;color:var(--muted)}
.balance-detail strong{color:var(--ink)}
#invoice-open-account{display:block;width:100%;margin:18px 0 0;min-height:48px}
#invoice-account-help{margin:12px 0 20px;line-height:1.7}

.account-rates{margin:18px 0}.account-model-rate{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.account-model-rate strong{font-size:13px}.account-model-rate span{font-size:12px;color:var(--muted);line-height:1.7}

/* Visible request state and private credential actions. */
.account-secret{display:grid;gap:10px;margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.account-secret .button-row{display:flex;flex-wrap:wrap;gap:10px}
.account-secret input{min-width:0;width:100%;font-family:monospace}
.message.status{color:var(--muted);border:1px dashed var(--line)}
.message.request-error{border:1px solid #80684a;background:#2a241c;color:#f1dfc4}
.message.request-error button{display:block;margin-top:12px;min-height:40px;padding:10px 14px}

/* Compact workspace: account left, conversation centre, agent quickstart right. */
.workspace{grid-template-columns:224px minmax(0,1fr) 224px;gap:18px}
.workspace>.sidebar{grid-column:1;grid-row:1;display:flex;gap:14px}
.workspace>.chat-card{grid-column:2;grid-row:1;height:auto;min-height:550px;padding:22px}
.workspace>.agent-sidebar{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.agent-sidebar .card,.sidebar .card{padding:18px}
.agent-sidebar h2,.sidebar h2{font-size:18px;line-height:1.35}
.agent-sidebar .muted,.sidebar .muted{font-size:12px;line-height:1.6}
.intro{margin:20px 0 18px;gap:24px}
.intro h1{font-size:clamp(25px,2.5vw,32px);margin-bottom:8px}
.intro .eyebrow{margin-bottom:6px}
.intro-status{flex-basis:250px}
.topbar nav{gap:10px}
.topbar nav>a:last-child{display:none}
.top-balance{flex-wrap:wrap;max-width:260px;white-space:normal;gap:4px 8px}
.top-balance small{white-space:normal;width:100%;overflow-wrap:anywhere}
button,a,summary{overflow-wrap:anywhere}
.start-actions{display:grid;gap:8px;margin:16px 0 12px}
.start-actions button{width:100%;margin:0;min-height:44px;padding:10px 12px;text-decoration:none}
.start-actions .fund-action{background:var(--mint);color:var(--green);border-color:#b8d8c8}
.start-actions .fund-action:hover:enabled{background:#dcefe5;color:var(--green)}
.start-actions .key-action{font-size:12px;background:transparent}
.quick-start #quick-account-state{line-height:1.55}
.sidebar .coin-strip{gap:8px;margin:14px 0 0;flex-wrap:wrap}
.sidebar .coin-chip{font-size:10px;gap:4px;padding:5px}
.sidebar .currency-logo{width:20px;height:20px;flex-basis:20px}
.launch-card .discount-details{margin-top:12px}
.agent-sidebar .endpoint{display:block;margin:14px 0;padding:10px;border-radius:8px;background:var(--mint);font-size:11px;overflow-wrap:anywhere}
.agent-sidebar a{display:block;margin-top:12px;font-size:12px;line-height:1.65}
.chat-card .section-head{margin-bottom:12px;gap:10px;flex-wrap:wrap}
.chat-card h2{font-size:20px}
.chat-card .eyebrow{margin-bottom:4px}
.chat-card .transcript{min-height:160px;margin:12px 0;padding:18px 4px}
.chat-card textarea{min-height:78px;max-height:200px}
.chat-card .button-row{gap:10px;margin-top:8px}
.chat-card .button-row button{margin:0}
.chat-card #chat-state{margin:8px 0;font-size:11px}
.welcome h3{font-size:20px}
.welcome small{font-size:11px}
.access-dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 40px);border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--paper);color:var(--ink);box-shadow:0 24px 90px #13282030;overflow:auto}
.access-dialog::backdrop{background:#12232165;backdrop-filter:blur(3px)}
.access-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.access-head button{margin:0;flex-shrink:0}
.access-tabs{display:flex;gap:10px;margin:18px 0}
.access-tabs button{margin:0;flex:1;padding:10px;min-width:0}
.access-tabs button[aria-pressed=true]{color:var(--green);background:var(--mint);border-color:#91b7a8}
.access-dialog .account-drawer{border:0;background:transparent}
.access-dialog .account-drawer>summary{display:none}
.access-dialog .drawer-content{padding:0}
.access-dialog .drawer-content .card{padding:0;border:0}
.access-dialog .account-options>summary,.access-dialog .funding-options>summary{display:none}
.access-dialog .account-card .section-head{margin-top:0}
.access-dialog .currency-options{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.access-dialog .currency-state{font-size:11px}
.access-dialog #create-invoice{display:block;width:100%;margin:16px 0 8px;min-height:46px}
.access-dialog #login-panel>button{width:100%}
.existing-key-login{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.access-dialog .existing-key-login #connect{display:block;width:100%;min-height:46px;margin:12px 0 0}
.session-default-note{font-size:12px;line-height:1.55;margin:8px 0 4px}
.access-dialog #credit-amount{font-size:20px;font-variant-numeric:tabular-nums}
.access-dialog .account-secret{padding:12px;gap:6px}
.access-dialog .account-secret p{margin:4px 0}
.access-dialog .notice{margin:12px 0}
.card{transition:border-color .18s,box-shadow .18s}
.card:hover{border-color:#c0d3cc;box-shadow:0 6px 24px #172c380a}
button{transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
button:hover:enabled{transform:translateY(-1px);box-shadow:0 3px 8px #172c380a}
button:active:enabled{transform:translateY(0)}
a:hover{color:#0b4434}
.access-dialog[open]{animation:access-enter .18s ease-out}
@keyframes access-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1120px){
 .workspace{grid-template-columns:216px minmax(0,1fr)}
 .workspace>.agent-sidebar{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr}
 .workspace>.chat-card{min-height:540px}
 .intro-status{flex-basis:216px}
}
@media(max-width:760px){
 .shell{padding:0 16px}
 .topbar{align-items:flex-start;flex-wrap:wrap;gap:12px}
 .topbar nav{flex-wrap:wrap;gap:8px;justify-content:flex-end}
 .topbar nav>a{display:none}
 .topbar #open-account{display:none}
 .top-balance{max-width:180px}
 .top-balance span{display:block}
 .topbar button{font-size:11px;padding:8px 10px}
 .workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
 .workspace>.sidebar{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .workspace>.chat-card{grid-column:1;grid-row:2;order:initial;height:auto;min-height:500px;padding:18px}
 .workspace>.agent-sidebar{grid-column:1;grid-row:3;grid-template-columns:1fr 1fr;gap:12px}
 .intro{margin:16px 0;display:block}
 .intro-status{display:none}
 .intro h1{font-size:25px}
 .chat-card .transcript{min-height:180px;max-height:360px}
}
@media(max-width:480px){
 .topbar nav{width:100%;justify-content:flex-start}
 .topbar .brand{font-size:20px}
 .workspace>.sidebar,.workspace>.agent-sidebar{display:flex;flex-direction:column}
 .workspace>.sidebar{display:contents}
 .workspace>.sidebar .quick-start{grid-column:1;grid-row:1}
 .workspace>.sidebar .launch-card{grid-column:1;grid-row:3}
 .workspace>.agent-sidebar{grid-row:4}
 .workspace>.sidebar .quick-start{padding:16px}
 .start-actions{grid-template-columns:1fr 1fr;margin:12px 0 8px}
 .start-actions .key-action{grid-column:1/-1;min-height:36px}
 .sidebar .quick-start h2{font-size:17px}
 .quick-start .eyebrow{display:none}
 .quick-start #quick-account-state{margin:6px 0 0}
 .access-dialog{padding:18px}
 .access-dialog .currency-options{grid-template-columns:1fr}
 .chat-card .small-chip{display:none}
}
@media(prefers-reduced-motion:reduce){button,.card{transition:none}.access-dialog[open]{animation:none}button:hover:enabled{transform:none}}
.chat-card .welcome-mark{width:40px;height:40px;font-size:20px;border-radius:12px}
.chat-card .welcome h3{margin:12px 0 8px;font-size:18px}
.chat-card .welcome small{display:none}
@media(min-width:761px){.workspace>.chat-card{height:auto;min-height:510px}.chat-card .section-head .eyebrow{display:none}.chat-card .chat-purpose{margin-top:6px;padding-top:6px}}
@media(max-width:480px){.topbar .top-balance span{display:none}.topbar .top-balance{max-width:140px}.topbar nav{gap:7px}.topbar #top-key{font-size:10px}.quick-start>.muted:first-of-type{margin-bottom:6px}}

/* Content may grow on banners, long model names and disclosures; no controls escape. */
.chat-card .transcript{flex:1 0 160px;max-height:420px}
.quick-start .start-actions button{margin:0;min-height:42px}
.quick-start .start-actions .key-action{min-height:36px}
.sidebar .coin-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sidebar .coin-chip{min-width:0;padding:4px;font-size:9px;gap:3px}
.sidebar .coin-chip .currency-logo{width:16px;height:16px;flex-basis:16px}
.agent-sidebar .offer-support{padding:0;border:0;text-decoration:underline;text-underline-offset:4px}

/* Long setup commands wrap inside their article at every breakpoint. */
.guide-shell article{min-width:0;overflow-wrap:anywhere}
.guide-shell pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:12px;background:#f3f6f5;font-size:12px;line-height:1.65}
.guide-shell pre code{display:block;max-width:100%;white-space:inherit;overflow-wrap:anywhere}
.guide-shell .download-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:16px 0}
.guide-shell .download-actions .offer-link{margin:0}
.guide-shell .advanced-guide>summary{font-size:15px;padding:8px 0}

/* Agent procurement: concise steps and contained commands. */
.agent-start{padding:22px 0;margin-bottom:24px;border-bottom:1px solid var(--line)}
.agent-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}
.agent-steps>div{border:1px solid var(--line);border-radius:14px;padding:16px;background:#f5faf8;min-width:0}
.agent-steps strong{color:#155a4b;font-size:14px}.agent-steps p{font-size:13px;margin:10px 0 0}
.agent-sidebar .endpoint{display:block;overflow-wrap:anywhere;padding:10px;border:1px solid var(--line);border-radius:10px;background:#f5faf8;font-size:12px;margin:12px 0}
@media(max-width:650px){.agent-steps{grid-template-columns:1fr}.agent-start{padding-top:12px}}