/*
 * PARTSYNQ skin for the MG interface (0.21.18).
 * One additive stylesheet, loaded after all others. It changes colours, typeface and the look of the
 * phone screens, the article list, the editor and the photos. It changes no function: removing the
 * line that loads this file brings the previous look back.
 */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------------------------
 * 1. Tokens. The same roles as the PARTSYNQ design system, as plain hex so older phones read them.
 *    The interface's own 16 design tokens (design-health.css) are fed from these.
 * ------------------------------------------------------------------------------------------- */
:root,
html[data-theme='light'] {
  --psk-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Geist', Roboto, sans-serif;
  --psk-bg: #f9fafc;
  --psk-surface: #ffffff;
  --psk-surface-2: #f4f6f8;
  --psk-surface-3: #ebedf1;
  --psk-border: #dadde2;
  --psk-border-strong: #b9bdc5;
  --psk-control: #6b7079;
  --psk-fg: #12161c;
  --psk-fg-muted: #3a3f49;
  --psk-placeholder: #6b7079;
  --psk-primary: #1a1f29;
  --psk-primary-hover: #2e333d;
  --psk-primary-fg: #fcfcfc;
  --psk-accent: #0162d4;
  --psk-accent-solid: #0065da;
  --psk-accent-subtle: #ecf3fe;
  --psk-accent-subtle-fg: #014da9;
  --psk-accent-border: #afcdf9;
  --psk-success: #14874e;
  --psk-success-subtle: #e2fbe9;
  --psk-success-fg: #01532d;
  --psk-warning-subtle: #fff4de;
  --psk-warning-fg: #7d460b;
  --psk-danger: #d02b31;
  --psk-danger-subtle: #feefee;
  --psk-danger-fg: #a21921;
  --psk-focus: #2275e8;
  --psk-shadow-xs: 0 1px 1px rgb(23 27 34 / 0.04);
  --psk-shadow-sm: 0 1px 2px rgb(23 27 34 / 0.06), 0 0 0 1px rgb(23 27 34 / 0.02);
  --psk-shadow-md: 0 4px 12px -2px rgb(23 27 34 / 0.08), 0 1px 3px rgb(23 27 34 / 0.06);
  --psk-radius: 12px;

  --design-canvas: var(--psk-bg);
  --design-surface: var(--psk-surface);
  --design-subtle: var(--psk-surface-2);
  --design-text: var(--psk-fg);
  --design-muted: var(--psk-fg-muted);
  --design-line: var(--psk-border);
  --design-control-line: var(--psk-control);
  --design-action: var(--psk-primary);
  --design-action-text: var(--psk-primary-fg);
  --design-accent: var(--psk-accent);
  --design-accent-text: var(--psk-accent-subtle-fg);
  --design-chart-ebay: #156cdd;
  --design-chart-gambio: #0eafa2;
  --design-chart-stripe: #e4a339;
  --design-chart-separator: #ffffff;
  --design-error: var(--psk-danger-fg);
}

html[data-theme='dark'] {
  --psk-bg: #101722;
  --psk-surface: #18212f;
  --psk-surface-2: #202c3c;
  --psk-surface-3: #293648;
  --psk-border: #354458;
  --psk-border-strong: #576a82;
  --psk-control: #8fa0b5;
  --psk-fg: #edf2f8;
  --psk-fg-muted: #b7c3d2;
  --psk-placeholder: #a8b5c7;
  --psk-primary: #2f73d9;
  --psk-primary-hover: #2864bd;
  --psk-primary-fg: #ffffff;
  --psk-accent: #74acfe;
  --psk-accent-solid: #0e6ee6;
  --psk-accent-subtle: #16273f;
  --psk-accent-subtle-fg: #a0c6ff;
  --psk-accent-border: #284d83;
  --psk-success: #47b777;
  --psk-success-subtle: #102a1a;
  --psk-success-fg: #80dba2;
  --psk-warning-subtle: #382409;
  --psk-warning-fg: #f8c970;
  --psk-danger: #f05f5a;
  --psk-danger-subtle: #3d1b18;
  --psk-danger-fg: #ffaba3;
  --psk-focus: #5c9eff;
  --psk-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.3);
  --psk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.03);
  --psk-shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
  --design-chart-ebay: #5598f9;
  --design-chart-gambio: #45c1b4;
  --design-chart-stripe: #eeb154;
  --design-chart-separator: #18212f;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --psk-bg: #101722;
    --psk-surface: #18212f;
    --psk-surface-2: #202c3c;
    --psk-surface-3: #293648;
    --psk-border: #354458;
    --psk-border-strong: #576a82;
    --psk-control: #8fa0b5;
    --psk-fg: #edf2f8;
    --psk-fg-muted: #b7c3d2;
    --psk-placeholder: #a8b5c7;
    --psk-primary: #2f73d9;
    --psk-primary-hover: #2864bd;
    --psk-primary-fg: #ffffff;
    --psk-accent: #74acfe;
    --psk-accent-solid: #0e6ee6;
    --psk-accent-subtle: #16273f;
    --psk-accent-subtle-fg: #a0c6ff;
    --psk-accent-border: #284d83;
    --psk-success: #47b777;
    --psk-success-subtle: #102a1a;
    --psk-success-fg: #80dba2;
    --psk-warning-subtle: #382409;
    --psk-warning-fg: #f8c970;
    --psk-danger: #f05f5a;
    --psk-danger-subtle: #3d1b18;
    --psk-danger-fg: #ffaba3;
    --psk-focus: #5c9eff;
    --psk-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.3);
    --psk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.03);
    --psk-shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
    --design-chart-ebay: #5598f9;
    --design-chart-gambio: #45c1b4;
    --design-chart-stripe: #eeb154;
    --design-chart-separator: #18212f;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 2. Typeface
 * ------------------------------------------------------------------------------------------- */
html,
body,
button,
input,
select,
textarea,
table {
  font-family: var(--psk-font) !important;
}
body {
  -webkit-font-smoothing: auto;
  text-rendering: auto;
  font-synthesis: none;
  line-height: 1.45;
}
/* Secondary text is dark now; a hint inside an empty field stays lighter, so the field does not look filled in. */
html input::placeholder,
html textarea::placeholder,
html #editor input::placeholder,
html #editor textarea::placeholder,
html .portal-main > .portal-search input::placeholder,
html #seller-search input::placeholder,
html #dashboard-section .dashboard-quick-capture input::placeholder,
html .dashboard-scan-card form input::placeholder {
  color: var(--psk-placeholder) !important;
  -webkit-text-fill-color: var(--psk-placeholder) !important;
  opacity: 1;
}
/* Example hints ("z. B. RD250") are not shown: such a field is simply empty (user decision 02.10.2026).
   Its label says what belongs there. The two :not() parts only lift this rule above the ones before. */
