/* Date ranges, compact one-row order filters, and stable mobile widths. */
.auth-gate-icon,.wechat-mark{display:block!important;object-fit:cover;background:#f6f7f9!important;color:transparent!important}
.auth-gate-icon{border:1px solid #edf0f4}
.wechat-mark{width:72px!important;height:72px!important;margin:0 auto 16px!important;border-radius:18px!important}
.custom-date-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px;margin:0 14px 14px;padding:12px;border:1px solid #e1e6ed;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(34,40,55,.06)}
.custom-date-range[hidden]{display:none}
.custom-date-range label{display:grid;gap:5px;min-width:0;color:#7b8491;font-size:12px}
.custom-date-range input{width:100%;min-width:0;height:40px;padding:0 8px;border:1px solid #dce2ea;border-radius:8px;background:#fff;color:#333b47;font-size:13px}
.custom-date-range i{align-self:center;color:#9299a3;font-size:12px;font-style:normal}
.stats-custom-date-range{margin:0 0 14px}
.order-status-tabs{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important;overflow:visible!important}
.order-status-tabs button{min-width:0!important;padding:0 3px!important;font-size:13px!important;overflow:hidden;text-overflow:ellipsis}
.stats-page,.stats-page>*{max-width:100%}
.stats-page{width:100%;overflow-x:hidden}
.stats-periods{width:100%;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #4a4a4a;overflow:hidden}
.stats-periods button{min-width:0;padding-left:2px!important;padding-right:2px!important;border:0!important;border-right:1px solid #4a4a4a!important}
.stats-periods button:last-child{border-right:0!important}
.stats-six-grid article,.stats-batch-card,.stats-batch-matrix{min-width:0}
@media(max-width:390px){
  .order-status-tabs{gap:5px!important}
  .order-status-tabs button{font-size:12px!important}
  .custom-date-range{gap:5px;padding:10px}
  .custom-date-range input{padding:0 4px;font-size:12px}
  .stats-page{padding-left:10px!important;padding-right:10px!important}
  .stats-six-grid{gap:6px!important}
  .stats-six-grid article{padding-left:4px!important;padding-right:4px!important}
  .stats-six-grid em{right:5px;padding-left:6px;padding-right:6px}
}

/* Desktop browsers intentionally use the same narrow customer UI as phones. */
@media(min-width:761px){
  html{background:#e8edf4}
  body{width:100%;background:#e8edf4}
  .app-shell{width:430px;max-width:100%;margin:0 auto;background:#f7f8fb;box-shadow:0 0 32px rgba(25,45,78,.16)}
  .main-column,.content,.view{width:100%;max-width:430px}
  .mobile-bottom-nav{left:50%;right:auto;width:430px;max-width:100%;transform:translateX(-50%)}
  .toast{max-width:398px}
}

/* Transaction custom range: full-width rows matching the reference layout. */
.order-custom-panel{margin:0 0 14px;background:#fff;border-top:1px solid #edf0f4;border-bottom:8px solid #f5f6f8}
.order-custom-panel[hidden]{display:none}
.order-custom-row{height:58px;display:grid;grid-template-columns:120px minmax(0,1fr) 18px;align-items:center;padding:0 17px;border-bottom:1px solid #edf0f4;color:#4e5662}
.order-custom-row>span{font-size:15px}
.order-custom-row>span i{color:#d64242;font-style:normal;font-weight:700}
.order-custom-row input{width:100%;height:100%;padding:0;border:0;background:transparent;color:#303640;font:inherit;font-size:15px;outline:0}
.order-custom-row input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;width:100%;height:100%}
.order-custom-row>b{color:#9199a4;font-size:30px;font-weight:300;line-height:1}
.order-custom-panel>button{display:block;width:calc(100% - 32px);height:48px;margin:12px 16px 16px;border:0;border-radius:3px;background:#7f9fcb;color:#fff;font-size:16px}

/* Customer service and feedback. */
.support-contact-page{min-height:calc(100vh - 112px);padding:0 14px 94px!important;background:#f5f7fb}
.support-contact-hero{margin:0 -14px;padding:28px 22px 54px;background:linear-gradient(145deg,#4c7ee8,#7d61db);color:#fff}
.support-contact-hero p{margin:0 0 8px;font-size:10px;font-weight:800;letter-spacing:.14em;opacity:.8}
.support-contact-hero h1{margin:0;font-size:27px}
.support-contact-hero span{display:block;margin-top:9px;font-size:12px;opacity:.86}
.support-contact-card{position:relative;margin:-32px 0 14px;padding:25px 20px 20px;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(35,56,94,.1);text-align:center}
.support-wechat-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:16px;background:#e5f8f0;color:#20a577;display:grid;place-items:center;font-size:26px;font-weight:800}
.support-contact-card>small{display:block;color:#9aa3b0;font-size:11px}
.support-contact-card>strong{display:block;margin:7px 0 12px;color:#1d2d49;font-size:21px;overflow-wrap:anywhere}
.support-contact-card>button{height:36px;padding:0 18px;border:1px solid #bfd3fa;border-radius:19px;background:#eff5ff;color:#3972dd;font-size:12px}
.support-qr-box{width:210px;min-height:210px;margin:20px auto 12px;border:1px solid #e1e7ef;border-radius:12px;background:#fafbfd;display:grid;place-items:center;overflow:hidden}
.support-qr-box img{width:100%;height:100%;object-fit:contain}
.support-qr-box span{padding:18px;color:#a2abb8;font-size:12px}
.support-qr-box span[hidden]{display:none}
.support-contact-card>p{margin:0;color:#8d98a7;font-size:11px}
.support-feedback-card{padding:22px;border:1px solid #dce7fb;border-radius:14px;background:linear-gradient(145deg,#f2f6ff,#e8f0ff)}
.support-feedback-card h2{margin:0;color:#1e3153;font-size:19px}
.support-feedback-card>p:not(.eyebrow){margin:8px 0 16px;color:#7183a1;font-size:12px;line-height:1.65}
.support-feedback-card .primary-btn{height:42px;padding:0 18px}
.feedback-form textarea{width:100%;resize:vertical;border:1px solid #dde5ef;border-radius:7px;padding:12px;font:inherit;font-size:12px;line-height:1.65;outline:0}

/* Payout history list and detail. */
.payout-page{min-height:calc(100vh - 112px);padding:0 0 94px!important;background:#f5f6f8}
.payout-page>.payment-back{margin:12px 16px}
.payout-list{background:#fff;border-top:1px solid #edf0f3}
.payout-list-row{width:100%;min-height:88px;padding:15px 18px;display:grid;grid-template-columns:48px minmax(0,1fr) auto 14px;align-items:center;gap:11px;border:0;border-bottom:1px solid #eceff3;background:#fff;text-align:left}
.payout-money-icon{width:44px;height:44px;border:3px solid #3686eb;border-radius:50%;display:grid;place-items:center;color:#3686eb;font-size:23px;font-weight:800}
.payout-list-row span:nth-child(2) b,.payout-list-row span:nth-child(2) small{display:block}
.payout-list-row span:nth-child(2) b{color:#26303b;font-size:16px}
.payout-list-row span:nth-child(2) small{margin-top:7px;color:#a2a9b2;font-size:12px}
.payout-list-row>strong{color:#ce4553;font-size:17px;white-space:nowrap}
.payout-list-row>i{color:#959ca5;font-size:26px;font-style:normal}
.payout-empty,.payout-end{padding:24px;text-align:center;color:#a4aab2;font-size:14px}.payout-end{padding:18px}
.payout-info>h2,.payout-orders>h2{margin:0;padding:18px 16px;color:#9299a2;font-size:15px;font-weight:500;background:#f5f6f8}
.payout-info dl{margin:0;background:#fff}
.payout-info dl>div{min-height:55px;padding:0 17px;display:grid;grid-template-columns:115px minmax(0,1fr);align-items:center;border-bottom:1px solid #edf0f3}
.payout-info dt{color:#323943;font-size:15px}.payout-info dd{margin:0;color:#969da6;font-size:14px;text-align:right;overflow-wrap:anywhere}
.payout-orders article{position:relative;padding:17px 38px 18px 17px;border-bottom:8px solid #f5f6f8;background:#fff}
.payout-orders article header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:13px;border-bottom:1px solid #edf0f3}
.payout-orders article header b{min-width:0;color:#303842;font-size:13px;overflow-wrap:anywhere}.payout-orders article header strong{color:#8d959f;font-size:14px;white-space:nowrap}
.payout-orders article p{margin:14px 0 8px;color:#333b45;font-size:14px;line-height:1.55}
.payout-orders article small{display:block;margin-top:4px;color:#9aa1aa;font-size:11px;overflow-wrap:anywhere}
.payout-orders article>i{position:absolute;right:17px;bottom:30px;color:#969da6;font-size:27px;font-style:normal}
@media(max-width:370px){
  .order-custom-row{grid-template-columns:104px minmax(0,1fr) 15px;padding:0 12px}
  .support-qr-box{width:190px;min-height:190px}
  .payout-info dl>div{grid-template-columns:102px minmax(0,1fr)}
}