/* ============================================================
   B04 LIVEJOIN USER UI — 2026-10-02
   User navigation, compact order form, deposits and API layout.
   Business logic is intentionally untouched.
   ============================================================ */

/* ---------- USER SIDEBAR ---------- */
.user-side .side-brand .brand-plate,
.user-top .top-brand-chip{cursor:pointer}
.side-balance-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:end;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
}
.side-balance-row .side-balance{margin:0!important;padding:0!important;border:0!important;min-width:0}
.side-balance-row .side-balance span,.side-balance-row .side-balance strong{display:block}
.side-balance-row .side-balance strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-add-fund{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;padding:5px 9px;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  background:rgba(255,255,255,.10);color:#fff!important;font-size:.58rem!important;font-weight:850!important;white-space:nowrap;
}
.side-add-fund:hover{background:rgba(255,255,255,.17)}

/* ---------- B04 NEW ORDER ---------- */
.b04-order-page{min-height:calc(100vh - 82px);padding:12px 14px 22px!important;background:#f5f6fa!important}
.b04-order-container{width:min(1040px,100%)!important;max-width:1040px!important;margin:0 auto!important}
.b04-order-card{overflow:hidden;border:1px solid #e2e4ec;border-radius:16px;background:#fff;box-shadow:0 14px 42px rgba(34,35,59,.075)}
.b04-order-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border-bottom:1px solid #eceef3;background:#fff}
.b04-order-title{display:flex;align-items:center;gap:10px;min-width:0}
.b04-order-logo{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid #e4e6ed;border-radius:12px;background:#fafafe}
.b04-order-logo img{width:28px!important;height:28px!important;object-fit:contain!important}
.b04-order-kicker{display:block;color:#6632d9;font-size:.51rem;font-weight:900;letter-spacing:.13em}
.b04-order-title h1{margin:1px 0 0!important;color:#24273a!important;font-size:.98rem!important;line-height:1.15!important}
.b04-order-title p{margin:2px 0 0;color:#8b8e9e;font-size:.57rem;line-height:1.35}
.b04-order-statuses{display:flex;align-items:stretch;gap:7px;flex:0 0 auto}
.b04-status-chip{position:relative;min-width:105px;min-height:43px;display:grid;align-content:center;padding:6px 9px;border:1px solid #e4e6ed;border-radius:10px;background:#fafafd}
.b04-status-chip span{display:block;color:#878a9b;font-size:.49rem;font-weight:800;line-height:1.1}
.b04-status-chip strong{display:block;margin-top:2px;color:#292c3e;font-size:.72rem;line-height:1.1}
.b04-available-chip{padding-left:24px;background:#f8fffc;border-color:#d9eee4}
.b04-available-chip i{position:absolute;left:9px;top:17px;width:7px;height:7px;border-radius:50%;background:#17ae77;box-shadow:0 0 0 3px rgba(23,174,119,.1)}
.b04-wallet-chip{grid-template-columns:1fr auto;column-gap:6px;min-width:138px}
.b04-wallet-chip span,.b04-wallet-chip strong{grid-column:1}
.b04-wallet-chip a{grid-column:2;grid-row:1/3;align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 7px;border-radius:7px;background:#eee9ff;color:#5d29ce;font-size:.51rem;font-weight:900;white-space:nowrap}
.b04-order-error{margin:9px 12px 0!important;padding:9px 11px!important;border-radius:9px!important;font-size:.69rem!important}
.b04-order-body{padding:11px}
.b04-field-block{min-width:0;padding:10px;border:1px solid #e7e8ee;border-radius:11px;background:#fff}
.b04-field-copy{display:grid;gap:2px;margin-bottom:8px}
.b04-field-copy label{margin:0;color:#2f3245;font-size:.68rem;font-weight:900;line-height:1.2}
.b04-field-copy small{color:#8b8e9f;font-size:.53rem;line-height:1.35}
.b04-live-input{min-height:39px;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;border:1px solid #dfe1e8;border-radius:9px;background:#fafafd;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.b04-live-input:focus-within{border-color:#9f85e8;box-shadow:0 0 0 3px rgba(102,49,219,.06);background:#fff}
.b04-live-input>span{display:grid;place-items:center;color:#6734d9;font-size:.8rem;font-weight:900}
.b04-live-input input{width:100%!important;min-width:0!important;height:37px!important;min-height:37px!important;padding:0 10px 0 0!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:#2d3043!important;font-size:.68rem!important}
.b04-order-grid{display:grid;grid-template-columns:minmax(250px,.78fr) minmax(0,1.5fr);gap:9px;margin-top:9px}
.b04-quantity-picker{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:6px;align-items:stretch}
.b04-quantity-picker>button{min-height:39px;border:1px solid #dddfe8;border-radius:9px;background:#f7f5fc;color:#5e2bcd;cursor:pointer;font-size:.95rem;font-weight:900;transition:.15s ease}
.b04-quantity-picker>button:hover{border-color:#bca9ed;background:#f0ebff}.b04-quantity-picker>button:active{transform:scale(.96)}
.b04-quantity-value{min-width:0;display:grid;grid-template-columns:minmax(54px,1fr) auto;align-items:center;overflow:hidden;border:1px solid #dfe1e8;border-radius:9px;background:#fff}
.b04-quantity-value input{min-width:0!important;width:100%!important;height:37px!important;min-height:37px!important;padding:0 7px!important;border:0!important;outline:0!important;box-shadow:none!important;background:#fff!important;text-align:center!important;color:#292c3e!important;font-size:.78rem!important;font-weight:900!important;-moz-appearance:textfield}
.b04-quantity-value input::-webkit-outer-spin-button,.b04-quantity-value input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.b04-quantity-value span{padding-right:9px;color:#8a8d9e;font-size:.5rem;font-weight:800;white-space:nowrap}
.b04-quantity-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.b04-quantity-meta span{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:7px;background:#f7f7fa;color:#858899;font-size:.49rem}
.b04-quantity-meta strong{color:#44475a}
.b04-native-duration{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.b04-duration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.b04-duration-card{min-width:0;min-height:47px;display:flex;align-items:center;justify-content:space-between;gap:7px;padding:7px 8px;border:1px solid #e0e2e9;border-radius:9px;background:#fafafd;color:#303346;cursor:pointer;text-align:left;transition:.15s ease}
.b04-duration-card:hover{transform:translateY(-1px);border-color:#c7b8ef;background:#fff}
.b04-duration-card.is-active{border-color:#6934dc;background:#f2eeff;box-shadow:inset 0 0 0 1px #6934dc}
.b04-duration-card strong{min-width:0;color:inherit;font-size:.59rem;line-height:1.18}
.b04-duration-card span{flex:0 0 auto;color:#5d2cce;font-size:.58rem;font-weight:900;white-space:nowrap}
.b04-order-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:9px;padding:8px 9px;border:1px solid #e5e7ed;border-radius:10px;background:#fafafd}
.b04-total-price{margin-right:auto;display:grid;gap:0}
.b04-total-price span{color:#898c9e;font-size:.5rem;font-weight:800}.b04-total-price strong{color:#242739;font-size:1.02rem;line-height:1.15;letter-spacing:-.03em}
.smmvai-ui .b04-place-order{width:190px!important;min-height:40px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:7px 8px 7px 12px!important;border-radius:9px!important;background:linear-gradient(135deg,#6c36df,#5724ca)!important;box-shadow:0 8px 18px rgba(82,39,177,.20)!important}
.smmvai-ui .b04-place-order span{font-size:.68rem;font-weight:900}.smmvai-ui .b04-place-order b{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.14);font-size:.72rem}
.smmvai-ui .b04-place-order:disabled{opacity:.46!important;box-shadow:none!important;cursor:not-allowed!important}

/* ---------- DEPOSIT HISTORY PAGE ---------- */
.b04-page-narrow{width:min(1120px,100%)!important;max-width:1120px!important;margin:0 auto!important}
.b04-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.b04-page-head h1{margin:2px 0 4px!important}.b04-page-head p{margin:0!important}
.b04-page-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.b04-total-deposited{min-width:135px;padding:8px 10px;border:1px solid #e3e5ec;border-radius:10px;background:#fff}
.b04-total-deposited span,.b04-total-deposited strong{display:block}.b04-total-deposited span{color:#85889a;font-size:.51rem;font-weight:800}.b04-total-deposited strong{margin-top:1px;color:#292c3f;font-size:.8rem}
.b04-wallet-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.b04-wallet-strip>div{padding:10px 12px;border:1px solid #e5e6ed;border-radius:10px;background:#fff}
.b04-wallet-strip span,.b04-wallet-strip strong{display:block}.b04-wallet-strip span{color:#85889a;font-size:.51rem}.b04-wallet-strip strong{margin-top:2px;color:#292c3f;font-size:.78rem}
.b04-deposit-history-card{padding:12px!important}
.b04-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.b04-card-title h2{margin:2px 0 0!important;font-size:1rem!important}.b04-record-count{padding:5px 8px;border-radius:999px;background:#f3f1fa;color:#6857a0;font-size:.51rem;font-weight:850}
.b04-deposit-table-wrap{box-shadow:none!important}.b04-deposit-table{min-width:760px}
.b04-empty-state{padding:28px 14px;text-align:center}.b04-empty-state strong{display:block;color:#303346}.b04-empty-state p{margin:5px auto 11px;max-width:420px;color:#888b9c;font-size:.68rem}
.b04-deposit-history-link{display:flex;justify-content:flex-end;margin-top:10px}

/* ---------- API ACCESS + DOCUMENTATION RESPONSIVENESS ---------- */
.api-page .app-container,.api-doc-page .app-container{width:min(1160px,100%)!important;max-width:1160px!important;margin:0 auto!important;min-width:0}
.api-page *,.api-doc-page *{box-sizing:border-box}
.api-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:13px;min-width:0}
.api-hero-row>div{min-width:0}.api-hero-row h1,.api-doc-head h1{margin:2px 0 5px!important}.api-hero-row p,.api-doc-head p{margin:0!important;max-width:720px;overflow-wrap:anywhere}
.api-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 16px}
.api-start-card,.api-key-reveal{min-width:0!important;overflow:hidden!important;padding:13px!important}.api-start-card h3,.api-key-reveal h3{margin:3px 0 5px!important;font-size:.86rem!important}.api-start-card p,.api-key-reveal p{margin:0 0 9px!important;font-size:.65rem!important;line-height:1.5!important;overflow-wrap:anywhere}
.copy-field.responsive-copy{width:100%;min-width:0;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;align-items:stretch!important}
.copy-field.responsive-copy input{width:100%!important;min-width:0!important;max-width:100%!important;height:38px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.63rem!important}
.copy-field.responsive-copy .btn{min-width:82px!important;white-space:nowrap!important}
.api-action-tags{display:flex;flex-wrap:wrap;gap:5px}.api-action-tags span{display:inline-flex;padding:5px 7px;border:1px solid #e2e3ea;border-radius:7px;background:#fafafd;color:#5e6073;font-size:.53rem;font-weight:800;overflow-wrap:anywhere}
.api-page .text-link{display:inline-block;margin-top:8px;font-size:.61rem;font-weight:800}
.api-table-wrap{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}.api-table-wrap .table{min-width:720px;width:100%}.api-table-wrap td,.api-table-wrap th{white-space:nowrap}.api-table-wrap code{font-size:.62rem}

.api-doc-head{min-width:0;margin-bottom:12px}.api-doc-head .responsive-copy{max-width:720px;margin-top:10px}
.api-doc-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px;align-items:start;min-width:0}
.api-doc-nav{position:sticky;top:82px;display:grid;gap:4px;min-width:0;padding:8px;border:1px solid #e4e5ec;border-radius:11px;background:#fff;box-shadow:0 8px 24px rgba(34,35,59,.045)}
.api-doc-nav a{display:block;min-width:0;padding:7px 8px;border-radius:7px;color:#616476;font-size:.59rem;font-weight:800;overflow-wrap:anywhere}.api-doc-nav a:hover{background:#f2eeff;color:#5a28c8}
.api-doc-content{display:grid;gap:10px;min-width:0}.api-doc-content .card{position:relative;min-width:0!important;max-width:100%!important;overflow:hidden!important;padding:14px!important}.api-doc-content h2{margin:1px 0 6px!important;font-size:.92rem!important}.api-doc-content p{margin:0!important;color:#707486;font-size:.67rem!important;line-height:1.55!important;overflow-wrap:anywhere}.api-doc-content p+p{margin-top:8px!important}
.api-doc-content .doc-step{display:inline-flex;min-width:28px;justify-content:center;padding:4px 6px;border-radius:7px;background:#f0ebff;color:#6230d3;font-size:.5rem;font-weight:900}
.api-doc-content pre{display:block;width:100%;max-width:100%;margin:9px 0 7px;padding:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e4e5ec;border-radius:9px;background:#f8f8fb;color:#343648;font-size:.61rem;line-height:1.55;white-space:pre;word-break:normal}
.api-doc-content pre code{display:block;min-width:max-content;white-space:pre;word-break:normal;overflow-wrap:normal}
.api-doc-content :not(pre)>code{max-width:100%;padding:2px 4px;border-radius:5px;background:#f3f1f8;overflow-wrap:anywhere;word-break:break-word}

/* Keep regular form controls inside their parents at every width. */
.api-page input,.api-page select,.api-page textarea,.api-doc-page input,.api-doc-page select,.api-doc-page textarea{max-width:100%;min-width:0}

@media(max-width:920px){
  .b04-order-grid{grid-template-columns:minmax(230px,.72fr) minmax(0,1.35fr)}
  .api-card-grid{grid-template-columns:1fr 1fr}.api-start-card:last-child{grid-column:1/-1}
  .api-doc-layout{grid-template-columns:160px minmax(0,1fr)}
}
@media(max-width:760px){
  .b04-order-page{padding:10px 8px 24px!important}.b04-order-card{border-radius:14px}.b04-order-head{align-items:flex-start;flex-direction:column;padding:10px}.b04-order-statuses{width:100%}.b04-status-chip{min-width:0;flex:1}.b04-order-body{padding:9px}.b04-order-grid{grid-template-columns:1fr}.b04-duration-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.b04-order-title p{display:none}
  .b04-page-head{align-items:flex-start;flex-direction:column}.b04-page-head-actions{width:100%;justify-content:space-between}.b04-total-deposited{min-width:0;flex:1}.b04-wallet-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .api-hero-row{align-items:flex-start;flex-direction:column}.api-card-grid{grid-template-columns:1fr}.api-start-card:last-child{grid-column:auto}.api-doc-layout{grid-template-columns:1fr}.api-doc-nav{position:static;display:flex;overflow-x:auto;gap:5px;padding:6px}.api-doc-nav a{flex:0 0 auto;white-space:nowrap;border:1px solid #ececf1}.api-doc-content .card{padding:12px!important}
}
@media(max-width:520px){
  .b04-order-head{gap:9px}.b04-order-statuses{gap:6px}.b04-status-chip{min-height:40px;padding-top:5px;padding-bottom:5px}.b04-wallet-chip{min-width:0}.b04-field-block{padding:9px}.b04-field-copy small{font-size:.5rem}.b04-duration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.b04-duration-card{min-height:45px;padding:7px}.b04-order-footer{align-items:stretch}.smmvai-ui .b04-place-order{width:160px!important}.b04-total-price strong{font-size:.94rem}
  .b04-page-head-actions{display:grid;grid-template-columns:1fr auto}.b04-wallet-strip{grid-template-columns:1fr 1fr}.b04-wallet-strip>div:first-child{grid-column:1/-1}.b04-card-title{align-items:flex-start}.b04-deposit-history-card{padding:9px!important}
  .copy-field.responsive-copy{grid-template-columns:1fr!important}.copy-field.responsive-copy .btn{width:100%!important}.api-doc-head .responsive-copy{max-width:none}.api-table-wrap .table{min-width:650px}.api-page .section-head{margin-top:16px!important}.api-doc-content pre{font-size:.57rem;padding:9px}
}