html:not(#psk-a):not(#psk-b) :is(input, textarea)[placeholder^='z. B']::placeholder,
html:not(#psk-a):not(#psk-b) :is(input, textarea)[placeholder^='z.B']::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0 !important;
}

/* ---------------------------------------------------------------------------------------------
 * 3. Phone (the layout mobile-seller.js builds below 760px)
 * ------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html.seller-mobile-ready {
    --seller-bg: var(--psk-surface);
    --seller-text: var(--psk-fg);
    --seller-muted: var(--psk-fg-muted);
    --seller-line: var(--psk-border);
    --seller-primary: var(--psk-primary);
  }
  html.seller-mobile-ready body {
    background: var(--psk-bg) !important;
    color: var(--psk-fg);
  }

  /* Header: company on the left (opens company, account and appearance), voice control on the right. */
  html.seller-mobile-ready #seller-mobile-header {
    background: var(--psk-surface) !important;
    border-bottom: 1px solid var(--psk-border) !important;
  }
  html.seller-mobile-ready .seller-monogram {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2f6fdd, #5a47c4);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  html.seller-mobile-ready #seller-mobile-header small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  html.seller-mobile-ready #seller-company-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.005em;
  }
  html.seller-mobile-ready [data-psk-account] #seller-company-name::after {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin: -3px 0 0 3px;
    border: solid var(--psk-fg-muted);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
  }

  /* Bottom bar: four tabs. The "Mehr" entry is not shown; its sheet opens from the company name. */
  html.seller-mobile-ready #seller-mobile-nav {
    background: var(--psk-surface);
    border-top: 1px solid var(--psk-border);
    box-shadow: none;
  }
  html.seller-mobile-ready #seller-mobile-nav > [data-seller-more] {
    display: none !important;
  }
  html.seller-mobile-ready #seller-mobile-nav > a {
    gap: 5px;
    border-radius: 12px;
    color: var(--psk-fg) !important;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
  }
  html.seller-mobile-ready #seller-mobile-nav svg {
    width: 22px;
    height: 22px;
  }
  html.seller-mobile-ready #seller-mobile-nav a[aria-current='page'] {
    background: transparent !important;
    color: var(--psk-accent) !important;
    font-weight: 700;
  }

  /* Work area (Bestand, Bestellungen) */
  html.seller-mobile-ready #seller-mobile-workspace:not([hidden]) {
    padding: 20px 16px 24px;
    background: var(--psk-bg);
  }
  html.seller-mobile-ready .seller-page-head {
    margin-bottom: 16px;
  }
  html.seller-mobile-ready .seller-page-head h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
  html.seller-mobile-ready .seller-page-head p {
    margin-top: 5px;
    font-size: 13px;
  }
  html.seller-mobile-ready #seller-mobile-workspace .seller-icon {
    border: 1px solid var(--psk-border-strong);
    border-radius: 12px;
    background: var(--psk-surface);
    color: var(--psk-fg);
    box-shadow: var(--psk-shadow-xs);
  }
  html.seller-mobile-ready #seller-mobile-workspace .seller-icon.seller-primary {
    border-color: var(--psk-primary);
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
  }
  html.seller-mobile-ready .seller-search {
    min-height: 46px;
    margin-bottom: 12px;
    border: 1px solid var(--psk-border-strong);
    border-radius: 12px;
    background: var(--psk-surface);
    box-shadow: var(--psk-shadow-xs);
  }
  html.seller-mobile-ready .seller-search > svg {
    width: 19px;
    height: 19px;
    color: var(--psk-fg-muted);
  }
  html.seller-mobile-ready .seller-search > .seller-icon {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  html.seller-mobile-ready .seller-search:focus-within {
    outline: 2px solid var(--psk-focus);
    outline-offset: 1px;
    border-color: var(--psk-focus);
  }
  /* Filters wrap onto further lines: nothing on the phone scrolls sideways. */
  html.seller-mobile-ready #seller-tabs {
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0 0 4px;
    overflow: visible;
  }
  html.seller-mobile-ready #seller-tabs button {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--psk-border-strong);
    border-radius: 9px;
    background: var(--psk-surface);
    color: var(--psk-fg);
    font-size: 13px;
    font-weight: 550;
  }
  html.seller-mobile-ready #seller-tabs button[aria-pressed='true'] {
    border-color: var(--psk-primary) !important;
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
  }
  html.seller-mobile-ready #seller-result {
    margin: 8px 2px 10px;
    font-size: 12.5px;
  }

  /* One card per article or order */
  html.seller-mobile-ready #seller-list {
    gap: 10px;
  }
  html.seller-mobile-ready .seller-offer,
  html.seller-mobile-ready .seller-order,
  html.seller-mobile-ready .seller-draft {
    padding: 12px;
    border: 1px solid var(--psk-border);
    border-radius: 14px;
    background: var(--psk-surface);
    box-shadow: var(--psk-shadow-xs);
  }
  html.seller-mobile-ready .seller-card-body {
    gap: 12px;
  }
  html.seller-mobile-ready .seller-card-body img,
  html.seller-mobile-ready .seller-no-photo {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border: 1px solid var(--psk-border);
    border-radius: 10px;
    background: var(--psk-surface-2);
  }
  html.seller-mobile-ready .seller-no-photo {
    color: var(--psk-fg-muted);
    font-size: 11px;
  }
  html.seller-mobile-ready .seller-card-copy {
    gap: 3px;
  }
  html.seller-mobile-ready .seller-card-copy > b {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  html.seller-mobile-ready .seller-card-copy > small {
    font-size: 12.5px;
  }
  html.seller-mobile-ready .seller-card-copy > strong {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }
  html.seller-mobile-ready .seller-channel-tags {
    margin-top: 3px;
    gap: 4px;
  }
  html.seller-mobile-ready .seller-channel-tags > span,
  html.seller-mobile-ready .seller-draft-tag {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--psk-surface-3);
    color: var(--psk-fg-muted);
    font-size: 11.5px;
    font-weight: 500;
  }
  html.seller-mobile-ready .seller-card-actions {
    margin-top: 10px;
  }
  html.seller-mobile-ready .seller-card-actions > button:not(.seller-icon) {
    border: 1px solid var(--psk-border-strong);
    border-radius: 10px;
    background: var(--psk-surface);
    font-weight: 600;
    box-shadow: var(--psk-shadow-xs);
  }
  html.seller-mobile-ready .seller-card-actions > .seller-icon {
    border-radius: 10px !important;
  }
  /* Article cards (user decision 02.10.2026): a tap on the card opens the editor. The wide "Bearbeiten"
     button becomes a plain arrow at the right edge; the three dots stay as a small symbol in the corner. */
  html.seller-mobile-ready .seller-offer {
    position: relative;
  }
  html.seller-mobile-ready .seller-offer > .seller-card-body {
    padding-right: 26px;
  }
  html.seller-mobile-ready .seller-offer > .seller-card-actions {
    display: contents;
  }
  html.seller-mobile-ready .seller-offer > .seller-card-actions > button,
  html.seller-mobile-ready .seller-offer > .seller-card-actions > .seller-icon {
    position: absolute;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--psk-fg-muted) !important;
    box-shadow: none !important;
  }
  html.seller-mobile-ready .seller-offer > .seller-card-actions > button:not(.seller-icon) {
    top: 50%;
    right: 2px;
    width: 34px;
    min-width: 34px;
    height: 48px;
    min-height: 48px;
    transform: translateY(-50%);
    border-radius: 10px !important;
    /* The word stays for screen readers but takes no room: it used to run out of the card at the right edge. */
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
  }
  html.seller-mobile-ready .seller-offer > .seller-card-actions > button:not(.seller-icon)::before {
    content: '';
    display: block;
    text-indent: 0;
    width: 9px;
    height: 9px;
    margin: auto;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg) translate(-2px, 2px);
  }
  html.seller-mobile-ready .seller-offer > .seller-card-actions > .seller-icon {
    right: 2px;
    bottom: 4px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 10px !important;
  }
  html.seller-mobile-ready .seller-offer > .seller-card-actions > button:active {
    background: var(--psk-surface-3) !important;
  }
  html.seller-mobile-ready .seller-offer > .seller-card-actions .seller-icon svg {
    width: 19px;
    height: 19px;
  }
  html.seller-mobile-ready .seller-order-state {
    margin-bottom: 10px;
  }
  html.seller-mobile-ready .seller-order-state > b {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--psk-surface-3);
    color: var(--psk-fg);
    font-size: 12px;
    font-weight: 600;
  }
  html.seller-mobile-ready .seller-order-state.unpaid > b,
  html.seller-mobile-ready .seller-order-state.review > b,
  html.seller-mobile-ready .seller-order-state.returns > b {
    background: var(--psk-warning-subtle);
    color: var(--psk-warning-fg);
  }
  html.seller-mobile-ready .seller-order-next {
    border: 1px solid var(--psk-border);
    border-radius: 10px;
    background: var(--psk-surface-2);
    font-weight: 550;
  }
  html.seller-mobile-ready #seller-pagination > button,
  html.seller-mobile-ready .seller-error button {
    border: 1px solid var(--psk-border-strong);
    border-radius: 10px;
    background: var(--psk-surface);
    font-weight: 600;
  }

  /* Übersicht: find a part by manufacturer number or SKU; typed, photographed, scanned or spoken. */
  html.seller-mobile-ready,
  html.seller-mobile-ready[data-theme],
  html.seller-mobile-ready:not([data-theme]) {
    --capture-accent: var(--psk-primary);
    --capture-tint: var(--psk-accent-subtle);
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] .portal-main {
    padding: 20px 16px 24px !important;
  }
  /* The search block sits towards the middle of the screen (user decision 02.10.2026); once an
     article is found it moves up so the result is in view. */
  html.seller-mobile-ready[data-seller-page='dashboard'] #scan-section {
    margin-top: clamp(12px, 14vh, 130px) !important;
    transition: margin-top 0.18s ease;
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] #scan-section:has(#seller-capture-results:not([hidden])) {
    margin-top: 0 !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html.seller-mobile-ready[data-seller-page='dashboard'] #scan-section {
      transition: none;
    }
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] .seller-capture-label {
    margin: 0 0 14px;
    text-align: center;
    color: var(--psk-fg);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
  html.seller-mobile-ready .psk-field-label {
    display: block;
    margin: 12px 2px 6px;
    color: var(--psk-fg-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  html.seller-mobile-ready:not([data-seller-page='dashboard']) :is(.psk-field-label, .psk-search-form) {
    display: none !important;
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] #scan-form,
  html.seller-mobile-ready .psk-search-form {
    display: flex;
    flex-flow: row nowrap !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--psk-border-strong);
    border-radius: 14px;
    background: var(--psk-surface);
    box-shadow: var(--psk-shadow-xs);
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] #scan-form:focus-within,
  html.seller-mobile-ready .psk-search-form:focus-within {
    border-color: var(--psk-focus);
    outline: 2px solid var(--psk-focus);
    outline-offset: 1px;
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] #scan-form #scan,
  html.seller-mobile-ready .psk-search-form input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 46px;
    padding: 8px 10px;
    border: 0 !important;
    border-radius: 10px;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--psk-fg) !important;
    -webkit-text-fill-color: var(--psk-fg) !important;
    font-family: var(--psk-font);
    font-size: 17px !important;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  html.seller-mobile-ready .psk-search-form input::placeholder,
  html.seller-mobile-ready[data-seller-page='dashboard'] #scan::placeholder {
    color: var(--psk-fg-muted);
    -webkit-text-fill-color: var(--psk-fg-muted);
    opacity: 0.75;
    font-weight: 400;
  }
  html.seller-mobile-ready .psk-search-form input::-webkit-search-cancel-button {
    display: none;
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] #scan-form > button,
  html.seller-mobile-ready .psk-search-form > button {
    flex: 0 0 auto;
    width: auto;
    min-width: 84px;
    min-height: 46px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
    font-family: var(--psk-font);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] #seller-capture-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 0;
  }
  html.seller-mobile-ready #seller-capture-actions > button,
  html.seller-mobile-ready #seller-capture-actions #seller-capture-read-photo {
    display: flex;
    grid-column: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-height: 104px;
    padding: 14px 6px 12px;
    border: 1px solid var(--psk-border);
    border-radius: 14px;
    background: var(--psk-surface);
    color: var(--psk-fg);
    box-shadow: var(--psk-shadow-xs);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }
  html.seller-mobile-ready #seller-capture-actions > button > svg,
  html.seller-mobile-ready #seller-capture-actions #seller-capture-read-photo svg {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: var(--psk-accent-subtle);
    color: var(--psk-accent-subtle-fg);
  }
  /* Symbols only (user decision 02.10.2026). The words stay for screen readers and voice control. */
  html.seller-mobile-ready #seller-capture-actions > button,
  html.seller-mobile-ready #seller-capture-actions #seller-capture-read-photo {
    justify-content: center;
    min-height: 76px;
    padding: 12px 6px;
  }
  html.seller-mobile-ready #seller-capture-actions > button > svg,
  html.seller-mobile-ready #seller-capture-actions #seller-capture-read-photo svg {
    width: 50px;
    height: 50px;
    padding: 12px;
    border-radius: 14px;
  }
  html.seller-mobile-ready #seller-capture-actions > button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.seller-mobile-ready #seller-capture-actions > button.is-listening {
    border-color: var(--psk-danger);
    color: var(--psk-danger-fg);
  }
  html.seller-mobile-ready #seller-capture-actions > button.is-listening > svg {
    background: var(--psk-danger-subtle);
    color: var(--psk-danger-fg);
  }
  html.seller-mobile-ready[data-seller-page='dashboard'] #seller-capture-results:not([hidden]) {
    gap: 10px;
    margin-top: 18px;
  }
  html.seller-mobile-ready .seller-capture-part {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--psk-border);
    border-radius: 14px;
    background: var(--psk-surface);
    box-shadow: var(--psk-shadow-xs);
  }
  html.seller-mobile-ready .seller-capture-part > img,
  html.seller-mobile-ready .seller-capture-no-photo {
    width: 72px;
    height: 72px;
    border: 1px solid var(--psk-border);
    border-radius: 10px;
    background: var(--psk-surface-2);
  }
  html.seller-mobile-ready .seller-capture-part h2 {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
  }
  html.seller-mobile-ready .seller-capture-part > button {
    min-height: 46px;
    border-radius: 10px;
    background: var(--psk-primary);
    color: var(--psk-primary-fg);
    font-size: 15px;
    font-weight: 600;
  }
  html.seller-mobile-ready .seller-capture-feedback,
  html.seller-mobile-ready .seller-capture-empty {
    border-radius: 14px;
  }
  html.seller-mobile-ready #seller-capture-assistant-slot .voice-advisor-launch {
    grid-template-columns: 44px minmax(0, 1fr) 14px;
    min-height: 76px;
    padding: 12px 14px;
    border: 1px solid var(--psk-accent-border);
    border-radius: 14px;
    background: var(--psk-accent-subtle);
    color: var(--psk-fg);
    font-size: 15.5px;
    font-weight: 600;
    box-shadow: none;
  }
  html.seller-mobile-ready #seller-capture-assistant-slot .voice-advisor-launch::before {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--psk-surface);
    color: var(--psk-accent);
    font-size: 26px;
  }
  html.seller-mobile-ready #seller-capture-assistant-slot .voice-advisor-launch::after {
    color: var(--psk-accent);
  }

  /* Bestand: manufacturer number and SKU, each in its own box. Long lists of numbers wrap inside the
     box (two lines at most) instead of pushing the card wider. */
  html.seller-mobile-ready .seller-card-copy > *,
  html.seller-mobile-ready .seller-capture-part > div > * {
    min-width: 0;
  }
  html.seller-mobile-ready .seller-card-copy > small.psk-ids,
  html.seller-mobile-ready .seller-capture-part p.psk-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    margin: 2px 0;
  }
  html.seller-mobile-ready .psk-id {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    padding: 2px 7px;
    border: 1px solid var(--psk-border);
    border-radius: 7px;
    background: var(--psk-surface-2);
    line-height: 1.35;
  }
  html.seller-mobile-ready .psk-id > i {
    flex: none;
    color: var(--psk-fg-muted);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  html.seller-mobile-ready .psk-id > b {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--psk-fg);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* Sheet opened from the company name: company, account, appearance and voice control only. */
  html.seller-mobile-ready #seller-sheet {
    border-radius: 18px 18px 0 0;
    background: var(--psk-surface);
    color: var(--psk-fg);
  }
  html.seller-mobile-ready #seller-sheet .seller-sheet-head h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }
  html.seller-mobile-ready #seller-sheet[data-psk-sheet='account'] .seller-sheet-links > .seller-more-group,
  html.seller-mobile-ready #seller-sheet[data-psk-sheet='account'] .seller-sheet-links > a:not([href='#account-settings-section']):not([href='#sprachsuche-handbuch-section']) {
    display: none !important;
  }
  /* "Alle Bereiche" unfolds the other areas; it sits above them. */
  html.seller-mobile-ready #seller-sheet .seller-sheet-links {
    display: flex;
    flex-direction: column;
  }
  html.seller-mobile-ready #seller-sheet[data-psk-sheet] .seller-sheet-links > :is(button, a[href='#account-settings-section'], a[href='#sprachsuche-handbuch-section']):not([data-psk-all-areas]) {
    order: -2;
  }
  html.seller-mobile-ready #seller-sheet .seller-sheet-links > [data-psk-all-areas] {
    order: -1;
    flex-wrap: wrap;
  }
  html.seller-mobile-ready #seller-sheet [data-psk-all-areas] > span {
    flex: 1;
  }
  html.seller-mobile-ready #seller-sheet [data-psk-all-areas] > small {
    order: 3;
    flex: 0 0 100%;
    color: var(--psk-fg-muted);
    font-size: 12.5px;
    font-weight: 400;
  }
  html.seller-mobile-ready #seller-sheet [data-psk-all-areas]::after {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border: solid var(--psk-fg-muted);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
    transition: transform 0.15s;
  }
  html.seller-mobile-ready #seller-sheet [data-psk-all-areas][aria-expanded='true']::after {
    transform: rotate(-135deg);
  }
  html.seller-mobile-ready #seller-sheet .seller-sheet-links > a,
  html.seller-mobile-ready #seller-sheet .seller-sheet-links > button {
    border-bottom-color: var(--psk-border);
    font-size: 15px;
    font-weight: 500;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 4. Desktop shell: header, main navigation, portal search
 * ------------------------------------------------------------------------------------------- */
