body { background: #eef1f7; }
.op-top { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1c2333; color: #fff; flex-wrap: wrap; }
.op-top .brand { font-size: 16px; }
.op-top .btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
.op-top .user-chip .avatar-sm { background: var(--primary); color: #fff; }
.op-stores { display: flex; gap: 6px; flex-wrap: wrap; }
.op-stores button { border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #cfd6e6; border-radius: 99px; padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: 13px; }
.op-stores button.active { background: #fff; color: var(--text); }
.op-stores button.closed { opacity: .6; }
.op-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; max-width: 1400px; margin: 0 auto; padding: 16px; }
.op-store-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.op-store-head .ico { font-size: 28px; }
.op-side { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; align-self: start; position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; }
.op-order { border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; font-size: 13px; }
.op-order .row { gap: 6px; }
@media (max-width: 1000px) { .op-layout { grid-template-columns: 1fr; } .op-side { position: static; max-height: none; } }