/* Studio presentation over the live workspace. Navigation, permissions,
   form validation, data and print layouts remain owned by the application. */
@media screen {
 html:root {
  --studio-font:Manrope,"Segoe UI",system-ui,sans-serif;
  --studio-bg:#f6f5fb; --studio-surface:#fff; --studio-surface-2:#f0eef7;
  --studio-sidebar:#fbfaff; --studio-input:#fcfbff; --studio-line:#e1deeb;
  --studio-text:#232238; --studio-muted:#6d7086; --studio-accent:#7152c1;
  --studio-accent-soft:#eee7fc; --studio-gold:#8c641d; --studio-gold-soft:#fcf5e7;
  --studio-green:#19765a; --studio-green-soft:#e8f6ee;
  --studio-red:#b73c5a; --studio-red-soft:#fcecf0;
  --studio-topbar:#fbfaffed; --studio-primary-start:#8d72db; --studio-primary-end:#7354c5;
  --studio-nav-active:linear-gradient(100deg,#efe9fb,#f5f0ff);
  --studio-award:linear-gradient(110deg,#fbf0d9,#fcfaff);
  --ds-bg:var(--studio-bg); --ds-surface:var(--studio-surface); --ds-surface-alt:var(--studio-surface-2);
  --ds-text:var(--studio-text); --ds-muted:var(--studio-muted); --ds-line:var(--studio-line);
  --ds-accent:var(--studio-accent); --ds-accent-hover:#8a6bd9; --ds-accent-soft:var(--studio-accent-soft);
  --ds-positive:var(--studio-green); --ds-positive-soft:var(--studio-green-soft);
  --ds-warning:var(--studio-gold); --ds-warning-soft:var(--studio-gold-soft);
  --ds-negative:var(--studio-red); --ds-negative-soft:var(--studio-red-soft);
  --ds-radius:16px; --ds-control-radius:10px; --ds-sidebar:238px;
  --ds-shadow:0 2px 8px #29203b04; --ds-popover-shadow:0 18px 45px #27203a20;
  --ui-bg:var(--studio-bg); --ui-panel:var(--studio-surface); --ui-soft:var(--studio-surface-2);
  --ui-ink:var(--studio-text); --ui-muted:var(--studio-muted); --ui-line:var(--studio-line);
  --ui-accent:var(--studio-accent); --ui-tint:var(--studio-accent-soft); --ui-shadow:var(--ds-shadow);
  --ink:var(--studio-text); --muted:var(--studio-muted); --line:var(--studio-line); --border:var(--studio-line);
  --teal:var(--studio-accent); --light:var(--studio-accent-soft); --focus:var(--studio-accent); --focus-ring:var(--studio-accent);
  --surface-soft:var(--studio-surface-2); --surface-shadow:var(--ds-shadow);
  --theme-bg:var(--studio-bg); --theme-panel:var(--studio-surface); --theme-raised:var(--studio-surface-2); --theme-input:var(--studio-input);
  --theme-positive:var(--studio-green); --theme-positive-bg:var(--studio-green-soft);
  --theme-warning:var(--studio-gold); --theme-warning-bg:var(--studio-gold-soft);
  --theme-negative:var(--studio-red); --theme-negative-bg:var(--studio-red-soft);
  font-family:var(--studio-font); font-synthesis:none;
 }
 html:root[data-theme="dark"] {
  --studio-bg:#0b0d13; --studio-surface:#141720; --studio-surface-2:#1b1f2c;
  --studio-sidebar:#10121b; --studio-input:#10131c; --studio-line:#292d3e;
  --studio-text:#f1f2f8; --studio-muted:#969caf; --studio-accent:#a395ff;
  --studio-accent-soft:#2b2444; --studio-gold:#e9c575; --studio-gold-soft:#30271c;
  --studio-green:#68d4af; --studio-green-soft:#19332c;
  --studio-red:#ff879a; --studio-red-soft:#38212c;
  --studio-topbar:#0f111aed; --studio-primary-start:#a490f6; --studio-primary-end:#8067dd;
  --studio-nav-active:linear-gradient(100deg,#2a2443,#211e34);
  --studio-award:linear-gradient(110deg,#342a1c88,#1a1920);
  --ds-shadow:none; --ds-popover-shadow:0 18px 45px #0007;
 }
 html:root body,html:root #app :is(.main,.content) { background:var(--studio-bg); color:var(--studio-text); }
 html:root #app,html:root dialog#modal,html:root #toast { font-family:var(--studio-font); -webkit-font-smoothing:antialiased; }
 html:root #app,html:root dialog#modal { font-size:14px; line-height:1.5; }
 html:root :is(#app,dialog#modal) :is(button,input,select,textarea,.button,.select-trigger) { font-family:var(--studio-font); }
 html:root #app :is(button,a),html:root dialog#modal :is(button,a) { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
 html:root #app .content { max-width:1530px; padding:30px 32px 48px; margin-inline:auto; }
 html:root #app #page { min-width:0; }
 html:root #app #page .page-heading { margin:0 0 26px; gap:20px; }
 html:root #app #page .page-heading h1 { color:var(--studio-text); font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1.25; }
 html:root #app #page .page-heading p { color:var(--studio-muted); font-size:12px; line-height:1.7; margin-top:9px; }
 html:root #app #page h2 { font-size:16px; font-weight:700; letter-spacing:-.3px; }
 html:root #app #page h3 { font-size:14px; font-weight:700; }
 html:root #app #page .eyebrow { font-size:9px; font-weight:800; letter-spacing:1.8px; color:var(--studio-muted); }
 html:root #app #page :is(.panel,.catalog-panel) { border-radius:16px; background:var(--studio-surface); border-color:var(--studio-line); box-shadow:none; }
 html:root #app #page .panel-header { padding:18px 22px; background:transparent; border-color:var(--studio-line); }
 html:root #app #page .panel-body { padding:22px; }
 html:root #app #page .panel-header p { font-size:11px; line-height:1.7; }

 /* The original real links and the existing collapsed-menu behavior are retained. */
 html:root #app #app-navigation.sidebar { width:var(--ds-sidebar); padding:25px 16px 14px; background:var(--studio-sidebar); border-right:1px solid var(--studio-line); color:var(--studio-text); }
 html:root #app #app-navigation .sidebar-heading { min-height:40px; margin:0 0 26px; padding:0 8px; gap:8px; }
 html:root #app #app-navigation .brand { gap:11px; min-width:0; }
 html:root #app #app-navigation .brand-logo-frame { width:39px; height:39px; flex:none; border-radius:12px; border:1px solid color-mix(in srgb,var(--studio-accent) 20%,var(--studio-line)); background:var(--studio-bg); box-shadow:0 5px 18px #0002; }
 html:root #app #app-navigation .brand-wordmark { min-width:0; }
 html:root #app #app-navigation .brand-wordmark strong { font-size:16px; font-weight:800; letter-spacing:1px; }
 html:root #app #app-navigation .brand-wordmark small { font-size:10px; letter-spacing:.5px; margin-top:3px; color:var(--studio-muted); }
 html:root #app #app-navigation .nav { gap:3px; padding:0 0 12px; scrollbar-width:thin; scrollbar-color:var(--studio-line) transparent; }
 html:root #app #app-navigation .nav-label,html:root #app .sidebar-bottom .nav-label { display:block; flex:1; min-width:0; margin:0; padding:0; font-size:12px; font-weight:600; line-height:1.5; letter-spacing:0; color:inherit; text-transform:none; }
 html:root #app #app-navigation .nav-section-label { color:var(--studio-muted); opacity:.8; font-size:9px; font-weight:800; letter-spacing:1.7px; margin:15px 12px 7px; }
 html:root #app #app-navigation .nav-section-label:first-child { margin-top:0; }
 html:root #app #app-navigation .nav :is(button,a.page-link) { min-height:40px; padding:10px 11px; gap:11px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--studio-muted); font-size:12px; font-weight:600; box-shadow:none; align-items:center; text-align:left; }
 html:root #app #app-navigation .nav :is(button,a.page-link):hover { color:var(--studio-text); background:color-mix(in srgb,var(--studio-surface-2) 65%,transparent); border-color:transparent; }
 html:root #app #app-navigation .nav :is(button,a.page-link):is(.active,[aria-current="page"]),html:root #app #app-navigation .nav .nav-parent.section-active { color:var(--studio-accent); border-color:color-mix(in srgb,var(--studio-accent) 26%,var(--studio-line)); background:var(--studio-nav-active); box-shadow:inset 3px 0 0 var(--studio-accent); }
 html:root #app #app-navigation .nav :is(button,a.page-link)[data-action="new-sale"] { min-height:46px; margin:0 0 12px; background:linear-gradient(135deg,var(--studio-primary-start),var(--studio-primary-end)); color:#fff; border:1px solid #c6b2ff55; box-shadow:inset 0 1px #ffffff16,0 6px 20px #5840b52b; }
 html:root #app #app-navigation .nav :is(button,a.page-link)[data-action="new-sale"]:hover { background:linear-gradient(135deg,#b09af7,#896fe0); color:#fff; border-color:#d9caff77; }
 html:root #app #app-navigation .nav .icon { width:18px; height:18px; stroke-width:1.7; flex:none; }
 html:root #app #app-navigation .nav .nav-child .icon { width:16px; height:16px; }
 html:root #app #app-navigation .nav .nav-submenu { border-color:var(--studio-line); padding-left:10px; margin:4px 0 6px 19px; }
 html:root #app #app-navigation .nav .nav-child { min-height:36px; padding:8px 10px; }
 html:root #app #app-navigation .nav .nav-child .nav-label { font-size:11px; }
 html:root #app #app-navigation .nav-sales-group { padding:3px; border:1px solid var(--studio-line); border-radius:11px; background:color-mix(in srgb,var(--studio-surface) 65%,transparent); }
 html:root #app #app-navigation .nav-sales-group.is-active { border-color:color-mix(in srgb,var(--studio-accent) 30%,var(--studio-line)); }
 html:root #app #app-navigation .nav-sales-group .nav-sale-notifications { margin:3px 7px 4px; padding:8px 2px 3px; gap:5px; border-top:1px solid var(--studio-line); }
 html:root #app #app-navigation .nav-sale-notifications :is(span,small) { font-size:10px; }
 html:root #app #app-navigation .nav-sale-notifications b { font-size:10px; font-weight:700; background:var(--studio-gold-soft); color:var(--studio-gold); border-radius:5px; }
 html:root #app #app-navigation .sidebar-bottom { border-top:1px solid var(--studio-line); padding:12px 0 0; margin-top:auto; gap:3px; }
 html:root #app #app-navigation .sidebar-bottom :is(button,a.page-link),html:root #app #app-navigation .sidebar-pin { min-height:38px; padding:8px 11px; font-size:11px; font-weight:500; border-radius:9px; background:transparent; color:var(--studio-muted); border:0; box-shadow:none; }
 html:root #app #app-navigation .sidebar-bottom :is(button,a.page-link):hover { color:var(--studio-text); background:var(--studio-surface-2); }
 html:root #app #app-navigation .sidebar-bottom .ranking-nav:is(.active,[aria-current="page"]) { color:var(--studio-accent); background:var(--studio-nav-active); }
 html:root #app #app-navigation .sidebar-pin [data-sidebar-pin-switch] { width:29px; height:17px; background:var(--studio-line); }
 html:root #app #app-navigation .sidebar-pin [data-sidebar-pin-switch]::after { top:3px; left:3px; width:11px; height:11px; }
 html:root #app #app-navigation .sidebar-pin [data-checked="true"] { background:var(--studio-accent); }
 html:root #app #app-navigation .sidebar-pin [data-checked="true"]::after { left:15px; }

 /* A quiet workspace bar and one-line, golden seller recognition. */
 html:root #app .topbar { min-height:76px; height:auto; background:var(--studio-topbar); border-bottom:1px solid var(--studio-line); backdrop-filter:blur(15px); }
 html:root #app .topbar-inner { max-width:none; min-height:76px; padding:12px 32px; gap:18px; }
 html:root #app .breadcrumbs { color:var(--studio-muted); font-size:11px; font-weight:400; min-width:0; }
 html:root #app .breadcrumbs b { color:var(--studio-text); font-size:11px; font-weight:600; }
 html:root #app .topbar-actions { gap:9px; }
 html:root #app .topbar :is(.theme-toggle,.topbar-calculator) { display:inline-flex; align-items:center; justify-content:center; flex:none; width:35px; min-width:35px; height:35px; min-height:35px; padding:7px; border:1px solid var(--studio-line); border-radius:10px; background:transparent; color:var(--studio-muted); }
 html:root #app .topbar :is(.theme-toggle,.topbar-calculator):hover { background:var(--studio-surface-2); color:var(--studio-accent); border-color:var(--studio-accent); }
 html:root #app .topbar :is(.theme-toggle,.topbar-calculator) .icon { width:18px; height:18px; }
 html:root #app .topbar .user { gap:9px; border-color:var(--studio-line); padding-left:12px; font-size:11px; }
 html:root #app .topbar .user small { font-size:10px; color:var(--studio-muted); }
 html:root #app .topbar .avatar { width:34px; height:34px; border-radius:11px; background:var(--studio-nav-active); color:var(--studio-accent); border:1px solid color-mix(in srgb,var(--studio-accent) 25%,var(--studio-line)); font-size:11px; font-weight:800; }
 html:root #app .topbar button[data-action="logout"] { min-height:35px; height:35px; padding:5px 7px; color:var(--studio-muted); font-size:11px; }
 html:root #app .topbar-seller-highlight { width:100%; min-width:0; max-width:560px; min-height:38px; padding:4px 9px; gap:8px; border:1px solid color-mix(in srgb,var(--studio-gold) 28%,var(--studio-line)); border-radius:10px; background:var(--studio-award); color:var(--studio-gold); }
 html:root #app .topbar-seller-highlight .seller-highlight-mark { color:var(--studio-gold); }
 html:root #app .topbar-seller-highlight .seller-highlight-name { font-size:11px; font-weight:700; color:var(--studio-text); }
 html:root #app .topbar-seller-highlight .seller-highlight-total b { color:var(--studio-gold); font-size:12px; font-weight:700; letter-spacing:-.1px; }
 html:root #app .topbar-seller-highlight .seller-highlight-count { color:var(--studio-muted); font-size:10px; }
 html:root #app .topbar-seller-highlight .seller-highlight-period { color:var(--studio-gold); font-size:10px; padding-inline:3px; }
 html:root #app .topbar-seller-highlight button { border-radius:6px; }
 html:root #app .topbar-seller-highlight button:hover { background:color-mix(in srgb,var(--studio-gold) 10%,transparent); color:var(--studio-gold); }
 html:root #app .topbar-seller-highlight .seller-highlight-pause { color:var(--studio-gold); }

 /* Shared controls use the reference palette without changing status semantics. */
 html:root :is(#app #page,dialog#modal) :is(button.primary,.button.primary):not(.danger),html:root #app .auth-card button.primary {
  min-height:42px; padding:9px 15px; border-radius:10px; font-size:12px; font-weight:700;
  color:#fff; border-color:#c6b2ff55; background:linear-gradient(135deg,var(--studio-primary-start),var(--studio-primary-end));
  box-shadow:inset 0 1px #ffffff16,0 4px 13px #7350c527;
 }
 html:root :is(#app #page,dialog#modal) :is(button.primary,.button.primary):not(.danger):hover:not(:disabled),html:root #app .auth-card button.primary:hover { background:linear-gradient(135deg,#b09af7,#896fe0); color:#fff; border-color:#d9caff77; }
 html:root #app #page .page-heading .actions :is(button,.button):not(.primary):not(.danger) { min-height:42px; padding:9px 15px; border:1px solid var(--studio-line); border-radius:10px; background:var(--studio-surface-2); color:var(--studio-text); font-size:12px; font-weight:600; }
 html:root #app #page .page-heading .actions :is(button,.button):not(.primary):not(.danger):hover { border-color:var(--studio-accent); color:var(--studio-accent); }
 html:root :is(#app #page,dialog#modal) .field { gap:7px; font-size:12px; color:var(--studio-text); }
 html:root :is(#app #page,dialog#modal) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"])),select,textarea,.select-trigger) { border-radius:10px; background:var(--studio-input); border-color:var(--studio-line); color:var(--studio-text); font-family:var(--studio-font); font-size:13px; box-shadow:none; }
 html:root :is(#app #page,dialog#modal) :is(input,textarea)::placeholder { color:var(--studio-muted); opacity:.8; }
 html:root :is(#app #page,dialog#modal) :is(input,select,textarea,.select-trigger):focus-visible { outline:2px solid var(--studio-accent); outline-offset:2px; box-shadow:0 0 0 3px color-mix(in srgb,var(--studio-accent) 10%,transparent); }
 html:root :is(#app #page,dialog#modal) .select-control.is-status>.select-trigger[role="combobox"] { background:var(--status-bg); color:var(--status-text); border-color:var(--status-color); }
 html:root #app #page .sale-editor .select-control.is-status>.select-trigger[role="combobox"] { background:var(--studio-input); color:var(--studio-text); border-color:var(--studio-line); }
 html:root :is(#app,dialog#modal) .select-popover { background:var(--studio-surface); color:var(--studio-text); border:1px solid var(--studio-line); border-radius:12px; box-shadow:var(--ds-popover-shadow); }
 html:root :is(#app,dialog#modal) .select-option { font-family:var(--studio-font); font-size:12px; }
 html:root :is(#app,dialog#modal) .select-option:is(:hover,.is-highlighted,[aria-selected="true"]) { color:var(--studio-accent); background:var(--studio-accent-soft); }
 html:root dialog#modal { background:var(--studio-surface); color:var(--studio-text); border:1px solid var(--studio-line); border-radius:18px; box-shadow:0 30px 90px #0005; }
 html:root dialog#modal::backdrop { background:#06071299; backdrop-filter:blur(5px); }
 html:root dialog#modal .modal-header { background:transparent; border-top:0; border-bottom:1px solid var(--studio-line); padding:20px 24px; }
 html:root dialog#modal .modal-header h2 { font-size:19px; font-weight:700; letter-spacing:-.4px; }
 html:root dialog#modal .modal-content { padding:22px 24px; }
 html:root dialog#modal .modal-header>button { background:var(--studio-surface-2); color:var(--studio-muted); border-color:var(--studio-line); }
 html:root #app .auth-presentation { background:radial-gradient(ellipse at 0 0,#44336755,transparent 65%),#10121b; border-color:#292d3e; }
 html:root #app .auth-card { background:var(--studio-surface); border-color:var(--studio-line); border-radius:18px; }
 html:root #app :is(button,a,summary):focus-visible { outline:2px solid var(--studio-accent); outline-offset:3px; }
 html:root #app #main-content:focus { outline:none; }
}
@media screen and (min-width:1025px) {
 html:root #app .layout { grid-template-columns:var(--ds-sidebar) minmax(0,1fr); }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) { display:grid; grid-template-columns:minmax(100px,1fr) minmax(230px,1.9fr) auto; padding:12px 32px; gap:18px; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .breadcrumbs { display:block; white-space:nowrap; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .breadcrumbs b { display:inline; }
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) .topbar-actions { gap:9px; }
 html:root body.sidebar-unpinned #app .layout { grid-template-columns:64px minmax(0,1fr); }
 html:root body.sidebar-unpinned #app #app-navigation.sidebar { width:64px; padding-inline:8px; }
 html:root body.sidebar-unpinned #app #app-navigation.sidebar:not([data-dismissed="true"]):is(:hover,:focus-within) { width:var(--ds-sidebar); padding-inline:16px; box-shadow:12px 0 35px #0004; }
 html:root body.sidebar-unpinned #app #app-navigation.sidebar[data-dismissed="true"] { width:64px; padding-inline:8px; }
 html:root 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; }
 html:root 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,.nav-sales-group>button,.nav-sales-group>a) { justify-content:center; padding-inline:9px; }
 html:root body.sidebar-unpinned #app #app-navigation.sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) .sidebar-heading { padding:0; }
 html:root 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; background:transparent; }
}
@media screen and (min-width:1025px) and (max-width:1279px) {
 html:root #app .topbar-inner:has(>.topbar-seller-highlight) { padding-inline:24px; gap:12px; grid-template-columns:minmax(100px,1fr) minmax(260px,1.9fr) auto; }
 html:root #app .topbar .user>div { display:none; }
 html:root #app .content { padding-inline:24px; }
 html:root #app .topbar-seller-highlight { gap:5px; padding-inline:7px; }
 html:root #app .topbar-seller-highlight .seller-highlight-count { max-width:65px; }
}
@media screen and (max-width:1024px) {
 html:root #app .layout { display:block; }
 html:root #app #app-navigation.sidebar { width:min(292px,calc(100vw - 40px)); padding:22px 17px max(16px,env(safe-area-inset-bottom)); }
 html:root #app #app-navigation .nav :is(button,a.page-link) { min-height:44px; }
 html:root #app #app-navigation .sidebar-pin { display:none; }
 html:root #app .topbar,html:root #app .topbar-inner { min-height:66px; }
 html:root #app .topbar-inner,html:root #app .topbar-inner:has(>.topbar-seller-highlight) { padding:12px 20px; gap:10px; }
 html:root #app .topbar-seller-highlight { max-width:none; min-height:40px; }
 html:root #app .content { padding:24px 22px 40px; }
 html:root #app .mobile-menu-toggle { min-width:40px; min-height:40px; border-radius:10px; background:var(--studio-surface); border-color:var(--studio-line); color:var(--studio-muted); }
 html:root #app .mobile-menu-toggle>span { display:none; }
 html:root #app .breadcrumbs { flex:1; font-size:10px; line-height:1.4; }
 html:root #app .breadcrumbs b { font-size:11px; }
 html:root #app .topbar .user { border:0; padding-left:0; }
}
@media screen and (max-width:700px) {
 html:root #app .content { padding:22px 14px max(32px,env(safe-area-inset-bottom)); }
 html:root #app .topbar-inner,html:root #app .topbar-inner:has(>.topbar-seller-highlight) { padding:9px 12px; gap:7px; }
 html:root #app .topbar :is(.theme-toggle,.topbar-calculator) { width:40px; min-width:40px; height:40px; min-height:40px; }
 html:root #app .topbar .topbar-actions { gap:5px; }
 html:root #app .topbar .user>div,html:root #app .topbar .user>button { display:none; }
 html:root #app .topbar .user .avatar { width:32px; height:32px; font-size:10px; }
 html:root #app .topbar-seller-highlight { min-height:42px; gap:4px; padding:3px 7px; }
 html:root #app .topbar-seller-highlight .seller-highlight-name { font-size:10px; }
 html:root #app .topbar-seller-highlight .seller-highlight-total b { font-size:11px; }
 html:root #app .topbar-seller-highlight .seller-highlight-count { font-size:10px; }
 html:root #app .topbar-seller-highlight .seller-highlight-period { font-size:10px; }
 html:root #app #page .page-heading { margin-bottom:22px; gap:14px; }
 html:root #app #page .page-heading h1 { font-size:26px; letter-spacing:-.7px; }
 html:root #app #page .page-heading p { font-size:12px; }
 html:root #app #page .page-heading>.actions>* { flex:1 1 auto; }
 html:root #app #page :is(.panel-header,.panel-body) { padding:16px; }
 html:root dialog#modal { max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:16px; }
 html:root dialog#modal :is(.modal-header,.modal-content) { padding:18px 16px; }
}
@media screen and (prefers-reduced-motion:no-preference) {
 html:root #app #app-navigation .nav :is(button,a.page-link),html:root #app .topbar :is(button,a),html:root #app #page .page-heading .actions :is(button,a) { transition:background .15s,border-color .15s,color .15s; }
}

/* Studio's actual shell structure. These selectors intentionally replace the
   old grouped navigation; records and permissions remain application-owned. */
@media screen {
 html:root #app #app-navigation.studio-sidebar { padding:26px 17px 14px; }
 html:root #app #app-navigation .studio-sidebar-brand { display:flex; align-items:center; flex:none; padding:0 9px 28px; gap:8px; }
 html:root #app #app-navigation .studio-brand { display:flex; flex:1; align-items:center; gap:11px; padding:0; margin:0; color:var(--studio-text); text-decoration:none; min-width:0; }
 html:root #app #app-navigation .studio-brandmark { width:39px; height:39px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#7660cf,#3d356d); box-shadow:inset 0 1px 0 #ffffff28,0 5px 18px #0004; }
 html:root #app #app-navigation .studio-brandmark svg { width:24px; height:24px; }
 html:root #app #app-navigation .studio-brand-copy { min-width:0; }
 html:root #app #app-navigation .studio-brand-copy strong { font-size:17px; font-weight:800; letter-spacing:1.1px; }
 html:root #app #app-navigation .studio-brand-copy small { display:block; font-size:10px; color:var(--studio-muted); letter-spacing:1.6px; margin-top:3px; white-space:nowrap; }
 html:root #app #app-navigation .studio-new-sale { display:flex; align-items:center; flex:none; width:100%; min-height:46px; height:46px; margin:0 0 24px; padding:0 15px; gap:9px; border:1px solid #c6b2ff55; border-radius:10px; background:linear-gradient(135deg,var(--studio-primary-start),var(--studio-primary-end)); color:#fff; font-size:11px; font-weight:700; text-decoration:none; box-shadow:inset 0 1px #ffffff16,0 6px 20px #5840b52b; }
 html:root #app #app-navigation .studio-new-sale>span { flex:1; }
 html:root #app #app-navigation .studio-new-sale kbd { border:1px solid #ffffff30; background:#ffffff10; font-family:inherit; font-weight:500; font-size:10px; border-radius:4px; padding:1px 4px; }
 html:root #app #app-navigation .studio-new-sale:hover { background:linear-gradient(135deg,#b29ffd,#9077e7); }
 html:root #app #app-navigation .nav.studio-nav { display:block; flex:1; min-height:0; overflow:auto; padding:0; gap:0; scrollbar-width:thin; scrollbar-color:var(--studio-line) transparent; }
 html:root #app #app-navigation .studio-nav-section { margin:0; padding:0; }
 html:root #app #app-navigation .studio-nav-heading { font-size:9px; letter-spacing:1.8px; font-weight:800; color:var(--studio-muted); opacity:.75; padding:13px 13px 8px; }
 html:root #app #app-navigation .studio-nav-item,html:root #app #app-navigation .sidebar-bottom .studio-nav-item { display:flex; align-items:center; justify-content:flex-start; flex:none; width:100%; min-height:40px; height:auto; margin:0 0 3px; padding:10px 12px; gap:12px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--studio-muted); font-family:var(--studio-font); font-size:12px; line-height:1.5; font-weight:600; text-decoration:none; letter-spacing:0; box-shadow:none; }
 html:root #app #app-navigation .studio-nav-text { flex:1; min-width:0; white-space:normal; }
 html:root #app .studio-icon { vertical-align:middle; flex:none; }
 html:root #app #app-navigation .studio-nav-item:hover { color:var(--studio-text); background:color-mix(in srgb,var(--studio-surface-2) 45%,transparent); }
 html:root #app #app-navigation .studio-nav-item:is(.active,[aria-current="page"]) { background:var(--studio-nav-active); color:var(--studio-accent); border-color:color-mix(in srgb,var(--studio-accent) 26%,var(--studio-line)); box-shadow:inset 3px 0 0 var(--studio-accent); }
 html:root #app #app-navigation .studio-nav-item .studio-nav-count { border-radius:5px; font-size:9px; background:var(--studio-accent-soft); color:var(--studio-accent); padding:2px 5px; margin-left:auto; font-variant-numeric:tabular-nums; }
 html:root #app #app-navigation .studio-sidebar-foot { display:block; padding:12px 0 0; margin:14px 0 0; border-top:1px solid var(--studio-line); }
 html:root #app #app-navigation .studio-user-account { display:flex; align-items:center; gap:7px; margin:0; padding:0 3px; min-width:0; }
 html:root #app #app-navigation .studio-sidebar-foot .studio-user-account .sidebar-pin { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; min-width:32px; max-width:32px; height:32px; min-height:32px; margin:0; padding:6px; border:1px solid var(--studio-line); }
 html:root #app #app-navigation .studio-user-account .sidebar-pin[aria-checked="true"] { color:var(--studio-accent); background:var(--studio-accent-soft); }
 html:root #app #app-navigation .studio-user-account .sidebar-pin [data-sidebar-pin-label] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 html:root #app #app-navigation .studio-user-account .sidebar-pin [data-sidebar-pin-switch] { display:none; }
 html:root #app #app-navigation :is(.studio-nav-settings,.studio-nav-expenses) { margin:0; padding:0; border:0; background:none; }
 html:root #app #app-navigation :is(.studio-nav-settings,.studio-nav-expenses)>summary { cursor:pointer; list-style:none; }
 html:root #app #app-navigation :is(.studio-nav-settings,.studio-nav-expenses)>summary::-webkit-details-marker { display:none; }
 html:root #app #app-navigation :is(.studio-nav-settings,.studio-nav-expenses)>summary::after { content:none; }
 html:root #app #app-navigation :is(.studio-nav-settings,.studio-nav-expenses)>summary:focus-visible { outline:2px solid var(--studio-accent); outline-offset:-2px; }
 html:root #app #app-navigation :is(.studio-settings-chevron,.studio-expense-chevron) { display:inline-flex; }
 html:root #app #app-navigation :is(.studio-nav-settings,.studio-nav-expenses)[open] :is(.studio-settings-chevron,.studio-expense-chevron) { transform:rotate(90deg); }
 html:root #app #app-navigation :is(.studio-settings-links,.studio-expense-links) { margin:0 0 7px 20px; padding-left:8px; border-left:1px solid var(--studio-line); }
 html:root #app #app-navigation :is(.studio-settings-links,.studio-expense-links) .studio-nav-item { min-height:36px; padding-block:8px; }
 html:root #app .studio-avatar { width:30px; height:30px; min-width:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:var(--studio-nav-active); border:1px solid color-mix(in srgb,var(--studio-accent) 25%,var(--studio-line)); color:var(--studio-accent); font-size:10px; font-weight:800; flex:none; }
 html:root #app #app-navigation .studio-user-copy { flex:1; min-width:0; }
 html:root #app #app-navigation .studio-user-copy strong { display:block; color:var(--studio-text); font-size:11px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 html:root #app #app-navigation .studio-user-copy small { display:block; font-size:10px; color:var(--studio-muted); }
 html:root #app #app-navigation .studio-sidebar-foot .studio-user-account .studio-account-logout { display:flex; align-items:center; justify-content:center; flex:none; width:30px; height:32px; min-height:32px; padding:5px; border:0; border-radius:8px; background:transparent; color:var(--studio-muted); }
 html:root #app #app-navigation .studio-mobile-close { display:none; }
 html:root #app .studio-topbar { height:76px; min-height:76px; }
 html:root #app .studio-topbar .topbar-inner,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) { display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 32px; gap:18px; }
 html:root #app .studio-topbar .breadcrumbs,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) .breadcrumbs { display:flex; flex:none; align-items:center; gap:12px; max-width:none; font-size:11px; overflow:visible; }
 html:root #app .studio-topbar .breadcrumbs b,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) .breadcrumbs b { display:inline; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
 html:root #app .studio-topbar .topbar-seller-highlight { width:auto; flex:0 1 auto; max-width:560px; min-height:38px; height:38px; margin-inline:auto; padding:4px 10px; gap:9px; }
 html:root #app .studio-topbar .seller-highlight-name { flex:none; max-width:180px; font-size:11px; }
 html:root #app .studio-topbar .seller-highlight-total b { font-size:10px; }
 html:root #app .studio-topbar .seller-highlight-count { display:none; }
 html:root #app .studio-topbar .seller-highlight-period { border-right:1px solid color-mix(in srgb,var(--studio-gold) 25%,transparent); border-radius:0; padding-right:10px; }
 html:root #app .studio-topbar .seller-highlight-period .seller-highlight-wide { font-size:10px; text-transform:lowercase; white-space:nowrap; }
 html:root #app .studio-topbar .seller-highlight-period .seller-highlight-wide::before { content:'Destaque do '; text-transform:none; }
 html:root #app .studio-topbar .seller-highlight-period[aria-label^="Destaque da"] .seller-highlight-wide::before { content:'Destaque da '; }
 html:root #app .studio-topbar .seller-highlight-period>.icon { display:none; }
 html:root #app .studio-topbar .seller-highlight-pause { width:24px; min-width:24px; margin-left:0; }
 html:root #app .studio-topbar .studio-topbar-right,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) .studio-topbar-right { display:flex; align-items:center; justify-content:flex-end; flex:none; gap:12px; }
 html:root #app .studio-topbar-date { color:var(--studio-muted); font-size:11px; white-space:nowrap; }
 html:root #app .studio-topbar :is(.studio-top-icon,.theme-toggle,.topbar-calculator) { display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; min-width:35px; min-height:35px; padding:7px; border:1px solid var(--studio-line); border-radius:10px; background:transparent; color:var(--studio-muted); cursor:pointer; list-style:none; position:relative; }
 html:root #app .studio-topbar :is(.studio-top-icon,.theme-toggle,.topbar-calculator):hover { background:var(--studio-surface-2); color:var(--studio-text); }
 html:root #app .studio-topbar .mobile-menu-toggle { display:none; }
 html:root #app :is(.studio-notifications,.studio-user-menu) { position:relative; display:block; margin:0; padding:0; border:0; background:none; }
 html:root #app :is(.studio-notifications,.studio-user-menu)>summary { list-style:none; cursor:pointer; }
 html:root #app :is(.studio-notifications,.studio-user-menu)>summary::-webkit-details-marker { display:none; }
 html:root #app :is(.studio-notifications,.studio-user-menu)>summary::after { content:none; }
 html:root #app .studio-notification-dot { position:absolute; right:7px; top:7px; width:5px; height:5px; border-radius:50%; background:var(--studio-gold); }
 html:root #app :is(.studio-notification-panel,.studio-user-panel) { position:absolute; z-index:80; top:calc(100% + 12px); right:0; width:280px; max-width:calc(100vw - 28px); padding:18px; border:1px solid var(--studio-line); border-radius:12px; background:var(--studio-surface); color:var(--studio-text); box-shadow:var(--ds-popover-shadow); font-size:12px; }
 html:root #app .studio-notification-panel>strong { font-size:12px; }
 html:root #app .studio-notification-panel p { margin:5px 0 12px; color:var(--studio-muted); font-size:10px; line-height:1.6; }
 html:root #app .studio-notification-panel dl { display:grid; gap:10px; margin:16px 0; }
 html:root #app .studio-notification-panel dl>div { display:flex; align-items:center; justify-content:space-between; gap:15px; }
 html:root #app .studio-notification-panel dt { color:var(--studio-muted); }
 html:root #app .studio-notification-panel dd { margin:0; padding:2px 7px; border-radius:5px; color:var(--studio-gold); background:var(--studio-gold-soft); font-weight:700; font-variant-numeric:tabular-nums; }
 html:root #app .studio-notification-link { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid var(--studio-line); color:var(--studio-accent); font-weight:600; text-decoration:none; }
 html:root #app .studio-user-menu .studio-user-panel { width:220px; }
 html:root #app .studio-user-panel>strong { display:block; overflow-wrap:anywhere; }
 html:root #app .studio-user-panel>small { display:block; color:var(--studio-muted); margin-top:4px; }
 html:root #app .studio-user-panel>button { display:flex; align-items:center; justify-content:center; width:100%; margin-top:14px; gap:8px; font-size:11px; padding:8px 10px; background:var(--studio-surface-2); color:var(--studio-text); border:1px solid var(--studio-line); border-radius:8px; }
}
@media screen and (min-width:1750px) {
 html:root { --ds-sidebar:258px; }
 html:root #app .content { padding:38px 40px 48px; }
}
@media screen and (min-width:1025px) and (max-width:1200px) {
 html:root { --ds-sidebar:218px; }
 html:root #app #app-navigation.studio-sidebar { padding:23px 13px 13px; }
 html:root #app #app-navigation .studio-brand-copy strong { font-size:15px; }
 html:root #app #app-navigation .studio-brand-copy small { font-size:8px; letter-spacing:1px; }
 html:root #app .studio-topbar .topbar-inner,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) { padding-inline:24px; gap:12px; }
 html:root #app .studio-topbar-date { display:none; }
 html:root #app .studio-topbar .breadcrumbs>span { display:none; }
 html:root #app .studio-topbar .seller-highlight-name { max-width:110px; }
 html:root #app .studio-topbar .topbar-seller-highlight { gap:6px; }
}
@media screen and (min-width:1025px) {
 html:root body.sidebar-unpinned #app #app-navigation.studio-sidebar:not([data-dismissed="true"]):is(:hover,:focus-within) { width:var(--ds-sidebar); padding-inline:17px; }
 html:root body.sidebar-unpinned #app #app-navigation.studio-sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) :is(.studio-brand-copy,.studio-nav-heading,.studio-nav-text,.studio-nav-count,.studio-new-sale>span,.studio-new-sale>kbd,.studio-user-copy,.studio-account-logout) { display:none; }
 html:root body.sidebar-unpinned #app #app-navigation.studio-sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) :is(.studio-sidebar-brand,.studio-brand,.studio-nav-item,.studio-new-sale,.studio-user-account) { padding-left:0; padding-right:0; justify-content:center; }
 html:root body.sidebar-unpinned #app #app-navigation.studio-sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) .studio-nav-section { margin-bottom:14px; }
 html:root body.sidebar-unpinned #app #app-navigation.studio-sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) :is(.studio-settings-links,.studio-settings-chevron,.studio-expense-links,.studio-expense-chevron,.studio-user-account>.studio-avatar) { display:none; }
 html:root body.sidebar-unpinned #app #app-navigation.studio-sidebar:is([data-dismissed="true"],:not(:hover):not(:focus-within)) .studio-user-account .sidebar-pin { padding:6px; }
}
@media screen and (max-width:1024px) {
 html:root #app #app-navigation .studio-sidebar-foot .studio-user-account .sidebar-pin { display:none; }
 html:root #app #app-navigation.studio-sidebar { width:258px; max-width:calc(100vw - 40px); padding:23px 17px; }
 html:root #app #app-navigation .studio-sidebar-brand { padding:0 3px 24px; }
 html:root #app #app-navigation .studio-mobile-close { display:flex; align-items:center; justify-content:center; width:28px; min-width:28px; height:32px; min-height:32px; padding:4px; border:0; background:transparent; color:var(--studio-muted); }
 html:root #app #app-navigation .studio-brand-copy strong { font-size:14px; }
 html:root #app #app-navigation .studio-brand-copy small { font-size:8px; letter-spacing:.8px; }
 html:root #app .studio-topbar { height:auto; min-height:66px; }
 html:root #app .studio-topbar .topbar-inner,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) { display:flex; flex-wrap:wrap; min-height:66px; padding:10px 18px; gap:10px; }
 html:root #app .studio-topbar .mobile-menu-toggle { display:inline-flex; order:0; }
 html:root #app .studio-topbar .breadcrumbs,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) .breadcrumbs { flex:1; order:1; gap:8px; }
 html:root #app .studio-topbar .studio-topbar-right { order:2; }
 html:root #app .studio-topbar .topbar-seller-highlight { order:3; flex:1 0 100%; max-width:100%; justify-content:center; margin:0; }
 html:root #app .studio-topbar-date { display:none; }
}
@media screen and (max-width:700px) {
 html:root #app .studio-topbar .topbar-inner,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) { padding:10px 12px; gap:7px; }
 html:root #app .studio-topbar .breadcrumbs>span { display:none; }
 html:root #app .studio-topbar .breadcrumbs b { max-width:110px; }
 html:root #app .studio-topbar .studio-topbar-right,html:root #app .studio-topbar .topbar-inner:has(>.topbar-seller-highlight) .studio-topbar-right { gap:6px; }
 html:root #app .studio-topbar :is(.studio-top-icon,.theme-toggle,.topbar-calculator) { width:34px; min-width:34px; height:36px; min-height:36px; }
 html:root #app .studio-topbar .topbar-seller-highlight { min-height:38px; height:auto; gap:7px; }
 html:root #app .studio-topbar .seller-highlight-name { flex:1; max-width:none; }
 html:root #app .studio-topbar .seller-highlight-period { padding-right:7px; }
 html:root #app .studio-notification-panel { right:-37px; width:270px; }
}

/* Exact mini-award from Studio: a single ranking link, without added controls. */
@media screen {
 html:root #app .studio-topbar .topbar-seller-highlight.mini-award { display:flex; align-items:center; justify-content:flex-start; flex:0 1 auto; width:auto; max-width:none; min-width:0; min-height:0; height:auto; margin:0; padding:9px 13px; gap:10px; color:#ead29d; background:linear-gradient(110deg,#342a1c88,#1a1920); border:1px solid #77613955; border-radius:10px; font-family:var(--studio-font); font-size:10px; font-weight:400; line-height:normal; letter-spacing:normal; text-decoration:none; box-shadow:none; }
 html:root #app .studio-topbar .mini-award>svg { flex-shrink:0; vertical-align:middle; }
 html:root #app .studio-topbar .mini-award strong { font-size:11px; font-weight:700; color:inherit; line-height:normal; min-width:0; }
 html:root #app .studio-topbar .mini-award .sep { height:16px; width:1px; flex-shrink:0; background:#6e5c3c77; }
 html:root #app .studio-topbar .mini-award :is(.mini-award-label,.award-mini-value) { font-size:10px; font-weight:400; color:inherit; line-height:normal; }
}
@media screen and (max-width:1200px) {
 html:root #app .studio-topbar .topbar-seller-highlight.mini-award { padding:8px; }
 html:root #app .studio-topbar .mini-award :is(.sep,.award-mini-value) { display:none; }
}
@media screen and (max-width:980px) {
 html:root #app .studio-topbar .topbar-seller-highlight.mini-award { display:none; }
}

/* Select popovers are mounted on body or the active dialog, outside #app.
   Keep that shared menu layer in the same theme as its source control. */
@media screen {
 html:root body .select-control:not(.is-status)>.select-trigger {
  background:var(--studio-input); color:var(--studio-text); border-color:var(--studio-line);
  font-family:var(--studio-font); font-weight:500; letter-spacing:normal;
 }
 html:root body .select-control:not(.is-status)>.select-trigger:hover:not(:disabled) {
  border-color:color-mix(in srgb,var(--studio-accent) 55%,var(--studio-line)); background:var(--studio-input);
 }
 html:root body .select-control:not(.is-status)>.select-trigger:is(:focus-visible,[aria-expanded=true]) {
  border-color:var(--studio-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--studio-accent) 12%,transparent);
 }
 html:root body .select-trigger .select-chevron { color:var(--studio-muted); }
 html:root body .select-trigger[aria-expanded=true] .select-chevron { color:var(--studio-accent); }
 html:root body .select-popover {
  padding:7px; border:1px solid var(--studio-line); border-radius:13px;
  background:var(--studio-surface); color:var(--studio-text); box-shadow:var(--ds-popover-shadow);
  font-family:var(--studio-font); color-scheme:light; scrollbar-width:thin;
  scrollbar-color:var(--studio-line) transparent; overscroll-behavior:contain;
 }
 html:root[data-theme=dark] body .select-popover { color-scheme:dark; }
 html:root body .select-popover .select-options { display:grid; gap:3px; padding:0; }
 html:root body .select-popover .select-option {
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px;
  margin:0; padding:10px 12px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--studio-text); box-shadow:none; text-align:left;
  font-family:var(--studio-font); font-size:13px; line-height:1.45; font-weight:500;
 }
 html:root body .select-popover .select-option:is(:hover,.is-highlighted) {
  background:var(--studio-surface-2); color:var(--studio-text); border-color:var(--studio-line);
 }
 html:root body .select-popover .select-option[aria-selected=true],
 html:root body .select-popover .select-option[aria-selected=true]:is(:hover,.is-highlighted) {
  background:var(--studio-accent-soft); color:var(--studio-accent); border-color:color-mix(in srgb,var(--studio-accent) 24%,transparent); font-weight:650;
 }
 html:root body .select-popover .select-option-label { min-width:0; white-space:normal; overflow-wrap:anywhere; }
 html:root body .select-popover .select-option-check { flex:0 0 16px; color:var(--studio-accent); font-size:14px; text-align:center; }
 html:root body .select-popover .select-search {
  min-height:44px; margin:0 0 7px; padding:10px 12px; border:1px solid var(--studio-line); border-radius:9px;
  background:var(--studio-input); color:var(--studio-text); font-family:var(--studio-font); font-size:13px; box-shadow:none;
 }
 html:root body .select-popover .select-search::placeholder { color:var(--studio-muted); opacity:1; }
 html:root body .select-popover :is(.select-search,.select-option):focus-visible { outline:2px solid var(--studio-accent); outline-offset:-2px; }
 html:root body .select-popover .select-option-group { padding:11px 12px 5px; color:var(--studio-muted); font-size:10px; font-weight:700; letter-spacing:.05em; }
 html:root body .select-popover .select-empty { margin:0; padding:16px 12px; color:var(--studio-muted); font-size:12px; line-height:1.5; }
 html:root body .select-popover .select-mobile-heading { color:var(--studio-text); }
 html:root body .select-popover .select-mobile-heading button {
  min-height:44px; padding:8px 12px; border:1px solid var(--studio-line); border-radius:9px;
  background:var(--studio-surface-2); color:var(--studio-text); font-family:var(--studio-font); font-size:12px; font-weight:600; box-shadow:none;
 }
 html:root body .select-popover .select-mobile-heading button:hover { color:var(--studio-accent); border-color:var(--studio-accent); background:var(--studio-accent-soft); }
 html:root body .select-popover .select-mobile-heading button:focus-visible { outline:2px solid var(--studio-accent); outline-offset:2px; }
}
@media screen and (max-width:700px) {
 html:root body .select-popover { padding:10px; border-radius:16px; }
 html:root body .select-popover .select-mobile-heading { padding:1px 3px 10px; border-bottom:1px solid var(--studio-line); margin-bottom:7px; }
 html:root body .select-popover .select-mobile-heading strong { font-size:13px; }
 html:root body .select-popover .select-option { min-height:46px; font-size:14px; }
}