@media (min-width: 761px) {
  body {
    background: var(--psk-bg) !important;
    color: var(--psk-fg);
  }
  body > header.voice-control-header {
    border-bottom: 1px solid var(--psk-border) !important;
    background: var(--psk-surface) !important;
    box-shadow: none !important;
  }
  body > header .brand-copy strong {
    color: var(--psk-fg) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }
  body > header .brand-copy span {
    color: var(--psk-fg-muted) !important;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }
  body > header #active-login-user {
    color: var(--psk-fg-muted) !important;
    font-size: 12.5px;
  }
  body > header .appearance-toggle,
  body > header #switch-company {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 10px !important;
    outline: 0;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: var(--psk-shadow-xs) !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  #voice-control-dock #desktop-voice-start.voice-control-docked {
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 10px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: var(--psk-shadow-xs) !important;
    font-size: 13px;
    font-weight: 600;
  }
  .portal-sidebar {
    border-bottom: 1px solid var(--psk-border) !important;
    background: var(--psk-surface) !important;
    box-shadow: none !important;
  }
  .portal-sidebar .sidebar-main {
    color: var(--psk-fg) !important;
    font-size: 13.5px;
  }
  .portal-sidebar .sidebar-main b {
    font-weight: 600;
  }
  .portal-sidebar .sidebar-main:hover {
    color: var(--psk-fg) !important;
  }
  .portal-sidebar .sidebar-main.active {
    border-bottom-color: var(--psk-accent) !important;
    background: transparent !important;
    color: var(--psk-fg) !important;
  }
  .portal-sidebar .sidebar-main.active b {
    font-weight: 750;
  }
  .portal-main > .portal-search input {
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 10px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: var(--psk-shadow-xs) !important;
    font-size: 14px;
  }
  .portal-main > .portal-search .portal-help-link {
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 10px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    font-size: 13px;
    font-weight: 600;
  }

  /* -------------------------------------------------------------------------------------------
   * 5. Artikel (desktop): head, tabs, figures, filters
   * ----------------------------------------------------------------------------------------- */
  #article-section.article-workspace {
    border: 1px solid var(--psk-border) !important;
    border-radius: 14px !important;
    background: var(--psk-surface) !important;
    box-shadow: var(--psk-shadow-xs) !important;
  }
  #article-section .article-flow-tabs button {
    min-height: 0;
    padding: 10px 14px;
    border: 1px solid var(--psk-border) !important;
    border-radius: 12px !important;
    background: var(--psk-surface-2) !important;
    color: var(--psk-fg) !important;
    box-shadow: none !important;
  }
  #article-section .article-flow-tabs button b {
    color: inherit !important;
    font-size: 14.5px;
    font-weight: 650;
  }
  #article-section .article-flow-tabs button small {
    color: var(--psk-fg-muted) !important;
    font-size: 12px;
  }
  #article-section .article-flow-tabs button.active {
    border-color: var(--psk-primary) !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: inset 0 0 0 1px var(--psk-primary) !important;
  }
  #article-section .article-head h2 {
    color: var(--psk-fg) !important;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  #article-section .article-head p,
  #article-section #article-freshness {
    color: var(--psk-fg-muted) !important;
    font-size: 13px;
  }
  #article-section #article-refresh {
    min-height: 38px;
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 10px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: var(--psk-shadow-xs) !important;
    font-size: 13.5px;
    font-weight: 600;
  }
  #article-section #new-part {
    min-height: 38px;
    border: 1px solid var(--psk-primary) !important;
    border-radius: 10px !important;
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
    box-shadow: none !important;
    font-size: 13.5px;
    font-weight: 600;
  }
  #article-section .article-status-tabs button {
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 9px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    font-size: 13px;
    font-weight: 550;
  }
  #article-section .article-status-tabs button span {
    border-radius: 6px;
    background: var(--psk-surface-3) !important;
    color: var(--psk-fg-muted) !important;
    font-variant-numeric: tabular-nums;
  }
  #article-section .article-status-tabs button.active {
    border-color: var(--psk-primary) !important;
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
  }
  #article-section .article-status-tabs button.active span {
    background: rgb(255 255 255 / 0.16) !important;
    color: inherit !important;
  }
  #article-section .article-kpis > div {
    padding: 12px 14px;
    border: 1px solid var(--psk-border) !important;
    border-radius: 12px !important;
    background: var(--psk-surface) !important;
    box-shadow: var(--psk-shadow-xs) !important;
  }
  #article-section .article-kpis > div span {
    color: var(--psk-fg-muted) !important;
    font-size: 12.5px;
    font-weight: 600;
  }
  #article-section .article-kpis > div b {
    color: var(--psk-fg) !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }
  #article-section .article-kpis > div.attention {
    border-color: var(--psk-warning-subtle) !important;
    background: var(--psk-warning-subtle) !important;
  }
  #article-section .article-kpis > div.attention b,
  #article-section .article-kpis > div.attention span {
    color: var(--psk-warning-fg) !important;
  }
  #article-section .article-filters {
    border: 1px solid var(--psk-border) !important;
    border-radius: 12px !important;
    background: var(--psk-surface-2) !important;
    box-shadow: none !important;
  }
  #article-section .article-filters label,
  #article-section .article-filters .article-model-field > label {
    color: var(--psk-fg-muted) !important;
    font-size: 12px;
    font-weight: 600;
  }
  #article-section .article-filters :is(input, select) {
    min-height: 38px;
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 9px !important;
    background-color: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: none !important;
    font-size: 13.5px;
    font-weight: 550;
  }
  #article-section .article-filters button {
    min-height: 38px;
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 9px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    font-size: 13px;
    font-weight: 600;
  }
  #article-section #active-article-filters span {
    border-radius: 7px;
    background: var(--psk-surface-3) !important;
    color: var(--psk-fg-muted) !important;
  }
  #article-section #count {
    color: var(--psk-fg-muted) !important;
    font-size: 12.5px;
    font-weight: 600;
  }
  #article-section #article-select-all-results {
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 9px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    font-weight: 600;
  }

  /* -------------------------------------------------------------------------------------------
   * 6. Artikel (desktop): the table fits its frame. One row per article, no sideways scrolling.
   * ----------------------------------------------------------------------------------------- */
  .article-table-wrap {
    overflow-x: hidden !important;
    border: 1px solid var(--psk-border) !important;
    border-radius: 14px !important;
    background: var(--psk-surface) !important;
    box-shadow: var(--psk-shadow-xs) !important;
  }
  table.article-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse;
  }
  table.article-table th:nth-child(1) { width: 34px !important; }
  table.article-table th:nth-child(2) { width: 16.5% !important; }
  table.article-table th:nth-child(3) { width: 6.5% !important; }
  table.article-table th:nth-child(4) { width: 8% !important; }
  table.article-table th:nth-child(5) { width: 5% !important; }
  table.article-table th:nth-child(6) { width: 8% !important; }
  table.article-table th:nth-child(7) { width: 7.5% !important; }
  table.article-table th:nth-child(8) { width: 5.5% !important; }
  table.article-table th:nth-child(9) { width: 5% !important; }
  table.article-table th:nth-child(10) { width: 4.5% !important; }
  table.article-table th:nth-child(11) { width: 6.5% !important; }
  table.article-table th:nth-child(12) { width: 4.5% !important; }
  table.article-table th:nth-child(13) { width: 5% !important; }
  table.article-table th:nth-child(14) { width: 6% !important; }
  table.article-table th:nth-child(15) { width: auto !important; }
  table.article-table th {
    height: 36px !important;
    padding: 6px 5px !important;
    border-bottom: 1px solid var(--psk-border) !important;
    background: var(--psk-surface-2) !important;
    color: var(--psk-fg) !important;
    font-size: 10.5px !important;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: normal !important;
    word-break: normal;
  }
  table.article-table th .article-sort-button {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    white-space: normal;
  }
  table.article-table tbody tr {
    height: 58px !important;
    border-bottom: 1px solid var(--psk-border);
    background: var(--psk-surface);
  }
  table.article-table tbody tr:hover {
    background: var(--psk-surface-2) !important;
  }
  table.article-table tbody tr:has(.article-select:checked) {
    background: var(--psk-accent-subtle) !important;
  }
  table.article-table tr.dirty {
    background: var(--psk-warning-subtle) !important;
    box-shadow: inset 3px 0 var(--psk-warning-fg) !important;
  }
  table.article-table td {
    padding: 6px 5px !important;
    overflow: hidden;
    border-bottom: 0 !important;
    color: var(--psk-fg);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }
  table.article-table .article-open {
    max-width: 100%;
    padding: 0;
    color: var(--psk-fg) !important;
    font-size: inherit;
    text-align: left;
  }
  /* Article: picture and title on two lines at most */
  table.article-table .article-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }
  table.article-table .article-identity img {
    flex: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--psk-border);
    border-radius: 8px;
    background: var(--psk-surface-2);
    object-fit: contain;
  }
  table.article-table .article-identity .article-card-copy {
    min-width: 0;
  }
  table.article-table .article-identity .article-card-copy > b {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--psk-fg) !important;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
  }
  table.article-table :is(.article-context b, .article-models) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--psk-fg-muted) !important;
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1.3;
  }
  /* Manufacturer number and SKU: each in its own box */
  table.article-table .part-number-open {
    display: -webkit-box;
    box-sizing: border-box;
    padding: 3px 6px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    border: 1px solid var(--psk-border) !important;
    border-radius: 6px;
    background: var(--psk-surface-2) !important;
    color: var(--psk-fg) !important;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none !important;
  }
  table.article-table :is(.quick-sku, .quick-price, .quick-qty, .quick-condition) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 3px 6px !important;
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 6px !important;
    background-color: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  table.article-table .quick-sku {
    font-weight: 650;
  }
  table.article-table :is(.quick-price, .quick-qty) {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  table.article-table :is(.quick-price, .quick-qty)::-webkit-inner-spin-button,
  table.article-table :is(.quick-price, .quick-qty)::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }
  table.article-table :is(.quick-sku, .quick-price, .quick-qty, .quick-condition):focus {
    border-color: var(--psk-focus) !important;
    outline: 2px solid var(--psk-focus);
    outline-offset: 0;
  }
  table.article-table td:nth-child(9) b {
    font-size: 12.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* States */
  table.article-table .direct-online-status,
  table.article-table .article-status,
  table.article-table .channel-online {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--psk-surface-3) !important;
    color: var(--psk-fg) !important;
    font-size: 10.5px !important;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none !important;
    white-space: normal;
    overflow-wrap: normal;
  }
  table.article-table td:has(> .direct-online-status),
  table.article-table td:has(> .article-status-list) {
    padding-inline: 3px !important;
  }
  table.article-table td:last-child {
    padding-inline: 4px !important;
  }
  table.article-table :is(.direct-online-status.online, .article-status.in-stock) {
    background: var(--psk-success-subtle) !important;
    color: var(--psk-success-fg) !important;
  }
  table.article-table :is(.article-status.incomplete, .article-status.review) {
    background: var(--psk-warning-subtle) !important;
    color: var(--psk-warning-fg) !important;
  }
  table.article-table :is(.article-status.out-of-stock, .article-status.error) {
    background: var(--psk-danger-subtle) !important;
    color: var(--psk-danger-fg) !important;
  }
  table.article-table .channel-online {
    background: var(--psk-accent-subtle) !important;
    color: var(--psk-accent-subtle-fg) !important;
  }
  table.article-table :is(.article-status-list, .channel-status-list) {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }
  /* Actions: "Bearbeiten" and "Mehr" side by side; saving appears once a row has changes. */
  table.article-table .row-actions.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0 !important;
  }
  table.article-table .row-actions.compact {
    flex-wrap: nowrap;
  }
  table.article-table tr.dirty .row-actions.compact {
    flex-wrap: wrap;
  }
  table.article-table .row-actions.compact > .article-edit {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* "Mehr" as the three dots the interface already carries for small screens */
  table.article-table .row-actions.compact > .article-actions-open {
    flex: none;
    width: 28px;
    padding-inline: 0;
  }
  table.article-table .article-actions-open .desktop-action-label {
    display: none !important;
  }
  table.article-table .article-actions-open [class*='mobile-action'] {
    display: inline !important;
    letter-spacing: 1px;
  }
  table.article-table .row-actions.compact > button {
    box-sizing: border-box;
    min-width: 0;
    min-height: 28px;
    margin: 0;
    padding: 3px 6px;
    border: 1px solid var(--psk-border-strong) !important;
    border-radius: 6px !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600;
    white-space: nowrap;
  }
  table.article-table .row-actions.compact > .quick-save:disabled {
    display: none;
  }
  table.article-table .row-actions.compact > .quick-save {
    border-color: var(--psk-primary) !important;
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
  }
  table.article-table .article-select,
  table.article-table #article-check-page {
    width: 16px;
    height: 16px;
    accent-color: var(--psk-accent-solid);
  }
}

