/* Shared layout rules for both the standalone and integrated workspace. */
:root{--workspace-sidebar:244px}
html,body{min-width:0;max-width:100%;margin:0}
*,*:before,*:after{box-sizing:border-box}
.workspace,.workspace main,.page,.layout,.fields,.node,.operand,.card,.dashboard-grid>*{min-width:0}
.workspace>header{gap:16px;flex-wrap:wrap;height:auto;min-height:76px;padding-block:16px}
.workspace>header>span:first-child{flex:1;min-width:120px}
.language-control{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;max-width:100%;flex-direction:row}
.language-control select{width:auto;min-width:144px;max-width:220px;margin:0;min-height:42px}
.auth-language-control{justify-content:flex-end;margin-block-end:20px}
.language-message{width:100%;font-size:12px;margin:0;text-align:end}
.card-head,.node-head,.group-controls,.actions,.heading{flex-wrap:wrap;gap:12px}
h1,h2,h3,li,p,small,label,summary,button{overflow-wrap:anywhere}
.fields{grid-template-columns:repeat(2,minmax(0,1fr))}
input,select,textarea{max-width:100%;min-width:0}
svg,img,canvas{max-width:100%}
pre,code{overflow-wrap:normal}
pre,.table-wrap,.table-scroll,#eventList{max-width:100%;overflow:auto}
.table-wrap table,.table-scroll table{min-width:640px}
.verified-report,.verified-report>article{min-width:0;max-width:100%}
.verified-report .table-wrap{width:100%}
.verified-report .table-wrap table{min-width:0;width:100%;white-space:normal}
.verified-report .table-wrap th{white-space:normal;overflow-wrap:anywhere}
.verified-report .table-wrap td{white-space:nowrap}
.node>.fields,.operand>.fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-quick button,.dashboard-recent-row{min-width:0}
button,a,input,select,summary{touch-action:manipulation}
dialog{max-width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto}
@media(min-width:1440px){.workspace main{max-width:1800px;margin-inline:auto}.layout{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}}
@media(max-width:1100px){.layout,.dashboard-grid{grid-template-columns:minmax(0,1fr)}.sticky{position:static}.fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .sidebar{position:relative!important;width:100%!important;height:auto!important;max-height:none!important;padding:16px!important;overflow:visible}
 .sidebar .brand{margin-bottom:12px}.sidebar>.caption,.sidebar-foot{display:none!important}
 .sidebar .workspace-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;white-space:normal}
 .sidebar .nav{width:100%;min-height:44px;text-align:center;padding:9px 6px;white-space:normal;font-size:12px}
 .sidebar .nav span{display:none!important}
 .sidebar .account-menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:10px}
 .sidebar .account-menu strong{flex:1;min-width:90px}.sidebar .account-menu button{margin:0;min-height:40px;padding:8px 10px}
 .workspace{margin:0!important;width:100%!important}.workspace>header{padding:14px 16px;gap:10px}
 .workspace>header #keyStatus{width:100%;font-size:11px}.language-control{margin-inline-start:auto}.language-control>span{font-size:0}.language-control>span:first-letter{font-size:18px}
 .workspace main{padding:20px 14px!important}.page{width:100%}.card{padding:20px 16px!important}
 .fields,.fields.three,.node>.fields,.operand>.fields,.settings-list,.auth-passwords{grid-template-columns:minmax(0,1fr)!important}
 .layout{gap:16px}.node{padding:14px 10px}.node .node{margin-inline:0;border-inline-start:2px solid #cbdedb}
 .dashboard-hero{grid-template-columns:minmax(0,1fr);padding:24px}.dashboard-hero h1{font-size:26px}
 .kpis,.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
 .dashboard-recent-row{flex-wrap:wrap}.dashboard-recent-row>div{flex-basis:100%}.dashboard-recent-row button{margin-inline-start:auto}
 .steps{display:flex;flex-wrap:wrap;gap:8px}.steps i{display:none}.steps button{flex:1;min-width:90px;white-space:normal}
 .heading{align-items:stretch}.heading>.primary{width:100%}.actions>button{flex:1;min-width:120px}
 .segmented,#symbolTabs{display:flex;flex-wrap:wrap;max-width:100%}.segmented button,#symbolTabs button{min-height:40px}
 #authScreen{padding:16px!important}.auth-layout{grid-template-columns:minmax(0,1fr)!important}.auth-intro,.auth-panel{padding:26px 20px!important}
 #authScreen .brand{margin-bottom:16px}.auth-intro h1{font-size:26px}.auth-facts{flex-wrap:wrap}
 .workspace-footer,footer{padding:16px!important}.node-head>select{width:100%}
}
@media(max-width:380px){.sidebar .workspace-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis,.stats{grid-template-columns:minmax(0,1fr)!important}.language-control select{min-width:128px}}
html[dir=rtl] .sidebar{left:auto;right:0}html[dir=rtl] .workspace{margin-left:0;margin-right:244px}
@media(max-width:760px){html[dir=rtl] .workspace{margin-right:0}}

pre,code,.execution-table td:nth-child(3),.execution-table td:nth-child(4){direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .sidebar .nav{text-align:right}
@media(max-width:760px){html[dir=rtl] .sidebar .nav{text-align:center}}

@media(max-width:1100px) and (min-width:761px){html[dir=rtl] .workspace{margin-right:208px}}
svg{direction:ltr;unicode-bidi:isolate}
@media(max-width:640px){
 .table-wrap:has(#accountHistoryRows){overflow:hidden}
 .table-wrap:has(#accountHistoryRows) table{min-width:0;width:100%;table-layout:fixed}
 #accountHistoryRows td{min-width:0!important;width:100%!important;max-width:100%}
}
/* Localized candle selectors must wrap even in scripts without word spaces. */
#build .fields > label { min-width: 0; overflow-wrap: anywhere; }
#build .fields > label small { overflow-wrap: anywhere; }
#build .fields > label select { width: 100%; min-width: 0; max-width: 100%; }
#build .sticky .line > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

.binance-referral {margin:16px 0;overflow-wrap:anywhere;}
.binance-referral p {margin:0 0 12px;}
.binance-referral a {display:inline-block;max-width:100%;}
.binance-referral code {display:inline-block;margin-inline:12px;user-select:all;}

.binance-referral code {font-size:14px;font-weight:600;}

.referral-code-row {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-block:12px;}
.referral-code-row code {margin-inline:0;}
.referral-code-row button {min-height:44px;white-space:normal;overflow-wrap:anywhere;max-width:100%;}
.binance-referral .referral-qr {display:block;width:222px;max-width:100%;padding:0;background:white;line-height:0;}
.referral-qr img {display:block;width:100%;height:auto;image-rendering:pixelated;}
#referralCopyStatus {margin-block:8px;min-height:1.5em;overflow-wrap:anywhere;}

.referral-qr svg {display:block;width:100%;height:auto;}
