/* Compact recognition inside the workspace bar and the Stock pin interaction. */
@media screen {
 html:root #app #app-navigation .sidebar-pin { display:flex; align-items:center; gap:9px; width:100%; min-height:36px; margin:0; padding:8px 11px; border:0; border-radius:8px; background:transparent; color:var(--ds-muted); font-size:12px; font-weight:500; }
 html:root #app #app-navigation .sidebar-bottom { gap:2px; padding-top:8px; }
 html:root #app #app-navigation .sidebar-pin:hover { background:var(--ds-surface-alt); color:var(--ds-text); }
 html:root #app #app-navigation .sidebar-pin [data-sidebar-pin-icon] { display:inline-flex; flex:none; }
 html:root #app #app-navigation .sidebar-pin .icon { width:18px; height:18px; }
 html:root #app #app-navigation .sidebar-pin [data-sidebar-pin-label] { flex:1; text-align:left; white-space:nowrap; }
 html:root #app #app-navigation .sidebar-pin [data-sidebar-pin-switch] { width:30px; height:18px; flex:none; position:relative; border-radius:20px; background:#65768a; }
 html:root #app #app-navigation .sidebar-pin [data-sidebar-pin-switch]::after { content:""; position:absolute; width:12px; height:12px; left:3px; top:3px; border-radius:50%; background:#fff; }
 html:root #app #app-navigation .sidebar-pin [data-checked="true"] { background:var(--ds-accent); }
 html:root #app #app-navigation .sidebar-pin [data-checked="true"]::after { left:15px; }
 html:root #app #main-content:focus { outline:none; }
 html:root #app .topbar { height:auto; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) { gap:12px; }
 html:root #app .topbar-seller-highlight { display:flex; align-items:center; gap:8px; width:100%; max-width:650px; min-width:0; min-height:38px; margin:0; padding:3px 7px; border:1px solid var(--ds-line); border-radius:8px; background:var(--ds-surface-alt); color:var(--ds-text); box-shadow:none; }
 html:root #app .topbar-seller-highlight .seller-highlight-mark { display:inline-flex; align-items:center; flex:none; color:var(--ds-accent); }
 html:root #app .topbar-seller-highlight .seller-highlight-mark .icon { width:17px; height:17px; }
 html:root #app .topbar-seller-highlight .seller-highlight-name { flex:1 1 auto; min-width:20px; color:var(--ds-text); font-size:12px; font-weight:650; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 html:root #app .topbar-seller-highlight .seller-highlight-total { flex:none; display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }
 html:root #app .topbar-seller-highlight .seller-highlight-total b { color:var(--ds-accent); font-size:14px; font-weight:750; line-height:1.4; letter-spacing:-.2px; font-variant-numeric:tabular-nums; }
 html:root #app .topbar-seller-highlight .seller-highlight-total small { color:var(--ds-muted); font-size:10px; }
 html:root #app .topbar-seller-highlight .seller-highlight-count { flex:0 1 auto; min-width:0; max-width:110px; color:var(--ds-muted); font-size:11px; line-height:1.4; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 html:root #app .topbar-seller-highlight button { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:3px; width:auto; min-width:28px; min-height:30px; height:30px; padding:4px; border:0; border-radius:5px; color:var(--ds-muted); background:transparent; box-shadow:none; font-size:11px; font-weight:650; }
 html:root #app .topbar-seller-highlight button:hover { color:var(--ds-text); background:var(--ds-surface); }
 html:root #app .topbar-seller-highlight button[aria-pressed="true"] { color:var(--ds-accent); background:var(--ds-accent-soft); }
 html:root #app .topbar-seller-highlight .seller-highlight-period { color:var(--ds-accent); }
 html:root #app .topbar-seller-highlight .seller-highlight-period .icon { width:10px; height:10px; }
 html:root #app .topbar-seller-highlight .seller-highlight-pause { width:28px; margin-left:auto; }
 html:root #app .topbar-seller-highlight .seller-highlight-pause .icon { width:15px; height:15px; }
 html:root #app .topbar-seller-highlight .seller-highlight-empty { flex:1; min-width:0; color:var(--ds-muted); font-size:11px; line-height:1.4; }
 html:root #app .topbar-seller-highlight .seller-highlight-narrow { display:none; }
 html:root #app .topbar-seller-highlight .seller-highlight-accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
 html:root #app #app-navigation .nav-sales-group { min-width:0; margin:2px 0 5px; padding:3px; border:1px solid var(--ds-line); border-radius:10px; background:var(--ds-surface-alt); }
 html:root #app #app-navigation .nav-sales-group.is-active { border-color:color-mix(in srgb,var(--ds-accent) 35%,var(--ds-line)); }
 html:root #app #app-navigation .nav-sales-group>:is(button,a.page-link) { width:100%; margin:0; }
 html:root #app #app-navigation .nav-sales-group .nav-sale-notifications { margin:3px 6px 4px; padding:7px 3px 3px; border-left:0; border-top:1px solid var(--ds-line); gap:5px; }
 html:root #app #app-navigation .nav-sales-group .nav-sale-notifications>span { align-items:center; gap:5px; font-size:11px; }
 html:root #app #app-navigation .nav-sales-group .nav-sale-notifications b { min-width:22px; padding:1px 5px; text-align:center; border-radius:5px; color:var(--ds-warning); background:var(--ds-warning-soft); font-variant-numeric:tabular-nums; }
 html:root #app :is(.sidebar-pin,.topbar-seller-highlight button):focus-visible { outline:2px solid var(--ds-accent); outline-offset:3px; }
}
@media screen and (min-width:1025px) {
 html:root { --ds-sidebar:232px; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) { display:grid; grid-template-columns:minmax(60px,.55fr) minmax(0,2.5fr) auto; padding:10px 20px; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .breadcrumbs { display:block; max-width:none; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .breadcrumbs b { display:block; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .topbar-actions { min-width:0; justify-content:flex-end; gap:8px; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .user { min-width:0; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .user>div { max-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 body.sidebar-unpinned #app .layout { grid-template-columns:64px minmax(0,1fr); }
 body.sidebar-unpinned #app #app-navigation.sidebar { width:64px; padding-left:8px; padding-right:8px; }
 body.sidebar-unpinned #app #app-navigation.sidebar:not([data-dismissed="true"]):is(:hover,:focus-within) { width:232px; padding-left:12px; padding-right:12px; }
 body.sidebar-unpinned #app #app-navigation.sidebar[data-dismissed="true"] { width:64px; padding-left:8px; padding-right:8px; box-shadow:none; }
 body.sidebar-unpinned #app #app-navigation.sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) :is(.brand-wordmark,.nav-label,.nav-section-label,.nav-chevron,.nav-sale-notifications,.nav-submenu,[data-sidebar-pin-label],[data-sidebar-pin-switch]) { display:none; }
 body.sidebar-unpinned #app #app-navigation.sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) :is(.nav>button,.nav>a,.nav-parent,.sidebar-pin,.ranking-nav) { justify-content:center; padding-left:9px; padding-right:9px; }
 body.sidebar-unpinned #app #app-navigation.sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) .sidebar-heading { padding:0; margin-bottom:10px; }
 body.sidebar-unpinned #app #app-navigation.sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) .sidebar-bottom>[data-action="logout"] { font-size:0; justify-content:center; }
 body.sidebar-unpinned #app #app-navigation.sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) .nav-sales-group { margin:2px 0 5px; padding:0; border:0; border-radius:0; background:transparent; }
 body.sidebar-unpinned #app #app-navigation.sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) .nav-sales-group>:is(button,a.page-link) { justify-content:center; padding-left:9px; padding-right:9px; }
}
@media screen and (max-width:1024px) {
 html:root #app #app-navigation .sidebar-pin { display:none; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) { flex-wrap:wrap; gap:10px; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight)>.mobile-menu-toggle { order:0; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight)>.breadcrumbs { order:1; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight)>.topbar-actions { order:2; }
 html:root #app .topbar-seller-highlight { order:3; flex:1 0 100%; max-width:none; }
}
@media screen and (max-width:600px) {
 html:root #app .topbar-seller-highlight { flex-wrap:nowrap; min-height:44px; gap:4px; padding:3px 6px; }
 html:root #app .topbar-seller-highlight :is(.seller-highlight-mark,.seller-highlight-period .icon,.seller-highlight-wide) { display:none; }
 html:root #app .topbar-seller-highlight .seller-highlight-narrow { display:inline; }
 html:root #app .topbar-seller-highlight .seller-highlight-name { flex:1 1 0; min-width:0; font-size:11px; }
 html:root #app .topbar-seller-highlight .seller-highlight-total { flex:none; margin-left:0; }
 html:root #app .topbar-seller-highlight .seller-highlight-total b { font-size:13px; }
 html:root #app .topbar-seller-highlight .seller-highlight-count { flex:none; max-width:none; overflow:visible; font-size:11px; }
 html:root #app .topbar .topbar-seller-highlight>button:is(.seller-highlight-period,.seller-highlight-pause) { flex:none; min-height:36px; height:auto; padding:2px 4px; line-height:1.3; }
 html:root #app .topbar-seller-highlight .seller-highlight-pause { width:28px; margin-left:0; }
}
@media screen and (prefers-reduced-motion:no-preference) {
 html:root #app .topbar-seller-highlight[data-highlight-transition="true"] :is(.seller-highlight-name,.seller-highlight-total,.seller-highlight-count,.seller-highlight-empty) { animation:seller-highlight-arrive .24s ease-out both; }
 @keyframes seller-highlight-arrive { from { opacity:.25; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
}
@media (prefers-reduced-motion:reduce) {
 body.sidebar-unpinned #app #app-navigation.sidebar { transition:none; }
 html:root #app .topbar-seller-highlight * { animation:none; transition:none; }
}
@media print {
 #app .page-seller-highlight { display:none; }
}