/* Below 1440px the widest text columns give way step by step; the row still fits without scrolling. */
@media (min-width: 1280px) and (max-width: 1439px) {
  table.article-table :is(th, td):nth-child(3) {
    display: none;
  }
  table.article-table th:nth-child(2) { width: 16% !important; }
  table.article-table th:nth-child(4) { width: 7.5% !important; }
  table.article-table th:nth-child(5) { width: 5.5% !important; }
  table.article-table th:nth-child(6) { width: 9.5% !important; }
  table.article-table th:nth-child(7) { width: 8% !important; }
  table.article-table th:nth-child(8) { width: 6% !important; }
  table.article-table th:nth-child(9) { width: 6% !important; }
  table.article-table th:nth-child(10) { width: 4.5% !important; }
  table.article-table th:nth-child(11) { width: 7% !important; }
  table.article-table th:nth-child(12) { width: 5.5% !important; }
  table.article-table th:nth-child(13) { width: 5.5% !important; }
  table.article-table th:nth-child(14) { width: 6.5% !important; }
}
@media (min-width: 761px) and (max-width: 1279px) {
  table.article-table :is(th, td):nth-child(3),
  table.article-table :is(th, td):nth-child(4) {
    display: none;
  }
  table.article-table th:nth-child(2) { width: 17% !important; }
  table.article-table th:nth-child(5) { width: 6% !important; }
  table.article-table th:nth-child(6) { width: 9.5% !important; }
  table.article-table th:nth-child(7) { width: 9% !important; }
  table.article-table th:nth-child(8) { width: 6.5% !important; }
  table.article-table th:nth-child(9) { width: 6.5% !important; }
  table.article-table th:nth-child(10) { width: 5% !important; }
  table.article-table th:nth-child(11) { width: 7.5% !important; }
  table.article-table th:nth-child(12) { width: 6% !important; }
  table.article-table th:nth-child(13) { width: 6% !important; }
  table.article-table th:nth-child(14) { width: 7% !important; }
}

