body.orders-page #customer-orders{max-width:1450px;width:calc(100% - 64px);padding:38px 0;margin:auto}.client-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:36px}.client-content{min-width:0}.client-sidebar{align-self:start;position:sticky;top:110px;padding:22px 14px;background:var(--white);border:1px solid var(--line);border-radius:18px}.client-sidebar>.eyebrow{margin:0 12px 20px;font-size:10px}.client-sidebar .client-menu,.client-menu-drawer .client-menu{display:flex;flex-direction:column;margin:0;padding:0;border:0;background:transparent}.client-sidebar .client-menu a,.client-menu-drawer .client-menu a{justify-content:flex-start;flex:none;padding:14px}.client-menu-toggle{display:none}.client-charts{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin:24px 0}.client-chart{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}.client-chart h2{font-size:17px!important;letter-spacing:-.3px!important;margin:0 0 20px!important;color:var(--ink)}.chart-total{font-size:24px;font-weight:700;color:var(--ink)}.chart-total small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:4px}.month-bars{display:flex;gap:12px;height:160px;margin:28px 0 16px}.month-column{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:11px;color:var(--muted)}.month-bar{position:relative;width:100%;height:135px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:0;cursor:pointer}.bar-fill{position:absolute;bottom:0;left:15%;width:70%;height:var(--bar-height);background:var(--identity);border-radius:6px 6px 0 0;min-height:2px;transition:height .3s}.month-bar:hover .bar-fill,.month-bar:focus .bar-fill{background:var(--accent)}.bar-value{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;padding:6px 9px;border-radius:6px;background:var(--ink);color:var(--white);font-size:11px;opacity:0;pointer-events:none}.month-bar:hover .bar-value,.month-bar:focus .bar-value{opacity:1}.month-bar:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.order-donut svg{width:170px;max-width:100%;display:block;margin:0 auto 12px}.donut-number{fill:var(--ink);font-size:26px;font-weight:700}.donut-label{fill:var(--muted);font-size:9px}.order-donut ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.order-donut li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.order-donut li>span{height:9px;width:9px;border-radius:50%;background:var(--legend-color)}.order-donut strong{margin-left:auto;color:var(--ink)}.chart-note,.chart-empty{font-size:11px;color:var(--muted);line-height:1.6;margin:15px 0 0}.client-menu-drawer{position:fixed;inset:0 auto 0 0;width:min(310px,85vw);max-width:85vw;height:100dvh;max-height:100dvh;margin:0;padding:24px 16px;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--white);color:var(--ink)}.client-menu-drawer::backdrop{background:#0008}.client-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.client-drawer-head button{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:23px;cursor:pointer}.client-drawer-open{overflow:hidden}.client-content .dialog-head{margin-bottom:24px}.client-content .client-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}.client-content .client-shortcuts a{padding:18px}.client-content .client-shortcuts strong{font-size:14px}
@media(max-width:1100px){.client-layout{grid-template-columns:190px minmax(0,1fr);gap:22px}.client-charts{grid-template-columns:1fr}.client-content .client-shortcuts{grid-template-columns:1fr}}
@media(max-width:900px){body.orders-page #customer-orders{width:calc(100% - 32px);padding:24px 0}.client-layout{display:block}.client-sidebar{display:none}.client-menu-toggle{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:11px 15px;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;cursor:pointer}.client-menu-toggle>span{font-size:20px}.client-chart{padding:20px}.month-bars{gap:8px}}
@media(prefers-reduced-motion:reduce){.bar-fill{transition:none}}
body.orders-page #customer-orders .client-chart .order-donut>svg{width:170px;height:170px;max-width:100%;flex:none}