.order-book-panel{margin-bottom:var(--space-4);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-family:var(--font-family-sans)}.order-book-panel--loading{border-color:var(--color-border-subtle)}.order-book-panel__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-3)}.order-book-panel__side-tag{margin-top:4px;color:var(--color-text-secondary);font-size:var(--font-size-micro);font-weight:700;letter-spacing:.02em}.order-book-panel__side-tag,.order-book-panel__side-toggle{display:flex;align-items:center;width:-moz-fit-content;width:fit-content}.order-book-panel__side-toggle{gap:var(--space-3);margin-top:6px}.order-book-panel__side-toggle-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;padding:0;font:inherit;font-size:var(--font-size-caption);font-weight:500;color:var(--color-neutral-400);cursor:pointer;transition:color var(--duration-fast) var(--ease-out)}.order-book-panel__side-toggle-btn:focus-visible,.order-book-panel__side-toggle-btn:hover{color:var(--color-text-primary);outline:none}.order-book-panel__side-toggle-btn.is-active{color:var(--color-text-primary);font-weight:600}.order-book-panel__head h2,.order-book-panel__title{margin:0;color:var(--color-text-primary);font-size:var(--font-size-body);font-weight:800;line-height:1.2;letter-spacing:-.02em}.order-book-panel__meta{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-micro);font-weight:600;white-space:nowrap}.order-book-panel__footer-bar{margin-top:var(--space-3)}.order-book-panel__footer-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.order-book-panel__footer-recenter{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border-radius:var(--radius-pill);color:var(--color-text-muted);cursor:pointer;transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.order-book-panel__footer-recenter:focus-visible,.order-book-panel__footer-recenter:hover{color:var(--color-text-primary);background:var(--color-neutral-100);outline:none}.order-book-panel__controls{display:inline-flex;align-items:center;gap:var(--space-1)}.order-book-panel__refresh{display:inline-flex;align-items:center;justify-content:center;width:24px;min-height:24px;padding:0;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text-muted);font:inherit;font-size:var(--font-size-micro);font-weight:700;cursor:pointer;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.order-book-panel__refresh:hover{color:var(--color-primary-600);border-color:var(--color-primary-200);background:var(--color-primary-50)}.order-book-panel__refresh:disabled{cursor:default;opacity:.62}.order-book-panel__refresh.is-refreshing svg{animation:orderBookRefreshSpin .8s linear infinite}.order-book-panel__tick-toggle{display:inline-flex;align-items:center;gap:0;padding:2px;border-radius:var(--radius-pill);background:var(--color-neutral-50);border:1px solid var(--color-border-subtle)}.order-book-panel__tick-toggle button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--color-text-muted);font:inherit;font-size:var(--font-size-micro);font-weight:700;min-width:40px;height:20px;padding:0 var(--space-2);border-radius:var(--radius-pill);cursor:pointer;transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.order-book-panel__tick-toggle button:hover{color:var(--color-text-primary)}.order-book-panel__tick-toggle button.is-selected{color:var(--color-text-primary);background:var(--color-surface);box-shadow:0 1px 2px rgba(15,23,42,.08)}@keyframes orderBookRefreshSpin{to{transform:rotate(1turn)}}.order-book-table{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);overflow:hidden;font-family:var(--font-family-sans);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;--order-book-depth-lane:clamp(160px,32vw,300px)}.order-book-table__row{position:relative;display:grid;grid-template-columns:var(--order-book-depth-lane) minmax(88px,1fr) minmax(104px,1fr) minmax(116px,1fr);align-items:center;grid-gap:var(--space-4);gap:var(--space-4);min-height:28px;padding:0 var(--space-2);border-bottom:0;color:var(--color-text-secondary);font-size:12px;font-weight:500;letter-spacing:-.01em;isolation:isolate}.order-book-table__row:before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(var(--order-book-depth-lane) * var(--depth-ratio, 0));max-width:var(--order-book-depth-lane);transform-origin:left center;animation:orderBookDepthIn .42s var(--ease-out) both;pointer-events:none;z-index:-1}.order-book-table__row>span{position:relative}.order-book-table__row span:not(:first-child){text-align:right}.order-book-table__row--head{min-height:26px;border-bottom:1px solid var(--color-border-subtle);color:var(--color-text-muted);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;background:var(--color-surface)}.order-book-table__body{max-height:254px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--color-primary-200) transparent;background:var(--color-surface)}.order-book-table__body::-webkit-scrollbar{width:5px}.order-book-table__body::-webkit-scrollbar-track{background:transparent}.order-book-table__body::-webkit-scrollbar-thumb{background:var(--color-primary-200);border-radius:var(--radius-pill)}.order-book-table__row--ask{background:var(--color-surface)}.order-book-table__row--ask:before{background:color-mix(in srgb,var(--color-no) 12%,transparent)}.order-book-table__row--ask .order-book-table__price,.order-book-table__row--ask .order-book-table__side{color:var(--color-text-no);font-family:var(--font-family-sans);font-weight:800}.order-book-table__row--bid{background:var(--color-surface)}.order-book-table__row--bid:before{background:color-mix(in srgb,var(--color-yes) 12%,transparent)}.order-book-table__row--bid .order-book-table__price,.order-book-table__row--bid .order-book-table__side{color:var(--color-yes);font-family:var(--font-family-sans);font-weight:800}.order-book-table__row:last-child{border-bottom:0}.order-book-table__row--interactive{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;border-bottom:1px solid var(--color-border-subtle);text-align:left;font:inherit;color:inherit;cursor:pointer}.order-book-table__row--interactive:focus-visible:before,.order-book-table__row--interactive:hover:before{filter:brightness(.92)}.order-book-table__row--interactive:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.order-book-table__separator,.order-book-table__spread{display:flex;align-items:center;justify-content:center;gap:clamp(var(--space-8),18vw,220px);min-height:30px;color:var(--color-text-muted);font-size:11px;font-weight:600;border-bottom:1px solid var(--color-border-subtle);background:var(--color-neutral-50)}.order-book-table__separator strong,.order-book-table__spread strong{color:var(--color-text-secondary)}.order-book-table__separator span{display:inline-flex;align-items:center;gap:var(--space-1);min-width:96px}.order-book-table__separator.is-interactive{padding:0}.order-book-table__separator-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(var(--space-8),18vw,220px);padding:0;min-height:30px;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.order-book-table__separator-button:focus-visible,.order-book-table__separator-button:hover{background:var(--color-neutral-100);color:var(--color-text-secondary);outline:none}.order-book-table__separator i{display:inline-block;width:42px;height:8px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-neutral-100) 0,var(--color-neutral-200) 48%,var(--color-neutral-100) 100%);background-size:200% 100%;animation:skeleton 1.4s linear infinite}.order-book-table--loading{border-color:var(--color-border-subtle)}.order-book-table__row--skeleton:before{background:color-mix(in srgb,var(--color-text-muted) 7%,transparent);animation:orderBookSkeletonDepth 1.25s ease-in-out infinite}.order-book-table__row--skeleton{border-bottom:0}.order-book-skeleton__cell,.order-book-skeleton__chip{display:block;height:12px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-neutral-100) 0,var(--color-neutral-200) 48%,var(--color-neutral-100) 100%);background-size:200% 100%;animation:skeleton 1.4s linear infinite}.order-book-skeleton__cell{justify-self:end;width:54%}.order-book-skeleton__cell--label{justify-self:start;width:38%}.order-book-skeleton__chip{width:92px}@keyframes orderBookDepthIn{0%{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}@keyframes orderBookSkeletonDepth{0%,to{opacity:.36;transform:scaleX(.92)}50%{opacity:.78;transform:scaleX(1)}}