/* ---------------------------------------------------------------------------------------------
 * 7. Article editor (dialog #editor): sections as cards, quiet fields, save bar always in reach
 * ------------------------------------------------------------------------------------------- */
html #editor.article-flow-editor {
  background: var(--psk-bg) !important;
  color: var(--psk-fg) !important;
}
html #editor.article-flow-editor #edit-form {
  background: transparent !important;
  color: var(--psk-fg) !important;
}
html #editor.article-flow-editor .editor-workspace {
  background: transparent !important;
}
html #editor.article-flow-editor .dialog-head h2 {
  color: var(--psk-fg) !important;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
html #editor.article-flow-editor .dialog-head small {
  color: var(--psk-fg-muted) !important;
  font-size: 13px;
}
html #editor.article-flow-editor #editor-voice-toggle,
html #editor.article-flow-editor .editor-head-actions .close {
  border: 1px solid var(--psk-border-strong) !important;
  border-radius: 10px !important;
  background: var(--psk-surface) !important;
  color: var(--psk-fg) !important;
  box-shadow: var(--psk-shadow-xs);
}
html #editor.article-flow-editor .article-flow-section {
  margin: 0 0 14px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--psk-border) !important;
  border-radius: 14px !important;
  background: var(--psk-surface) !important;
  box-shadow: var(--psk-shadow-xs);
}
html #editor.article-flow-editor .article-flow-heading {
  margin-bottom: 14px;
}
html #editor.article-flow-editor .article-flow-heading h3 {
  color: var(--psk-fg) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
html #editor.article-flow-editor .article-flow-heading p,
html #editor.article-flow-editor :is(#image-count, .image-note, .image-sequence-help, #inline-photo-status, .article-auto-note) {
  color: var(--psk-fg-muted) !important;
  font-size: 13px;
}
html #editor.article-flow-editor label {
  color: var(--psk-fg) !important;
  font-size: 13px;
  font-weight: 600;
}
html #editor.article-flow-editor :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']), select, textarea) {
  border: 1px solid var(--psk-border-strong) !important;
  border-radius: 9px !important;
  background-color: var(--psk-surface) !important;
  color: var(--psk-fg) !important;
  -webkit-text-fill-color: var(--psk-fg) !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 450;
}
html #editor.article-flow-editor :is(input, select, textarea):focus {
  border-color: var(--psk-focus) !important;
  outline: 2px solid var(--psk-focus);
  outline-offset: 0;
}
html #editor.article-flow-editor :is(input, select, textarea):disabled,
html #editor.article-flow-editor :is(input, textarea)[readonly] {
  background-color: var(--psk-surface-2) !important;
  color: var(--psk-fg-muted) !important;
  -webkit-text-fill-color: var(--psk-fg-muted) !important;
}
html #editor.article-flow-editor .field-counter {
  color: var(--psk-fg-muted) !important;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
html #editor.article-flow-editor .article-flow-options > summary {
  padding: 8px 0;
  color: var(--psk-fg) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
html #editor.article-flow-editor :is(.article-ebay-data-card, .article-gpsr-card, .image-box, .ebay-fitment-box) {
  border-color: var(--psk-border) !important;
  background: transparent !important;
  color: var(--psk-fg) !important;
  box-shadow: none !important;
}
html #editor.article-flow-editor .voice-note-editor-button,
html #editor.article-flow-editor .vendo-media-toolbar button,
html #editor.article-flow-editor .image-selection-toolbar button {
  min-height: 38px;
  border: 1px solid var(--psk-border-strong) !important;
  border-radius: 9px !important;
  background: var(--psk-surface) !important;
  color: var(--psk-fg) !important;
  box-shadow: var(--psk-shadow-xs);
  font-size: 13.5px;
  font-weight: 600;
}
html #editor.article-flow-editor .vendo-media-toolbar label {
  color: var(--psk-fg-muted) !important;
  font-size: 12.5px;
}

/* Photos */
html #editor.article-flow-editor .image-selection-toolbar {
  border: 1px solid var(--psk-border) !important;
  border-radius: 10px !important;
  background: var(--psk-surface-2) !important;
}
html #editor.article-flow-editor #image-selection-count {
  color: var(--psk-fg-muted) !important;
  font-size: 13px;
  font-weight: 550;
}
html #editor.article-flow-editor #image-delete-selected {
  border-color: var(--psk-danger) !important;
  background: var(--psk-surface) !important;
  color: var(--psk-danger-fg) !important;
}
html #editor.article-flow-editor #image-delete-selected:disabled {
  border-color: var(--psk-border-strong) !important;
  color: var(--psk-fg-muted) !important;
  opacity: 0.6;
}
html #editor.article-flow-editor .image-card {
  overflow: hidden;
  border: 1px solid var(--psk-border) !important;
  border-radius: 12px !important;
  background: var(--psk-surface-2) !important;
}
html #editor.article-flow-editor .image-card.is-selected {
  border-color: var(--psk-accent) !important;
  box-shadow: 0 0 0 2px var(--psk-accent);
}
html #editor.article-flow-editor .image-card .image-preview {
  border-radius: 0 !important;
  background: var(--psk-surface-2) !important;
}
html #editor #image-gallery .image-select {
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1.5px solid var(--psk-border-strong) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 0.94) !important;
  color: transparent !important;
  box-shadow: 0 1px 3px rgb(23 27 34 / 0.18);
}
html #editor #image-gallery .image-select > span {
  font-size: 14px;
  line-height: 1;
}
html #editor #image-gallery .image-select[aria-pressed='true'] {
  border-color: var(--psk-accent-solid) !important;
  background: var(--psk-accent-solid) !important;
  color: #fff !important;
}
/* No number on the photos (user decision 02.10.2026): the dark band with "1", "2" ... is gone; the
   order is the order of the tiles, and the main photo keeps its own mark. */
html #editor #image-gallery .image-order-badge {
  display: none !important;
}
html #editor.article-flow-editor .image-main-badge {
  top: auto;
  bottom: 8px;
  left: 8px;
  padding: 0 8px;
  transform: none;
  border-radius: 7px;
  background: var(--psk-accent-solid);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 22px;
}
html #editor.article-flow-editor .image-menu-toggle {
  top: 8px;
  right: 8px;
  min-width: 30px;
  min-height: 30px;
  border: 1px solid var(--psk-border-strong) !important;
  background: rgb(255 255 255 / 0.94) !important;
  color: #171b22 !important;
  box-shadow: 0 1px 3px rgb(23 27 34 / 0.18);
  font-size: 14px;
}
html #editor #image-gallery .inline-cutout {
  top: auto;
  right: 8px;
  bottom: 8px;
  left: auto;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--psk-border-strong);
  border-radius: 9px;
  background: rgb(255 255 255 / 0.94);
  color: #171b22;
  box-shadow: 0 1px 3px rgb(23 27 34 / 0.18);
}
html #editor.article-flow-editor .image-card-actions:not([hidden]) {
  border: 1px solid var(--psk-border) !important;
  border-radius: 12px;
  background: var(--psk-surface) !important;
  box-shadow: var(--psk-shadow-md);
}
html #editor.article-flow-editor .image-card-actions button {
  border-radius: 8px;
  background: transparent !important;
  color: var(--psk-fg) !important;
  font-size: 13.5px;
}
html #editor.article-flow-editor .image-add-tile {
  border: 1.5px dashed var(--psk-border-strong) !important;
  border-radius: 12px !important;
  background: var(--psk-surface-2) !important;
  color: var(--psk-fg-muted) !important;
}
html #editor.article-flow-editor .image-add-tile b {
  font-size: 12.5px;
  font-weight: 600;
}

/* Save bar */
html #editor.article-flow-editor .editor-actions button {
  min-height: 42px;
  border: 1px solid var(--psk-border-strong) !important;
  border-radius: 10px !important;
  background: var(--psk-surface) !important;
  color: var(--psk-fg) !important;
  box-shadow: var(--psk-shadow-xs);
  font-size: 14px;
  font-weight: 600;
}
html #editor.article-flow-editor .editor-actions .save {
  border-color: var(--psk-primary) !important;
  background: var(--psk-primary) !important;
  color: var(--psk-primary-fg) !important;
}
html #editor.article-flow-editor .editor-actions .article-save-hint {
  color: var(--psk-fg-muted) !important;
  font-size: 12.5px;
}

