/* SECURIX account visual v2 — preview-faithful layout only. */
.sx-account{padding:26px 18px 64px}
.sx-account-wrap{width:min(1260px,100%);margin:0 auto}
.sx-account h1{font-size:38px;margin:20px 0 18px}
.sx-account-grid{grid-template-columns:220px minmax(0,1fr);gap:18px}
.sx-account-side{padding:10px;top:92px;border-radius:20px;box-shadow:0 10px 30px rgba(21,25,31,.04)}
.sx-account-side-nav{padding:2px 0 10px;gap:3px}
.sx-account-side-nav a,.sx-account-side-nav button,.sx-account-logout button{min-height:48px;padding:12px 12px;border-radius:11px;font-size:13px}
.sx-account-side-nav a span,.sx-account-side-nav button span,.sx-account-logout button span{width:20px;display:grid;place-items:center}
.sx-account-logout{padding-top:10px}
.sx-account-main{gap:14px}

/* Overview matches the approved preview: navigation / content / small profile rail. */
.sx-overview-layout{display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:16px;align-items:start}
.sx-overview-primary{display:grid;gap:14px;min-width:0}
.sx-overview-rail{display:grid;gap:14px;min-width:0}
.sx-account-hello{padding:15px 18px;border-radius:19px;min-height:82px;box-shadow:0 9px 28px rgba(21,25,31,.035)}
.sx-account-hello .sx-account-avatar{width:50px;height:50px;flex-basis:50px}
.sx-account-hello strong{font-size:16px}
.sx-account-hello small{font-size:11px}
.sx-account-hello>a{height:38px;font-size:11px;border-radius:10px}
.sx-account-card{padding:15px 16px;border-radius:19px;box-shadow:0 9px 28px rgba(21,25,31,.035)}
.sx-account-card-head{margin-bottom:11px}
.sx-account-card-head h2{font-size:16px}
.sx-account-card-head>a{font-size:10px}

/* Active order — compact two-panel composition instead of a stretched full-width table. */
.sx-active-order.sx-active-order--v2{display:grid;grid-template-columns:minmax(280px,.95fr) minmax(310px,1.15fr);border-radius:15px;overflow:hidden}
.sx-active-order--v2 .sx-active-product{padding:15px 16px;gap:14px;align-items:center}
.sx-active-order--v2 .sx-order-img{width:104px;height:104px;flex:0 0 104px;border-radius:13px}
.sx-active-product-copy{min-width:0}
.sx-active-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sx-active-title-line>strong{font-size:14px!important}
.sx-active-product-copy>small{display:block;margin:4px 0 12px!important;font-size:10px!important;color:var(--sx-muted)}
.sx-active-items-count{display:block;font-size:10px;color:var(--sx-muted);margin-bottom:3px}
.sx-active-inline-total{display:block;font-size:20px;line-height:1.1;white-space:nowrap}
.sx-active-delivery.sx-active-delivery--v2{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;padding:15px 16px;border-left:1px solid var(--sx-line)}
.sx-np-head{display:flex;align-items:center;gap:9px;min-height:28px}
.sx-np-head img{width:82px;height:28px;object-fit:contain;object-position:left center}
.sx-np-head strong{font-size:12px}
.sx-active-delivery--v2>small{font-size:10px;line-height:1.45;color:var(--sx-muted);margin:0!important;display:block}
.sx-ttn-row{display:flex;align-items:center;gap:6px;font-size:11px}
.sx-ttn-row svg{width:13px;height:13px;color:#9aa0a8}
.sx-active-order--v2 .sx-active-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px;padding:5px 0 0;grid-column:auto}
.sx-active-order--v2 .sx-btn{min-height:39px;font-size:10px;border-radius:9px;padding:0 10px}

