/* Shared header: a clear photograph between two local glass surfaces. */
:root .ds-app .topbar{
 --header-ink:#103462;--header-muted:#4d6b90;--header-icon:#0066ff;
 --header-glass-start:rgb(235 246 255 / .75);--header-glass-end:rgb(235 246 255 / .55);
 --header-control:rgb(248 252 255 / .88);--header-control-border:#b1d2f6;
 --header-highlight:#ffffffa6;
 grid-template-columns:minmax(0,1fr) auto;gap:16px;min-height:72px;padding:7px 10px;
 background:transparent;border:1px solid #95c3f1;
 backdrop-filter:none;-webkit-backdrop-filter:none;
 box-shadow:0 3px 0 -1px #6497c54d,0 8px 19px -13px #214e7b66,inset 0 1px 1px #ffffffa6;
}
:root .ds-app .topbar .topbar-photo-mosaic{opacity:1;filter:saturate(1.2) contrast(1.05);background:transparent}
/* The unchanged source contains a central photographic strip and white margins.
   Cover this enlarged layer so only that strip fills the compact header. */
:root .ds-app .topbar .topbar-photo-mosaic::before{inset:-125% 0;background:url('../assets/backgrounds/topbar-print-user-v4.png') center / cover no-repeat}
:root .ds-app .topbar>:is(.topbar-context,.topbar-stage-panel,.top-actions){
 position:relative;z-index:1;width:fit-content;max-width:100%;min-width:0;
 background:linear-gradient(105deg,var(--header-glass-start),var(--header-glass-end));
 border:1px solid var(--header-highlight);border-radius:20px;
 backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);
 box-shadow:0 4px 16px #1446781f,inset 0 1px 1px #ffffff70;
 color:var(--header-ink);text-shadow:none;
}
:root .ds-app .topbar .topbar-context{padding:7px 13px;gap:11px;justify-self:start}
:root .ds-app .topbar .topbar-context-icon{display:grid;flex:0 0 28px;width:28px;height:28px;color:var(--header-icon)}
:root .ds-app .topbar .topbar-context-icon svg{width:26px;height:26px;filter:drop-shadow(0 1px 4px #0066ff20)}
:root .ds-app .topbar .topbar-context-copy{gap:3px;min-width:0}
:root .ds-app .topbar .topbar-context-copy strong{color:var(--header-ink);font-size:16px;font-weight:800;line-height:1.25;white-space:normal}
:root .ds-app .topbar .topbar-context-copy>span{display:block;color:var(--header-muted);font-size:11.5px;line-height:1.3;white-space:normal;text-overflow:clip}
:root .ds-app .topbar .top-actions{justify-self:end;grid-column:2;flex-wrap:nowrap;gap:8px;padding:6px 8px}
:root .ds-app .topbar .top-actions :is(.theme-toggle,.round-icon){
 height:36px;min-height:36px;background:var(--header-control);color:var(--header-ink);
 border:1px solid var(--header-control-border);border-radius:12px;text-shadow:none;
 box-shadow:0 2px 0 -1px #749fcc40,0 4px 10px -6px #1b508d50,inset 0 1px 1px #ffffffb3;
 transition:background .18s,box-shadow .18s;
}
:root .ds-app .topbar .top-actions .theme-toggle{padding:0 10px;gap:6px;font-size:12px;font-weight:750}
:root .ds-app .topbar .top-actions .theme-pill-icon{display:grid;width:20px;height:20px;background:transparent;color:var(--header-icon);flex:none}
:root .ds-app .topbar .top-actions .theme-pill-icon .ds-icon{width:17px;height:17px;flex-basis:17px}
:root .ds-app .topbar .top-actions .theme-quick-picker select{field-sizing:fixed;width:110px;min-width:0;max-width:110px;color:var(--header-ink);font-weight:750;padding:0;border:0;background:transparent;box-shadow:none}
:root .ds-app .topbar .top-actions .round-icon{display:grid;width:36px;padding:0}
:root .ds-app .topbar .top-actions .round-icon svg{width:19px;height:19px;filter:none}
:root .ds-app .topbar .top-actions .avatar-btn{display:grid;width:38px;height:38px;flex:none;border-radius:50%;color:white;background:linear-gradient(145deg,#087bff,#004cc8);border:1px solid #e3f4ff;box-shadow:0 3px 8px #1555a633,inset 0 1px 1px #ffffff70;font-size:12px}
:root .ds-app .topbar .top-actions :is(.theme-toggle,.round-icon):hover{background:color-mix(in srgb,var(--header-control) 86%,var(--header-icon));text-decoration:none;box-shadow:0 3px 0 -1px #749fcc50,0 5px 12px -6px #1b508d60,inset 0 1px 1px #ffffffb3}
:root .ds-app .topbar :is(button,select):focus-visible{outline:2px solid var(--header-icon);outline-offset:2px}

/* Stage controls keep their original labels, selection and actions. */
:root .ds-app .topbar .topbar-stage-panel{justify-self:start;padding:5px 9px;display:flex;flex-direction:column;gap:3px}
:root .ds-app .topbar .topbar-stage-title{display:flex;align-items:center;gap:6px;min-width:0}
:root .ds-app .topbar .topbar-stage-title .topbar-context-icon{width:18px;height:18px;flex-basis:18px}
:root .ds-app .topbar .topbar-stage-title .topbar-context-icon svg{width:17px;height:17px}
:root .ds-app .topbar .topbar-stage-title strong{font-size:12px;line-height:1.4;color:var(--header-ink)}
:root .ds-app .topbar .topbar-stage-panel .commercial-flow{position:relative;max-width:100%;width:fit-content;gap:4px;flex-wrap:wrap;background:transparent}
:root .ds-app .topbar .commercial-step{min-height:26px;padding:3px 6px;font-size:9px;line-height:1.4;color:var(--header-ink);text-shadow:none}
:root .ds-app .topbar .commercial-step .ds-icon-badge{width:16px;height:16px;min-width:16px;flex-basis:16px;border-radius:5px}
:root .ds-app .topbar .commercial-step .ds-icon-badge .ds-icon{width:12px;height:12px;flex-basis:12px}
:root .ds-app .topbar .commercial-step.active{background:var(--header-control);color:var(--header-ink);border-color:var(--header-control-border);box-shadow:0 2px 5px #1b508d1f}

html[data-theme^="dark"] .ds-app .topbar{
 --header-ink:#e3efff;--header-muted:#bfd2e8;--header-icon:#76b9ff;
 --header-glass-start:rgb(18 42 70 / .84);--header-glass-end:rgb(18 42 70 / .62);
 --header-control:rgb(29 59 96 / .9);--header-control-border:#638ebd;--header-highlight:#c4e1ff50;
 border-color:#608bb9;
}
html[data-theme^="dark"] .ds-app .topbar>:is(.topbar-context,.topbar-stage-panel,.top-actions){box-shadow:0 4px 16px #081c4633,inset 0 1px 1px #ffffff25}
html[data-theme^="dark"] .ds-app .topbar .top-actions :is(.theme-toggle,.round-icon){box-shadow:0 2px 0 -1px #071e4240,0 4px 10px -6px #041b4050,inset 0 1px 1px #ffffff25}

@media(min-width:701px) and (max-width:1100px){
 :root .ds-app .topbar{gap:10px;padding:6px 8px}
 :root .ds-app .topbar .topbar-context{padding:6px 9px;gap:8px}
 :root .ds-app .topbar .topbar-context-copy strong{font-size:14px}
 :root .ds-app .topbar .topbar-context-copy>span{font-size:10px}
 :root .ds-app .topbar .top-actions{gap:5px;padding:5px 6px}
 :root .ds-app .topbar .top-actions :is(.theme-toggle,.round-icon){height:32px;min-height:32px}
 :root .ds-app .topbar .top-actions .theme-toggle{padding:0 7px;font-size:11px;gap:5px}
 :root .ds-app .topbar .top-actions .theme-quick-picker select{width:96px;max-width:96px}
 :root .ds-app .topbar .top-actions .round-icon{width:32px}
 :root .ds-app .topbar .top-actions .avatar-btn{width:34px;height:34px}
}
@media(max-width:700px){
 :root .ds-app .topbar{grid-template-columns:34px minmax(0,1fr);gap:6px;padding:7px;min-height:72px}
 :root .ds-app .topbar .sidebar-menu-toggle{grid-column:1;grid-row:1;width:34px;height:34px;z-index:1;background:var(--header-control);color:var(--header-ink);border:1px solid var(--header-control-border);box-shadow:0 2px 6px #1446781f;backdrop-filter:blur(12px)}
 :root .ds-app .topbar>:is(.topbar-context,.topbar-stage-panel){grid-column:2;grid-row:1;justify-self:start}
 :root .ds-app .topbar .topbar-context{padding:6px 9px;gap:8px}
 :root .ds-app .topbar .topbar-context-icon{display:grid;width:23px;height:23px;flex-basis:23px}
 :root .ds-app .topbar .topbar-context-icon svg{width:22px;height:22px}
 :root .ds-app .topbar .topbar-context-copy strong{font-size:13px}
 :root .ds-app .topbar .topbar-context-copy>span{display:block;font-size:9px;line-height:1.3}
 :root .ds-app .topbar .top-actions{grid-column:1/-1;grid-row:2;justify-self:end;flex-wrap:wrap;justify-content:flex-end;gap:5px;padding:5px 6px}
 :root .ds-app .topbar .top-actions :is(.theme-toggle,.round-icon){height:30px;min-height:30px}
 :root .ds-app .topbar .top-actions .theme-toggle{padding:0 6px;gap:5px;font-size:10px}
 :root .ds-app .topbar .top-actions .theme-pill-icon{display:grid;width:18px;height:18px}
 :root .ds-app .topbar .top-actions .theme-quick-picker select{width:92px;max-width:92px}
 :root .ds-app .topbar .top-actions .round-icon{display:grid;width:30px}
 :root .ds-app .topbar .top-actions .avatar-btn{display:grid;width:32px;height:32px;font-size:11px}
}
@media(max-width:360px){
 :root .ds-app .topbar .top-actions{gap:4px;padding:4px}
 :root .ds-app .topbar .top-actions :is(.theme-toggle,.round-icon){height:28px;min-height:28px}
 :root .ds-app .topbar .top-actions .theme-toggle{padding:0 4px;gap:4px;font-size:9.5px}
 :root .ds-app .topbar .top-actions .theme-pill-icon{width:16px;height:16px}
 :root .ds-app .topbar .top-actions .theme-pill-icon .ds-icon{width:15px;height:15px;flex-basis:15px}
 :root .ds-app .topbar .top-actions .theme-quick-picker select{width:80px;max-width:80px}
 :root .ds-app .topbar .top-actions .round-icon{width:28px}
 :root .ds-app .topbar .top-actions .avatar-btn{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){:root .ds-app .topbar .top-actions :is(.theme-toggle,.round-icon){transition:none}}