@media (min-width: 761px) {
  html #editor.article-flow-editor #edit-form > .dialog-head {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 16px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--psk-border) !important;
    background: var(--psk-bg) !important;
  }
  html #editor.article-flow-editor #edit-form > .editor-actions {
    position: sticky;
    bottom: 0;
    z-index: 18;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 0 14px !important;
    border-top: 1px solid var(--psk-border) !important;
    background: var(--psk-bg) !important;
  }
  html #editor.article-flow-editor :is(#editor-voice-toggle, .editor-head-actions .close) {
    min-height: 38px;
    font-size: 13.5px;
    font-weight: 600;
  }
  html #editor.article-flow-editor .editor-actions .article-save-hint {
    flex: 0 0 100%;
    order: -1;
    margin: 0 !important;
    text-align: right;
  }
  html #editor.article-flow-editor .editor-actions #article-cancel { order: 1; }
  html #editor.article-flow-editor .editor-actions #article-save-draft { order: 2; }
  html #editor.article-flow-editor .editor-actions #article-save-and-channels { order: 3; }
  html #editor.article-flow-editor .editor-actions .save { order: 4; min-width: 150px; }
  html #editor.article-flow-editor .editor-actions #editor-save-result {
    flex: 0 0 100%;
    order: 9;
  }
  /* The floating voice button sits in the header row of the open dialog, not over its fields. */
  #voice-control-dock.is-modal {
    top: 12px !important;
    border: 1px solid var(--psk-border);
    border-radius: 12px;
    background: var(--psk-surface);
    box-shadow: var(--psk-shadow-xs);
  }
}

@media (max-width: 760px) {
  html.seller-mobile-ready #editor.article-flow-editor {
    background: var(--psk-bg) !important;
  }
  html.seller-mobile-ready #editor.article-flow-editor #edit-form {
    padding: 0 12px !important;
    background: transparent !important;
  }
  html.seller-mobile-ready #editor.article-flow-editor #edit-form > .dialog-head {
    margin: 0 -12px 12px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--psk-border) !important;
    background: var(--psk-surface) !important;
    box-shadow: none;
  }
  html.seller-mobile-ready #editor .dialog-head h2 {
    font-size: 18px;
  }
  html.seller-mobile-ready #editor .article-flow-section {
    margin: 0 0 10px !important;
    padding: 16px 14px !important;
    border: 1px solid var(--psk-border) !important;
    border-radius: 14px !important;
  }
  html.seller-mobile-ready #editor .article-flow-heading h3 {
    font-size: 16.5px;
  }
  html.seller-mobile-ready #editor .seller-editor-tools {
    padding: 0 0 10px;
  }
  html.seller-mobile-ready #editor.article-flow-editor #edit-form > .editor-actions {
    margin: 0 -12px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--psk-border) !important;
    background: var(--psk-surface) !important;
    box-shadow: none;
  }
  /* Save bar on the phone: the main action on top, the other three in one row below. */
  html.seller-mobile-ready #editor.article-flow-editor #edit-form > .editor-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
  }
  html.seller-mobile-ready #editor .editor-actions .article-save-hint {
    display: none;
  }
  html.seller-mobile-ready #editor .editor-actions button {
    min-height: 44px !important;
    padding: 6px 6px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.2;
    white-space: normal;
  }
  html.seller-mobile-ready #editor .editor-actions .save {
    min-height: 46px !important;
    border: 0 !important;
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
    font-size: 15px !important;
  }
  /* On the phone the floating voice button sits at the lower right, above the save bar, where it
     covers no field. (The interface places it by script, hence the forced values.) Not in the menu
     sheet: there it would lie on a menu line, so it stays where the interface puts it. */
  html.seller-mobile-ready dialog:not(#seller-sheet) > #voice-control-dock.is-modal {
    top: auto !important;
    right: 12px !important;
    bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
    border: 1px solid var(--psk-border);
    border-radius: 14px;
    background: var(--psk-surface);
    box-shadow: var(--psk-shadow-md);
  }
}

/* ---------------------------------------------------------------------------------------------
 * 8. Bestellungen (desktop): article picture in the order table
 * ------------------------------------------------------------------------------------------- */
table.order-table td.psk-order-article {
  min-height: 44px;
}
table.order-table .psk-order-thumb {
  float: left;
  width: 44px;
  height: 44px;
  margin: 0 10px 0 0;
  border: 1px solid var(--psk-border);
  border-radius: 8px;
  background: var(--psk-surface-2);
  object-fit: contain;
}

/* ---------------------------------------------------------------------------------------------
 * 9. Namaz vakitleri (Übersicht of the company MG)
 * ------------------------------------------------------------------------------------------- */
.psk-prayer {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--psk-border);
  border-radius: 14px;
  background: var(--psk-surface);
  color: var(--psk-fg);
  box-shadow: var(--psk-shadow-xs);
  font-family: var(--psk-font);
}
.psk-prayer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.psk-prayer-head > b {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.psk-prayer-place {
  color: var(--psk-fg-muted);
  font-size: 12.5px;
}
.psk-prayer-next {
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--psk-accent-subtle);
  color: var(--psk-accent-subtle-fg);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.psk-prayer-next:empty {
  display: none;
}
.psk-prayer .psk-prayer-sound {
  min-height: 32px;
  margin: 0 0 0 auto;
  padding: 4px 11px;
  border: 1px solid var(--psk-border-strong);
  border-radius: 9px;
  background: var(--psk-surface);
  color: var(--psk-fg-muted);
  box-shadow: none;
  font: 600 12.5px/1.2 var(--psk-font);
  cursor: pointer;
}
.psk-prayer .psk-prayer-sound[data-state='on'] {
  border-color: var(--psk-accent-border);
  background: var(--psk-accent-subtle);
  color: var(--psk-accent-subtle-fg);
}
.psk-prayer .psk-prayer-sound[data-state='playing'] {
  border-color: var(--psk-primary);
  background: var(--psk-primary);
  color: var(--psk-primary-fg);
}
.psk-prayer-times {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.psk-prayer-times > li {
  display: grid;
  gap: 1px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--psk-surface-2);
  text-align: center;
}
.psk-prayer-times > li > span {
  color: var(--psk-fg-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.psk-prayer-times > li > b {
  color: var(--psk-fg);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.psk-prayer-times > li.is-next {
  border-color: var(--psk-accent-border);
  background: var(--psk-accent-subtle);
}
.psk-prayer-times > li.is-next > span,
.psk-prayer-times > li.is-next > b {
  color: var(--psk-accent-subtle-fg);
}
.psk-prayer .psk-prayer-alert {
  padding: 9px 12px;
  border: 1px solid var(--psk-primary);
  border-radius: 10px;
  background: var(--psk-primary);
  color: var(--psk-primary-fg);
  font: 600 13.5px/1.3 var(--psk-font);
  text-align: left;
  cursor: pointer;
}
@media (max-width: 760px) {
  html.seller-mobile-ready #psk-prayer-phone {
    gap: 12px;
    margin: 18px 0 0;
    padding: 12px;
  }
  html.seller-mobile-ready #psk-prayer-phone .psk-prayer-times {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html.seller-mobile-ready #psk-prayer-phone .psk-prayer-times > li > b {
    font-size: 14.5px;
  }
}

/* The times in the header of the computer layout, beside the company name (user decision 02.10.2026).
   skin.js measures the room up to the voice button and sets data-mode: "row" = six times side by
   side, "grid" = six times in two lines, "pill" = only the next one, "none" = no room. */
.psk-prayer-bar {
  position: absolute;
  top: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  height: 44px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.psk-prayer-bar:not([data-mode]),
.psk-prayer-bar[data-mode='none'] {
  display: none;
}
.psk-prayer-bar .psk-prayer-head {
  display: contents;
}
.psk-prayer-bar .psk-prayer-head > b,
.psk-prayer-bar .psk-prayer-place,
.psk-prayer-bar .psk-prayer-next {
  display: none;
}
/* The list keeps its full width (the interface lets every box shrink): skin.js measures it to choose the form. */
.psk-prayer-bar .psk-prayer-times {
  order: 1;
  flex: none;
  gap: 3px;
  min-width: max-content;
}
.psk-prayer-bar .psk-prayer-times > li {
  min-width: max-content;
  border-radius: 7px;
}
.psk-prayer-bar .psk-prayer-times > li > span {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.15;
}
.psk-prayer-bar .psk-prayer-times > li > b {
  font-size: 12.5px;
  line-height: 1.2;
}
.psk-prayer-bar[data-mode='row'] .psk-prayer-times {
  grid-template-columns: repeat(6, max-content);
}
.psk-prayer-bar[data-mode='row'] .psk-prayer-times > li {
  padding: 5px 7px;
}
.psk-prayer-bar[data-mode='grid'] .psk-prayer-times {
  grid-template-columns: repeat(3, max-content);
  gap: 2px 3px;
}
.psk-prayer-bar[data-mode='grid'] .psk-prayer-times > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 5px;
  text-align: left;
}
.psk-prayer-bar[data-mode='grid'] .psk-prayer-times > li > b {
  font-size: 12px;
}
.psk-prayer-bar[data-mode='pill'] .psk-prayer-times,
.psk-prayer-bar[data-mode='pill'] .psk-prayer-sound {
  display: none;
}
.psk-prayer-bar[data-mode='pill'] .psk-prayer-next {
  display: block;
  order: 1;
  overflow: hidden;
  padding: 5px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Call to prayer: a symbol here, its words as tooltip and for screen readers */
.psk-prayer-bar .psk-prayer-sound {
  position: relative;
  order: 2;
  flex: none;
  width: 28px;
  min-height: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--psk-fg-muted);
  font-size: 0;
  --psk-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E");
}
.psk-prayer-bar .psk-prayer-sound[data-state='on'] {
  --psk-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
}
.psk-prayer-bar .psk-prayer-sound[data-state='playing'] {
  --psk-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='6' width='12' height='12' rx='2.5'/%3E%3C/svg%3E");
}
.psk-prayer-bar .psk-prayer-sound::before {
  content: '';
  position: absolute;
  inset: 5px;
  background: currentColor;
  -webkit-mask: var(--psk-sound) center / contain no-repeat;
  mask: var(--psk-sound) center / contain no-repeat;
}
/* A call the browser did not let start: one button over the times */
.psk-prayer-bar .psk-prayer-alert {
  position: absolute;
  inset: 4px 0;
  z-index: 1;
  overflow: hidden;
  padding: 0 10px;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* With all six times in the header, the box on the overview would say the same a second time. */
html[data-psk-prayer-bar='row'] #psk-prayer-desktop,
html[data-psk-prayer-bar='grid'] #psk-prayer-desktop {
  display: none;
}

/* ---------------------------------------------------------------------------------------------
 * 9b. Notice after the editor closes (the person is brought back to where the editor was opened)
 * ------------------------------------------------------------------------------------------- */
#psk-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 900;
  box-sizing: border-box;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--psk-primary);
  color: var(--psk-primary-fg);
  box-shadow: var(--psk-shadow-md);
  font: 600 13.5px/1.35 var(--psk-font);
  transform: translateX(-50%);
  cursor: pointer;
}
@media (max-width: 760px) {
  #psk-toast {
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: max-content;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 10. Tablet layout (the interface's own card lists below 1000px and on touch screens)
 * ------------------------------------------------------------------------------------------- */
@media (max-width: 1000px), (hover: none) and (pointer: coarse) {
  /* The selected filter is filled with the primary colour: its text and count must follow. */
  .mobile-order-filters button.active,
  #article-section > .mobile-article-tabs button.active {
    border-color: var(--psk-primary) !important;
    background: var(--psk-primary) !important;
    color: var(--psk-primary-fg) !important;
    -webkit-text-fill-color: var(--psk-primary-fg) !important;
  }
  #article-section > .mobile-article-tabs button.active span {
    background: rgb(128 128 128 / 0.28) !important;
    color: var(--psk-primary-fg) !important;
    -webkit-text-fill-color: var(--psk-primary-fg) !important;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 11. Übersicht on the computer and the tablet: the three quick-capture actions as plain symbols
 *     (user decision 02.10.2026). The words stay in the page for screen readers and voice control;
 *     the pointer shows them as a tooltip (set in skin.js).
 * ------------------------------------------------------------------------------------------- */
#dashboard-section .dashboard-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#dashboard-section .dashboard-quick-actions > button,
#dashboard-section .dashboard-quick-actions #dashboard-photo-open {
  display: flex;
  grid-column: auto;
  grid-row: auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 60px;
  padding: 6px;
  border: 1px solid var(--psk-border) !important;
  border-radius: 12px !important;
  background: var(--psk-surface) !important;
  color: var(--psk-accent-subtle-fg) !important;
  box-shadow: var(--psk-shadow-xs);
  font-size: 0 !important;
  line-height: 0;
  cursor: pointer;
}
#dashboard-section .dashboard-quick-actions > button {
  position: relative;
}
/* the tinted square behind the symbol */
#dashboard-section .dashboard-quick-actions > button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--psk-accent-subtle);
  transform: translate(-50%, -50%);
}
/* the symbol itself, drawn in the text colour */
#dashboard-section .dashboard-quick-actions > button::before {
  content: '';
  position: relative;
  z-index: 1;
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--psk-icon) center / contain no-repeat;
  mask: var(--psk-icon) center / contain no-repeat;
}
#dashboard-section .dashboard-quick-actions > button:hover::after {
  background: var(--psk-surface);
}
#dashboard-section .dashboard-quick-actions > #dashboard-voice-start.is-listening::after {
  background: var(--psk-surface);
}
#dashboard-section .dashboard-quick-actions > #dashboard-scanner-open {
  --psk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5M7 8v8M10 8v8M14 8v8M17 8v8'/%3E%3C/svg%3E");
}
#dashboard-section .dashboard-quick-actions > #dashboard-photo-open {
  --psk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='15' rx='3'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M8 5V3h8v2'/%3E%3C/svg%3E");
}
#dashboard-section .dashboard-quick-actions > #dashboard-voice-start {
  --psk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8'/%3E%3C/svg%3E");
}
#dashboard-section .dashboard-quick-actions > button:hover {
  border-color: var(--psk-accent-border) !important;
  background: var(--psk-accent-subtle) !important;
}
#dashboard-section .dashboard-quick-actions > #dashboard-voice-start.is-listening {
  border-color: var(--psk-danger) !important;
  background: var(--psk-danger-subtle) !important;
  color: var(--psk-danger-fg) !important;
}
#dashboard-section .dashboard-command-title > i {
  width: 22px;
  height: 22px;
  background: var(--psk-fg);
  font-size: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5M7 8v8M10 8v8M14 8v8M17 8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5M7 8v8M10 8v8M14 8v8M17 8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The inventory is a workspace, not a storefront. Use desktop screen width. */
