/* Event contract pages. Every size below is measured from the 1179×2556 iPhone
   references in public/reviews/event/, converted to CSS pixels at 393 × 852.
   Selectors are qualified with .mobile-app so they win over its button reset. */
.mobile-app.screen-event,.mobile-app.screen-event-history,#trade-dialog.e-unit-sheet,#trade-dialog.e-confirm-sheet{
  --e-field:#f5f5f5;--e-grid:#ededed;--e-sep:#f5f5f5;--e-countdown:#9d9d9d;--e-axis-box:#7b7b7b;--e-dot:#979797;
  --e-green:#2ebd85;--e-red:#f6465d;--e-yellow:#fcd535;
  /* Measured at 3× on IMG_4665–4670: dividers are one device pixel of #ededed, label dots #979797,
     steppers #9c9c9c live and #dadada spent, the note link #d89f00. */
  --e-hair:#ededed;--e-step:#9c9c9c;--e-step-off:#dadada;--e-link:#d89f00;
}
.mobile-app.m-dark.screen-event,.mobile-app.m-dark.screen-event-history,#trade-dialog.e-unit-sheet.m-dark,#trade-dialog.e-confirm-sheet.m-dark{
  --e-field:#29313c;--e-grid:#2b323d;--e-sep:#2a313b;--e-countdown:#5e6673;--e-axis-box:#5e6673;--e-dot:#3b434f;
  --e-hair:#2b323d;--e-step:#848e9c;--e-step-off:#474d57;--e-link:#f0b90b;
}
.mobile-app.screen-event .m-main,.mobile-app.screen-event-history .m-main{overflow-y:auto;background:var(--m-bg)}
.mobile-app.screen-event .up,.mobile-app.screen-event-history .up,#trade-dialog.e-confirm-sheet .up{color:var(--e-green)}
.mobile-app.screen-event .down,.mobile-app.screen-event-history .down{color:var(--e-red)}

/* Contract category strip. The active tab is scrolled into view, so the trailing
   item stays clipped behind the services button exactly as on the reference. */
.mobile-app .e-tabs{display:flex;align-items:center;height:44px;padding:0 15px 0 0;box-sizing:border-box}
.mobile-app .e-tabs-strip{flex:1;min-width:0;display:flex;align-items:center;gap:15.5px;padding:0 15px 0 7.5px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.mobile-app .e-tabs-strip::-webkit-scrollbar{display:none}
.mobile-app .e-tabs-strip>*{flex:0 0 auto;border:0;background:none;padding:0;font-size:18px;font-weight:600;line-height:25px;color:var(--m-muted)}
.mobile-app .e-tabs-strip>b{color:var(--m-text)}
.mobile-app .e-tabs-menu{flex:0 0 auto;margin:-2px 0 0 5.5px;padding:0;border:0;background:none;display:flex;color:var(--m-text)}
.mobile-app .e-tabs-menu .m-icon{width:20px;height:20px}

/* Pair header with the two payout rates; it sticks while the chart scrolls away. */
.mobile-app .e-sticky{position:sticky;top:0;z-index:4;background:var(--m-bg)}
.mobile-app .e-pair{display:flex;align-items:center;height:43px;padding:2px 15px 0;box-sizing:border-box;gap:11.5px}
.mobile-app .e-symbol{display:flex;align-items:center;gap:3px;border:0;background:none;padding:0;color:var(--m-text);line-height:25px}
.mobile-app .e-symbol b{font-size:18px;font-weight:600;line-height:25px;letter-spacing:-.15px}
.mobile-app .e-symbol .m-icon{width:16px;height:16px;color:var(--m-text)}
.mobile-app .e-rates{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;line-height:22px;position:relative;top:-1px}
.mobile-app .e-rates i{width:1px;height:14px;background:var(--m-line)}
.mobile-app .e-more{position:relative;border:0;background:none;padding:0;display:flex;color:var(--m-text)}
.mobile-app .e-more .m-icon{width:19px;height:19px}
.mobile-app .e-more em{position:absolute;top:-1px;right:-1px;width:5px;height:5px;border-radius:50%;background:var(--e-yellow)}

/* Hairlines under the category strip, pair header, period row and indicator row. */
/* A fractional border still paints a whole CSS pixel, so dividers are 1/3px shadows. Each
   sits where the 3× capture puts it, which is not always the box edge. */
.mobile-app .e-tabs,.mobile-app .e-pair,.mobile-app .e-chart,.mobile-app .e-indicators,.mobile-app .e-available{position:relative}
.mobile-app .e-tabs:after,.mobile-app .e-pair:after,.mobile-app .e-chart:before,.mobile-app .e-indicators:after,.mobile-app .e-available:after{content:'';position:absolute;left:0;right:0;height:1px;box-shadow:inset 0 calc(-1px/3) var(--e-hair);pointer-events:none}
.mobile-app .e-tabs:after{bottom:.67px}
.mobile-app .e-pair:after{bottom:-1px}
.mobile-app .e-chart:before{top:4px}
.mobile-app .e-indicators:after{bottom:-2.67px}
.mobile-app .e-available:after{bottom:-9.33px}

/* Candle period row. */
.mobile-app .e-intervals{display:flex;align-items:center;gap:23.5px;height:24px;padding:6px 8px 0 15px;box-sizing:border-box}
.mobile-app .e-intervals>button{border:0;background:none;padding:0;font-size:12px;line-height:17px;color:var(--m-muted);flex:0 0 auto}
.mobile-app .e-intervals>button.active{color:var(--m-text);font-weight:600}
.mobile-app .e-intervals .e-iv-icon{display:flex;color:var(--m-muted)}
.mobile-app .e-intervals .e-iv-icon:first-of-type{margin-left:auto}
.mobile-app .e-intervals .e-iv-icon+.e-iv-icon{margin-left:-13.5px}
.mobile-app .e-intervals .e-iv-icon .m-icon{width:15px;height:15px}
.mobile-app .e-intervals .e-index{font-size:10px;line-height:14px;margin-left:-14.5px}

/* Price chart. */
.mobile-app .e-chart{height:262px}
.mobile-app .e-price-chart{display:block;width:100%;height:262px}
.mobile-app .e-chart-empty{height:262px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--m-muted)}
.mobile-app .e-chart-empty button{border:0;background:var(--e-field);color:var(--m-text);border-radius:6px;padding:7px 14px;font-size:12px}

