/* Physical reference 1179 × 2556; layout units below are 393 × 852 CSS px. */
:root{--x-green:#2ebd85;--x-red:#f6465d}
.screen-futures .up,.x-sheet .up{color:#2ebd85}
.screen-futures .down,.x-sheet .down{color:#f6465d}
.screen-futures .x-contract-tabs{padding-top:11px;padding-bottom:8px;gap:16px}
.screen-futures .x-contract-tabs .x-menu{padding-left:3px;display:flex;align-items:center}
.screen-futures .x-menu .m-icon{height:20px;width:20px}
.x-contract-header b{font-size:17px}
.x-contract-header em{font-size:12px;padding:0 4px;line-height:16px}
.x-contract-header>div>button{gap:4px}
.x-contract-header>div>span{font-size:11.5px}
.x-contract-header>div:last-child{gap:15px}
.x-contract-header>div:last-child .m-icon{width:20px;height:20px}
.x-contract-header .x-notification:after{right:-3px;top:-6px}
.x-trading-grid{grid-template-columns:37.56% minmax(0,1fr)}
.x-book{padding-top:35px}
.x-mark{height:13px;line-height:13px}
.x-book-controls,.x-book-controls>button:first-child{height:20px}
.x-book-controls>button:first-child{font-size:12px}
.x-ratio{height:23px}
.x-bids{color:#2ebd85}
.x-book-layout{width:18px;height:20px;grid-template-columns:7px 7px;grid-template-rows:5px 5px 5px;gap:1px 2px;align-content:center}
.x-book-layout i{width:7px;height:5px;background:#a3a3a3}
.x-book-layout i:nth-child(2){grid-column:2;grid-row:1 / 3;height:8px;background:var(--x-red)}
.x-book-layout i:nth-child(3){grid-column:1;grid-row:2}
.x-book-layout i:nth-child(4){grid-column:2;grid-row:2 / 4;align-self:end;height:8px;background:var(--x-green)}
.x-book-layout i:nth-child(5){grid-column:1;grid-row:3}
.x-order-config>button{font-size:13px}
.x-order-config>button:nth-child(2){font-size:12px}
.x-order-type select,.x-open-close>button{font-size:14px}
.x-price>button .m-icon,.x-amount>button:not(:last-child) .m-icon{width:17px;height:17px;stroke-width:1.4;color:#a6a6a6}
.x-amount>button:not(:last-child){width:15px;flex-shrink:0;display:grid;place-items:center}
.mobile-app .x-amount-field{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.x-amount-field small{font-size:11px;color:var(--m-muted);line-height:15px;white-space:nowrap}
.mobile-app .x-amount-field input{width:100%;height:20px;min-height:0;font-size:14px;font-weight:600;line-height:20px;border-radius:0}
.mobile-app .x-amount-field input:placeholder-shown{height:32px;font-weight:500}
.x-amount>button:last-child{width:57px;flex-shrink:0;justify-content:center}
.x-allocation{padding:0 10px;display:block}
.x-allocation:before{display:none}
.x-allocation-track{position:absolute;left:10px;right:10px;top:23px;height:1px;background:#ececec;pointer-events:none}
.x-allocation-track>span{width:var(--allocation);height:1px;position:absolute;left:0;top:0;background:var(--m-text)}
.x-allocation-track>i{position:absolute;top:0;width:7px;height:7px;border:1px solid #eee;transform:translate(-50%,-50%) rotate(45deg);border-radius:1px;background:var(--m-bg)}
.x-allocation-track>i.filled{width:7px;height:7px;border:0;background:var(--m-text)}
.x-allocation-track>b{left:var(--allocation);position:absolute;top:0;width:11px;height:11px;border:1.2px solid var(--m-text);transform:translate(-50%,-50%) rotate(45deg);border-radius:2px;background:var(--m-bg)}
.mobile-app .x-allocation>input{appearance:none;-webkit-appearance:none;position:absolute;inset:0 4px;top:7px;height:32px;width:calc(100% - 8px);background:transparent;padding:0;margin:0;cursor:pointer;touch-action:pan-y;opacity:0}
.x-allocation>input::-webkit-slider-runnable-track{background:transparent;height:1px}
.x-allocation>input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:24px;background:transparent}
.keyboard-navigation .x-allocation:focus-within .x-allocation-track>b{outline:2px solid #dcb31a;outline-offset:3px}
.x-capacity{grid-template-rows:16px 16px;height:32px;margin-top:4px;margin-bottom:7px}
.x-capacity .x-dotted{line-height:15px}
.x-buy+.x-capacity{margin-top:9px;margin-bottom:7px}
.x-position-title{height:18px;gap:3px}
.x-position-title>b{font-size:16px;line-height:18px}
.x-position-title em{font-size:11px;line-height:14px;padding:0 3px}
.x-direction{font-size:13px;line-height:16px;background:var(--x-green)}
.x-direction.sell{background:var(--x-red)}
.x-adl{gap:2px;margin-left:2px}
.x-adl i{height:10px}
.x-adl i.lit{background:var(--x-green)}
.x-pnl{margin:14px 0 11px}
.x-pnl small{font-size:12px;line-height:17px}
.x-pnl strong{font-size:18px;line-height:22px;margin-top:1px}
.x-position-grid{row-gap:10px;grid-template-rows:35px 35px}
.x-position-grid small{font-size:12px;line-height:16px}
.x-position-grid small .x-dotted{line-height:16px}
.x-position-grid span{font-size:14px;line-height:18px;margin-top:2px}
.x-position-grid .m-icon{height:16px;width:16px}
.x-position{padding-top:18px;padding-bottom:16px}
.x-pnl .x-dotted{line-height:16px}
.x-brackets{margin-top:10px;font-size:12px;height:16px}
.x-realized .m-icon{width:14px;height:14px}
.x-position-tools .m-icon{width:20px;height:20px}
.x-position-tools>div{gap:12px}
.x-position-tabs{gap:15px}
.x-position-tabs>button{font-size:14px}
.x-position-tabs .m-icon{width:20px;height:20px}
.x-market-risk{margin:12px 15px 0;padding:12px;border-radius:10px;display:flex;gap:8px;align-items:center;background:var(--m-fill);font-size:12px;line-height:18px}
.x-market-risk>span{flex:1}.x-market-risk .m-icon{width:17px;height:17px}
.x-market-risk>button{color:var(--m-muted)}
#trade-dialog.x-sheet .dialog-heading h2{font-size:18px;line-height:24px}
#trade-dialog.x-sheet.x-unit-sheet form{padding:0 16px 42px}
#trade-dialog.x-unit-sheet .dialog-heading{padding-top:29px}
#trade-dialog.x-unit-sheet .dialog-heading h2{margin-bottom:21px}
.x-unit-cards{display:flex;flex-direction:column;gap:12px}
#trade-dialog.x-sheet .x-unit-card{border:1px solid #eee;border-radius:12px;padding:16px 15px;background:var(--m-bg);color:var(--m-text);text-align:left;width:100%;min-height:72px}
#trade-dialog.x-sheet .x-unit-card.selected{border:1.3px solid var(--m-text);padding:15.7px 14.7px}
.x-unit-card b{display:block;font-size:16px;font-weight:500;line-height:21px}
.x-unit-card span{display:block;font-size:12px;line-height:16px;color:var(--m-muted);margin-top:1px}
.x-unit-card .x-unit-summary{border:0;padding:0;background:none;color:inherit;display:block;width:100%;text-align:left}
.x-unit-radios{display:flex;gap:16px;margin-top:12px;align-items:center}
.x-unit-radios>button{display:flex;align-items:center;gap:4px;background:none;border:0;color:var(--m-text);padding:0;font-size:13px;line-height:16px}
.x-unit-radios i{width:16px;height:16px;border-radius:50%;border:1px solid #aaa;background:var(--m-bg)}
.x-unit-radios [aria-checked=true] i{border:5.5px solid var(--m-text)}
#trade-dialog.x-sheet.x-precision-sheet form{padding:0 15px 32px}
#trade-dialog.x-precision-sheet .dialog-heading{padding-top:16px;height:16px}
#trade-dialog.x-precision-sheet .dialog-heading h2{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden;margin:0}
.x-precision-options>button{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;font-size:16px;font-weight:500;border:0;padding:0;background:none;color:var(--m-text)}
.x-precision-options .m-icon{width:22px;height:22px;stroke-width:2}
#trade-dialog.x-sheet.x-funding-sheet form{padding-bottom:50px}
#trade-dialog.x-funding-sheet .dialog-heading h2{margin-bottom:11px}
#trade-dialog.x-funding-sheet #trade-dialog-body{display:flex;flex-direction:column}
.x-funding-details>div{display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:28px;gap:8px}
.x-funding-details span{color:var(--m-muted)}.x-funding-details b{font-weight:400;white-space:nowrap}
#trade-dialog.x-funding-sheet .x-funding-note{font-size:12px;line-height:16px;margin:13px 0 0;padding-top:15px;border-top:1px solid var(--m-line)}
.x-funding-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:20px}
.x-funding-actions>button{height:40px;min-height:40px;width:100%;background:var(--x-yellow);border:0;border-radius:6px;color:var(--m-text);font-size:17px;font-weight:500;padding:0}
.x-funding-actions>button+button{background:#eee}
.x-funding-history>div,.x-funding-history>header{display:flex;justify-content:space-between;font-size:13px;padding:10px 0;border-bottom:1px solid var(--m-line)}
.x-funding-history>header{color:var(--m-muted);font-size:12px}.x-funding-history b{font-weight:400}
.m-dark .x-funding-actions>button+button{background:var(--m-fill)}
@media(max-width:374px){.x-position-grid small{font-size:10px}.x-position-title>b{font-size:14px}.x-position-title em{font-size:10px}.x-position-tabs>button{font-size:12px}.x-unit-card span{font-size:11px}}

/* iPhone references only; the Android v2 set has its own geometry.
   Measured against 01-06.jpg by per-block cross-correlation (ncc >= 0.97). The tab
   row is already correct at -0.73pt, but everything from the order-entry block down
   sat 2.5-3.3pt high: open/close -2.67, margin row -2.88, book heading -3.26,
   limit row -2.55. The gap belongs below the tabs, so it is applied to the trading
   grid rather than the header. Swept 2 / 2.7 / 3 / 4pt; 2.7 was best and cut the
   six-state mean difference from 17.61 to 16.96, improving five of the six states.
   Going further (4pt) regressed to 17.61, so the value is sharply bounded. */
.mobile-app.screen-futures:not(.device-android) .x-trading-grid{margin-top:2.7px}

/* The symbol title and change % both sat 6.7pt above the reference (118.7pt vs
   112.0pt). contract-v2.css sets padding-top:6px with a two-class selector, which is
   why earlier single-class overrides had no effect; this matches its specificity.
   The header height stays 56px, so nothing below moves. Swept 11-14px: 12px was
   best and lowered all six states, mean 16.95 -> 16.58. */
.mobile-app.contract-v2:not(.device-android) .x-contract-header{padding-top:12px}

/* Last price measured 2.0pt low in four states (ncc >= 0.98). A transform keeps the
   bid rows beneath it in place. Swept 1.5 / 2 / 2.5pt; 2 was best, no state worse. */
.mobile-app:not(.device-android) .x-last{transform:translateY(-2px)}

.mobile-app,#trade-dialog.x-sheet{font-family:system-ui,'PingFang SC',sans-serif;font-variant-numeric:normal}
.screen-futures .x-contract-tabs{justify-content:space-between;gap:0}
.screen-futures .x-contract-tabs .x-menu{position:static;box-shadow:none;padding-left:0}
.x-position-grid{grid-template-rows:33px 33px}
.x-position-tabs .x-history-link{color:var(--m-text)}
.x-pnl>div:last-child small{justify-content:flex-end}
.x-position-title em{font-size:11px}
.x-contract-header>div:last-child{margin-top:0}
.x-contract-header>div>span{line-height:16px;transform:translateY(-2px)}

.mobile-app .x-book-row{font-size:12px}
.x-last{font-size:17.5px;font-weight:650;line-height:25px;letter-spacing:.1px}
.x-contract-header b{font-size:17px;line-height:21px}
.x-contract-header>div>span{transform:translateY(-1px);font-weight:500}
.x-contract-header .x-notification:after{top:-3px}
.mobile-app .m-bottom-chart{font-size:11px;font-weight:500}
.mobile-app .m-nav button{font-size:10px;gap:4px}
.mobile-app .m-nav button .m-tab-icon{width:24px;height:24px}
.x-amount-field small[hidden]{display:none}
.x-amount>button:last-child{font-size:12px;width:56px}
.mobile-app .x-amount-field input{font-size:13px}
.x-amount-field.has-amount input{font-weight:600}
.x-protection-section .m-icon{width:16px;height:16px}

.x-sheet-shade{background:rgba(0,0,0,.5)}
.mobile-app .m-nav button{padding-top:6px;gap:3px}
.mobile-app input,#trade-dialog.x-sheet input{font-variant-numeric:normal}
.x-funding{top:-1px}
.x-funding span{font-family:Arial,'PingFang SC',sans-serif;transform:translateY(-.5px)}
.x-funding small{font-size:10px}
.x-pnl strong{font-family:Arial,sans-serif;font-size:17.5px;letter-spacing:.2px;margin-top:2px}
.x-pnl{margin-bottom:10px}
.x-position-grid span{font-size:13.5px;transform:translateY(-.5px)}
.x-position{padding-bottom:15px}
.x-brackets{margin-top:8px;height:15px}
.x-unit-card b{font-size:15px;font-weight:600}
.x-unit-card span{font-size:11.9px}
#trade-dialog.x-sheet .x-unit-card{padding-top:17px;padding-bottom:15px}
#trade-dialog.x-sheet .x-unit-card.selected{padding-top:16.7px;padding-bottom:14.7px}
.x-contract-header>div>span{font-family:Arial,sans-serif;font-size:11.7px;letter-spacing:.05px}

.x-contract-header>div>button{gap:3px}
.x-contract-header em{font-size:11.5px;padding:0 3px}
.x-contract-header>div>button>.m-icon{width:16px;height:16px}

.x-sheet-shade.is-precision{background:rgba(0,0,0,.45)}
#trade-dialog.x-sheet.x-precision-sheet{border-radius:11px 11px 0 0}

/* Text bounds measured against the unscaled, three-pixel-per-point references. */
.screen-futures .x-contract-tabs>b,.screen-futures .x-contract-tabs>button:not(.x-menu){font-size:18px;transform:translateY(-1px)}
.x-contract-header em{font-size:11px}
.x-contract-header>div>span{transform:translateY(-1.667px)}
.x-book-row>span:last-child,.x-available>b,.x-capacity>b,.x-order-config>button:nth-child(2),.x-amount>button:last-child{font-family:Arial,'PingFang SC',sans-serif}
.x-book-row>span:last-child{transform:translateY(.333px)}
.x-order-config>button:nth-child(2){transform:translateY(.5px)}
.x-price>label small,.x-mark{font-family:Arial,'PingFang SC',sans-serif}
.mobile-app .x-price input{font-family:Arial,sans-serif;transform:translateY(-1px)}
.x-price-row>button{font-size:12px}
.x-amount-field small{transform:translateX(-1.5px)}
.x-order-protection{font-size:12px}
.mobile-app .x-buy,.mobile-app .x-sell{font-size:14px}
.x-position-tabs>button{font-family:Arial,'PingFang SC',sans-serif;font-size:14px}
.x-position-title>b{font-size:15.5px}
.x-position-grid{transform:translateY(-2px);font-family:Arial,'PingFang SC',sans-serif}
.x-pnl small,.x-brackets,.x-realized{font-family:Arial,'PingFang SC',sans-serif}
.mobile-app .x-actions>button{font-size:12px}
.x-unit-radios>button{font-size:12px;gap:4px}
.x-unit-radios{gap:16px;transform:translateY(-1px)}
.x-unit-card.selected b{transform:translateY(-.667px)}
#trade-dialog.x-funding-sheet .dialog-heading h2{transform:translateY(.667px)}
.x-funding-details{font-family:Arial,'PingFang SC',sans-serif;transform:translateY(-2.333px)}
.x-funding-details>div{line-height:28.333px}
#trade-dialog.x-funding-sheet .x-funding-note{margin-top:9px}
.x-funding-actions>button{font-size:16px}

.mobile-app .m-bottom-chart{font-size:11.5px}
.x-position-tools>div>button:first-child{font-size:13px}
#trade-dialog.x-leverage-sheet .dialog-heading h2{margin-bottom:22px}
#trade-dialog.x-sheet .x-leverage-number label{margin:0;transform:translate(-4.667px,-1.667px)}
#trade-dialog.x-sheet .x-leverage-number input{font-family:Arial,sans-serif;font-size:15.5px;min-width:1ch;max-width:3ch}
.x-leverage-number label>span{font-family:Arial,sans-serif;font-size:15.5px}
.x-leverage-number>button .m-icon{height:16px;width:16px;stroke-width:1.4}
.x-leverage-range{margin-top:18px;transform:translateY(-1px)}
.x-leverage-labels>button{font-family:Arial,sans-serif}
.x-leverage-notes{margin-top:16px}
.x-default-leverage{margin-top:43px}
.x-protection-tabs #protection-help{margin-left:auto;display:grid;place-items:center;color:#999}
.x-protection-tabs #protection-help .m-icon{width:16px;height:16px}
.x-protection-section header{font-size:14px;gap:6px}
#trade-dialog.x-sheet .x-protection-section header label{font-size:12px}
#trade-dialog.x-sheet .x-risk-note>button .m-icon{width:16px;height:16px}
.x-protection-sheet .x-detail-list,.x-protection-sheet .x-quantity-display{font-family:Arial,'PingFang SC',sans-serif}
#trade-dialog.x-sheet .x-trigger input,#trade-dialog.x-sheet .x-estimate input{font-family:Arial,sans-serif}