/* Recent purchases look like the preview list, not a giant empty field. */
.sx-account-recent .sx-order-list{border-radius:13px}
.sx-account-recent .sx-order-row{grid-template-columns:45px minmax(120px,1fr) 110px 96px 17px;min-height:62px;padding:7px 10px;gap:9px}
.sx-account-recent .sx-order-mini-img{width:44px;height:44px;border:0;background:#fafafa}
.sx-account-recent .sx-order-main strong{font-size:11px}
.sx-account-recent .sx-order-main small{font-size:9px}
.sx-account-recent .sx-order-price{font-size:11px}
.sx-account-empty--recent{min-height:64px!important;border:0!important;background:#fafafa;padding:11px 13px!important}
.sx-account-empty--recent>span{width:36px;height:36px}
.sx-account-empty--recent strong{font-size:11px}
.sx-account-empty--recent small{font-size:9px}

/* Quick actions. */
.sx-quick-card{padding-bottom:14px}
.sx-quick-grid{gap:8px}
.sx-quick-grid>a,.sx-quick-grid>button{grid-template-columns:38px 1fr 14px;min-height:78px;padding:10px 11px;border-radius:12px}
.sx-quick-grid>a>span:first-child,.sx-quick-grid>button>span:first-child{width:38px;height:38px}
.sx-quick-grid strong{font-size:10px}
.sx-quick-grid small{font-size:8px;line-height:1.3}

/* Right rail from the approved desktop preview. */
.sx-rail-profile{text-align:center;padding:14px 13px 15px}
.sx-rail-card-title{display:flex;align-items:center;justify-content:space-between;text-align:left;margin-bottom:9px}
.sx-rail-card-title>strong{font-size:12px}
.sx-rail-card-title>a{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--sx-line);border-radius:9px;color:#4f555e}
.sx-rail-card-title svg{width:14px;height:14px}
.sx-account-avatar--large{width:66px;height:66px;flex-basis:66px;margin:3px auto 9px}
.sx-account-avatar--large svg{width:27px;height:27px}
.sx-rail-name{display:block;font-size:12px;margin-bottom:5px}
.sx-rail-profile>small{display:block;color:var(--sx-muted);font-size:9px;line-height:1.55;overflow-wrap:anywhere}
.sx-rail-profile>.sx-btn{margin-top:12px;width:100%;min-height:38px;font-size:9px}
.sx-rail-help{padding:14px 13px;text-align:center}
.sx-rail-help-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f6f7f8;margin:0 auto 9px;color:#30343a}
.sx-rail-help-icon svg{width:21px;height:21px}
.sx-rail-help strong{display:block;font-size:11px}
.sx-rail-help small{display:block;font-size:8.5px;line-height:1.5;color:var(--sx-muted);margin:5px 0 11px}
.sx-btn--soft{width:100%;min-height:38px;background:#fff2df;color:#da8700;border-color:#ffe3b8;font-size:9px}

/* The detail screen stays compact and product-focused. */
.sx-order-detail-grid{grid-template-columns:minmax(0,1fr) 260px;gap:12px}
.sx-order-detail-products,.sx-order-detail-meta{border-radius:13px;padding:14px}
.sx-detail-item{grid-template-columns:58px minmax(0,1fr) auto;min-height:74px;padding:8px 0}
.sx-detail-item .sx-order-mini-img{width:58px;height:58px;border-radius:10px;background:#fafafa}
.sx-detail-item strong{font-size:11px;line-height:1.35}
.sx-detail-item small{font-size:9px}
.sx-detail-item>b{font-size:11px}
.sx-order-detail-meta>div{gap:3px;padding-bottom:10px}
.sx-order-detail-meta small{font-size:8px}
.sx-order-detail-meta strong{font-size:12px}
.sx-order-detail-meta span{font-size:9px;line-height:1.45}

@media(max-width:1120px){
  .sx-account-wrap{width:min(1040px,100%)}
  .sx-account-grid{grid-template-columns:205px minmax(0,1fr)}
  .sx-overview-layout{grid-template-columns:minmax(0,1fr) 205px}
  .sx-active-order.sx-active-order--v2{grid-template-columns:minmax(250px,.9fr) minmax(280px,1.1fr)}
  .sx-active-order--v2 .sx-order-img{width:88px;height:88px;flex-basis:88px}
}

@media(max-width:900px){
  .sx-account{padding:15px 12px 48px}
  .sx-account-wrap{width:100%}
  .sx-account h1{font-size:27px;margin:8px 0 12px}
  .sx-overview-layout{display:block}
  .sx-overview-primary{gap:10px}
  .sx-overview-rail{display:none}
  .sx-account-card{padding:12px;border-radius:16px}
  .sx-account-card-head{margin-bottom:9px}
  .sx-account-card-head h2{font-size:14px}
  .sx-account-mobile-profile{border-radius:16px;padding:11px 12px}
  .sx-account-mobile-tabs{margin-bottom:10px}
  .sx-active-order.sx-active-order--v2{display:block;border-radius:13px}
  .sx-active-order--v2 .sx-active-product{padding:11px 12px}
  .sx-active-order--v2 .sx-order-img{width:76px;height:76px;flex-basis:76px}
  .sx-active-title-line{align-items:flex-start;justify-content:space-between}
  .sx-active-title-line>strong{font-size:12px!important}
  .sx-active-product-copy>small{font-size:9px!important;margin-bottom:8px!important}
  .sx-active-items-count{font-size:8px}
  .sx-active-inline-total{font-size:18px}
  .sx-active-delivery.sx-active-delivery--v2{border-left:0;border-top:1px solid var(--sx-line);padding:10px 12px;gap:6px}
  .sx-np-head img{width:69px;height:23px}
  .sx-np-head strong{font-size:10px}
  .sx-active-delivery--v2>small{font-size:8.5px}
  .sx-ttn-row{font-size:9px}
  .sx-active-order--v2 .sx-active-actions{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:6px;padding-top:4px}
  .sx-active-order--v2 .sx-btn{min-height:38px;font-size:9px}
  .sx-account-recent .sx-order-row{grid-template-columns:40px minmax(92px,1fr) auto 16px;padding:7px;gap:7px}
  .sx-account-recent .sx-order-mini-img{width:40px;height:40px}
  .sx-account-recent .sx-order-row>.sx-status{grid-column:2;justify-self:start}
  .sx-account-recent .sx-order-row>.sx-order-price{grid-column:3;grid-row:1/3;font-size:10px}
  .sx-account-recent .sx-order-row>.sx-order-chev{grid-column:4;grid-row:1/3}
  .sx-quick-grid{grid-template-columns:1fr 1fr;gap:7px}
  .sx-quick-grid>a,.sx-quick-grid>button{grid-template-columns:34px 1fr;min-height:68px;padding:9px}
  .sx-quick-grid>a>span:first-child,.sx-quick-grid>button>span:first-child{width:34px;height:34px}
  .sx-quick-grid strong{font-size:9px}
  .sx-quick-grid small{font-size:7px}
  .sx-order-detail-grid{grid-template-columns:1fr}
}

@media(max-width:430px){
  .sx-active-order--v2 .sx-active-actions{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important}
  .sx-account h1{font-size:25px}
}