#modal:has(.trade-dialog){background:#191919;color:#fff;border:1px solid #333;border-radius:24px;max-width:410px;width:calc(100% - 24px);padding:24px} .trade-dialog-row{display:flex;justify-content:space-between;gap:16px;margin:18px 0;font-size:14px}.trade-dialog-row b{text-align:right}.trade-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.trade-dialog-actions button{padding:14px;border-radius:9px}#tradeSuccessToast{position:fixed;z-index:10000;top:16px;left:50%;transform:translateX(-50%);width:min(398px,calc(100% - 24px));display:flex;align-items:center;gap:10px;background:#191919;color:#fbd214;padding:16px;border-radius:8px;font-size:13px}#tradeSuccessToast button{background:none;border:0;color:#fbd214;margin-left:auto}#tradeSuccessToast button+button{margin-left:0}
.trade-dialog-close{position:absolute;right:20px;top:20px;border:0;background:none;color:#fbd214;font-size:24px;padding:0}

/* Trade dialogs provide their own close controls. */
#modal:has(.trade-dialog)>button{display:none}


/* Keep confirmation content inside the viewport, including long translated labels. */
#modal:has(.trade-dialog){box-sizing:border-box;min-width:0;width:calc(100% - 24px);max-width:410px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;overflow:auto;overscroll-behavior:contain;padding:20px}
#modal:has(.trade-dialog) #modalContent,#modal .trade-dialog{min-width:0;max-width:100%}
#modal:has(.trade-dialog) h3{padding-right:36px;overflow-wrap:anywhere}
#modal .trade-dialog-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:start;line-height:1.45;margin:14px 0}
#modal .trade-dialog-row>span,#modal .trade-dialog-row>b{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
#modal .trade-dialog-row>b{text-align:right}
#modal .trade-dialog-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#modal .trade-dialog-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere;margin-top:0}
#modal .trade-dialog-close{box-sizing:border-box;width:36px;height:36px;display:grid;place-items:center;right:10px;top:10px;margin:0;padding:0;line-height:1}
/* iOS zooms focused fields with small text. Keep readable text; preserve pinch zoom. */
@media(max-width:700px),(hover:none) and (pointer:coarse){body.frontend-light input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),body.frontend-light select,body.frontend-light textarea{font-size:16px!important}}

/* The seconds-contract confirmation is a separate overlay, not #modal. */
.option-confirm-overlay{box-sizing:border-box;min-width:0;max-width:100%;padding:12px;overflow:auto;overscroll-behavior:contain}
.option-confirm-panel{box-sizing:border-box;min-width:0;max-width:420px;width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;flex:0 1 420px}
.option-confirm-title{min-width:0;gap:12px}.option-confirm-title h3{min-width:0;overflow-wrap:anywhere}.option-confirm-title button{flex-shrink:0}
.option-confirm-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:12px;line-height:1.45}
.option-confirm-row>span,.option-confirm-row>b{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.option-confirm-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.option-confirm-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere}