@media screen {
 html:root #commission-form .fields>.field:has(select[name="base"]) { grid-column:1/-1; }
 html:root #app #page .sale-detail-status-picker { display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; }
 html:root #app #page .sale-detail-status-label { font-size:12px; font-weight:550; color:var(--ds-muted); }
 html:root #app #page .sale-detail-status-picker .select-trigger { min-height:40px; }
 html:root #app #page .sale-commission-paid { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border:1px solid color-mix(in srgb,var(--ds-record-positive) 35%,var(--ds-line)); border-radius:6px; background:var(--ds-record-positive-bg); color:var(--ds-record-positive); font-size:11px; font-weight:600; line-height:1.4; white-space:nowrap; }
 html:root #app #page .sale-commission-paid .icon { width:13px; height:13px; flex:none; }
 html:root #app #page .sale-detail-page>.sale-commission-paid { width:fit-content; margin:0 0 12px; }
 html:root #app .period-picker { display:block; grid-template-columns:none; position:relative; min-width:0; width:max-content; max-width:100%; border:0; margin:0; padding:0; background:transparent; }
 html:root #app .period-picker>summary { display:flex; align-items:center; gap:10px; min-height:46px; padding:7px 12px; list-style:none; border:1px solid var(--ds-line); border-radius:12px; background:var(--ds-surface); color:var(--ds-text); cursor:pointer; }
 html:root #app .period-picker>summary::after { content:none; }
 html:root #app .period-picker>summary::-webkit-details-marker { display:none; }
 html:root #app .period-picker>summary>span { display:grid; gap:2px; text-align:left; }
 html:root #app .period-picker>summary small { color:var(--ds-muted); font-size:10px; font-weight:550; letter-spacing:.04em; text-transform:uppercase; }
 html:root #app .period-picker>summary strong { font-size:12px; font-weight:650; }
 html:root #app .period-picker>summary>.icon { color:var(--ds-accent); width:20px; height:20px; flex:none; }
 html:root #app .period-picker .period-picker-chevron { margin-left:auto; width:14px; height:14px; }
 html:root #app .period-picker[open]>summary { border-color:var(--ds-accent); box-shadow:0 0 0 3px var(--ds-accent-soft); }
 html:root #app .period-picker-body { position:fixed; z-index:70; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; overflow:auto; overscroll-behavior:contain; padding:16px; border:1px solid var(--ds-line); border-radius:16px; background:var(--ds-surface); box-shadow:0 16px 55px #0003; }
 html:root #app .period-picker:not([open])>.period-picker-body { display:none; }
 html:root #app .period-picker-body .sales-date-shortcuts { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
 html:root #app .period-picker-body .date-shortcut { padding:8px 10px; min-height:36px; border:1px solid var(--ds-line); border-radius:9px; background:var(--ds-surface-alt); }
 html:root #app .period-picker-body .date-shortcut[aria-pressed="true"] { color:var(--ds-accent); background:var(--ds-accent-soft); border-color:var(--ds-accent); }
 html:root #app .period-picker-body .sales-period-range { grid-column:auto; width:100%; margin:0; padding:0; border:0; }
 html:root #app .period-picker-body .field { min-width:0; margin:0; }
 html:root #app .period-picker-body .date-format-hint { display:none; }
 html:root #app #filter-form>.period-picker { align-self:end; }
 html:root #app .sort-icon-button { display:inline-flex; align-items:center; justify-content:center; width:42px; min-height:42px; border:1px solid var(--ds-line); border-radius:11px; color:var(--ds-accent); background:var(--ds-surface); }
 html:root #app .topbar-calculator { display:inline-flex; align-items:center; justify-content:center; width:40px; min-height:40px; padding:8px; color:var(--ds-muted); border:1px solid var(--ds-line); border-radius:11px; background:var(--ds-surface); }
 html:root #app .topbar-calculator:hover { color:var(--ds-accent); background:var(--ds-accent-soft); }
 /* The sales form has six visible regions. Place them explicitly so a new
    control cannot silently consume the search column or orphan the actions. */
 html:root #app #page[data-screen="sales"] #filter-form.sales-filters {
  grid-template-columns:144px minmax(190px,1.6fr) minmax(110px,.85fr) minmax(150px,1fr) minmax(130px,.9fr) auto;
  grid-template-areas:"period query type seller finance actions";
  align-items:end; gap:12px; padding:16px; margin-bottom:12px;
 }
 html:root #app #page[data-screen="sales"] #filter-form>.period-picker { grid-area:period; width:100%; align-self:end; }
 html:root #app #page[data-screen="sales"] #filter-form>.sales-query { grid-area:query; }
 html:root #app #page[data-screen="sales"] #filter-form>.sales-type-filter { grid-area:type; min-width:0; }
 html:root #app #page[data-screen="sales"] #filter-form>.field:has(select[name="seller_id"]) { grid-area:seller; }
 html:root #app #page[data-screen="sales"] #filter-form>.field:has(select[name="attention"]) { grid-area:finance; }
 html:root #app #page[data-screen="sales"] #filter-form>.field { margin:0; gap:6px; }
 html:root #app #page[data-screen="sales"] #filter-form :is(input[type="search"],.select-trigger,.period-picker>summary) { min-height:44px; height:44px; box-sizing:border-box; }
 html:root #app #page[data-screen="sales"] #filter-form .period-picker>summary { border-radius:9px; }
 html:root #app #page[data-screen="sales"] #filter-form .period-picker>summary>span { min-width:0; flex:1; }
 html:root #app #page[data-screen="sales"] #filter-form .period-picker>summary strong { display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
 html:root #app #page[data-screen="sales"] #filter-form>.sales-filter-actions { grid-area:actions; align-self:end; gap:6px; }
 html:root #app #page[data-screen="sales"] #filter-form>.sales-filter-actions>:is(button,#sales-selection-toolbar) { flex:none; }
 html:root #app #page[data-screen="sales"] #filter-form .sales-filter-actions :is(button,.bulk-mode-icon) { min-height:44px; height:44px; }
 html:root #app #page[data-screen="sales"] #filter-form>.sales-filter-error { grid-column:1/-1; margin:0; }
 html:root #app #page[data-screen="sales"] #filter-form:has(.sales-bulk-toolbar) { grid-template-areas:"period query type seller finance finance" "actions actions actions actions actions actions"; }
 html:root #app #page[data-screen="sales"] .applied-sales-period { margin:0 0 12px; font-weight:450; line-height:1.5; color:var(--ds-muted); }
 @media(max-width:1299px) {
  html:root #app #page[data-screen="sales"] #filter-form.sales-filters {
   grid-template-columns:160px minmax(120px,.85fr) minmax(160px,1.2fr) minmax(140px,1fr) auto;
   grid-template-areas:"query query query query query" "period type seller finance actions";
  }
  html:root #app #page[data-screen="sales"] #filter-form:has(.sales-bulk-toolbar) { grid-template-areas:"query query query query query" "period type seller finance finance" "actions actions actions actions actions"; }
 }
 @media(max-width:1100px) {
  html:root #app #page[data-screen="sales"] #filter-form.sales-filters,
  html:root #app #page[data-screen="sales"] #filter-form.sales-filters:has(.sales-bulk-toolbar) {
   grid-template-columns:repeat(2,minmax(0,1fr));
   grid-template-areas:"query query" "period type" "seller finance" "actions actions";
   gap:12px;
  }
  html:root #app #page[data-screen="sales"] #filter-form>.sales-filter-actions { justify-content:flex-end; border-top:1px solid var(--ds-line); padding-top:12px; flex-wrap:wrap; }
 }
 @media(max-width:480px) {
  html:root #app #page[data-screen="sales"] #filter-form.sales-filters { padding:12px; gap:10px; }
  html:root #app #page[data-screen="sales"] #filter-form>.field { font-size:12px; }
 }
 /* Navigation item labels must not inherit section-heading margins or color. */
 html:root #app #app-navigation .nav-label,
 html:root #app .sidebar-bottom .nav-label { display:block; padding:0; margin:0; color:inherit; font-size:14px; font-weight:550; line-height:1.3; letter-spacing:normal; text-transform:none; }
 html:root #app #app-navigation .nav-section-label { font-size:10px; letter-spacing:.06em; font-weight:650; }
 html:root #app #app-navigation .nav :is(a.page-link,button) { align-items:center; text-align:left; }
 html:root #app #app-navigation .nav :is(a.page-link,button) { border-radius:11px; }
 html:root #app .topbar-seller-highlight { border-color:color-mix(in srgb,#be913b 40%,var(--ds-line)); background:linear-gradient(110deg,color-mix(in srgb,#cba14e 11%,var(--ds-surface)),var(--ds-surface)); }
 html:root #app .topbar-seller-highlight :is(.seller-highlight-mark,.seller-highlight-period,.seller-highlight-total b) { color:#896011; }
 html[data-theme="dark"] #app .topbar-seller-highlight :is(.seller-highlight-mark,.seller-highlight-period,.seller-highlight-total b) { color:#efc879; }
 html:root #app #page .seller-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:14px; }
 html:root #app #page .seller-card { border:1px solid var(--ds-line); border-radius:16px; padding:18px; background:var(--ds-surface); display:grid; gap:16px; }
 html:root #app #page .seller-card-heading { display:flex; align-items:center; gap:12px; }
 html:root #app #page .seller-card-heading>div { min-width:0; }
 html:root #app #page .seller-card-heading h3 { margin:0; font-size:15px; }
 html:root #app #page .seller-card-heading small { display:block; overflow-wrap:anywhere; color:var(--ds-muted); margin-top:3px; }
 html:root #app #page .seller-card-rule { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-block:1px solid var(--ds-line); }
 html:root #app #page .seller-card-rule small { color:var(--ds-muted); }
 html:root #app #page .seller-card .seller-actions { display:flex; gap:8px; flex-wrap:wrap; }
 html:root #app .commission-scope-notice { border:1px solid var(--ds-line); border-left:3px solid var(--ds-accent); border-radius:10px; padding:12px; color:var(--ds-text); background:var(--ds-surface-alt); }
 html:root #app :is(.period-picker>summary,.sort-icon-button,.topbar-calculator):focus-visible { outline:2px solid var(--ds-accent); outline-offset:3px; }
}