/* General portal search is redundant on the dedicated article workspace only. */
html[data-seller-page='articles'] .portal-main > .portal-search,
html[data-seller-page='orders'] .portal-main > .portal-search,
html[data-seller-page='messages'] .portal-main > .portal-search {
  display: none !important;
}

/* Search in the matching column, not an unrelated full-width filter strip. */
@media (min-width: 1024px) {
  html[data-seller-page='articles'] #article-section > .article-head,
  html[data-seller-page='articles'] #article-section > .article-status-tabs {
    display: none !important;
  }
  table.article-table .psk-article-filter-row > th {
    height: 44px !important;
    padding: 4px 5px 8px !important;
    vertical-align: top;
    overflow: visible !important;
  }
  table.article-table th:nth-child(2) { width: 15% !important; }
  table.article-table th:nth-child(3) { width: 6% !important; }
  table.article-table th:nth-child(5) { width: 6% !important; }
  table.article-table th:nth-child(10) { width: 6% !important; }
  .article-filters.psk-article-filters-distributed { display: none !important; }
  table.article-table .psk-article-column-field { display: block; margin: 0; min-width: 0; font-size: 0 !important; }
  table.article-table .psk-article-column-field > label { font-size: 0 !important; margin: 0; }
  table.article-table .psk-article-filter-row :is(input, select),
  .psk-article-table-tools :is(input, select, button) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 5px 7px !important;
    border-radius: 6px !important;
    border: 1px solid var(--psk-border) !important;
    background: var(--psk-surface) !important;
    color: var(--psk-fg) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.2 !important;
  }
  table.article-table .psk-article-channel-filters { position: relative; }
  table.article-table .psk-article-channel-filters summary {
    display: flex; align-items: center; gap: 4px; min-height: 34px; cursor: pointer;
    padding: 5px 7px; border: 1px solid var(--psk-border); border-radius: 6px;
    color: var(--psk-fg); font-size: 12px; font-weight: 500; background: var(--psk-surface);
  }
  table.article-table .psk-article-channel-filters summary::after { content: '⌄'; margin-left: auto; }
  table.article-table .psk-article-channel-filters > label {
    display: flex; flex-direction: column; gap: 4px; padding-top: 8px;
    color: var(--psk-fg-muted); font-size: 12px; font-weight: 500;
  }
  .psk-article-table-tools { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
  .psk-article-table-tools > label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--psk-fg-muted); }
  .psk-article-table-tools > label:has(#article-sort) { max-width: 260px; }
  .psk-article-table-tools #article-page-size { width: 66px !important; }
  .psk-article-table-tools > button { width: auto !important; white-space: nowrap; }
  .article-result-actions:has(.psk-article-table-tools) { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
}

@media (min-width: 1024px) {
  html[data-seller-page='articles'] .portal-main,
  html[data-seller-page='orders'] .portal-main,
  html[data-seller-page='messages'] .portal-main {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Orders retain their own query, source filter and actions; repeated description is omitted. */
#orders-context-tabs { display: none !important; }
#automation-settings-section > .shipping-automations { margin: 12px 0 18px; }
@media (min-width: 1024px) {
  html[data-seller-page='orders'] #imported-orders-section > .order-toolbar,
  html[data-seller-page='orders'] #imported-orders-section > .section-title h3 {
    display: none !important;
  }
  table.order-table .psk-order-period { min-width: 155px; width: 155px; }
  table.order-table th.psk-order-period label { display: block; font-size: 10px; margin: 0; }
  table.order-table th.psk-order-period label[hidden] { display: none !important; }
  table.order-table th.psk-order-period select,
  table.order-table th.psk-order-period input { width: 100%; min-width: 135px; min-height: 30px; padding: 5px; font: inherit; }
  table.order-table th.psk-order-period input[data-order-column-filter='date'] { display: none !important; }
  #imported-orders-section > .order-pagination { flex-wrap: wrap; align-items: center; gap: 8px; }
  #imported-orders-section > .order-pagination > label { display: flex; align-items: center; gap: 6px; font-size: 11px; }
  #imported-orders-section > .order-pagination #order-page-size { width: 75px; min-height: 30px; }
  #imported-orders-section > .order-pagination #order-clear-filters { min-height: 30px; padding: 5px 10px; font-size: 11px; }
}
html[data-seller-page='orders'] #orders-section > .business-head {
  display: none !important;
}
table.order-table :is(th, td).psk-order-origin {
  display: table-cell !important;
  min-width: 110px;
  width: 110px;
}
#psk-order-origin-filter {
  display: block !important;
  width: 100%;
  min-width: 100px;
  min-height: 30px;
  padding: 5px;
  border: 1px solid var(--psk-border);
  border-radius: 6px;
  font: inherit;
  color: var(--psk-fg);
  background: var(--psk-surface);
}
table.order-table input[data-order-column-filter='source'][hidden] { display: none !important; }

