.mock-bo{--bo-orange: #fa8c16;--bo-orange-hover: #ffa940;--bo-page-bg: #f6f7fb;--bo-heading: #1a1a1a;--bo-secondary: #666;--bo-tertiary: #808080;--bo-border: #e6e6e6;overflow:hidden;width:100%;min-height:520px;color:var(--bo-heading);background:var(--bo-page-bg);border:1px solid #d8dadd;border-radius:12px;box-shadow:0 18px 45px #2f29221c;font-family:Open Sans,sans-serif;font-size:12px;line-height:20px}.mock-bo *,.mock-bo *:before,.mock-bo *:after{box-sizing:border-box}.mock-bo button{font:inherit}.mock-bo .bo-app{min-height:inherit;background:var(--bo-page-bg)}.mock-bo .bo-topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#fff;background:#212121}.mock-bo .bo-wordmark{display:flex;align-items:baseline;font-size:14px;font-weight:300;letter-spacing:.05em}.mock-bo .bo-wordmark b{color:var(--bo-orange);font-weight:700}.mock-bo .bo-wordmark i{margin-left:8px;padding-left:8px;color:#ffffffa6;border-left:1px solid #ffffff40;font-size:10px;font-style:normal;letter-spacing:0}.mock-bo .bo-store{display:flex;align-items:center;gap:8px;color:#ffffffd0}.mock-bo .bo-store>span:first-child{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-bo .bo-avatar{display:grid;place-items:center;width:28px;height:28px;color:#fff;background:#666;border-radius:50%;font-size:10px;font-weight:600}.mock-bo .bo-layout{display:grid;grid-template-columns:126px minmax(0,1fr);min-height:472px}.mock-bo .bo-sidebar{display:grid;align-content:start;gap:4px;padding:16px 8px;color:#ffffffa6;background:#3d3d3d}.mock-bo .bo-sidebar span{padding:8px 10px;border-radius:6px}.mock-bo .bo-sidebar span.active{color:#fff;background:#2b2b2b;font-weight:600}.mock-bo .bo-page{min-width:0;padding:20px 24px 24px}.mock-bo .bo-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.mock-bo .bo-breadcrumb{display:block;color:var(--bo-tertiary);font-size:10px;line-height:16px}.mock-bo .bo-page h3{margin:2px 0 0;color:var(--bo-heading);font:600 24px/32px Open Sans,sans-serif;letter-spacing:0}.mock-bo .bo-date{appearance:none;min-width:88px;height:36px;padding:4px 12px;color:var(--bo-heading);background:#fff;border:1px solid #d9d9d9;border-radius:8px;cursor:pointer;font-weight:600}.mock-bo .bo-date:hover{color:var(--bo-orange);border-color:var(--bo-orange-hover)}.mock-bo .bo-live-banner{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;color:#237804;background:#f6ffed;border:1px solid #b7eb8f;border-radius:3px}.mock-bo .bo-banner-dot{width:8px;height:8px;background:#52c41a;border-radius:50%}.mock-bo .bo-kpis{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:16px}.mock-bo .bo-kpi{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px 18px;background:#fff;border:1px solid var(--bo-border);border-radius:8px}.mock-bo .bo-kpi-label{color:var(--bo-tertiary);font:600 11px/18px Open Sans,sans-serif;letter-spacing:.06em;text-transform:uppercase}.mock-bo .bo-kpi strong{overflow:hidden;color:var(--bo-heading);font:600 28px/34px Open Sans,sans-serif;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.mock-bo .bo-kpi small{color:var(--bo-tertiary);font:400 11px/18px Open Sans,sans-serif}.mock-bo .bo-kpi--hero small{color:#237804}.mock-bo .bo-content-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(230px,.8fr);gap:16px}.mock-bo .bo-card{min-width:0;background:#fff;border:1px solid var(--bo-border);border-radius:8px}.mock-bo .bo-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bo-border)}.mock-bo .bo-card h4{margin:0;color:var(--bo-heading);font:600 14px/22px Open Sans,sans-serif;letter-spacing:0}.mock-bo .bo-card header span{color:var(--bo-tertiary);font:400 10px/16px Open Sans,sans-serif}.mock-bo .bo-card header>div{display:grid}.mock-bo .bo-legend{display:inline-flex;align-items:center;gap:6px}.mock-bo .bo-legend i{width:8px;height:8px;background:var(--bo-orange);border-radius:2px}.mock-bo .bo-bars{height:126px;display:flex;align-items:end;gap:clamp(4px,.8vw,9px);padding:20px 16px 0;border-bottom:1px solid var(--bo-border);background-image:linear-gradient(to bottom,transparent 32%,#e6e6e6 33%,transparent 34%,transparent 65%,#e6e6e6 66%,transparent 67%)}.mock-bo .bo-bars i{flex:1;min-width:3px;height:max(3px,var(--bar-height));background:#ffc069;border-radius:2px 2px 0 0;transition:height .3s cubic-bezier(.215,.61,.355,1),background .2s}.mock-bo .bo-bars i:last-child{background:var(--bo-orange)}.mock-bo .bo-axis{display:flex;justify-content:space-between;padding:5px 16px 10px;color:var(--bo-tertiary);font-size:10px}.mock-bo .bo-transactions header button{appearance:none;padding:0;color:#1677ff;background:transparent;border:0;cursor:pointer;font-weight:600}.mock-bo .bo-transaction-list{max-height:171px;overflow-y:auto;padding:0 16px}.mock-bo .bo-empty{display:grid;place-items:center;padding:28px 12px;color:var(--bo-tertiary);text-align:center}.mock-bo .bo-empty span{display:grid;place-items:center;width:32px;height:32px;margin-bottom:4px;color:#999;background:var(--bo-page-bg);border-radius:50%;font-weight:600}.mock-bo .bo-empty p{margin:0}.mock-bo .bo-transaction{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 0;border-top:1px solid var(--bo-border)}.mock-bo .bo-transaction:first-child{border-top:0}.mock-bo .bo-transaction>div{min-width:0}.mock-bo .bo-transaction strong,.mock-bo .bo-transaction span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-bo .bo-transaction strong{font-weight:600}.mock-bo .bo-transaction span{color:var(--bo-secondary);font-size:10px}.mock-bo .bo-transaction b{font-weight:600;font-variant-numeric:tabular-nums}.mock-bo [hidden]{display:none!important}.mock-bo--phone{position:relative;width:min(100%,360px);min-height:650px;padding:12px 7px 10px;background:#202224;border:0;border-radius:42px;box-shadow:0 28px 70px #17120f52}.mock-bo--phone .phone-sensor{position:absolute;z-index:2;top:7px;left:50%;width:88px;height:20px;background:#202224;border-radius:0 0 14px 14px;transform:translate(-50%)}.mock-bo--phone .bo-app{overflow:hidden;min-height:628px;border-radius:32px}.mock-bo--phone .bo-topbar{height:54px;padding:10px 14px 0}.mock-bo--phone .bo-wordmark i,.mock-bo--phone .bo-store>span:first-child,.mock-bo--phone .bo-sidebar{display:none}.mock-bo--phone .bo-layout{display:block;min-height:574px}.mock-bo--phone .bo-page{padding:16px}.mock-bo--phone .bo-page h3{font-size:20px;line-height:28px}.mock-bo--phone .bo-breadcrumb,.mock-bo--phone .bo-date{display:none}.mock-bo--phone .bo-kpis{grid-template-columns:1fr 1fr;gap:8px}.mock-bo--phone .bo-kpi{padding:12px}.mock-bo--phone .bo-kpi strong{font-size:18px;line-height:26px}.mock-bo--phone .bo-content-grid{display:grid;grid-template-columns:1fr;gap:8px}.mock-bo--phone .bo-bars{height:100px}.mock-bo--phone .bo-transaction-list{max-height:148px}@media(max-width:700px){.mock-bo:not(.mock-bo--phone) .bo-layout{display:block}.mock-bo:not(.mock-bo--phone) .bo-sidebar{display:none}.mock-bo:not(.mock-bo--phone) .bo-page{padding:16px}.mock-bo:not(.mock-bo--phone) .bo-content-grid{grid-template-columns:1fr}.mock-bo:not(.mock-bo--phone) .bo-kpis{grid-template-columns:1fr 1fr;gap:8px}.mock-bo:not(.mock-bo--phone) .bo-kpi{padding:12px}.mock-bo:not(.mock-bo--phone) .bo-kpi strong{font-size:20px}}@media(prefers-reduced-motion:reduce){.mock-bo .bo-bars i{transition:none}}