#backup-status { max-width: 800px; padding: 4px 20px 20px; }
.backup-connection { padding: 20px; border-bottom: 1px solid var(--line); }
.backup-connection p { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
#dropbox-connect:disabled, #backup-run:disabled { opacity: 0.5; cursor: not-allowed; }
#backup-status > p { font-weight: 650; }
#backup-status dl { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); margin: 20px 0; }
#backup-status dt, #backup-status dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#backup-status dt { color: var(--muted); padding-right: 16px; }
#backup-status [role="alert"] { color: var(--danger); }

#push-settings { padding: 0 20px 20px; max-width: 740px; }
#push-status { color: var(--muted); font-size: 14px; }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
#push-settings button:disabled { opacity: .5; cursor: not-allowed; }
#push-preferences { border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin: 20px 0 0; min-width: 0; }
#push-preferences legend { font-weight: 650; padding-right: 12px; }
#push-preferences > label { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; }
#push-preferences input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--accent); }
#push-preferences .push-quiet { margin-top: 24px; }
.push-times { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 20px; }
.push-times label { display: grid; gap: 6px; font-size: 13px; }
.push-times input { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px; font: inherit; font-size: 16px; }

:root {
  color-scheme: light;
  --canvas: #f2f4f3;
  --surface: #ffffff;
  --surface-soft: #f7f8f7;
  --ink: #171918;
  --muted: #68706c;
  --line: #d8ddda;
  --line-strong: #aeb7b2;
  --accent: #3f6f8f;
  --accent-strong: #315b77;
  --accent-soft: #eaf2f7;
  --turquoise: #158f8a;
  --turquoise-soft: #dff3f1;
  --representative: #75558b;
  --representative-soft: #f0e9f7;
  --green: #237a4b;
  --green-soft: #e3f3e9;
  --amber: #946200;
  --amber-soft: #fff1cd;
  --danger: #a22b33;
  --danger-soft: #fae7e8;
  --toast-background: #171918;
  --toast-text: #ffffff;
  --toast-error-background: #a22b33;
  --toast-error-text: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

.email-template-settings { padding: 24px; min-width: 0; }
.email-template-settings .settings-panel-header { padding: 0 0 20px; }
.email-template-settings .settings-panel-header h3 { margin: 0; }
#email-template-status { color: var(--muted); font-size: 12px; }
.email-template-choice { display: grid; gap: 8px; max-width: 540px; font-size: 13px; font-weight: 600; margin-bottom: 24px; }
.email-template-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.email-template-form, .email-template-preview { min-width: 0; }
.email-template-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; min-width: 0; }
.email-template-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.email-template-form textarea { resize: vertical; min-height: 320px; line-height: 1.6; font-family: inherit; font-size: 14px; }
.email-template-form input, .email-template-form textarea, .email-template-choice select { width: 100%; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); padding: 10px 12px; font-weight: 400; }
.email-template-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.email-template-placeholders { border-top: 1px solid var(--line); padding-top: 12px; }
.email-template-placeholders summary { cursor: pointer; font-size: 13px; font-weight: 600; }
#email-template-placeholders { display: grid; gap: 6px; margin-top: 12px; }
#email-template-placeholders button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 8px; text-align: left; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
#email-template-placeholders code { color: var(--accent); overflow-wrap: anywhere; }
#email-template-placeholders span { color: var(--muted); font-size: 11px; }
.email-template-error { color: var(--danger); background: var(--danger-soft); border-left: 3px solid var(--danger); padding: 12px; margin-bottom: 16px; font-size: 13px; overflow-wrap: anywhere; }
.email-template-preview { border-left: 1px solid var(--line); padding-left: 28px; }
.email-template-preview header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.email-template-preview h4 { margin: 0; font-size: 14px; }
.email-template-preview header span { color: var(--muted); font-size: 11px; }
.email-template-preview-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.email-template-preview-tabs button { padding: 6px 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; }
.email-template-preview-tabs button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
#email-template-preview-subject { display: block; font-size: 13px; overflow-wrap: anywhere; margin-bottom: 12px; }
.email-template-preview iframe { display: block; width: 100%; height: 540px; border: 1px solid var(--line); background: white; border-radius: 4px; }
.email-template-preview pre { margin: 0; padding: 16px; height: 540px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.6; border: 1px solid var(--line); border-radius: 4px; }
@media (max-width: 1150px) {
  .email-template-layout { grid-template-columns: minmax(0, 1fr); }
  .email-template-preview { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
}
@media (max-width: 700px) {
  .email-template-settings { padding: 16px; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #171b19;
  --surface: #222725;
  --surface-soft: #2a302d;
  --ink: #eef3f0;
  --muted: #aab3ae;
  --line: #3a423e;
  --line-strong: #53605a;
  --accent: #6da5c3;
  --accent-strong: #8abbd4;
  --accent-soft: #293d47;
  --turquoise: #58b8b1;
  --turquoise-soft: #213c39;
  --representative: #c2a4d5;
  --representative-soft: #352b3e;
  --green: #74c495;
  --green-soft: #20372a;
  --amber: #e0b956;
  --amber-soft: #3a321f;
  --danger: #ed9096;
  --danger-soft: #3d272a;
  --toast-background: #101412;
  --toast-text: #f7faf8;
  --toast-error-background: #8f3038;
  --toast-error-text: #ffffff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--canvas); color: var(--ink); font-size: 14px; letter-spacing: 0; }
button, input, select, textarea { color: inherit; font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}
[hidden] { display: none !important; }

.login-view { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 24px; }
.login-form { background: var(--surface); border: 1px solid var(--line); display: grid; gap: 18px; padding: 32px; width: min(100%, 390px); }
.login-form h1 { font-size: 25px; margin: 2px 0 0; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 750; margin: 0; text-transform: uppercase; }
.login-form label { display: grid; font-size: 13px; font-weight: 700; gap: 7px; }
.login-form .remember-login { align-items: center; cursor: pointer; display: flex; gap: 9px; }
.login-form .remember-login input { accent-color: var(--accent); min-height: auto; width: 17px; height: 17px; padding: 0; }
.login-form input, .filter-row input, .filter-row select {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; min-height: 42px; padding: 8px 11px;
}
.brand-logo { display: block; height: 46px; object-fit: contain; width: 46px; }
.primary-button, .secondary-button, .danger-button, .quiet-button {
  border-radius: 4px; font-weight: 750; min-height: 38px; padding: 8px 13px;
}
.primary-button { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.primary-button:hover { background: var(--accent-strong); }
.secondary-button { background: var(--surface); border: 1px solid var(--line-strong); }
.danger-button { background: var(--surface); border: 1px solid #dbaeb2; color: var(--danger); }
.quiet-button { background: transparent; border: 0; color: var(--muted); padding-inline: 4px; }
.form-error { background: var(--danger-soft); color: var(--danger); margin: 0; padding: 10px 12px; }

.admin-header { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr); height: 68px; padding: 0 24px; }
.brand-lockup, .admin-account { align-items: center; display: flex; gap: 12px; }
.brand-lockup p, .brand-lockup h1 { margin: 0; }
.brand-lockup p { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.brand-lockup h1 { font-size: 19px; }
.admin-account { color: var(--muted); font-size: 12px; gap: 14px; justify-self: end; }
html[data-theme="dark"] .brand-logo { filter: invert(1) grayscale(1) brightness(1.8); }
.admin-navigation { display: flex; justify-self: center; }
.admin-navigation a { align-items: center; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); display: flex; font-size: 12px; font-weight: 750; min-height: 68px; padding: 0 16px; text-decoration: none; }
.admin-navigation a:hover { color: var(--ink); }
.admin-navigation [data-view][aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.admin-nav-count { align-items: center; background: var(--accent); border-radius: 999px; color: #fff; display: inline-flex; font-size: 9px; font-weight: 850; height: 18px; justify-content: center; margin-left: 6px; min-width: 18px; padding: 0 5px; }
.admin-nav-count[hidden] { display: none; }
.admin-tools { align-items: center; display: flex; gap: 6px; }
.header-icon { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--muted); cursor: pointer; display: inline-flex; height: 38px; justify-content: center; padding: 0; text-decoration: none; width: 38px; }
.header-icon:hover { background: var(--surface-soft); color: var(--ink); }
.header-icon[aria-current="page"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); color: var(--accent); }
.header-icon svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 19px; }
.notification-menu { position: relative; }
.notification-trigger { position: relative; }
.notification-trigger > span { align-items: center; background: var(--accent); border: 2px solid var(--surface); border-radius: 999px; color: #fff; display: flex; font-size: 9px; font-weight: 850; height: 18px; justify-content: center; min-width: 18px; padding: 0 3px; position: absolute; right: -2px; top: -2px; }
.notification-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 16px 42px rgba(21, 31, 37, .2); max-height: min(560px, calc(100vh - 88px)); overflow: hidden; position: absolute; right: 0; top: 45px; width: min(390px, calc(100vw - 24px)); z-index: 20; }
.notification-panel > header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 13px 14px; }
.notification-panel > header button { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
#notification-list { max-height: 450px; overflow-y: auto; }
.notification-item { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) 34px; }
.notification-item:not(.is-read) { background: var(--accent-soft); }
.notification-content { background: transparent; border: 0; cursor: pointer; display: grid; gap: 4px; padding: 13px 14px; text-align: left; }
.notification-content strong { font-size: 13px; }
.notification-content span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.notification-content time { color: var(--muted); font-size: 10px; }
.notification-dismiss { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; }
#notification-empty { color: var(--muted); font-size: 12px; margin: 0; padding: 24px; text-align: center; }
.invoice-settings fieldset { border: 0; display: grid; gap: 14px; margin: 0; padding: 0; }
.invoice-settings legend { color: var(--muted); font-size: 11px; font-weight: 750; margin-bottom: 8px; }
.invoice-mode { display: flex; }
.invoice-mode label { cursor: pointer; }
.invoice-mode input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.invoice-mode span { border: 1px solid var(--line-strong); display: block; font-size: 11px; font-weight: 700; min-height: 32px; padding: 8px 10px; }
.invoice-mode label:first-child span { border-radius: 4px 0 0 4px; }
.invoice-mode label:last-child span { border-left: 0; border-radius: 0 4px 4px 0; }
.invoice-mode input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.invoice-mode input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.invoice-email-option { align-items: center; display: flex; font-size: 11px; font-weight: 700; gap: 7px; white-space: nowrap; }
.invoice-email-option input { accent-color: var(--accent); height: 16px; width: 16px; }
.invoice-email-option:has(input:disabled) { color: var(--muted); }
.admin-shell { display: grid; grid-template-columns: minmax(390px, 470px) minmax(0, 1fr); height: calc(100vh - 68px); overflow: hidden; }
.orders-pane { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.filters { border-bottom: 1px solid var(--line); padding: 18px 20px; }
.status-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 14px; }
.status-tabs button { background: var(--surface); border: 1px solid var(--line); border-right: 0; font-size: 11px; font-weight: 700; min-height: 34px; padding: 5px; }
.status-tabs button:first-child { border-radius: 4px 0 0 4px; }
.status-tabs button:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid var(--line); }
.status-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-row { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-row > input, .filter-row > .admin-search-control { grid-column: 1 / -1; }
.filter-row label { display: grid; gap: 4px; }
.filter-row label span { color: var(--muted); font-size: 10px; font-weight: 750; }
.admin-search-control { display: block; min-width: 0; position: relative; width: 100%; }
.admin-search-control input { padding-right: 42px !important; width: 100%; }
.admin-search-control input::-webkit-search-cancel-button { appearance: none; display: none; }
.admin-search-clear { align-items: center; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--muted); cursor: pointer; display: flex; font: inherit; font-size: 20px; height: calc(100% - 10px); justify-content: center; line-height: 1; padding: 0; position: absolute; right: 1px; top: 5px; width: 36px; }
.admin-search-clear:hover, .admin-search-clear:focus-visible { color: var(--ink); }
.cancelled-bulk-actions { align-items: center; background: var(--surface-soft); border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: auto 1fr auto; min-height: 54px; padding: 8px 20px; }
.bulk-select-all { align-items: center; cursor: pointer; display: flex; font-size: 12px; font-weight: 750; gap: 8px; }
.bulk-select-all input, .order-select input { accent-color: var(--accent); height: 17px; margin: 0; width: 17px; }
.cancelled-bulk-actions > span { color: var(--muted); font-size: 11px; }
.cancelled-bulk-actions .danger-button { min-height: 34px; }
.orders-meta { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 46px; padding: 0 20px; }
.orders-meta strong { font-size: 12px; }
.orders-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.order-row { background: var(--surface); border: 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; padding: 16px 20px; text-align: left; width: 100%; }
.order-select-row { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.order-select-row .order-row { border-bottom: 0; padding-left: 0; }
.order-select { align-items: flex-start; cursor: pointer; display: flex; justify-content: center; padding-top: 19px; }
.order-row:hover, .order-row[aria-current="true"] { background: var(--surface-soft); }
.order-row[aria-current="true"] { box-shadow: inset 4px 0 var(--turquoise); }
.order-row-top, .order-row-meta { align-items: center; display: flex; justify-content: space-between; gap: 10px; }
.order-row-number { font-size: 14px; font-weight: 800; }
.order-row-name { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.order-row-name-line, .production-item-name { align-items: center; display: inline-flex; gap: 6px; min-width: 0; }
.shipping-indicator { align-items: center; color: var(--accent); display: inline-flex; flex: 0 0 auto; justify-content: center; }
.shipping-indicator svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }
.order-row-meta { color: var(--muted); font-size: 11px; }
.order-row-tags, .order-tags-current { display: flex; flex-wrap: wrap; gap: 5px; }
.empty-list, .detail-empty { color: var(--muted); padding: 30px 20px; text-align: center; }

.detail-pane { min-width: 0; overflow-y: auto; }
.statistics-view, .production-view, .shipping-view, .handover-view, .settings-view { height: calc(100vh - 68px); overflow-y: auto; }
.statistics-header, .production-header, .settings-view > .statistics-header { align-items: end; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 26px 30px; }
.statistics-header h2, .production-header h2 { font-size: 25px; margin: 3px 0 0; }
.handover-view { background: var(--canvas); }
.handover-view-header { align-items: end; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 22px max(20px, calc((100% - 720px) / 2)); }
.handover-view-header h2 { font-size: 25px; margin: 3px 0 0; }
.handover-view-header strong { color: var(--accent); font-size: 13px; }
.handover-toolbar { background: var(--surface); border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(0, 3fr) minmax(170px, 2fr); margin: 0 auto; padding: 14px 20px 16px; position: sticky; top: 0; width: min(100%, 760px); z-index: 2; }
.handover-toolbar-field { display: grid; gap: 6px; min-width: 0; }
.handover-toolbar label { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.handover-toolbar input, .handover-toolbar select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; font: inherit; min-height: 44px; padding: 9px 12px; width: 100%; }
.handover-list { display: grid; gap: 10px; margin: 0 auto; padding: 16px 20px 42px; width: min(100%, 760px); }
.handover-group { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 6px; overflow: hidden; }
.handover-group-header { align-items: center; display: grid; gap: 12px; grid-template-columns: 32px minmax(0, 1fr) auto; padding: 12px 14px; }
.handover-group-header input { accent-color: var(--green); height: 24px; width: 24px; }
.handover-group-header div { display: grid; gap: 2px; }
.handover-group-header span { color: var(--accent); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.handover-group-header strong { font-size: 14px; }
.handover-group-header small { color: var(--muted); font-size: 11px; }
.handover-group-orders { display: grid; gap: 1px; }
.handover-group .handover-order { border: 0; border-radius: 0; }
.handover-group.is-pending .handover-group-orders { opacity: .55; }
.handover-order { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.handover-order.has-representative { border-color: var(--line-strong); }
.handover-representative-header { background: var(--surface-soft); border-bottom: 1px solid var(--line); display: grid; gap: 2px; padding: 12px 14px; }
.handover-representative-header span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.handover-representative-header strong { color: var(--ink); font-size: 14px; line-height: normal; overflow-wrap: anywhere; }
.handover-order.has-open-previews { box-shadow: 0 10px 28px rgba(24, 31, 28, 0.16); position: sticky; top: 82px; z-index: 3; }
.handover-order.is-pending { border-color: color-mix(in srgb, var(--green) 48%, var(--line)); }
.handover-order-main { display: grid; grid-template-columns: 54px minmax(0, 1fr) 62px; }
.handover-order.is-pending .handover-order-main { grid-template-columns: 54px minmax(0, 1fr); }
.handover-check { align-items: flex-start; cursor: pointer; display: flex; justify-content: center; min-height: 100%; padding-top: 21px; }
.handover-check.is-grouped { box-shadow: inset 3px 0 var(--accent); }
.handover-check input { accent-color: var(--green); cursor: pointer; height: 24px; margin: 0; width: 24px; }
.handover-order-content { border-left: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; padding: 16px 18px; }
.handover-order-heading { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; }
.handover-order-heading strong { font-size: 16px; overflow-wrap: anywhere; }
.handover-order-heading a { color: var(--accent); flex: 0 0 auto; font-size: 11px; font-weight: 800; text-decoration: none; }
.handover-order-heading a:hover { text-decoration: underline; }
.handover-item-count { color: var(--muted); font-size: 11px; margin: 0; }
.handover-order-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.handover-order-tags span { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; color: var(--accent); font-size: 10px; font-weight: 800; padding: 3px 8px; }
.handover-item-names { display: flex; flex-wrap: wrap; gap: 4px 13px; list-style: none; margin: 3px 0 0; padding: 0; }
.handover-item-names li { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.handover-item-names b { color: var(--accent); }
.handover-order-note { background: var(--amber-soft); border-left: 3px solid var(--amber); display: grid; gap: 2px; margin-top: 5px; padding: 8px 10px; }
.handover-order-note strong { color: var(--text); font-size: 10px; text-transform: uppercase; }
.handover-order-note p { color: var(--text); font-size: 12px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.handover-group-organization { align-items: center; background: var(--surface-soft); border-top: 1px solid var(--line); display: flex; gap: 18px; justify-content: space-between; padding: 12px 24px; }
.handover-group-organization > div:first-child { display: grid; gap: 2px; }
.handover-group-organization > div:first-child span { color: var(--muted); font-size: 11px; }
.handover-group-organization-heading { align-items: center; display: flex !important; flex: 1; justify-content: space-between; }
.handover-group-organization-heading > div { display: grid; gap: 2px; }
.handover-group-organization-heading > span { color: var(--accent) !important; font-weight: 800; }
.handover-group-member-list { display: flex !important; flex: 2; flex-wrap: wrap; gap: 6px; }
.handover-group-member-list a { background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; gap: 1px; min-width: 140px; padding: 7px 9px; text-decoration: none; }
.handover-group-member-list a.is-collector { border-color: var(--accent); }
.handover-group-member-list span, .handover-group-member-list small { color: var(--muted); font-size: 9px; }
.handover-group-picker { display: grid; gap: 12px; padding: 20px; }
.handover-group-picker > p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; }
.handover-group-picker input { border: 1px solid var(--line-strong); border-radius: 4px; font: inherit; min-height: 44px; padding: 9px 12px; }
#handover-group-candidates { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
#handover-group-candidates button { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; display: flex; font: inherit; justify-content: space-between; padding: 10px 12px; text-align: left; }
#handover-group-candidates button:hover { background: var(--accent-soft); border-color: var(--accent); }
#handover-group-candidates button span:first-child { display: grid; gap: 2px; }
#handover-group-candidates small, #handover-group-candidates button > span:last-child { color: var(--muted); font-size: 10px; }
.handover-priority { color: var(--accent); display: block; font-size: 10px; font-weight: 750; margin-top: 3px; }
.handover-priority.completes { color: var(--green); }
.production-item.is-notification-focus { animation: notification-focus 1.8s ease-out; outline: 3px solid var(--accent); outline-offset: -3px; }
@keyframes notification-focus { from { background: var(--accent-soft); } to { background: transparent; } }
.handover-preview-toggle { align-items: center; align-self: stretch; background: var(--surface); border: 0; border-left: 1px solid var(--line); border-radius: 0; color: var(--accent); cursor: pointer; display: grid; height: auto; justify-items: center; margin: 0; min-height: 100%; padding: 10px; position: relative; width: 100%; }
.handover-preview-toggle:hover { background: var(--accent-soft); }
.handover-preview-toggle[aria-expanded="true"] { background: var(--accent); color: #fff; }
.handover-preview-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; }
.handover-preview-toggle svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 22px; }
.handover-preview-toggle span { align-items: center; background: var(--surface); border: 1px solid currentColor; border-radius: 999px; color: var(--accent); display: flex; font-size: 9px; font-weight: 850; height: 17px; justify-content: center; min-width: 17px; padding: 0 3px; position: absolute; right: 7px; top: 10px; }
.handover-previews { border-top: 1px solid var(--line); }
.handover-preview-scroll { max-height: min(48vh, 430px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.handover-preview-grid { background: var(--surface-soft); display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; }
.handover-preview-grid figure { background: var(--surface); border: 1px solid var(--line); margin: 0; min-width: 0; }
.handover-preview-grid img, .handover-preview-missing { aspect-ratio: 16 / 9; display: block; object-fit: contain; width: 100%; }
.handover-preview-missing { align-items: center; color: var(--muted); display: flex; font-size: 11px; justify-content: center; }
.handover-preview-grid figcaption { border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; padding: 7px 9px; }
.handover-pending { align-items: center; background: var(--green-soft); border-top: 1px solid color-mix(in srgb, var(--green) 24%, var(--line)); color: var(--green); display: flex; font-size: 11px; font-weight: 750; justify-content: space-between; min-height: 44px; padding: 7px 12px 7px 54px; }
.handover-pending button { background: var(--surface); border: 1px solid color-mix(in srgb, var(--green) 38%, var(--line)); border-radius: 4px; color: var(--green); font-weight: 750; min-height: 32px; padding: 5px 9px; }
.handover-empty { color: var(--muted); margin: 0 auto; padding: 48px 20px; text-align: center; width: min(100%, 760px); }
.shipping-view { background: var(--canvas); }
.shipping-view-header { align-items: end; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 22px max(24px, calc((100% - 1180px) / 2)); }
.shipping-view-header h2 { font-size: 25px; margin: 3px 0 0; }
.shipping-view-header strong { color: var(--accent); font-size: 13px; }
.shipping-workspace { display: grid; gap: 16px; grid-template-columns: 300px minmax(0, 1fr); margin: 0 auto; padding: 18px 24px 48px; width: min(100%, 1228px); }
.shipping-main-column { align-content: start; display: grid; gap: 16px; min-width: 0; }
.shipping-sheet-panel, .shipping-orders-panel, .shipping-runs-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.shipping-sheet-panel { align-self: start; display: grid; gap: 16px; padding: 18px; position: sticky; top: 18px; }
.shipping-sheet-copy { align-items: start; display: flex; gap: 12px; justify-content: space-between; }
.shipping-sheet-copy h3, .shipping-orders-panel h3, .shipping-runs-panel h3 { font-size: 16px; margin: 0; }
.shipping-sheet-copy p, .shipping-orders-panel header p, .shipping-runs-panel header p { color: var(--muted); font-size: 11px; margin: 3px 0 0; }
.shipping-mode { background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: 999px; color: var(--amber); display: inline-flex; font-size: 9px; font-weight: 850; margin-bottom: 8px; padding: 3px 7px; text-transform: uppercase; }
.shipping-mode[hidden] { display: none; }
.shipping-sheet-start { color: var(--accent); font-size: 10px; padding-top: 4px; white-space: nowrap; }
.shipping-sheet-preview { aspect-ratio: 210 / 297; background: #fff; border: 1px solid var(--line-strong); display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, 1fr); padding: 8px 0 4px; }
.shipping-sheet-label { align-items: center; background: #fff; border: 1px solid #d8d8d8; border-radius: 0; color: #818181; cursor: pointer; display: flex; flex-direction: column; font: inherit; justify-content: center; min-height: 0; min-width: 0; padding: 0; position: relative; }
.shipping-sheet-label b { font-size: 10px; left: 4px; position: absolute; top: 3px; }
.shipping-sheet-label small { color: var(--accent); font-size: 8px; font-weight: 800; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shipping-sheet-label:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); z-index: 1; }
.shipping-sheet-label:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 2; }
.shipping-sheet-label.is-used { background: repeating-linear-gradient(135deg, #e7e7e7 0, #e7e7e7 5px, #f7f7f7 5px, #f7f7f7 10px); color: #aaa; }
.shipping-sheet-label.is-assigned { background: #e9f4f8; border-color: #8eb8ca; }
.shipping-sheet-label.is-start { box-shadow: inset 0 0 0 3px var(--accent); color: var(--accent); z-index: 1; }
.shipping-sheet-label.is-start b { background: var(--accent); border-radius: 999px; color: #fff; height: 18px; left: 5px; line-height: 18px; text-align: center; top: 5px; width: 18px; }
.shipping-create { width: 100%; }
.shipping-create-note { color: var(--muted); font-size: 10px; line-height: 1.4; margin: -7px 0 0; text-align: center; }
.shipping-orders-panel, .shipping-runs-panel { min-width: 0; overflow: hidden; }
.shipping-orders-panel > header, .shipping-runs-panel > header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 16px 18px; }
.shipping-order-list { display: grid; }
.shipping-order { border-bottom: 1px solid var(--line); display: grid; gap: 8px; padding: 15px 18px; }
.shipping-order:last-child { border-bottom: 0; }
.shipping-order.has-error { box-shadow: inset 3px 0 var(--danger); }
.shipping-order-main { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.shipping-order-main > div { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; }
.shipping-order-main .shipping-order-identity { align-items: center; flex-wrap: nowrap; }
.shipping-order-identity > div { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; }
.shipping-order-main .shipping-order-controls { align-items: center; flex-wrap: nowrap; gap: 7px; }
.shipping-pack-progress, .shipping-order-select { align-items: center; border: 1px solid var(--line-strong); border-radius: 4px; display: flex; flex: 0 0 auto; font-size: 10px; font-weight: 750; min-height: 34px; padding: 6px 9px; }
.shipping-pack-progress { background: var(--surface-soft); color: var(--muted); }
.shipping-pack-progress.is-complete { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 34%, var(--line)); color: var(--green); }
.shipping-order-select { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); color: var(--accent); }
.shipping-order-select { cursor: pointer; gap: 6px; }
.shipping-order-select:hover { border-color: var(--accent); }
.shipping-order-select input { accent-color: var(--accent); height: 16px; margin: 0; width: 16px; }
.shipping-order-main strong { font-size: 14px; }
.shipping-order-main a { color: var(--accent); font-size: 11px; font-weight: 800; text-decoration: none; }
.shipping-order-main .shipping-postage { font-size: 12px; font-weight: 800; margin-left: 4px; white-space: nowrap; }
.shipping-order > p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; }
.shipping-order-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.shipping-order-meta span, .shipping-order-meta button { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: inherit; font-size: 9px; font-weight: 750; padding: 3px 7px; }
.shipping-order-meta button { cursor: pointer; }
.shipping-order-meta button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.shipping-order-meta button[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.shipping-order > .handover-previews { margin: 7px -18px -15px; }
.shipping-position-previews .handover-preview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shipping-position { transition: border-color .15s ease, opacity .15s ease; }
.shipping-position.is-packed { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); }
.shipping-position.is-packed img { opacity: .68; }
.handover-preview-grid .shipping-position figcaption { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.shipping-position figcaption > span { display: grid; gap: 2px; min-width: 0; }
.shipping-position figcaption small { color: var(--muted); font-size: 9px; }
.shipping-position-packed { align-items: center; cursor: pointer; display: flex; flex: 0 0 auto; gap: 6px; }
.shipping-position-packed input { accent-color: var(--green); height: 18px; margin: 0; width: 18px; }
.shipping-position-packed span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.shipping-position.is-packed .shipping-position-packed span { color: var(--green); }
.shipping-address-error { color: var(--danger); font-size: 10px; }
.shipping-run-list { display: grid; }
.shipping-run { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding: 12px 18px; }
.shipping-run:last-child { border-bottom: 0; }
.shipping-run > div { display: grid; gap: 2px; }
.shipping-run strong { font-size: 12px; }
.shipping-run span { color: var(--muted); font-size: 10px; }
.shipping-run .secondary-button { min-height: 34px; padding: 6px 10px; text-decoration: none; }
.shipping-run .shipping-run-actions { align-items: center; display: flex; gap: 6px; }
.shipping-run-delete { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); cursor: pointer; display: inline-flex; height: 34px; justify-content: center; padding: 0; width: 34px; }
.shipping-run-delete:hover, .shipping-run-delete:focus-visible { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.shipping-run-delete:disabled { cursor: wait; opacity: .5; }
.shipping-run-delete svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.shipping-label-file-deleted { color: var(--muted); font-size: 10px; font-weight: 750; }
.shipping-empty { color: var(--muted); font-size: 12px; margin: 0; padding: 42px 18px; text-align: center; }
@media (max-width: 820px) {
  .shipping-view { height: auto; min-height: calc(100vh - 68px); }
  .shipping-view-header { padding: 18px 16px; }
  .shipping-workspace { grid-template-columns: 1fr; padding: 14px 12px 36px; }
  .shipping-sheet-panel { position: static; }
  .shipping-sheet-preview { margin: 0 auto; max-width: 270px; width: 100%; }
  .shipping-main-column { grid-column: 1; }
  .shipping-position-previews .handover-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.period-tabs { display: flex; }
.statistics-period-control { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding: 12px 20px; }
.period-tabs button { background: var(--surface); border: 1px solid var(--line-strong); border-right: 0; font-size: 12px; font-weight: 700; min-height: 36px; padding: 7px 12px; }
.period-tabs button:first-child { border-radius: 4px 0 0 4px; }
.period-tabs button:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid var(--line-strong); }
.period-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.custom-period { align-items: end; display: flex; gap: 8px; }
.custom-period[hidden] { display: none; }
.custom-period label { color: var(--muted); display: grid; font-size: 10px; font-weight: 750; gap: 4px; text-transform: uppercase; }
.custom-period input { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); font: inherit; min-height: 36px; padding: 6px 8px; }
.custom-period .secondary-button { font-size: 11px; min-height: 36px; padding: 6px 11px; }
.statistics-content { margin: 0 auto; min-width: 0; max-width: 1280px; padding: 28px 30px 48px; width: 100%; }
.settings-statistics-content { margin: 0; max-width: none; padding: 0; }
.statistics-loading { color: var(--muted); padding: 35px 0; text-align: center; }
.metric-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; }
.metric { background: var(--surface); border: 1px solid var(--line); display: grid; min-width: 0; padding: 20px; }
.metric span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.metric strong { font-size: 28px; margin-top: 12px; overflow-wrap: anywhere; }
.metric small { color: var(--muted); font-size: 11px; margin-top: 7px; }
.cost-settings-panel { margin-bottom: 28px; }
.cost-settings-form { align-items: end; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(150px, 1fr)); padding: 18px 20px 20px; }
.cost-settings-form > label { color: var(--muted); display: grid; font-size: 10px; font-weight: 750; gap: 6px; text-transform: uppercase; }
.money-input { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.money-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.money-input input { background: transparent; border: 0; color: var(--ink); font: inherit; min-height: 38px; min-width: 0; outline: 0; padding: 7px 10px; width: 100%; }
.money-input b { color: var(--muted); font-size: 12px; padding: 0 10px; }
.cost-settings-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; }
.cost-settings-actions button { min-height: 40px; }
.cost-settings-actions [role="status"] { color: var(--muted); font-size: 11px; }
.revenue-chart-section { background: var(--surface); border: 1px solid var(--line); margin-bottom: 28px; min-width: 0; }
.revenue-chart-title { align-items: end; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 18px 20px; }
.revenue-chart-title h3 { font-size: 15px; margin: 0 0 4px; }
.revenue-chart-title p { color: var(--muted); font-size: 11px; margin: 0; }
.revenue-chart-title > strong { color: var(--muted); font-size: 11px; white-space: nowrap; }
.revenue-chart-scroll { overflow-x: auto; }
.revenue-chart { min-height: 286px; min-width: 0; padding: 8px 12px 0; }
.revenue-chart svg { display: block; height: 286px; overflow: visible; width: 100%; }
.revenue-grid line { stroke: var(--line); stroke-width: 1; }
.revenue-grid text, .revenue-axis-date { fill: var(--muted); font-size: 10px; }
.revenue-area { fill: var(--accent-soft); }
.revenue-line { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.revenue-point > circle:first-child { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.revenue-point-hit { fill: transparent; outline: none; }
.revenue-point:hover > circle:first-child,
.revenue-point:focus-within > circle:first-child { fill: var(--accent); stroke-width: 4; }
.breakdown-grid { background: var(--line); display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pwyw-comparison { margin-bottom: 28px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.pwyw-comparison h3 { font-size: 16px; margin: 0 0 6px; }
.pwyw-comparison p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 16px; }
.pwyw-table-scroll { overflow-x: auto; margin: 16px 0; }
.pwyw-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pwyw-table th, .pwyw-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.pwyw-table th:first-child { text-align: left; width: 40%; }
.pwyw-table thead { background: var(--surface-soft); }
.pwyw-table th small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 5px; }
.pwyw-table tbody th { font-weight: 400; }
.pwyw-table tbody tr:nth-child(4) { background: var(--accent-soft); color: var(--ink); font-weight: 750; }
.pwyw-baseline { border-top: 1px solid var(--line); padding-top: 16px; }
.pwyw-baseline summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.breakdown-section { background: var(--surface); min-width: 0; padding: 24px; }
.breakdown-section.full { grid-column: 1 / -1; }
.ranking-list { display: grid; gap: 16px; }
.ranking-row { display: grid; gap: 7px; }
.ranking-label { align-items: baseline; display: flex; gap: 14px; justify-content: space-between; }
.ranking-label strong { font-size: 12px; overflow-wrap: anywhere; }
.ranking-label span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ranking-track { background: var(--surface-soft); height: 8px; overflow: hidden; }
.ranking-track span { background: var(--turquoise); display: block; height: 100%; }
.ranking-empty { color: var(--muted); font-size: 12px; }
.production-content { display: grid; gap: 24px; margin: 0 auto; max-width: 1180px; padding: 28px 30px 48px; }
.production-header-actions { align-items: center; display: flex; gap: 12px; }
.production-printed-toggle { align-items: center; cursor: pointer; display: flex; font-size: 11px; font-weight: 750; gap: 8px; }
.production-printed-toggle input { accent-color: var(--accent); height: 17px; margin: 0; width: 17px; }
.ams-production-panel { background: var(--surface); border: 1px solid var(--line); }
.ams-production-panel > header { align-items: center; display: grid; gap: 18px; grid-template-columns: auto auto minmax(120px, 1fr) auto; padding: 11px 14px; }
.ams-production-title { min-width: 92px; }
.ams-production-panel h3 { font-size: 16px; margin: 1px 0 0; }
.ams-filter-toggle { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 4px; padding: 7px 9px; }
.ams-slot-grid { display: grid; gap: 7px; grid-template-columns: repeat(4, 44px); }
.ams-slot-field { display: block; height: 44px; position: relative; width: 44px; }
.ams-slot-number { align-items: center; background: var(--ink); border-radius: 50%; color: var(--surface); display: flex; font-size: 8px; font-weight: 800; height: 15px; justify-content: center; left: -4px; pointer-events: none; position: absolute; top: -4px; width: 15px; z-index: 2; }
.ams-slot-control { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer; display: grid; height: 44px; justify-items: center; padding: 0; width: 44px; }
.ams-slot-control:hover { background: var(--surface-soft); border-color: var(--accent); }
.ams-slot-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ams-slot-swatch { background: var(--swatch); border: 1px solid rgba(0, 0, 0, .18); border-radius: 50%; display: block; flex: 0 0 auto; height: 30px; pointer-events: none; width: 30px; }
.ams-slot-swatch.checkerboard { background-color: #fff; background-image: linear-gradient(45deg, #c9ced0 25%, transparent 25%), linear-gradient(-45deg, #c9ced0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c9ced0 75%), linear-gradient(-45deg, transparent 75%, #c9ced0 75%); background-position: 0 0, 0 5px, 5px -5px, -5px 0; background-size: 10px 10px; }
.ams-color-menu { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(25, 31, 32, .16); display: grid; gap: 5px; grid-template-columns: repeat(4, 34px); left: 0; padding: 7px; position: absolute; top: calc(100% + 6px); z-index: 20; }
.ams-color-menu[hidden] { display: none; }
.ams-color-option { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; display: flex; height: 34px; justify-content: center; padding: 0; width: 34px; }
.ams-color-option:hover { background: var(--surface-soft); border-color: var(--line-strong); }
.ams-color-option.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ams-color-option .ams-slot-swatch { height: 24px; width: 24px; }
.ams-production-summary { display: grid; gap: 1px; }
.ams-production-summary span { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.ams-production-summary strong { font-size: 13px; }
.ams-production-summary-row { align-items: center; display: flex; gap: 9px; }
.ams-optimize-button { align-items: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 4px; color: var(--ink); cursor: pointer; display: inline-flex; font-size: 10px; font-weight: 750; gap: 5px; min-height: 28px; padding: 5px 8px; white-space: nowrap; }
.ams-optimize-button:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border-color: var(--accent); }
.ams-optimize-button:disabled { cursor: default; opacity: .45; }
.ams-optimize-button svg { fill: currentColor; height: 13px; width: 13px; }
.ams-optimize-button span { color: inherit; font-size: inherit; text-transform: none; }
.ams-production-insight { background: var(--surface-soft); border-top: 1px solid var(--line); padding: 8px 14px; }
.ams-recommendations { align-items: center; display: flex; gap: 7px; min-width: 0; overflow-x: auto; }
.ams-recommendations > p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; }
.ams-recommendation-heading { align-items: baseline; display: grid; flex: 0 0 auto; gap: 1px; margin-right: 3px; }
.ams-recommendation-heading span { font-size: 11px; font-weight: 800; }
.ams-recommendation-heading strong { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.ams-recommendation { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 0; color: var(--ink); cursor: pointer; display: grid; flex: 0 0 auto; gap: 7px; grid-template-columns: auto minmax(0, 1fr); min-width: 210px; padding: 6px 8px; text-align: left; }
.ams-recommendation:hover { background: var(--accent-soft); border-color: var(--accent); }
.ams-recommendation.best { border-left: 3px solid var(--accent); }
.ams-recommendation > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ams-recommendation strong { font-size: 11px; overflow-wrap: anywhere; }
.ams-recommendation small { color: var(--muted); font-size: 9px; }
.ams-recommendation .ams-slot-swatch { height: 20px; width: 20px; }
.production-section { min-width: 0; }
.production-section-title { align-items: end; display: flex; justify-content: space-between; margin-bottom: 14px; }
.production-section-title h3 { font-size: 16px; margin: 0 0 4px; }
.production-section-title p { color: var(--muted); font-size: 12px; margin: 0; }
.production-mode { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); display: inline-flex; padding: 3px; }
.production-mode button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 750; min-height: 31px; padding: 6px 10px; }
.production-mode button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--ink); }
.production-color-set { align-items: center; display: flex; gap: 5px; min-width: 0; }
.production-color-set strong { font-size: 13px; margin-left: 4px; }
.production-item-colors { align-items: center; color: var(--muted); display: inline-flex; font-size: 9px; gap: 4px; }
.production-item-colors .production-swatch { height: 12px; width: 12px; }
.production-groups, .production-batches { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.production-group, .production-batch { background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.production-batch.ams-ready { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.production-batch.ams-ready .production-card-header { background: var(--accent-soft); }
.production-batch-header-status { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.ams-ready-badge { background: var(--accent); border-radius: 999px; color: #fff; font-size: 9px; font-weight: 800; padding: 5px 8px; text-transform: uppercase; }
.batch-refresh-badge { background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); border-radius: 999px; color: var(--ink); font-size: 9px; font-weight: 800; padding: 5px 8px; text-transform: uppercase; }
.production-group[data-production-group="ams"] { grid-column: 1 / -1; }
.production-group[data-production-group="ams"] .production-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.production-group[data-production-group="ams"] .production-item:nth-child(odd) { border-right: 1px solid var(--line); }
.production-card-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; min-height: 54px; padding: 11px 14px; }
.production-card-header > span, .batch-meta { color: var(--muted); font-size: 11px; }
.production-progress { display: grid; flex: 0 1 230px; gap: 5px; min-width: 150px; }
.production-progress-label { align-items: center; display: flex; gap: 8px; justify-content: space-between; min-width: 0; }
.production-progress-label span { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.production-progress-label strong { color: var(--ink); font-size: 11px; }
.production-progress-track { background: var(--surface-soft); border: 1px solid var(--line); height: 7px; overflow: hidden; }
.production-progress-track > span { background: var(--turquoise); display: block; height: 100%; transition: width .25s ease; }
.production-progress.stalled .production-progress-label span { color: var(--danger); font-weight: 700; }
.production-progress.stalled .production-progress-track > span { background: var(--danger); }
.color-pair { align-items: center; display: flex; gap: 7px; min-width: 0; }
.color-pair strong { font-size: 13px; margin-left: 3px; overflow-wrap: anywhere; }
.production-swatch { background: var(--swatch); border: 1px solid var(--line-strong); display: block; flex: 0 0 auto; height: 19px; width: 19px; }
.production-select-all { align-items: center; background: var(--surface-soft); border-bottom: 1px solid var(--line); cursor: pointer; display: flex; font-size: 11px; font-weight: 700; gap: 9px; min-height: 40px; padding: 8px 14px; }
.production-select-all input, .production-item input { accent-color: var(--turquoise); height: 17px; margin: 0; width: 17px; }
.production-items { display: grid; }
.production-item { align-items: center; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 58px; padding: 9px 14px; }
.production-item:hover { background: var(--surface-soft); }
.production-item-description { align-items: center; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr); min-width: 0; }
.production-item-description > span { display: grid; gap: 3px; min-width: 0; }
.production-item-description > span > strong { font-size: 12px; overflow-wrap: anywhere; }
.production-item-name > strong { font-size: 12px; overflow-wrap: anywhere; }
.production-item-description a { color: var(--accent); font-size: 10px; font-weight: 750; justify-self: start; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
.production-item-description a:hover { text-decoration-color: var(--accent); }
.production-order-preview { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 14px 36px rgba(13, 22, 27, .24); padding: 6px; pointer-events: none; position: fixed; width: 300px; z-index: 80; }
.production-order-preview[hidden] { display: none; }
.production-order-preview img { aspect-ratio: 16 / 9; background: var(--surface-soft); display: block; object-fit: contain; width: 100%; }
.production-quantity { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 4px; display: inline-flex; font-size: 11px; height: 28px; justify-content: center; min-width: 31px; padding: 0 6px; }
.production-quantity.multiple { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 13px; }
.production-print-toggle { align-items: center; cursor: pointer; display: flex; font-size: 10px; font-weight: 750; gap: 6px; white-space: nowrap; }
.production-print-toggle input { accent-color: var(--accent); height: 17px; margin: 0; width: 17px; }
.production-print-pending { align-items: center; display: flex; flex-wrap: wrap; font-size: 10px; gap: 5px 8px; justify-content: flex-end; }
.production-print-pending > span { color: var(--muted); font-weight: 700; }
.production-print-pending button { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 800; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.production-item.pending-hide, .batch-production-item.pending-hide { background: var(--surface-soft); opacity: .72; }
.production-card-footer { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 12px 14px; }
.production-card-footer > span { color: var(--muted); font-size: 11px; }
.production-card-footer button:disabled { cursor: default; opacity: .45; }
.batch-meta { display: flex; justify-content: space-between; padding: 11px 14px 0; }
.batch-items { display: grid; margin: 8px 14px 12px; }
.batch-production-item { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; min-height: 50px; padding: 7px 0; }
.batch-production-item:last-child { border-bottom: 0; }
.batch-item-actions { align-items: center; display: flex; gap: 9px; }
.batch-icon-button { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; padding: 0; width: 32px; }
.batch-icon-button:hover { border-color: var(--accent); color: var(--accent); }
.batch-icon-button.emphasized { background: var(--accent); border-color: var(--accent); color: #fff; }
.batch-icon-button:disabled { cursor: wait; opacity: .5; }
.batch-icon-button svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.production-batch > .error-text, .production-batch > .line-actions { margin: 0 14px 14px; }
.production-empty { background: var(--surface); border: 1px solid var(--line); color: var(--muted); margin: 0; padding: 22px; text-align: center; }
.detail-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 24px 30px; }
.detail-title-row { align-items: flex-start; display: flex; justify-content: space-between; gap: 20px; }
.detail-header h2 { font-size: 25px; margin: 0 0 6px; }
.detail-header p { color: var(--muted); margin: 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.detail-actions > .status { align-items: center; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); display: inline-flex; min-height: 38px; padding: 0 14px; }
.delivery-banner { align-items: center; border-left: 5px solid var(--turquoise); display: flex; font-size: 16px; font-weight: 800; gap: 14px; justify-content: space-between; margin-top: 20px; padding: 9px 10px 9px 16px; }
.delivery-banner.shipping { background: var(--turquoise-soft); }
.delivery-banner.handover { background: var(--amber-soft); border-color: var(--amber); }
.delivery-banner.digital { background: var(--surface-soft); border-color: var(--line-strong); }
.delivery-method-button { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 12px; gap: 7px; min-height: 36px; padding: 7px 10px; }
.delivery-method-button:hover { border-color: var(--accent); color: var(--accent); }
.delivery-method-button svg { height: 15px; width: 15px; }
.detail-grid { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-section { border-bottom: 1px solid var(--line); min-width: 0; padding: 25px 30px; }
.detail-section:nth-child(odd) { border-right: 1px solid var(--line); }
.detail-section.full { border-right: 0; grid-column: 1 / -1; }
.section-title { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 16px; }
.section-title h3 { font-size: 14px; margin: 0; }
.section-title span { color: var(--muted); font-size: 11px; }
.order-items-tools { align-items: center; display: flex; gap: 10px; }
.compact-button { border: 1px solid var(--line); border-radius: 4px; color: var(--accent); font-size: 10px; min-height: 30px; padding: 5px 9px; }
.compact-button:hover { background: var(--accent-soft); border-color: var(--accent); }
.all-items-complete { background: var(--green-soft); border-left: 3px solid var(--green); color: var(--green) !important; font-size: 12px; font-weight: 700; margin: 0 0 14px; padding: 10px 12px; }
.section-icon-button { align-items: center; background: transparent; border: 0; border-radius: 4px; color: var(--muted); display: inline-flex; height: 30px; justify-content: center; margin: -7px -5px -7px 0; padding: 0; width: 30px; }
.section-icon-button:hover { background: var(--accent-soft); color: var(--accent); }
.section-icon-button svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.data-list { display: grid; gap: 10px; margin: 0; }
.data-list div { display: grid; gap: 3px; grid-template-columns: 120px minmax(0, 1fr); }
.data-list dt { color: var(--muted); }
.data-list dd { margin: 0; overflow-wrap: anywhere; }
.editable-value { align-items: center; display: flex; gap: 7px; }
.editable-address { min-height: 30px; padding-right: 34px; position: relative; }
.inline-admin-editor { position: relative; }
.inline-admin-editor summary { align-items: center; border-radius: 4px; color: var(--muted); cursor: pointer; display: inline-flex; height: 27px; justify-content: center; list-style: none; width: 27px; }
.inline-admin-editor summary::-webkit-details-marker { display: none; }
.inline-admin-editor summary:hover, .inline-admin-editor[open] summary { background: var(--accent-soft); color: var(--accent); }
.inline-admin-editor summary svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.inline-admin-editor form { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 12px 32px rgba(23, 25, 24, .14); display: grid; gap: 10px; left: 0; margin-top: 7px; padding: 14px; position: absolute; top: 100%; width: min(360px, calc(100vw - 36px)); z-index: 6; }
.inline-admin-editor label { display: grid; font-size: 11px; font-weight: 700; gap: 5px; }
.inline-admin-editor input { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; min-height: 38px; padding: 8px 10px; }
.inline-admin-editor button { justify-self: start; }
.address-inline-editor { position: absolute; right: 0; top: -5px; }
.address-inline-editor form { left: auto; right: 0; }
.address-editor { grid-template-columns: minmax(90px, .4fr) minmax(0, 1fr); }
.address-editor .full { grid-column: 1 / -1; }
.admin-note-section { background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface)); }
.internal-organization { max-width: 960px; }
.internal-organization-title { align-items: center; margin-bottom: 18px; }
.handover-representatives-editor { border-bottom: 1px solid var(--line); display: grid; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; }
.handover-representatives-heading > div { display: grid; gap: 2px; }
.handover-representatives-heading strong { font-size: 12px; }
.handover-representatives-heading span, .handover-representatives-empty { color: var(--muted); font-size: 11px; }
.handover-representatives-empty { margin: 0; }
.handover-representative-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.handover-representative-chips > span { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; padding: 5px 7px 5px 10px; }
.handover-representative-chips button { background: transparent; border: 0; color: inherit; font-size: 17px; height: 20px; line-height: 1; padding: 0; width: 20px; }
.handover-representative-form { display: grid; gap: 8px; grid-template-columns: minmax(180px, 320px) auto; justify-content: start; }
.handover-representative-form input { border: 1px solid var(--line-strong); border-radius: 4px; font: inherit; min-height: 38px; padding: 8px 10px; }
.handover-representative-picker, .handover-representative-picker label { display: grid; gap: 7px; }
.handover-representative-picker label > span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.handover-representative-picker input { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; font: inherit; min-height: 39px; padding: 8px 10px; }
.handover-representative-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; max-height: 150px; overflow-y: auto; }
.handover-representative-options button { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 700; gap: 6px; min-height: 29px; padding: 5px 9px; }
.handover-representative-options button[aria-pressed="true"] { background: var(--surface-soft); border-color: var(--line-strong); color: var(--ink); }
.handover-representative-options button b { font-size: 11px; }
.handover-representative-options p, .handover-representative-picker small { color: var(--muted); font-size: 11px; margin: 0; }
.handover-representative-picker small { display: block; line-height: 1.4; margin-top: 3px; }
.internal-only { align-items: center; display: inline-flex; gap: 6px; }
.internal-only svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }
.order-tags-editor { border-bottom: 1px solid var(--line); margin-bottom: 18px; padding-bottom: 18px; position: relative; }
.tag-editor-label { color: var(--muted); font-size: 10px; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; }
.order-tags-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.order-tags-current { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 999px; color: var(--accent); font-size: 10px; font-weight: 750; padding: 3px 7px; }
button.tag-chip { align-items: center; cursor: pointer; display: inline-flex; gap: 6px; min-height: 29px; padding: 5px 7px 5px 10px; }
button.tag-chip b { align-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 50%; display: inline-flex; font-size: 12px; font-weight: 600; height: 17px; justify-content: center; width: 17px; }
button.tag-chip:hover b { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tag-add-button, .note-add-button { align-items: center; background: transparent; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--accent); display: inline-flex; font-size: 11px; font-weight: 750; gap: 6px; min-height: 29px; padding: 5px 10px; }
.tag-add-button:hover, .note-add-button:hover { background: var(--surface); border-style: solid; }
.tag-add-button svg, .note-add-button svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 14px; }
.tag-picker { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 12px 32px rgba(23, 25, 24, .14); left: 0; margin-top: 9px; padding: 14px; position: absolute; top: 100%; width: min(390px, 100%); z-index: 5; }
.tag-picker form, .tag-picker label { display: grid; gap: 7px; }
.tag-picker label > span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.tag-picker input { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; min-height: 39px; padding: 8px 10px; }
.tag-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; max-height: 150px; overflow-y: auto; }
.tag-options button { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 700; gap: 6px; min-height: 29px; padding: 5px 9px; }
.tag-options button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tag-options button b { font-size: 11px; }
.tag-options p, .tag-empty, .tag-picker small { color: var(--muted); font-size: 11px; margin: 0; }
.tag-picker small { display: block; line-height: 1.4; margin-top: 10px; }
.note-editor { max-width: 960px; }
.note-editor-label { align-items: center; display: flex; justify-content: space-between; margin-bottom: 7px; }
.note-editor-label label { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.note-editor-label span { color: var(--green); font-size: 10px; font-weight: 700; }
.note-editor-label span[data-note-status="pending"], .note-editor-label span[data-note-status="saving"] { color: var(--muted); }
.note-editor-label span[data-note-status="error"] { color: var(--danger); }
.note-editor textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; display: block; line-height: 1.5; min-height: 82px; overflow-y: auto; padding: 11px 12px; resize: none; width: 100%; }
.note-editor textarea:focus { border-color: var(--accent); }
.product-note-editor { margin-top: 14px; max-width: 760px; }
.product-note-editor .note-add-button { border-radius: 4px; color: var(--muted); }
.product-note-editor:has(textarea) { background: var(--surface-soft); border-left: 3px solid var(--accent); padding: 12px 14px; }
.product-note-editor textarea { min-height: 66px; }
.line-item { border-top: 1px solid var(--line); padding: 16px 0; }
.line-item:first-of-type { border-top: 0; padding-top: 0; }
.line-item-head { align-items: flex-start; display: flex; justify-content: space-between; gap: 16px; }
.physical-state { align-items: flex-end; display: grid; gap: 8px; justify-items: end; }
.print-confirmation { align-items: center; cursor: pointer; display: flex; font-size: 11px; font-weight: 700; gap: 7px; white-space: nowrap; }
.print-confirmation input { accent-color: var(--turquoise); height: 17px; margin: 0; width: 17px; }
.packed-confirmation { border-top: 1px solid var(--line); padding-top: 7px; }
.packed-confirmation input { accent-color: var(--accent); }
.line-item h4 { align-items: center; display: flex; flex-wrap: wrap; font-size: 15px; gap: 7px; margin: 0 0 5px; }
.line-item h4 .status { flex: none; }
.line-item p { color: var(--muted); margin: 3px 0; }
.line-item-preview { aspect-ratio: 1.84 / 1; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 5px; display: block; margin-bottom: 13px; object-fit: contain; width: min(100%, 320px); }
.line-actions, .file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.file-link { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: 12px; font-weight: 700; padding: 7px 9px; text-decoration: none; }
.status { border-radius: 999px; display: inline-flex; font-size: 10px; font-weight: 800; padding: 5px 8px; text-transform: uppercase; white-space: nowrap; }
.status.pending, .status.queued, .status.creating, .status.submitting, .status.generating, .status.assembling, .status.sending { background: var(--amber-soft); color: var(--amber); }
.status.completed, .status.manufactured, .status.sent, .status.shipped, .status.handed_over { background: var(--green-soft); color: var(--green); }
.status.partially_printed { background: var(--accent-soft); color: var(--accent); }
.status.failed, .status.cancelled, .status.review_required { background: var(--danger-soft); color: var(--danger); }
.status.skipped { background: var(--surface-soft); color: var(--muted); }
.error-text { color: var(--danger) !important; font-size: 12px; }
.review-note { border-left: 3px solid var(--amber); color: var(--ink) !important; padding-left: 10px; }
.toast { background: var(--toast-background); bottom: 24px; color: var(--toast-text); left: 50%; max-width: min(90vw, 480px); padding: 12px 16px; position: fixed; transform: translateX(-50%); z-index: 10; }
.version-badge { border: 1px solid transparent; border-radius: 999px; bottom: max(7px, env(safe-area-inset-bottom)); font-size: 10px; font-weight: 800; line-height: 1; padding: 5px 7px; pointer-events: none; position: fixed; right: max(9px, env(safe-area-inset-right)); z-index: 9; }
html[data-app-environment="local"]::before { background: #e5a11a; content: ""; height: 4px; inset: 0 0 auto; pointer-events: none; position: fixed; z-index: 100; }
html[data-app-environment="local"] .version-badge { background: #fff1cd; border-color: #e2b654; color: #704800; }
html[data-app-environment="production"] .version-badge { background: var(--green-soft); border-color: #a8d3b8; color: #23623f; opacity: .82; }

/* Order workspace */
.order-workspace-header { padding: 22px 28px 0; position: sticky; top: 0; z-index: 8; }
.order-customer-title h2 { font-size: clamp(24px, 2vw, 32px); margin-bottom: 4px; }
.order-customer-title p strong { color: var(--accent); }
.order-more-menu { position: relative; }
.order-more-menu > summary { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer; display: flex; height: 38px; justify-content: center; list-style: none; width: 40px; }
.order-more-menu > summary::-webkit-details-marker { display: none; }
.order-more-menu > summary svg { fill: currentColor; height: 20px; width: 20px; }
.order-more-menu[open] > summary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.order-more-menu > div { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; box-shadow: 0 18px 44px rgba(13, 22, 27, .22); display: grid; min-width: 230px; padding: 7px; position: absolute; right: 0; top: 46px; z-index: 20; }
.order-more-menu > div button { background: transparent; border: 0; border-radius: 3px; font-weight: 700; padding: 10px 11px; text-align: left; }
.order-more-menu > div button:hover { background: var(--surface-soft); }
.order-more-menu > div .is-danger { color: var(--danger); }
.order-summary-strip { align-items: stretch; display: flex; gap: 16px; margin-top: 18px; }
.delivery-pill { align-items: center; border: 1px solid transparent; border-radius: 5px; display: inline-flex; font-size: 12px; font-weight: 850; padding: 9px 13px; }
.delivery-pill.shipping { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); color: var(--accent); }
.delivery-pill.handover { background: var(--surface-soft); border-color: var(--line-strong); color: var(--ink); }
.delivery-pill.digital { background: var(--turquoise-soft); border-color: color-mix(in srgb, var(--turquoise) 30%, var(--line)); color: var(--turquoise); }
.delivery-pill.admin { background: var(--surface-soft); border-color: var(--line-strong); color: var(--muted); }
.summary-metric { border-left: 1px solid var(--line); display: grid; gap: 3px; padding: 3px 0 3px 16px; }
.summary-metric small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.summary-metric strong { font-size: 12px; }
.order-organization-strip { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 5px; display: grid; gap: 8px; grid-template-columns: auto minmax(220px, 1fr) auto; margin-top: 16px; padding: 8px; }
.sticky-editor { position: relative; }
.sticky-editor > summary { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 800; gap: 7px; list-style: none; min-height: 34px; padding: 7px 11px; white-space: nowrap; }
.sticky-editor > summary::-webkit-details-marker { display: none; }
.sticky-editor > summary svg { fill: none; height: 13px; stroke: currentColor; stroke-width: 1.8; width: 13px; }
.sticky-popover { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 18px 44px rgba(13, 22, 27, .22); left: 0; min-width: 480px; padding: 16px; position: absolute; top: 42px; z-index: 18; }
.sticky-popover .handover-group-organization { border: 0; display: grid; padding: 0; }
.sticky-popover .handover-group-member-list { margin: 10px 0; }
.handover-group-popover { gap: 0 !important; }
.handover-group-popover-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; padding-bottom: 13px; }
.handover-group-popover-header > div { display: grid; gap: 3px; }
.handover-group-popover-header > div > span { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.handover-group-popover-header strong { font-size: 14px; }
.handover-group-progress { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); flex: 0 0 auto; font-size: 10px; font-weight: 800; padding: 5px 8px; }
.sticky-popover .handover-group-popover .handover-group-member-list { display: grid !important; gap: 0; margin: 0; }
.handover-group-popover .handover-group-member-list a { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px 12px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: 11px 4px; text-decoration: none; }
.handover-group-popover .handover-group-member-list a:hover { background: var(--surface-soft); }
.handover-group-popover .handover-group-member-list a.is-collector { border-left: 3px solid var(--line-strong); padding-left: 10px; }
.handover-group-popover .handover-group-member-list a.is-current { background: var(--surface-soft); }
.handover-member-role { color: var(--muted) !important; font-size: 9px !important; font-weight: 850; text-transform: uppercase; }
.handover-group-popover .handover-group-member-list strong { color: var(--ink); font-size: 12px; }
.handover-member-meta { color: var(--muted) !important; font-size: 10px !important; grid-column: 1; }
.handover-group-popover .handover-group-member-list small { background: var(--amber-soft); border-radius: 999px; color: var(--amber); font-size: 9px; font-weight: 800; grid-column: 2; grid-row: 1 / span 3; padding: 4px 7px; }
.handover-group-popover .handover-group-member-list small.is-ready { background: var(--green-soft); color: var(--green); }
.handover-group-popover-footer { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding-top: 12px; }
.handover-group-popover-footer > p { color: var(--muted); font-size: 10px; line-height: 1.4; margin: 0; }
.danger-text { color: var(--danger); }
.handover-group-dissolve-confirm { align-items: center; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line)); border-radius: 5px; display: grid; gap: 2px 12px; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; padding: 10px; }
.handover-group-dissolve-confirm[hidden] { display: none; }
.handover-group-dissolve-confirm strong { color: var(--danger); font-size: 11px; }
.handover-group-dissolve-confirm > span { color: var(--muted); font-size: 10px; }
.handover-group-dissolve-confirm > div { display: flex; gap: 6px; grid-column: 2; grid-row: 1 / span 2; }
.handover-group-choice { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding-top: 14px; }
.handover-group-choice span { color: var(--muted); font-size: 11px; }
.merged-order-list-note { color: var(--accent); font-size: 10px; font-weight: 750; }
.product-row.is-merged-order-item { border-left: 3px solid var(--accent); }
.merged-order-origin { color: var(--accent); display: inline-flex; font-size: 10px; font-weight: 750; margin-top: 4px; text-decoration: none; }
.merged-order-origin:hover { text-decoration: underline; }
.merged-child-banner { align-items: center; background: var(--accent-soft); border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding: 10px 24px; }
.merged-child-banner > div { display: grid; gap: 2px; }
.merged-child-banner strong { font-size: 11px; }
.merged-child-banner span { color: var(--muted); font-size: 10px; }
.merged-child-banner a { color: var(--accent); font-size: 11px; font-weight: 800; }
.sticky-order-note { min-width: 0; }
.sticky-note-editor { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; display: grid; gap: 7px; grid-template-columns: auto minmax(0, 1fr) auto; max-width: none; min-height: 34px; padding: 0 9px; }
.sticky-note-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.sticky-note-editor > label { color: var(--ink); font-size: 11px; font-weight: 800; }
.sticky-note-editor textarea { background: transparent; border: 0; border-radius: 0; font-size: 11px; height: 32px !important; line-height: 20px; max-height: 32px; min-height: 32px; overflow: hidden; padding: 6px 0; white-space: nowrap; }
.sticky-note-editor textarea:focus { border: 0; outline: 0; }
.sticky-note-editor [data-note-status] { color: var(--green); font-size: 9px; font-weight: 750; }
.sticky-note-editor [data-note-status="saved"] { display: none; }
.sticky-note-editor [data-note-status="pending"], .sticky-note-editor [data-note-status="saving"] { color: var(--muted); display: inline; }
.sticky-note-editor [data-note-status="error"] { color: var(--danger); display: inline; }
.order-organization-strip > .order-tags-editor { border: 0; margin: 0; padding: 0; }
.order-organization-strip .tag-editor-label { display: none; }
.order-organization-strip .tag-empty { display: none; }
.order-organization-strip .order-tags-toolbar { flex-wrap: nowrap; justify-content: flex-end; }
.order-organization-strip .tag-add-button { min-height: 34px; white-space: nowrap; }
.order-organization-strip .tag-picker { left: auto; right: 0; width: 380px; }
.customer-note { margin-top: 7px; }
.customer-note > button { align-items: center; background: transparent; border: 0; color: var(--accent); display: flex; font-size: 10px; font-weight: 850; gap: 6px; padding: 3px 0; text-align: left; }
.customer-note > button span { display: inline-block; font-size: 15px; line-height: 1; transition: transform .16s ease; }
.customer-note > button strong { color: inherit; font-size: inherit; }
.customer-note.is-open > button span:first-child { transform: rotate(90deg); }
.customer-note > .note-translation-action { display: inline-flex; font-size: 10px; font-weight: 600; margin-left: 14px; }
.customer-note > button .translation-indicator { font-size: 11px; transform: none; }
.customer-locale-label { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.customer-locale-label select { width: min(100%, 240px); color: var(--ink); }
.customer-note > p { background: var(--turquoise-soft); border-left: 3px solid var(--turquoise); color: var(--ink); font-size: 10px; line-height: 1.45; margin: 5px 0 0; padding: 7px 9px; white-space: pre-wrap; }
.order-tabs { display: flex; gap: 26px; margin-top: 12px; }
.order-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font-size: 12px; font-weight: 800; min-height: 42px; padding: 0 4px; }
.order-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.order-tab-panel { background: var(--canvas); min-height: 100%; }
.order-products-section { border: 0; padding: 26px 28px 48px; }
.product-row { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 20px; grid-template-columns: 190px minmax(260px, 1fr) minmax(170px, auto); margin-bottom: 12px; padding: 16px; }
.product-row:first-of-type { border-top: 1px solid var(--line); padding-top: 16px; }
.product-row.is-printed { opacity: .66; }
.product-preview-frame { align-items: center; aspect-ratio: 1.72 / 1; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 5px; color: var(--muted); display: flex; font-size: 10px; justify-content: center; overflow: hidden; }
.product-preview-frame .line-item-preview { background: transparent; border: 0; border-radius: 0; height: 100%; margin: 0; object-fit: contain; width: 100%; }
.product-main { min-width: 0; }
.product-main > p { line-height: 1.45; }
.product-actions { align-items: flex-end; display: grid; justify-items: end; min-width: 0; }
.product-actions .line-actions, .product-actions .file-list { justify-content: flex-end; }
.batch-impact-note { background: var(--amber-soft); border-left: 3px solid var(--amber); color: var(--ink) !important; font-size: 10px; padding: 7px 9px; }
.communication-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.communication-card { background: var(--surface); border-right: 1px solid var(--line); }
.email-protocol-section { background: var(--canvas); }
.email-protocol-entry { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; margin-bottom: 9px; padding: 13px 14px; }
.email-protocol-entry > header { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.email-protocol-entry > header > div { display: flex; gap: 8px; }
.email-protocol-entry > header > div:first-child { display: grid; gap: 3px; }
.email-protocol-entry > header span, .email-protocol-entry time { color: var(--muted); font-size: 10px; }
.email-protocol-entry > header > div:last-child { align-items: center; }
.email-protocol-entry details { margin-top: 10px; }
.email-protocol-entry summary { color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 750; }
.shipping-label-protocol-section { background: var(--canvas); }
.shipping-label-protocol-section > .section-title > div { display: grid; gap: 2px; }
.shipping-label-protocol-section > .section-title p { color: var(--muted); font-size: 11px; margin: 0; }
.shipping-label-protocol-list { display: grid; gap: 8px; }
.shipping-label-protocol-list article { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; display: grid; gap: 14px; grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr) auto; padding: 12px 14px; }
.shipping-label-protocol-list article > div { display: grid; gap: 3px; }
.shipping-label-protocol-list article span { color: var(--muted); font-size: 10px; }
.shipping-label-protocol-list dl { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
.shipping-label-protocol-list dl div { display: grid; gap: 2px; }
.shipping-label-protocol-list dt { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.shipping-label-protocol-list dd { font-size: 11px; margin: 0; overflow-wrap: anywhere; }
.email-message-content { background: var(--surface-soft); border-left: 3px solid var(--accent); margin-top: 10px; padding: 12px 14px; }
.email-message-content strong { display: block; font-size: 11px; margin-bottom: 9px; }
.email-message-content pre { font: inherit; font-size: 12px; line-height: 1.55; margin: 0; max-height: 420px; overflow: auto; white-space: pre-wrap; }
.email-content-missing { color: var(--muted); font-size: 11px; }

@media (max-width: 960px) {
  .admin-header { grid-template-columns: minmax(0, 1fr) auto; height: auto; min-height: 68px; padding-block: 10px 0; }
  .admin-navigation { border-top: 1px solid var(--line); grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: 10px; }
  .admin-navigation a { flex: 1; justify-content: center; min-height: 46px; }
  .admin-shell { display: block; height: auto; overflow: visible; }
  .orders-pane { border-right: 0; min-height: calc(100vh - 68px); overflow: visible; }
  .orders-list { flex: none; overflow-y: visible; }
  .detail-pane { background: var(--canvas); display: none; min-height: calc(100vh - 68px); overflow-y: visible; }
  .admin-view[data-detail="open"] .orders-pane { display: none; }
  .admin-view[data-detail="open"] .detail-pane { display: block; }
  .detail-grid { grid-template-columns: 1fr; }
  .order-workspace-header { position: relative; }
  .order-organization-strip { grid-template-columns: 1fr; }
  .sticky-popover { min-width: min(480px, calc(100vw - 36px)); }
  .communication-panel { grid-template-columns: 1fr; }
  .shipping-label-protocol-list article { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 150px minmax(0, 1fr); }
  .product-actions { grid-column: 2; justify-items: start; }
  .product-actions .line-actions, .product-actions .file-list { justify-content: flex-start; }
  .detail-section, .detail-section:nth-child(odd) { border-right: 0; }
  .mobile-back { display: inline-flex !important; margin-bottom: 16px; }
  .statistics-view, .production-view, .handover-view { height: auto; min-height: calc(100vh - 68px); }
  .handover-view { overflow-y: visible; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-groups, .production-batches { grid-template-columns: 1fr; }
  .production-group[data-production-group="ams"] .production-items { grid-template-columns: 1fr; }
  .production-group[data-production-group="ams"] .production-item:nth-child(odd) { border-right: 0; }
  .ams-production-panel > header { grid-template-columns: auto auto minmax(110px, 1fr); }
  .ams-filter-toggle { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 540px) {
  .admin-header { padding: 8px 14px 0; }
  .brand-lockup h1 { display: none; }
  .admin-account { gap: 8px; }
  .admin-navigation { width: 100%; }
  .admin-navigation a { font-size: 10px; min-width: 0; padding-inline: 2px; }
  .invoice-mode span { text-align: center; }
  .cost-settings-form { grid-template-columns: 1fr; padding: 16px; }
  .filters { padding-inline: 14px; }
  .filter-row { grid-template-columns: 1fr; }
  .status-tabs { grid-template-columns: repeat(3, 1fr); }
  .status-tabs button { border: 1px solid var(--line); }
  .detail-header, .detail-section { padding: 20px 18px; }
  .detail-title-row { display: block; }
  .order-workspace-header { padding-bottom: 0; }
  .order-summary-strip { flex-wrap: wrap; }
  .order-tabs { margin-inline: -18px; padding-inline: 18px; }
  .product-row { align-items: stretch; grid-template-columns: 1fr; }
  .product-preview-frame { width: min(100%, 300px); }
  .product-actions { grid-column: 1; justify-items: start; }
  .sticky-popover { left: -8px; min-width: calc(100vw - 36px); }
  .detail-actions { justify-content: flex-start; margin-top: 18px; }
  .delivery-banner { align-items: stretch; flex-direction: column; }
  .delivery-method-button { justify-content: center; width: 100%; }
  .order-items-title { align-items: flex-start; gap: 10px; }
  .order-items-tools { flex-wrap: wrap; justify-content: flex-end; }
  .data-list div { grid-template-columns: 1fr; }
  .internal-organization-title { align-items: flex-start; display: grid; gap: 7px; }
  .handover-representative-form { grid-template-columns: minmax(0, 1fr) auto; }
  .tag-picker { width: 100%; }
  .statistics-header, .production-header, .settings-view > .statistics-header { align-items: stretch; display: grid; gap: 18px; padding: 20px 18px; }
  .handover-view-header { padding: 18px 16px; }
  .handover-view-header h2 { font-size: 22px; }
  .handover-toolbar { grid-template-columns: 1fr; padding: 12px 14px 14px; }
  .handover-list { gap: 8px; padding: 12px 10px 36px; }
  .handover-order.has-open-previews { top: 90px; }
  .handover-order-main { grid-template-columns: 48px minmax(0, 1fr) 56px; }
  .handover-order.is-pending .handover-order-main { grid-template-columns: 48px minmax(0, 1fr); }
  .handover-check { padding-top: 19px; }
  .handover-order-content { padding: 14px 12px; }
  .handover-order-heading { align-items: start; display: grid; gap: 2px 10px; grid-template-columns: minmax(0, 1fr) auto; }
  .handover-order-heading a { justify-self: end; }
  .handover-order-heading strong { font-size: 15px; }
  .handover-preview-scroll { max-height: min(46dvh, 390px); }
  .handover-preview-grid { grid-template-columns: 1fr; }
  .shipping-position-previews .handover-preview-grid { grid-template-columns: 1fr; }
  .handover-pending { align-items: stretch; display: grid; gap: 7px; padding-left: 48px; }
  .period-tabs button { flex: 1; }
  .statistics-period-control { align-items: stretch; display: grid; padding: 12px 14px 14px; }
  .custom-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-period .secondary-button { grid-column: 1 / -1; }
  .statistics-content { padding: 18px 14px 36px; }
  .settings-statistics-content { padding: 0; }
  .production-content { padding: 18px 14px 36px; }
  .production-header-actions { align-items: stretch; justify-content: space-between; }
  .ams-production-panel > header { align-items: center; gap: 12px; grid-template-columns: auto 1fr; padding: 12px; }
  .ams-production-title { grid-column: 1; grid-row: 1; min-width: 0; }
  .ams-slot-grid { grid-column: 1; grid-row: 2; }
  .ams-production-summary { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
  .ams-production-summary-row { gap: 6px; }
  .ams-optimize-button { min-height: 27px; padding: 5px 6px; }
  .ams-optimize-button span { display: none; }
  .ams-filter-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .ams-production-insight { padding: 8px 12px; }
  .metric-grid, .breakdown-grid { grid-template-columns: 1fr; }
  .revenue-chart-title { align-items: start; display: grid; gap: 8px; }
  .breakdown-section.full { grid-column: auto; }
}
.order-feedback {
  background: var(--surface-soft);
  border-left: 3px solid var(--turquoise);
  line-height: 1.55;
  margin: 0;
  padding: 12px 14px;
  white-space: pre-wrap;
}

.settings-layout { display: grid; gap: 28px; grid-template-columns: 190px minmax(0, 1fr); margin: 0 auto; max-width: 1380px; padding: 28px 30px 48px; }
.settings-navigation { align-self: start; background: var(--surface); border: 1px solid var(--line); display: grid; position: sticky; top: 28px; }
.settings-navigation a { border-left: 3px solid transparent; color: var(--muted); font-size: 12px; font-weight: 750; padding: 13px 15px; text-decoration: none; }
.settings-navigation a + a { border-top: 1px solid var(--line); }
.settings-navigation a:hover { background: var(--surface-soft); color: var(--ink); }
.settings-navigation a[aria-current="page"] { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); }
.tag-create-form { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(220px, 420px) max-content; padding: 16px 20px; }
.tag-create-form label { display: grid; font-size: 11px; font-weight: 750; gap: 5px; }
.tag-create-form input, .tag-management-row input, .tag-management-row select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; min-height: 38px; padding: 7px 9px; }
.tag-management-list { display: grid; }
.tag-management-row { border-bottom: 1px solid var(--line); display: grid; gap: 12px; padding: 14px 20px; }
.tag-management-row:last-child { border-bottom: 0; }
.tag-management-main { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(160px, 1fr) 120px auto; }
.tag-management-main > span { color: var(--muted); font-size: 11px; }
.tag-management-actions { align-items: center; display: flex; gap: 8px; }
.tag-management-actions select { min-width: 190px; }
.tag-management-empty { color: var(--muted); margin: 0; padding: 22px 20px; }
.settings-content, .settings-section { display: grid; gap: 20px; min-width: 0; }
.theme-settings { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); max-width: 420px; padding: 18px 20px 20px; }
.theme-settings button { background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; min-height: 42px; padding: 8px 14px; }
.theme-settings button:first-child { border-radius: 4px 0 0 4px; }
.theme-settings button + button { border-left: 0; }
.theme-settings button:last-child { border-radius: 0 4px 4px 0; }
.theme-settings button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-settings button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; position: relative; z-index: 1; }
.settings-panel { background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.settings-panel-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 20px; justify-content: space-between; padding: 18px 20px; }
.settings-panel-header h3 { font-size: 16px; margin: 0 0 4px; }
.settings-panel-header p { color: var(--muted); font-size: 12px; margin: 0; }
.invoice-settings-panel .invoice-settings { padding: 20px; }
.invoice-settings-panel .invoice-mode { width: fit-content; }
.changelog-list { display: grid; }
.changelog-entry { display: grid; gap: 12px; padding: 18px 20px; }
.changelog-entry + .changelog-entry { border-top: 1px solid var(--line); }
.changelog-entry header { align-items: baseline; display: flex; gap: 16px; justify-content: space-between; }
.changelog-entry header strong { font-size: 13px; }
.changelog-entry time { color: var(--muted); font-size: 11px; }
.changelog-entry ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; }
.changelog-entry li { color: var(--muted); font-size: 12px; line-height: 1.45; padding-left: 3px; }
.activity-filters { background: var(--surface-soft); border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, 200px)); padding: 12px 16px; }
.activity-filters label { display: grid; font-size: 11px; font-weight: 750; gap: 5px; }
.activity-filters input, .activity-filters select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; min-height: 36px; padding: 7px 9px; }
.activity-scroll { max-height: clamp(320px, 58vh, 620px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.activity-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.activity-list { display: grid; }
.activity-row { display: grid; gap: 9px; grid-template-columns: 8px minmax(0, 1fr); padding: 9px 14px; }
.activity-row + .activity-row { border-top: 1px solid var(--line); }
.activity-marker { align-self: center; background: var(--accent); border-radius: 50%; height: 7px; width: 7px; }
.activity-success .activity-marker { background: var(--green); }
.activity-warning .activity-marker { background: var(--amber); }
.activity-error .activity-marker { background: var(--danger); }
.activity-body { align-items: center; display: grid; gap: 4px 12px; grid-template-columns: 132px minmax(0, 1fr) auto; min-width: 0; }
.activity-body p { font-size: 12px; line-height: 1.35; margin: 0; }
.activity-body > a, .activity-order-reference { color: var(--accent); font-size: 10px; font-weight: 750; justify-self: end; white-space: nowrap; }
.activity-meta { color: var(--muted); display: grid; font-size: 9px; gap: 1px; text-transform: uppercase; }
.activity-meta span { font-weight: 800; }
.activity-meta time { text-transform: none; }
.activity-body details { color: var(--muted); font-size: 10px; grid-column: 2 / -1; }
.activity-body summary { cursor: pointer; }
.activity-body pre { background: var(--surface-soft); font-size: 10px; margin: 8px 0 0; max-width: 100%; overflow-x: auto; padding: 10px; white-space: pre-wrap; }
.activity-empty { color: var(--muted); margin: 0; padding: 28px 20px; text-align: center; }
.campaigns-content { padding: 20px; }
.color-suggestions-panel { background: var(--surface); border: 1px solid var(--line); margin-bottom: 22px; }
.color-suggestions-panel > header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 15px 17px; }
.color-suggestions-panel h3 { font-size: 15px; margin: 0 0 3px; }
.color-suggestions-panel header p, .color-suggestions-panel header > span { color: var(--muted); font-size: 11px; margin: 0; }
.color-suggestions-list { display: grid; }
.color-suggestion-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 38px minmax(0, 1fr) minmax(190px, auto); padding: 13px 17px; }
.color-suggestion-row:last-child { border-bottom: 0; }
.color-suggestion-swatch { background: var(--suggested-color); border: 1px solid rgba(0, 0, 0, .18); border-radius: 50%; height: 34px; width: 34px; }
.color-suggestion-main { display: grid; gap: 5px; min-width: 0; }
.color-suggestion-main > div { align-items: baseline; display: flex; gap: 9px; }
.color-suggestion-main strong { font-size: 12px; }
.color-suggestion-main span { color: var(--muted); font-size: 10px; }
.color-suggestion-main p { font-size: 12px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.color-suggestion-main p.is-empty { color: var(--muted); font-style: italic; }
.color-suggestion-actions { align-items: flex-end; display: grid; gap: 7px; justify-items: end; }
.color-suggestion-actions > a { color: var(--turquoise); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.color-suggestion-actions button { min-height: 34px; }
.color-suggestions-empty { color: var(--muted); margin: 0; padding: 18px; text-align: center; }
.campaign-header-actions { align-items: center; display: flex; gap: 14px; }
.campaigns-intro { color: var(--muted); line-height: 1.5; margin: 0 0 18px; max-width: 760px; }
.campaigns-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.campaign-card { border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.campaign-card.is-disabled { background: var(--surface-soft); }
.campaign-card > header { align-items: center; display: flex; gap: 10px; margin-bottom: 14px; }
.campaign-card > header div { display: grid; gap: 2px; }
.campaign-card > header small, .campaign-progress-block small { color: var(--muted); }
.campaign-card > header .campaign-card-actions { display: flex; gap: 6px; margin-left: auto; }
.campaign-card-actions button { min-height: 32px; }
.campaign-color { background: var(--campaign-color); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; flex: 0 0 auto; height: 32px; width: 32px; }
.campaign-manufacturer { background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0 0 12px; padding: 9px 10px; white-space: pre-wrap; }
.campaign-settings-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.campaign-settings-form label, .campaign-settings-form label > span { display: grid; font-size: 11px; font-weight: 700; gap: 5px; }
.campaign-settings-form select, .campaign-settings-form input, .campaign-actions input { border: 1px solid var(--line-strong); border-radius: 5px; min-height: 38px; min-width: 0; padding: 7px 9px; width: 100%; }
.campaign-settings-form button { grid-column: 1 / -1; }
.money-input { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.money-input b { margin-left: 6px; }
.campaign-progress-block { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.campaign-progress-block > div:first-child { display: flex; justify-content: space-between; }
.campaign-progress-track { background: var(--surface-soft); height: 8px; margin: 8px 0; overflow: hidden; }
.campaign-progress-track i { background: var(--accent); display: block; height: 100%; }
.campaign-actions { display: grid; gap: 8px; margin-top: 12px; }
.campaign-actions form { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; }

.color-dialog, .handover-dialog { background: transparent; border: 0; max-height: calc(100vh - 32px); padding: 0; width: min(680px, calc(100vw - 28px)); }
.color-dialog[open], .handover-dialog[open] { position: fixed; }
body:has(.color-dialog[open], .handover-dialog[open]) { overflow: hidden; }
.color-dialog::backdrop, .handover-dialog::backdrop { background: rgba(20, 24, 22, 0.48); }
.color-dialog-form, .handover-dialog-form { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; max-height: calc(100vh - 32px); overflow-y: auto; }
.color-dialog-form > header, .handover-dialog-form > header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 20px 22px; }
.color-dialog-form h2, .handover-dialog-form h2 { font-size: 21px; margin: 3px 0 0; }
.dialog-close { background: transparent; border: 0; color: var(--muted); font-size: 28px; height: 38px; line-height: 1; width: 38px; }
.color-editor-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; padding: 22px; }
.color-editor-preview { background: #3f6f8f; border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 5px; grid-column: 1 / -1; height: 72px; }
.color-editor-label, .color-picker-field { display: grid; font-size: 12px; font-weight: 700; gap: 7px; }
.color-editor-label input, .color-editor-label select, .color-editor-label textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; min-height: 42px; padding: 9px 10px; resize: vertical; width: 100%; }
.color-editor-wide, .color-technical-note { grid-column: 1 / -1; }
.color-picker-field input[type="color"] { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; height: 44px; padding: 4px; width: 100%; }
.color-picker-field input[type="color"]:disabled { cursor: not-allowed; opacity: 0.62; }
.color-technical-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: -4px 0 0; }
.color-dialog-form > footer, .handover-dialog-form > footer { border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; }
.handover-editor { display: grid; gap: 16px; padding: 22px; }
.handover-editor label { display: grid; font-size: 12px; font-weight: 700; gap: 7px; }
.handover-editor input, .handover-editor textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; font: inherit; line-height: 1.5; padding: 10px 11px; resize: vertical; width: 100%; }
.handover-recipient { background: var(--surface-soft); margin: 0; padding: 11px 12px; }
.handover-note { color: var(--muted); font-size: 11px; margin: -5px 0 0; }
.handover-recipient-options { display: grid; gap: 8px; padding: 18px 22px 22px; }
.handover-recipient-options button { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; display: flex; justify-content: space-between; min-height: 56px; padding: 11px 14px; text-align: left; }
.handover-recipient-options button:hover, .handover-recipient-options button:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.handover-recipient-options span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.handover-recipient-options strong { font-size: 15px; }

@media (max-width: 720px) {
  .settings-view { height: auto; min-height: calc(100vh - 68px); }
  .settings-layout { display: block; padding: 0 0 36px; }
  .settings-navigation { border-left: 0; border-right: 0; display: flex; overflow-x: auto; position: sticky; top: 0; z-index: 2; }
  .settings-navigation a { border-bottom: 3px solid transparent; border-left: 0; flex: 1 0 auto; min-width: 110px; text-align: center; }
  .settings-navigation a + a { border-top: 0; }
  .settings-navigation a[aria-current="page"] { border-bottom-color: var(--accent); border-left-color: transparent; }
  .settings-content { padding: 18px 14px 0; }
  .settings-panel-header { align-items: stretch; display: grid; gap: 14px; padding: 16px; }
  .activity-panel-header { align-items: center; display: flex; }
  .activity-filters { grid-template-columns: 1fr; padding: 14px 16px; }
  .activity-scroll { max-height: min(58vh, 520px); }
  .activity-row { padding: 9px 12px; }
  .activity-body { grid-template-columns: 90px minmax(0, 1fr); }
  .activity-body > a, .activity-order-reference { grid-column: 2; justify-self: start; }
  .activity-body details { grid-column: 2; }
  .tag-create-form { align-items: stretch; grid-template-columns: 1fr; padding: 16px; }
  .tag-management-row { padding: 14px 16px; }
  .tag-management-main { align-items: stretch; grid-template-columns: 1fr; }
  .tag-management-actions { align-items: stretch; flex-direction: column; }
  .tag-management-actions select { min-width: 0; width: 100%; }
  .campaigns-content { padding: 16px; }
  .campaigns-grid { grid-template-columns: 1fr; }
  .campaign-header-actions { align-items: stretch; flex-direction: column-reverse; gap: 5px; }
  .color-editor-grid { grid-template-columns: 1fr; padding: 18px; }
  .color-editor-preview, .color-editor-wide, .color-technical-note { grid-column: 1; }
  .handover-editor { padding: 18px; }
  .handover-dialog-form > footer { align-items: stretch; flex-direction: column-reverse; }
  .color-suggestion-row { align-items: start; grid-template-columns: 36px minmax(0, 1fr); }
  .color-suggestion-actions { align-items: stretch; grid-column: 2; justify-items: stretch; }
  .color-suggestion-actions > a { text-align: left; }
}
/* Coupon management */
.shipping-zone-list { display: grid; gap: 10px; }
.shipping-zone-card {
  align-items: center;
  border: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 14px;
}
.shipping-zone-card-main { display: grid; gap: 8px; min-width: 0; }
.shipping-zone-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; }
.shipping-zone-heading > strong { font-size: 16px; letter-spacing: 0; }
.shipping-zone-countries { display: flex; flex-wrap: wrap; gap: 6px; }
.shipping-zone-countries span {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 7px;
}
.shipping-zone-card-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.shipping-zone-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.shipping-zone-form-grid label { display: grid; font-size: 13px; font-weight: 700; gap: 6px; }
.shipping-zone-form-grid input { min-height: 42px; }
.shipping-country-picker { border: 0; margin: 20px 0 16px; padding: 0; }
.shipping-country-picker legend { font-size: 14px; font-weight: 800; padding: 0; }
.shipping-country-picker > p { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.shipping-country-picker > div {
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: min(42vh, 360px);
  overflow: auto;
}
.shipping-country-picker label {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 9px;
  min-height: 48px;
  padding: 8px 10px;
}
.shipping-country-picker label:nth-child(odd) { border-right: 1px solid var(--line); }
.shipping-country-picker label.assigned { background: var(--surface-soft); color: var(--muted); }
.shipping-country-picker label > span { display: grid; gap: 1px; }
.shipping-country-picker label small { font-size: 11px; font-weight: 500; }
.coupon-list { display: grid; gap: 10px; }
.coupon-card {
  align-items: center;
  border: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 14px;
}
.coupon-card-main { display: grid; gap: 5px; }
.coupon-card-main > div { align-items: center; display: flex; gap: 9px; }
.coupon-card-main > div > strong { font-size: 16px; letter-spacing: 0; }
.coupon-card-main small { color: var(--muted); }
.coupon-card-actions { display: flex; gap: 8px; }
.coupon-form > label:not(.invoice-email-option),
.coupon-form-grid label { display: grid; font-size: 13px; font-weight: 700; gap: 6px; }
.coupon-form > label:not(.invoice-email-option) { margin: 18px 0 12px; }
.coupon-form input,
.coupon-form select { min-height: 42px; }
.coupon-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .shipping-zone-card { align-items: stretch; flex-direction: column; }
  .shipping-zone-card-actions > * { flex: 1; }
  .shipping-zone-form-grid, .shipping-country-picker > div { grid-template-columns: 1fr; }
  .shipping-country-picker label:nth-child(odd) { border-right: 0; }
  .coupon-card { align-items: stretch; flex-direction: column; }
  .coupon-card-actions > * { flex: 1; }
  .coupon-form-grid { grid-template-columns: 1fr; }
  .notification-panel { position: fixed; right: 12px; top: 62px; }
  .handover-group-header { grid-template-columns: 32px minmax(0, 1fr); }
  .handover-group-header > small { grid-column: 2; }
  .handover-group-organization { align-items: stretch; flex-direction: column; padding: 12px 16px; }
  .handover-group-organization-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .handover-group-member-list { display: grid !important; grid-template-columns: 1fr; }
  .handover-group-member-list a { min-width: 0; }
}

/* iOS zooms focused controls below 16px and may keep the enlarged page scale. */
@media (max-width: 960px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }
}