/* Shared readable controls: moved filters inherit the same theme as their page. */
html[data-theme], html:not([data-theme]) {
  --design-canvas: var(--psk-bg);
  --design-surface: var(--psk-surface);
  --design-subtle: var(--psk-surface-2);
  --design-text: var(--psk-fg);
  --design-muted: var(--psk-fg-muted);
  --design-line: var(--psk-border);
  --design-control-line: var(--psk-border-strong);
  --design-action: var(--psk-primary);
  --design-action-text: var(--psk-primary-fg);
  --design-accent: var(--psk-accent);
  --design-accent-text: var(--psk-accent-subtle-fg);
}
html body :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']), select, textarea) {
  background-color: var(--psk-surface) !important;
  color: var(--psk-fg) !important;
  -webkit-text-fill-color: var(--psk-fg) !important;
  border-color: var(--psk-border-strong) !important;
}
html body :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--psk-focus);
  outline-offset: 2px;
}
html body :is(input, select, textarea):disabled {
  background-color: var(--psk-surface-2) !important;
  color: var(--psk-fg-muted) !important;
  -webkit-text-fill-color: var(--psk-fg-muted) !important;
}
html body :is(h1, h2, h3, h4) { letter-spacing: -0.015em; }
html body .portal-sidebar .sidebar-main b { font-weight: 600; }
html body .order-workspace,
html body .shipping-workspace,
html body .customer-workspace,
html body .document-workspace {
  background: var(--psk-surface) !important;
  color: var(--psk-fg) !important;
  border-color: var(--psk-border) !important;
  box-shadow: none !important;
}
html body :is(.order-table, .business-table) th {
  background: var(--psk-surface-2) !important;
  color: var(--psk-fg) !important;
  border-color: var(--psk-border) !important;
}
html body :is(.order-table, .business-table) td {
  color: var(--psk-fg);
  border-color: var(--psk-border) !important;
}
html body :is(.order-table, .business-table) tbody tr { background: var(--psk-surface); }
html body :is(.order-table, .business-table) tbody tr:hover { background: var(--psk-surface-2); }
html body .order-table tr.order-cancelled { background: var(--psk-danger-subtle); color: var(--psk-danger-fg); }
html body .order-table :is(small, .muted) { color: var(--psk-fg-muted) !important; }

@media (min-width: 761px) {
  html body :is(table.article-table, table.order-table, table.business-table) th { font-size: 12px !important; font-weight: 600; }
  html body :is(table.article-table, table.order-table, table.business-table) td { font-size: 13px !important; line-height: 1.4; }
  html body table.article-table .article-identity .article-card-copy > b { font-size: 13.5px !important; font-weight: 600; line-height: 1.35; }
  html body table.article-table :is(.article-context b, .article-models) { font-size: 12px !important; font-weight: 400; }
  html body table.article-table :is(.quick-sku, .quick-price, .quick-qty, .quick-condition, .part-number-open) { font-size: 13px !important; font-weight: 500; }
  html body table.article-table :is(.direct-online-status, .article-status, .channel-online) { font-size: 11.5px !important; font-weight: 600; }
  html body table.article-table .row-actions.compact > button { font-size: 12px !important; font-weight: 600; }
  html body table.order-table :is(input, select, button) { font-size: 13px; }
}
@media (min-width: 1024px) {
  html body #orders-section > .order-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }
  html body #orders-section > .order-kpis > button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--psk-border) !important;
    border-radius: 9px;
    background: var(--psk-surface-2) !important;
    box-shadow: none;
    transform: none;
  }
  html body #orders-section > .order-kpis span { color: var(--psk-fg-muted); font-size: 13px; font-weight: 600; }
  html body #orders-section > .order-kpis b { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 650; font-variant-numeric: tabular-nums; }
  html body #orders-section > .order-kpis small { display: none !important; }
  html body #orders-section > .order-kpis .payment-unpaid b { color: var(--psk-warning-fg); }
  html body #orders-section > .order-kpis :is(.payment-paid, .success) b { color: var(--psk-success-fg); }
  html body #orders-section > .order-kpis .review b { color: var(--psk-accent-subtle-fg); }
  html body #orders-section > .order-kpis > button:is(.is-active, [aria-pressed='true']) {
    background: var(--psk-accent-subtle) !important;
    border-color: var(--psk-accent-border) !important;
    box-shadow: inset 0 0 0 1px var(--psk-accent-border);
  }
  html body #orders-section > .order-kpis > button.is-active::after { display: none; }
}

/* Essential order columns stay on screen, including both document numbers. */
@media (min-width: 1024px) {
  html body table.order-table { width: 100%; min-width: 1500px; table-layout: fixed; }
  html body table.order-table :is(th, td) { white-space: normal; overflow-wrap: anywhere; }
  html body table.order-table .psk-order-col-select { width: 36px; }
  html body table.order-table .psk-order-col-customer { width: 10%; }
  html body table.order-table .psk-order-col-address { width: 10%; min-width: 0; }
  html body table.order-table .psk-order-col-order { width: 7%; }
  html body table.order-table .psk-order-col-sku { width: 6%; }
  html body table.order-table .psk-order-col-source { width: 5%; min-width: 0; }
  html body table.order-table .psk-order-col-article { width: auto; }
  html body table.order-table .psk-order-col-date { width: 155px; min-width: 155px; }
  html body table.order-table :is(.psk-order-col-invoice, .psk-order-col-credit) { width: 8%; }
  html body table.order-table .psk-order-col-country { width: 3%; }
  html body table.order-table .psk-order-col-shipped { width: 7%; }
  html body table.order-table :is(.psk-order-col-total, .psk-order-col-storage) { width: 4%; }
  html body table.order-table .psk-order-col-actions { width: 6%; }
  html body table.order-table .psk-order-col-article > :not(.psk-order-thumb) { max-width: 100%; }
  html body table.order-table .psk-order-col-article { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  html body table.order-table .order-document-cell { display: grid; gap: 5px; justify-items: start; }
  html body table.order-table .order-document-cell > a { font-weight: 600; white-space: nowrap; }
  html body table.order-table .order-document-cell > button { min-height: 28px; padding: 3px 8px; border: 1px solid var(--psk-border-strong); border-radius: 6px; background: var(--psk-surface); color: var(--psk-accent-subtle-fg); font: inherit; font-size: 12px; cursor: pointer; }
}

/* Reading first: full-width thread, original reply controls behind one disclosure. */
#messages-section .psk-message-compose { background: var(--psk-surface); border-top: 1px solid var(--psk-border); }
#messages-section .psk-message-compose[hidden] { display: none !important; }
#messages-section .psk-message-compose > summary {
  min-height: 42px;
  box-sizing: border-box;
  padding: 10px 16px;
  color: var(--psk-accent-subtle-fg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
#messages-section .psk-message-compose > form { border-top: 1px solid var(--psk-border); }
@media (min-width: 1000px) {
  html[data-seller-page='messages'] .portal-main { padding-top: 16px !important; }
  #messages-section .messages-hub-head { padding-bottom: 10px; }
  #messages-section .messages-hub-head h2 { margin: 0; font-size: 24px; }
  #messages-section .messages-hub-head :is(.eyebrow, p, .messages-hub-signature) { display: none; }
  #messages-section .messages-tabs[hidden] { display: flex !important; }
  #messages-section .messages-tabs { margin-bottom: 12px; padding: 3px; }
  #messages-section .messages-tabs button { min-height: 36px; padding: 6px 12px; }
  #messages-section .messages-columns { gap: 14px; }
  #messages-section .message-channel { height: max(500px, calc(100dvh - 232px)); border-radius: 14px; }
  #messages-section .channel-heading { padding: 10px 14px; gap: 10px; }
  #messages-section .channel-symbol { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
  #messages-section .channel-heading h3 { margin-bottom: 2px; font-size: 17px; }
  #messages-section .channel-toolbar { min-height: 46px; padding: 0 14px 8px; }
  #messages-section .channel-icon-button, #messages-section #conversation-refresh { width: 34px; height: 34px; min-height: 34px; min-width: 34px; flex-basis: 34px; border-radius: 8px; }
  #messages-section .chat-thread-heading { padding: 8px 16px; }
  #messages-section .chat-thread-heading h3 { font-size: 17px; }
  #messages-section .mail-chat-scroll, #messages-section .conversation-messages { padding: 20px 24px; }
  #messages-section .message-bubble { max-width: min(100%, 1100px); padding: 16px 20px; }
  #messages-section .message-bubble p, #messages-section .mail-body { font-size: 16px; line-height: 1.7; }
  #messages-section:has(.mail-thread-open, .thread-open) .messages-columns { grid-template-columns: minmax(0, 1fr); }
  #messages-section:has(.mail-thread-open, .thread-open)[data-message-channel='mail'] .channel-ebay,
  #messages-section:has(.mail-thread-open, .thread-open)[data-message-channel='ebay'] .channel-mail { display: none !important; }
  #messages-section .channel-connection-status:empty { display: none; }
  #messages-section #mail-reply-body, #messages-section #ebay-reply-body { min-height: 64px; max-height: 110px; }
}

/* Separate source details and the direct, unsaved article action. */
.unified-catalog-result > button[data-catalog-result] {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
}
.unified-catalog-result > button[data-catalog-result] > span {
  flex: 1 1 auto;
}
.unified-catalog-result > button[data-catalog-create] {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .unified-catalog-result {
    display: flex;
    flex-wrap: wrap;
  }
  .unified-catalog-result > button[data-catalog-result] {
    flex-wrap: wrap;
    width: 100%;
  }
  .unified-catalog-result > button[data-catalog-result] > span {
    flex-basis: 100%;
  }
}

/* Prayer times are not part of the mobile product-entry interface. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .psk-prayer { display: none !important; }
}

html.seller-mobile-ready #seller-sheet[data-psk-sheet='all'] .seller-sheet-links>[data-psk-account-shortcut]{display:none!important}