/* Indicator row, split between main-chart and sub-chart studies. */
.mobile-app .e-indicators{display:flex;align-items:center;gap:19.5px;height:26px;padding:2px 16px 0 15px;box-sizing:border-box}
.mobile-app .e-indicators>button{border:0;background:none;padding:0;font-size:11.8px;line-height:15px;color:var(--m-muted);flex:0 0 auto}
.mobile-app .e-indicators>button.active{color:var(--m-text);font-weight:600}
.mobile-app .e-indicators>i{width:1px;height:14px;background:var(--m-line);flex:0 0 auto;margin:0 -9.5px}
.mobile-app .e-indicators .e-chart-type{display:flex;color:var(--m-text);margin-left:-4px}
.mobile-app .e-indicators .e-chart-type .m-icon{width:16px;height:16px}

/* Order form. */
.mobile-app .e-form{padding:13.3px 15px 3px}
.mobile-app .e-form-head{display:grid;grid-template-columns:126.5px 1fr;gap:8.5px}
.mobile-app .e-form-head small{font-size:12px;line-height:17px;color:var(--m-muted);position:relative;top:-2px}
.mobile-app .e-form-row{display:grid;grid-template-columns:126.5px 1fr;gap:8.5px;margin-top:6.5px;align-items:start;position:relative;top:-1px}
.mobile-app .e-form-row>.e-unit,.mobile-app .e-amount{height:40px;border-radius:8px;background:var(--e-field);border:0}
.mobile-app .e-unit{display:flex;align-items:center;justify-content:space-between;padding:0 15.8px 0 12px;color:var(--m-text)}
.mobile-app .e-unit span{font-size:15px;font-weight:500;line-height:21px;letter-spacing:-.7px;position:relative;top:2.6px}
.mobile-app .e-unit .m-icon{width:10.4px;height:10.4px;margin-right:.8px;color:var(--m-text)}
.mobile-app .e-amount-col{min-width:0}
.mobile-app .e-amount{display:flex;align-items:center;padding:0 13.5px 0 15px}
.mobile-app .e-amount.is-invalid{box-shadow:0 0 0 1px var(--e-red)}
.mobile-app .e-amount button{border:0;background:none;padding:0;display:flex;color:var(--e-step)}
.mobile-app .e-amount button.muted{color:var(--e-step-off)}
/* Reference glyphs are 14 CSS px across with a 0.67px bar. */
.mobile-app .e-amount .m-icon{width:15.2px;height:15.2px;stroke-width:1.05;stroke-linecap:butt;margin:0 .4px}
.mobile-app .e-amount input{flex:1;min-width:0;border:0;background:none;text-align:center;font-family:inherit;font-size:15px;font-weight:500;color:var(--m-text);padding:0}
.mobile-app .e-amount-error{margin:5px 0 0;font-size:12px;line-height:17px;color:var(--e-red)}
.mobile-app .e-available{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px;line-height:17px;color:var(--m-muted)}
.mobile-app .e-available>div{display:flex;align-items:center;gap:4px}
.mobile-app .e-account{border:0;background:none;padding:0;display:flex;align-items:center;gap:3px;font-size:12px;line-height:17px;color:var(--m-muted)}
.mobile-app .e-account .m-icon{width:7.7px;height:7.7px}
.mobile-app .e-available b{font-size:12px;font-weight:400;color:var(--m-text)}
.mobile-app .e-transfer{border:0;background:none;padding:0;display:flex;color:var(--e-yellow)}
.mobile-app .e-transfer .m-icon{width:16px;height:16px}
.mobile-app .e-payout{display:grid;grid-template-columns:1fr 1fr;column-gap:10.8px;row-gap:3px;margin-top:17.3px}
.mobile-app .e-payout>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mobile-app .e-payout small{font-size:12px;line-height:17px;color:var(--m-muted)}
.mobile-app .e-payout b{font-size:12px;font-weight:400;line-height:17px;color:var(--m-text)}
.mobile-app .e-submit{display:flex;gap:8px;margin-top:8.2px}
.mobile-app .e-submit button{flex:1;height:40px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:3.7px;color:#fff;font-size:14px;font-weight:600;line-height:22px}
.mobile-app .e-submit .e-up{background:var(--e-green)}
.mobile-app .e-submit .e-down{background:var(--e-red)}
.mobile-app .e-submit .e-side-icon{width:17px;height:17px;display:block;flex:0 0 auto}

/* Open / closed tabs and the contract cards below them. Pair + rate bars +
   these tabs stay stacked at the top once the chart has scrolled away. */
.mobile-app .e-position-tabs{display:flex;align-items:center;gap:16.2px;height:36.3px;padding:0 15px;margin-top:14.4px;box-shadow:inset 0 calc(-1px/3) var(--e-hair);position:sticky;top:43px;z-index:3;background:var(--m-bg)}
/* Stuck, the tabs butt straight onto the pair header with no gap and no divider (IMG_4667/4668). */
.mobile-app.screen-event.is-scrolled .e-position-tabs{top:44.6px}
.mobile-app.screen-event.is-scrolled .e-pair:after{display:none}
.mobile-app .e-position-tabs>button{display:flex;align-items:center;height:36.3px;padding-top:1.3px!important;box-sizing:border-box;border:0;background:none;padding:0;position:relative;font-size:14px;line-height:20px;color:var(--m-muted);font-weight:400}
.mobile-app .e-position-tabs>button.active{color:var(--m-text);font-weight:600}
.mobile-app .e-position-tabs>button.active:after{content:'';position:absolute;left:50%;bottom:0;width:14px;height:2.33px;margin-left:-7px;border-radius:1px;background:var(--e-yellow)}
.mobile-app .e-position-tabs .e-history-link{margin-left:auto;color:var(--m-text)}
.mobile-app .e-position-tabs .e-history-link .m-icon{width:20px;height:20px}
.mobile-app .e-list{padding-bottom:280px}
/* The note ends the scroll: IMG_4668 bottoms out 40px below the last card. */
.mobile-app .e-list:has(>.e-list-note){padding-bottom:0}
.mobile-app .e-list-note{font-size:12px;line-height:17px;color:var(--m-muted);margin:0;padding:11px 15px 12px}
.mobile-app .e-list-note .e-note-link{border:0;background:none;padding:0;font:inherit;color:var(--e-link)}
/* Card dividers stop at the 15px gutters (IMG_4667/4670), unlike the full-width header rules. */
.mobile-app .e-position,.mobile-app .e-closed{padding:15.7px 15px 19.5px;background:linear-gradient(var(--e-hair),var(--e-hair)) 15px 100%/calc(100% - 30px) calc(1px/3) no-repeat}
/* Settled cards on the contract page sit lower in their box and pack their rows
   tighter than open ones. The history page keeps its own looser rhythm below. */
.mobile-app .e-list:not(.e-history-list) .e-closed{padding:16.9px 15px 17.74px}
.mobile-app .e-list:not(.e-history-list) .e-closed .e-card-head{margin-bottom:10.4px}
.mobile-app .e-list:not(.e-history-list) .e-closed .e-grid small{margin-bottom:.8px}
.mobile-app .e-list:not(.e-history-list) .e-closed .e-grid+.e-grid{margin-top:10.1px}
/* Fixed first column: the price column starts at x 139.3 on every row, whatever the value widths. */
.mobile-app .e-list:not(.e-history-list) .e-closed .e-grid-3{grid-template-columns:104px minmax(0,1fr) auto;column-gap:20.3px}
.mobile-app .e-card-head{display:flex;align-items:center;gap:4px;margin-bottom:9.5px}
.mobile-app .e-card-head b{font-size:16px;font-weight:600;line-height:22px;letter-spacing:-.15px}
.mobile-app .e-card-head strong{margin-left:auto;font-size:16px;font-weight:600;line-height:22px}
.mobile-app .e-dir{width:16px;height:16px;border-radius:2px;background:var(--e-red);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.mobile-app .e-dir.up{background:var(--e-green)}
.mobile-app .e-dir .e-dir-icon{width:16px;height:16px;display:block}
.mobile-app .e-grid{display:grid;justify-content:space-between;column-gap:12px}
.mobile-app .e-grid-2{grid-template-columns:auto auto}
.mobile-app .e-grid-3{grid-template-columns:auto auto auto}
.mobile-app .e-grid+.e-grid{margin-top:11px}
.mobile-app .e-grid>div:last-child{text-align:right}
.mobile-app .e-grid small{display:block;font-size:12px;line-height:17px;color:var(--m-muted)}
.mobile-app .e-grid span{display:block;font-size:14px;line-height:20px}
.mobile-app .e-grid span.e-remaining{display:flex;align-items:center;justify-content:flex-end;gap:4.2px;position:relative;top:.6px}
.mobile-app .e-remaining .e-ring{width:14.9px;height:14.9px;display:block;flex:0 0 auto;overflow:visible;color:#757575}
/* 2.7 over a 14.9px / 24 viewBox box is the official 1.67 CSS px stroke. */
.mobile-app .e-ring-progress{fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:butt;transition:stroke-dashoffset 1s linear}
.mobile-app .e-remaining em{font-style:normal;font-weight:600;font-size:16px;letter-spacing:-.2px;position:relative;top:.15px}

/* In-app notice, measured off IMG_4675 「下单成功」. */
.mobile-app .e-toast{position:absolute;left:50%;top:426px;transform:translate(-50%,-50%);z-index:12;pointer-events:none;white-space:nowrap;padding:11px 12px;border-radius:10px;background:rgba(200,200,200,.96);color:#fff;font-size:15px;font-weight:500;line-height:20px;text-align:center;letter-spacing:.15px}

/* Dotted underline used by the explanatory labels on this page. */
/* One device pixel tall, 1px dots on a 2px period, as the 3× captures show. */
.mobile-app .e-dotted,#trade-dialog .e-dotted{display:inline-block;padding-bottom:1px;background:repeating-linear-gradient(90deg,var(--e-dot) 0 1px,transparent 1px 2px) left bottom/100% calc(1px/3) no-repeat}
.mobile-app .e-form-head .e-dotted{justify-self:start}

/* Trade history page. */
.mobile-app .e-history-head{display:flex;align-items:center;height:44px;padding:0 16px 10px;box-sizing:border-box;position:sticky;top:0;z-index:4;background:var(--m-bg)}
.mobile-app .e-history-head button{border:0;background:none;padding:0;display:flex;color:var(--m-text)}
.mobile-app .e-history-head .m-icon{width:19px;height:19px}
.mobile-app .e-history-head h1{position:absolute;left:0;right:0;top:4px;text-align:center;font-size:18px;font-weight:600;line-height:25px;margin:0;pointer-events:none}
.mobile-app .e-history-total{padding:10px 15px 22px;box-shadow:inset 0 calc(-1px/3) var(--e-hair)}
.mobile-app .e-history-total small{font-size:14px;line-height:20px;color:var(--m-text)}
.mobile-app .e-history-total p{display:flex;align-items:baseline;gap:2px;margin:6px 0 0}
.mobile-app .e-history-total strong{font-size:33px;font-weight:600;line-height:40px;letter-spacing:-.3px}
.mobile-app .e-history-total em{font-style:normal;font-size:14px;margin-left:4px;color:var(--m-muted)}
.mobile-app .e-history-total .down strong{color:var(--e-red)}
.mobile-app .e-history-total .up strong{color:var(--e-green)}
.mobile-app .e-history-total .down em{color:var(--e-red)}
.mobile-app .e-history-total .up em{color:var(--e-green)}
.mobile-app .e-history-filters{padding:0 15px 1px;box-shadow:inset 0 calc(-1px/3) var(--e-hair)}
.mobile-app .e-history-chips{display:flex;align-items:center;gap:0;padding-top:15.6px;margin-left:.8px}
.mobile-app .e-history-chips button{border:0;background:none;border-radius:6px;padding:0 7.5px;height:24px;font-size:12px;font-weight:500;line-height:24px;color:var(--m-muted)}
.mobile-app .e-history-chips button.active{background:var(--e-field);color:var(--m-text);font-weight:600}
.mobile-app .e-history-note{font-size:12px;line-height:17px;color:var(--m-muted);margin:17.5px 0 0}
.mobile-app .e-history-stats{margin:15.7px 0 0;padding-bottom:15.1px}
.mobile-app .e-history-stats>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:28px}
.mobile-app .e-history-stats dt{font-size:14px;line-height:20px;color:var(--m-muted);position:relative;top:1.33px;padding-bottom:2.67px}
.mobile-app .e-history-stats dd{margin:0;font-size:14px;line-height:20px;color:var(--m-text)}
.mobile-app .e-history-heading{font-size:16px;font-weight:600;line-height:22px;margin:0;padding:17px 15px 1.6px}
.mobile-app .e-history-list .e-closed{padding-top:16.4px;padding-bottom:19.4px}
.mobile-app .e-history-list .e-grid-3{grid-template-columns:102px minmax(0,1fr) auto;column-gap:18.9px}
.mobile-app .e-history-list .e-card-head{margin-bottom:13.8px}
/* The history rows breathe a little more than the ones on the contract page. */
.mobile-app .e-history-list .e-grid small{margin-bottom:2.1px}
.mobile-app .e-history-list .e-closed:last-child{background:none}

/* Empty states reuse the shared contract illustration. */
.mobile-app.screen-event .x-empty,.mobile-app.screen-event-history .x-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 0;color:var(--m-muted)}
.mobile-app.screen-event .x-empty b,.mobile-app.screen-event-history .x-empty b{font-size:12px;font-weight:400;color:var(--m-muted)}
.mobile-app.screen-event-history .x-empty{padding-top:42px}

/* Time-unit and confirmation sheets. */
#trade-dialog.e-unit-sheet .e-unit-options{display:flex;flex-direction:column}
#trade-dialog.e-unit-sheet .e-unit-options button{display:flex;align-items:center;justify-content:space-between;border:0;background:none;padding:0;height:48px;font-size:15px;color:var(--m-text)}
#trade-dialog.e-unit-sheet .e-unit-options .m-icon{width:19px;height:19px;opacity:0;color:var(--m-text)}
#trade-dialog.e-unit-sheet .e-unit-options .active .m-icon{opacity:1}
#trade-dialog.e-confirm-sheet .dialog-heading h2{display:none}
#trade-dialog.e-confirm-sheet .e-confirm-symbol{display:flex;align-items:center;gap:8px;margin-bottom:18px;line-height:25px}
#trade-dialog.e-confirm-sheet .e-confirm-symbol b{font-size:18px;font-weight:600;line-height:25px;letter-spacing:-.5px}
#trade-dialog.e-confirm-sheet .e-dir{width:18px;height:18px;border-radius:1.5px;background:var(--e-red);color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
#trade-dialog.e-confirm-sheet .e-dir.up{background:var(--e-green)}
#trade-dialog.e-confirm-sheet .e-dir .e-dir-icon{width:18px;height:18px;display:block}
#trade-dialog.e-confirm-sheet .e-confirm-list{margin:0}
#trade-dialog.e-confirm-sheet .e-confirm-list>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:30px}
#trade-dialog.e-confirm-sheet dt{font-size:14px;color:var(--m-muted)}
#trade-dialog.e-confirm-sheet dd{margin:0;font-size:14px;color:var(--m-text)}
#trade-dialog.e-confirm-sheet #trade-dialog-submit{height:40px;min-height:40px;border-radius:8px;font-size:16px;font-weight:600;margin-top:22px;background:var(--e-yellow)}
#trade-dialog.e-unit-sheet .dialog-heading{padding-top:33px}
#trade-dialog.e-unit-sheet .dialog-heading h2{margin-bottom:12px}
#trade-dialog.e-unit-sheet .e-unit-options button span{font-size:15px}
/* Narrow phones (≤370px): tighten the interval row so 指数价格 stays on screen. */
@media(max-width:370px){.mobile-app .e-intervals{gap:14px;padding-right:6px;overflow:hidden}.mobile-app .e-indicators{overflow:hidden}}