/* WorkerSpace: compact, calm workspace. Shared presentation only. */
:root {
  --bg: #f5f7fa;
  --bg-soft: #f8fafc;
  --surface: #fff;
  --surface-solid: #fff;
  --surface-alt: #f8fafc;
  --stroke: #e2e7ee;
  --stroke-strong: #cbd5e1;
  --text: #1b283b;
  --muted: #68768a;
  --muted-strong: #46556a;
  --primary: #1e88ff;
  --primary-dark: #126cda;
  --primary-soft: #eef6ff;
  --success-soft: #edf8f1;
  --warning-soft: #fff7e8;
  --danger-soft: #fff0f0;
  --shadow-lg: 0 8px 24px rgba(24,39,58,.06);
  --shadow-md: 0 2px 6px rgba(24,39,58,.04);
  --radius-xl: 12px;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
}
body { background: var(--bg); font-size: 14px; line-height: 1.5; }
.page { padding: 20px 24px; }
.ws-dashboard-shell { max-width: 1600px; margin: 0 auto; }
.app-shell { grid-template-columns: 220px minmax(0,1fr); gap: 24px; }
.app-sidebar { top: 20px; }
.app-sidebar-panel { padding: 16px 12px; border-radius: 10px; background: #fff; box-shadow: none; height: calc(100dvh - 40px); }
.app-sidebar-brand { padding: 6px 10px 22px; margin: 0; border-bottom: 1px solid var(--stroke); }
.app-sidebar-nav-wrap { padding: 16px 0; }
.ws-brand { gap: 10px; }
.app-brand-mark,.ws-brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--primary); box-shadow: none; }
.app-brand-mark::before,.ws-brand-mark::before { inset: 9px; border-radius: 3px; }
.app-brand-title,.ws-brand-title { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.app-kicker,.ws-kicker { font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.app-nav { gap: 4px; }
.app-nav-btn { min-height: 40px; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; background: transparent; border-color: transparent; box-shadow: none; color: var(--muted-strong); gap: 10px; }
.app-nav-btn:hover { background: var(--surface-alt); transform: none; box-shadow: none; }
.app-nav-btn.active { background: var(--primary-soft); color: #126cda; border-color: transparent; box-shadow: none; font-weight: 650; }
.app-nav-icon { width: 20px; height: 20px; border-radius: 0; background: transparent; color: inherit; }
.ws-icon { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.app-userbox { background: transparent; border: 0; border-radius: 0; padding: 10px 4px; }
.app-user-name { font-size: 13px; font-weight: 600; }
.app-user-site { font-size: 12px; }
.app-avatar { width: 32px; height: 32px; border-radius: 8px; background: #eef2f7; color: var(--muted-strong); font-size: 12px; }
.app-sidebar-footer { border-top: 1px solid var(--stroke); padding-top: 10px; gap: 8px; }
.app-layout,.app-main,.app-side,.app-split { gap: 16px; }
.panel { padding: 20px; border-radius: 10px; background: #fff; box-shadow: none; }
.panel-title { font-size: 23px !important; font-weight: 650; letter-spacing: -.025em; line-height: 1.25; }
.app-modal .panel-title { font-size: 20px !important; }
.panel-kicker { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: .02em; color: var(--muted); margin-bottom: 5px; }
.panel-copy,.app-toolbar-note { font-size: 13px; line-height: 1.5; }
.app-toolbar { gap: 12px; margin-bottom: 16px; }
.app-toolbar-group { gap: 10px; }
.ws-field,.app-input,.app-select { min-height: 38px; padding: 8px 11px; border-radius: 6px; font-size: 14px; background: #fff; box-shadow: none; border-color: var(--stroke-strong); }
.ws-field:focus,.app-input:focus,.app-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,136,255,.1); }
.app-field-label,.ws-label { font-size: 12px; font-weight: 600; }
.ws-btn,.app-btn { min-height: 38px; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--primary); box-shadow: none; transition: background-color .12s ease,border-color .12s ease; }
.ws-btn:hover,.app-btn:hover { background: var(--primary-dark); transform: none; box-shadow: none; }
.app-btn.secondary { background: #fff; border-color: var(--stroke-strong); color: var(--muted-strong); }
.app-btn.secondary:hover { background: #f5f8fc; border-color: #a8b9cc; }
.app-btn.ghost { background: transparent; color: var(--muted-strong); }
.app-btn.danger { background: #c93c3c; }
.app-btn.danger.secondary { background: #fff; border-color: #efcaca; color: #b83232; }
.app-btn:active,.ws-btn:active,.app-segment:active { filter: brightness(.96); }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.app-btn-spinner { width: 14px; height: 14px; border-width: 2px; }
.app-icon-btn { width: 32px; height: 32px; min-height: 32px; border-radius: 6px; font-size: 20px; }
.app-collection-range .app-btn { min-width: 100px; }
.app-segmented { padding: 3px; border-radius: 7px; background: #f1f4f8; gap: 2px; box-shadow: none; }
.app-segment { min-height: 30px; padding: 5px 11px; border-radius: 5px; font-size: 12px; font-weight: 500; }
.app-segment.active { background: #fff; color: #126cda; box-shadow: 0 1px 3px rgba(20,35,55,.08); }
.app-date-range .app-input { min-height: 36px; font-size: 13px; width: 145px; }
.app-pill { min-height: 26px; padding: 3px 9px; border-radius: 5px; font-size: 12px; font-weight: 500; }
.app-stat-grid { gap: 0; border: 1px solid var(--stroke); border-radius: 8px; overflow: hidden; }
.app-stat-card { padding: 14px 16px; min-height: 108px; border: 0; border-right: 1px solid var(--stroke); border-radius: 0; background: #fff; box-shadow: none; gap: 6px; }
.app-stat-card:last-child { border-right: 0; }
.app-stat-label { font-size: 12px; font-weight: 500; }
.app-stat-value { font-size: 30px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.app-stat-note { font-size: 11px; }
.app-stat-icon { width: 22px; height: 22px; border-radius: 0; background: transparent; color: #8492a5; font-size: 12px; }
.app-chart { border-radius: 6px; background: #fff; box-shadow: none; }
.app-line-area { opacity: .3; }
.app-line-path { stroke-width: 2; }
.app-line-tooltip-card { border-radius: 6px; box-shadow: var(--shadow-md); }
.app-progress { height: 5px; }
.app-progress-fill { background: var(--primary); }
.app-breakdown-list { gap: 12px; }
.app-orders-grid,.app-orders-loading-grid { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px; }
.app-contacts-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; }
.app-order-card,.app-contact-card,.app-appointment-card,.app-form-group,.app-form-submission-card,.app-list-row,.app-search-result-card { padding: 14px; border-radius: 8px; background: #fff; border-color: var(--stroke); box-shadow: none; gap: 10px; }
.app-order-card:hover,.app-order-card:focus-within,.app-contact-card:hover { transform: none; border-color: #a7bfdc; box-shadow: 0 2px 6px rgba(20,35,55,.04); }
.app-order-card[class*="app-order-card-status-"],.app-contact-card.is-subscribed { border-color: var(--stroke); box-shadow: none; }
.app-order-card[class*="app-order-card-status-"]:hover { border-color: #a7bfdc; }
.app-order-customer { font-size: 16px; font-weight: 650; line-height: 1.4; }
.app-order-number { font-size: 11px; font-weight: 500; letter-spacing: .015em; color: var(--muted); text-transform: none; }
.app-order-head strong,.app-appointment-main strong,.app-form-group-head strong,.app-contact-main strong { font-size: 15px; font-weight: 600; }
.app-order-meta,.app-order-subline,.app-contact-meta { gap: 6px; }
.app-order-mini-pill,.app-contact-tag,.app-contact-open,.app-contact-badge { min-height: 24px; padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 500; background: #f5f7fa; }
.app-order-mini-pill .ws-icon { width: 13px; height: 13px; color: var(--muted); }
.app-order-summary { gap: 8px; }
.app-order-summary div { padding: 9px 10px; border-radius: 5px; background: #f8fafc; }
.app-order-summary small { font-size: 11px; }
.app-order-summary strong { font-size: 14px; font-weight: 600; }
.app-order-card-actions { gap: 6px; padding-top: 4px; }
.app-order-card-actions .app-btn { min-height: 32px; padding: 6px 9px; font-size: 12px; }
.app-filter-checklist { gap: 6px; }
.app-filter-check { border-radius: 5px; min-height: 30px; font-size: 12px; }
.app-order-item-circle,.app-contact-icon,.app-contact-detail-icon { background: #f0f3f7; color: var(--muted-strong); border-radius: 5px; box-shadow: none; }
.app-contact-icon { width: 26px; height: 26px; font-size: 12px; }
.app-contact-avatar { width: 40px; height: 40px; border-radius: 8px; background: var(--primary-soft); color: #126cda; font-size: 14px; }
.app-empty { padding: 24px 16px; border-radius: 8px; background: #fafbfd; font-size: 13px; }
.ws-error { padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.app-modal-backdrop { padding: 20px; background: rgba(20,30,45,.35); backdrop-filter: none; }
.app-modal { padding: 20px; gap: 14px; border-radius: 12px; border-color: var(--stroke); box-shadow: 0 16px 48px rgba(10,20,35,.16); }
.app-modal-head { padding-bottom: 12px; border-bottom: 1px solid var(--stroke); }
.app-modal-actions { padding-top: 12px; border-top: 1px solid var(--stroke); }
.app-contact-detail-card,.app-contact-address-card,.app-order-address-card,.app-billing-summary-card,.app-packing-box-card,.app-packing-review-box-card,.app-appointment-participant-card { padding: 12px; border-radius: 7px; background: #f9fafc; box-shadow: none; }
.app-contact-detail-grid,.app-appointment-summary-grid { gap: 10px; }
.app-contact-detail-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.app-contact-detail-value { font-size: 14px; line-height: 1.5; }
.app-contact-edit-btn,.app-contact-mini-btn,.app-detail-action { border-radius: 5px; box-shadow: none; }
.app-order-shopping-media { width: 42px; height: 42px; border-radius: 6px; background: #f1f4f8; }
.app-order-shopping-head strong { font-size: 14px; }
.app-order-shopping-item { padding: 10px; border-radius: 6px; }
.app-packing-box-shell,.app-packing-review-box-shell { background: #f8fafc; border-radius: 7px; box-shadow: none; }
.app-packing-box-index { width: 28px; height: 28px; border-radius: 5px; font-size: 12px; background: #eef2f7 !important; color: var(--muted-strong) !important; border-color: var(--stroke) !important; }
.app-packing-pill,.app-packing-product-chip,.app-packing-option,.app-packing-products-panel,.app-packing-picker { border-radius: 6px; box-shadow: none; }
.app-billing-modal .app-modal-actions { background: #fff; }
.app-modal-outcome-badge,.app-analysis-status-badge { box-shadow: none; animation: none; border-radius: 8px; }
.app-modal-outcome-copy { animation: none; }
.app-processing-loader-shell { min-height: 210px; padding: 20px; gap: 12px; }
.app-processing-loader-stage { min-height: 44px; }
.app-processing-loader-spinner { width: 30px; height: 30px; border-width: 2px; border-top-color: var(--primary); box-shadow: none; }
.app-processing-loader-badge { width: 40px; height: 40px; border-radius: 8px; font-size: 20px; animation: none; box-shadow: none; }
.app-processing-loader-badge.success { background: #edf8f1; color: #1f8550; box-shadow: none; }
.app-processing-loader-badge.error { background: #fff0f0; color: #b83232; box-shadow: none; }
.app-processing-result-enter { animation: none; }
.app-analysis-status-indicator { width: 30px; height: 30px; border-radius: 6px; font-size: 15px; box-shadow: none; }
.app-analysis-status-indicator:hover,.app-analysis-status-indicator:focus { transform: none; }
.app-modal-outcome-badge.success { background: #edf8f1; color: #1f8550; }
.app-modal-outcome-badge.error { background: #fff0f0; color: #b83232; }
.app-view-loader { min-height: 32px; padding: 8px 0; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); border: 0; background: transparent; }
.app-skeleton-card { padding: 14px; border-radius: 8px; background: #fafbfd; border-color: var(--stroke); }
.app-skeleton-line,.app-chart-skeleton-bar,.app-stat-icon-skeleton,.app-connection-status-dot.is-loading { background: linear-gradient(100deg,#edf0f4 25%,#f7f9fb 45%,#edf0f4 65%); background-size: 250% 100%; animation: shimmer 1.8s ease-in-out infinite; border-radius: 4px; }
.app-skeleton-line { height: 10px; margin-bottom: 10px; }
.app-skeleton-line:last-child { margin-bottom: 0; }
.app-stat-card-skeleton { min-height: 108px; }
.app-order-loading-card { min-height: 220px; }
.ws-auth-loader-backdrop { backdrop-filter: none; background: rgba(245,247,250,.86); }
.ws-auth-loader-card { padding: 24px; border-radius: 10px; box-shadow: var(--shadow-lg); max-width: 420px; }
.ws-auth-loader-copy strong { font-size: 17px; }
.ws-auth-loader-copy span { font-size: 13px; }
.ws-auth-loader-card .app-skeleton-card { width: min(100%,260px); margin-top: 0; }
.ws-login-shell { max-width: 1040px; margin: auto; gap: 24px; grid-template-columns: minmax(0,1fr) 390px; align-items: center; }
.ws-panel { border-radius: 12px; box-shadow: none; }
.ws-hero { padding: 32px; background: transparent; border: 0; }
.ws-hero::after { display: none; }
.ws-title { font-size: 34px; font-weight: 650; line-height: 1.2; letter-spacing: -.03em; margin-top: 28px; }
.ws-copy { font-size: 14px; line-height: 1.7; }
.ws-card { padding: 28px; background: #fff; gap: 16px; }
.ws-card-title { font-size: 22px; font-weight: 650; }
.ws-card-copy { font-size: 13px; line-height: 1.6; }
.ws-benefits { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
.ws-benefit { padding: 0 0 0 12px; border: 0; border-left: 2px solid #d5e7fc; border-radius: 0; background: transparent; }
.ws-benefit-title { font-size: 13px; font-weight: 600; }
.ws-benefit-copy { font-size: 12px; }
@media (max-width: 1180px) and (min-width: 901px) {
  .app-shell { grid-template-columns: 200px minmax(0,1fr); gap: 16px; }
  .app-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-stat-card { border-bottom: 1px solid var(--stroke); }
}
@media (max-width: 900px) {
  .page { padding: 12px; }
  .app-shell { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .app-mobilebar { padding: 10px 12px; border-radius: 8px; box-shadow: none; background: #fff; }
  .app-menu-btn { width: 38px; height: 38px; border-radius: 6px; }
  .app-sidebar { top: 8px; left: 8px; bottom: 8px; width: min(300px,calc(100vw - 16px)); }
  .app-sidebar-panel { height: 100%; padding: 16px 12px; border-radius: 10px; }
  .app-sidebar-backdrop { backdrop-filter: none; }
  .panel { padding: 16px; border-radius: 8px; }
  .app-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-stat-card { min-height: 100px; padding: 12px; border-bottom: 1px solid var(--stroke); }
  .app-stat-value { font-size: 28px; }
  .app-stat-icon { width: 20px; height: 20px; }
  .app-segmented { border-radius: 7px; }
  .app-segment { min-height: 36px; font-size: 12px; padding: 6px 10px; }
  .app-btn,.ws-btn { min-height: 42px; font-size: 13px; border-radius: 6px; }
  .app-date-range .app-input,.app-input,.app-select,.ws-field { min-height: 42px; font-size: 16px; }
  .ws-card { max-width: 440px; width: 100%; margin: 32px auto; padding: 24px; }
  .ws-login-shell { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page { padding: 8px; }
  .panel { padding: 14px; }
  .panel-title { font-size: 20px !important; }
  .app-modal .panel-title { font-size: 18px !important; }
  .app-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-orders-grid,.app-orders-loading-grid,.app-contacts-grid { grid-template-columns: minmax(0,1fr); }
  .app-modal-backdrop { padding: 8px; }
  .app-modal { padding: 16px; border-radius: 10px; max-height: calc(100dvh - 16px); }
  .app-modal-actions { gap: 8px; }
  .app-contact-detail-value { font-size: 14px; }
  .app-order-summary strong { font-size: 13px; }
  .app-order-card-actions .app-btn { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Roomy editors: one content scrollbar, stable actions. */
.app-billing-modal,.app-packing-modal,.app-packing-review-modal,.app-kvikk-review-modal {
  width: min(1180px,calc(100vw - 48px)); max-width: 1180px;
  height: min(900px,calc(100dvh - 48px)); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  padding: 20px;
}
.app-modal-head { align-items: flex-start; flex-shrink: 0; }
.app-modal-head .app-icon-btn { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; }
.app-billing-body,.app-packing-body,.app-packing-review-grid,.app-kvikk-review-grid {
  flex: 1 1 0; min-height: 0; max-height: none; overflow: auto;
  align-content: start; scrollbar-gutter: stable; overscroll-behavior: contain;
  padding: 16px; border: 1px solid var(--stroke); border-radius: 8px;
  background: #f8fafc;
}
.app-modal-actions,.app-billing-modal .app-modal-actions {
  position: static; flex: 0 0 auto; margin: 0; padding: 14px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff;
}
.app-modal-actions > span { font-size: 12px; line-height: 1.5; max-width: 55%; }
.app-modal-actions-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.app-modal-actions-right .app-btn { min-height: 40px; min-width: 112px; margin: 0; white-space: nowrap; }
.app-modal .ws-error,.app-modal .app-order-processing-notice { flex-shrink: 0; }
.app-lookup-modal { width: min(460px,100%); padding: 24px; }
.app-lookup-preview { display: grid; gap: 12px; padding: 20px; margin: 16px 0; background: #f7faff; border: 1px solid #e0eafb; border-radius: 8px; }
.app-lookup-preview .app-skeleton-line { height: 10px; width: 90%; }
.app-lookup-preview .app-skeleton-line:nth-child(2) { width: 68%; animation-delay: .15s; }
.app-lookup-preview .app-skeleton-line:nth-child(3) { width: 80%; animation-delay: .3s; }
.app-lookup-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #2264af; }
.app-lookup-detail,.app-lookup-hint { font-size: 13px; line-height: 1.6; color: var(--muted); }
.app-lookup-hint { padding: 12px; background: #f3f6fa; border-radius: 6px; margin-bottom: 0; }
@media (max-width: 600px) {
  .app-billing-modal,.app-packing-modal,.app-packing-review-modal,.app-kvikk-review-modal { width: 100%; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: 14px; gap: 10px; }
  .app-billing-body,.app-packing-body,.app-packing-review-grid,.app-kvikk-review-grid { padding: 10px; }
  .app-modal-actions { flex-wrap: wrap; }
  .app-modal-actions > span { max-width: 100%; }
  .app-modal-actions-right { width: 100%; }
  .app-modal-actions-right .app-btn { flex: 1; min-height: 44px; }
}
/* Invoice line overview and inline pencil editor. */
.app-billing-table-scroll { overflow-x: auto; scrollbar-gutter: stable; }
.app-billing-lines { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; font-variant-numeric: tabular-nums; }
.app-billing-lines thead { background: #f6f8fb; }
.app-billing-lines th,.app-billing-lines td { padding: 10px 12px; border-bottom: 1px solid var(--stroke); text-align: right; white-space: nowrap; }
.app-billing-lines thead th { color: #65748a; font-size: 11px; font-weight: 600; }
.app-billing-lines th:first-child { text-align: left; }
.app-billing-line th { width: 36%; font-weight: 500; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.app-billing-line:hover,.app-billing-line.editing { background: #f7faff; }
.app-billing-line-gross { font-weight: 650; color: #1b3557; }
.app-billing-lines td:last-child { width: 44px; padding: 6px 8px; }
.app-billing-line-edit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: #2266b0; background: #fff; }
.app-billing-line-edit:hover,.app-billing-line-edit[aria-expanded="true"] { background: #eaf3ff; border-color: #b6d2f5; }
.app-billing-lines .app-billing-line-editor-cell { padding: 0; text-align: left; white-space: normal; }
.app-billing-line-editor { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 16px; background: #f7faff; border-left: 3px solid #2489ff; }
.app-billing-line-name { grid-column: 1 / -1; }
.app-billing-line-editor .app-input { min-height: 38px; padding: 8px 10px; }
.app-billing-line-editor-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; }
.app-billing-line-editor-actions .app-btn { min-height: 36px; padding: 8px 14px; }
.app-billing-line-delete { color: #a63232 !important; }
.app-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-billing-simple-tools { gap: 10px; padding: 10px 0 14px; }
.app-billing-simple-tools .app-input { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.app-billing-simple-tools .app-btn { min-height: 36px; font-size: 12px; }
@media (max-width: 600px) {
  .app-billing-lines { font-size: 12px; min-width: 650px; }
  .app-billing-lines th,.app-billing-lines td { padding: 8px; }
  .app-billing-line-edit { width: 40px; height: 40px; }
}
/* Fast packing workstation without the decorative box diagram. */
.app-packing-intro-card { padding: 12px; gap: 10px; }
.app-packing-intro-top { align-items: center; }
.app-packing-auto-hint { padding: 10px 12px; }
.app-packing-box-card { padding: 14px; }
.app-packing-box-head { padding-bottom: 10px; margin-bottom: 0; }
.app-packing-box-body { gap: 12px; }
.app-packing-work-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: start; }
.app-packing-fields { display: grid; gap: 12px; }
.app-packing-dimensions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.app-packing-numbers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.app-packing-fields .app-input { min-height: 36px; padding: 8px 10px; text-align: left; }
.app-packing-fields .app-field-label { font-size: 11px; letter-spacing: .02em; }
.app-packing-fields .app-packing-hint { font-size: 11px; line-height: 1.4; margin: 0; }
.app-packing-work-grid .app-packing-products-panel { padding: 12px; min-width: 0; }
.app-packing-work-grid .app-packing-product-list { max-height: 240px; overflow: auto; scrollbar-gutter: stable; }
.app-packing-product-chip { padding: 8px; gap: 8px; border-radius: 6px; }
.app-packing-product-name { font-size: 12px; }
.app-packing-product-meta { font-size: 11px; }
.app-packing-preset-toolbar { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
.app-packing-preset-toolbar .app-input { min-height: 36px; padding: 7px 10px; }
.app-packing-products-sub { font-size: 11px; }
@media (max-width: 760px) {
  .app-packing-work-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .app-packing-work-grid .app-packing-product-list { max-height: 180px; }
  .app-packing-fields .app-input { min-height: 42px; font-size: 16px; }
  .app-packing-box-card { padding: 10px; }
}
@media (min-width: 901px) {
  .app-packing-intro-card { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 20px; align-items: center; }
  .app-packing-intro-text { display: none; }
  .app-packing-automation-bar { padding: 0 0 0 20px; border: 0; border-left: 1px solid var(--stroke); border-radius: 0; background: transparent; gap: 12px; }
  .app-packing-automation-bar .app-packing-intro-title { font-size: 12px; }
  .app-packing-automation-bar .app-packing-intro-text { display: block; font-size: 11px; }
  .app-packing-toggle { flex-shrink: 0; }
  .app-packing-work-grid .app-packing-product-list { max-height: 280px; }
}