/* Shared styles for app pages (CM-159) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===== Design tokens (CM-665) =====
   Semantic palette shared by all app pages. Values are the Tailwind
   slate/blue/green/red/amber shades already in use across the codebase;
   the token names describe the ROLE so pages reference intent, not raw
   hex. New/rebuilt pages (photos, fantasy) should consume these rather
   than re-hardcoding colours. */
:root {
  /* Text */
  --color-text-strong:    #111827;  /* h1, modal titles */
  --color-text-heading:   #1f2937;  /* h2 */
  --color-text:           #334155;  /* default body copy */
  --color-text-secondary: #475569;  /* secondary copy, labels */
  --color-text-muted:     #586475;  /* captions, hints, status — WCAG AA 4.5:1 on light bg (CM-14) */
  --color-text-disabled:  #94a3b8;  /* disabled controls */
  --color-text-faint:     #cbd5e1;  /* disabled stepper glyphs */
  --color-text-inverse:   #ffffff;  /* text on dark / brand surfaces */

  /* Brand (logo + marketing accents) — see docs/brand/brand.md */
  --color-brand-purple:   #7c3aed;  /* logo gradient start; marketing accent */
  --color-brand-pink:     #db2777;  /* logo gradient end; brand pink */
  --gradient-brand:       linear-gradient(90deg, #7c3aed, #db2777);  /* keep-forever headline gradient */

  /* Surfaces */
  --color-surface:        #ffffff;  /* cards, modals */
  --color-surface-subtle: #f8fafc;  /* image wells */
  --color-surface-muted:  #f1f5f9;  /* log / control backgrounds */
  --color-bg-page:        #f5f5f5;  /* document body */

  /* Borders */
  --color-border:         #e5e7eb;  /* default hairline */
  --color-border-strong:  #e2e8f0;  /* slate hairline / hover */
  --color-border-input:   #cccccc;  /* form-control border */

  /* Brand / primary (blue) */
  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-subtle: #eff6ff;  /* tinted background */
  --color-primary-border: #bfdbfe;

  /* Secondary CTA (emerald) */
  --color-secondary:       #059669;
  --color-secondary-hover: #047857;

  /* Success (green) */
  --color-success:         #16a34a;
  --color-success-hover:   #15803d;
  --color-success-bright:  #22c55e;  /* completed-state border */
  --color-success-subtle:  #f0fdf4;
  --color-success-border:  #bbf7d0;

  /* Danger — action red (buttons) */
  --color-danger:          #dc2626;
  --color-danger-hover:    #b91c1c;
  /* Error — status/text red, plus its tints (work-item failed, retry bar) */
  --color-error:           #ef4444;
  --color-danger-subtle:   #fef2f2;
  --color-danger-border:   #fecaca;

  /* Warning / neutral */
  --color-warning:         #f59e0b;  /* amber — env "test" banner */
  --color-warning-alt:     #eab308;  /* yellow — in-progress state */
  --color-neutral:         #6b7280;  /* gray — env "local" banner */

  /* Accent (purple — mockup section) */
  --color-accent-subtle:   #faf5ff;
  --color-accent-border:   #e9d5ff;

  /* Overlays & shadows */
  --color-overlay:         rgba(0, 0, 0, 0.7);
  --color-overlay-strong:  rgba(0, 0, 0, 0.9);
  --shadow-card:           0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-modal:          0 20px 60px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* CM-665: global guard so the `hidden` attribute always wins. Author rules
   that set `display` (e.g. `label { display: block }` below) outrank the UA
   `[hidden] { display: none }` rule — author origin beats UA origin — which
   silently breaks attribute-based hiding. `!important` makes the attribute
   authoritative regardless of selector specificity. This is the root-cause
   fix for the bug class behind CM-663; pages should toggle `el.hidden`
   instead of patching individual selectors. */
[hidden] { display: none !important; }
/* CM-647: disable iOS Safari auto text inflation, which can blow up font-size
   relative to viewport and cause fixed-position banners/labels to overflow. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; background: var(--color-bg-page); }

/* Visibility utilities (CM-665).
   Prefer the `hidden` attribute for show/hide (see the [hidden] rule above);
   use `.hidden` only where a class toggle is more convenient than an
   attribute. `.sr-only` hides content visually while keeping it available to
   assistive tech. */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Environment banner */
.env-banner { margin: -20px -20px 12px; padding: 6px 12px; text-align: center; font-weight: 600; font-size: 0.85rem; color: var(--color-text-inverse); }
/* Banner-scoped darker shades so the white text meets WCAG AA 4.5:1 (CM-14).
   The base --color-warning/--color-error (lighter amber/red) are kept for their
   other uses; only the full-width white-on-color banner needs the darker bg. */
.env-banner.test { background: #b45309; }  /* amber-700, white text 5.0:1 */
.env-banner.prod { background: #b91c1c; }  /* red-700, white text 6.5:1 */
.env-banner.local { background: var(--color-neutral); }  /* gray, white text 4.8:1 */
h1 { margin-bottom: 20px; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; color: var(--color-text-strong); }
h2 { margin-bottom: 12px; font-size: 1.125rem; font-weight: 600; color: var(--color-text-heading); }

/* Back link */
.back-link { display: inline-block; margin-bottom: 12px; font-size: 13px; color: var(--color-primary); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* Section cards */
.section { background: var(--color-surface); border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-card); }

/* Form elements */
label { display: block; font-weight: 600; margin-bottom: 4px; }
textarea, input, select { width: 100%; padding: 8px; border: 1px solid var(--color-border-input); border-radius: 4px; font-size: 14px; font-family: inherit; margin-bottom: 12px; }
textarea { height: 80px; resize: vertical; }
input[type="file"] { padding: 6px; }
input[type="checkbox"] { width: auto; margin: 0; }
input:disabled, select:disabled { background: var(--color-surface-muted); color: var(--color-text-disabled); cursor: not-allowed; }

/* Buttons */
button { padding: 10px 20px; background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: 6px; font-size: 14px; cursor: pointer; margin-right: 8px; margin-bottom: 8px; }
button:disabled { background: var(--color-text-disabled); cursor: not-allowed; }
button:hover:not(:disabled) { background: var(--color-primary-hover); }
button.secondary { background: var(--color-secondary); }
button.secondary:hover:not(:disabled) { background: var(--color-secondary-hover); }
button.danger { background: var(--color-danger); }
button.danger:hover:not(:disabled) { background: var(--color-danger-hover); }
button.small { padding: 4px 10px; font-size: 12px; margin: 4px 2px 0; }

/* Inline button spinner used to indicate an in-flight checkout request (CM-639).
   Drop a <span class="btn-spinner"></span> as the button's first child while
   awaiting the draft-order round trip. White-on-translucent reads on both the
   dark CTA backgrounds and the grey disabled state. */
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Progress bar */
.progress { margin-top: 12px; }
.progress-bar { height: 24px; background: var(--color-border); border-radius: 12px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-primary); transition: width 0.3s; border-radius: 12px; }
.progress-text { text-align: center; margin-top: 4px; font-size: 13px; color: var(--color-text-muted); }

/* Work items grid */
.work-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.work-item { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px; text-align: center; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.work-item.completed { border-color: var(--color-success-bright); }
.work-item.failed { border-color: var(--color-error); background: var(--color-danger-subtle); }
.work-item.generating, .work-item.processing, .work-item.uploading { border-color: var(--color-warning-alt); }
.work-item img { max-width: 100%; border-radius: 4px; margin-top: 4px; }
.work-item .status { font-size: 12px; color: var(--color-text-muted); }
.work-item .error { font-size: 11px; color: var(--color-error); }
.work-item .work-item-checkbox { margin-bottom: 4px; }

/* Log panel */
.log { font-size: 12px; color: var(--color-text); background: var(--color-surface-muted); padding: 8px; border-radius: 4px; margin-top: 8px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; }

/* Mockup section */
.mockup-section { margin-top: 12px; padding: 12px; background: var(--color-accent-subtle); border-radius: 6px; border: 1px solid var(--color-accent-border); }
.mockup-section h3 { margin-bottom: 8px; font-size: 14px; }
.mockup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.mockup-grid img { width: 100%; border-radius: 4px; }
.mockup-grid .mockup-item { text-align: center; }
.mockup-label { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.mockup-loading { font-size: 13px; color: var(--color-primary); }
.mockup-error { font-size: 13px; color: var(--color-error); }

/* Field validation warnings */
.field-warning { font-size: 12px; color: var(--color-error); margin-top: 2px; margin-bottom: 8px; }

/* Checkbox labels */
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 8px 0; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* Upload status */
.upload-status { font-size: 13px; color: var(--color-text-muted); margin-bottom: 12px; }
.upload-status.success { color: var(--color-success); }
.upload-status.error { color: var(--color-error); }
.preview-img { max-width: 200px; max-height: 200px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--color-border); }

/* Upload progress bar */
.upload-progress { margin-bottom: 12px; }
.upload-progress-bar { height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.upload-progress-fill { height: 100%; background: var(--color-primary); transition: width 0.2s; border-radius: 4px; }
.upload-progress-text { font-size: 12px; color: var(--color-primary); margin-top: 2px; }

/* Fantasy league-specific */
.league-info { font-size: 14px; color: var(--color-text); margin-bottom: 12px; padding: 10px; background: var(--color-success-subtle); border-radius: 6px; border: 1px solid var(--color-success-border); }
.order-summary { padding: 12px; background: var(--color-primary-subtle); border-radius: 6px; border: 1px solid var(--color-primary-border); margin-top: 12px; }

/* Retry bar */
.retry-bar { margin-top: 12px; padding: 10px; background: var(--color-danger-subtle); border-radius: 6px; border: 1px solid var(--color-danger-border); display: flex; align-items: center; gap: 12px; }
.retry-bar span { font-size: 13px; color: var(--color-danger); }

/* Quantity selector (CM-121) */
.quantity-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.quantity-row label { margin: 0; white-space: nowrap; }
.quantity-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border-input); border-radius: 6px; overflow: hidden; }
.quantity-stepper button { width: 36px; height: 36px; padding: 0; margin: 0; border: none; border-radius: 0; background: var(--color-surface-muted); color: var(--color-text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.quantity-stepper button:hover:not(:disabled) { background: var(--color-border-strong); }
.quantity-stepper button:disabled { color: var(--color-text-faint); cursor: not-allowed; }
.quantity-stepper .qty-value { width: 40px; text-align: center; font-size: 16px; font-weight: 600; border-left: 1px solid var(--color-border-input); border-right: 1px solid var(--color-border-input); line-height: 36px; }

/* Price breakdown (CM-121) */
.price-breakdown { font-size: 14px; color: var(--color-text); margin-bottom: 12px; line-height: 1.6; }
.price-breakdown .price-total { font-weight: 700; font-size: 16px; border-top: 1px solid var(--color-border); padding-top: 4px; margin-top: 4px; }

/* Order section (CM-121) */
.order-section { margin-top: 12px; padding: 16px; background: var(--color-primary-subtle); border-radius: 8px; border: 1px solid var(--color-primary-border); }

/* Mockup lightbox modal */
.mockup-lightbox-overlay {
  position: fixed; inset: 0; background: var(--color-overlay); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mockup-lightbox {
  background: var(--color-surface); border-radius: 12px; padding: 24px; max-width: 90vw; max-height: 90vh;
  overflow-y: auto; position: relative; box-shadow: var(--shadow-modal);
}
.mockup-lightbox h3 { margin-bottom: 16px; font-size: 18px; }
.mockup-lightbox-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: none; background: var(--color-surface-muted); border-radius: 50%; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary); margin: 0; padding: 0;
}
.mockup-lightbox-close:hover { background: var(--color-border-strong); }
.mockup-lightbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
  justify-content: center; max-width: 720px; margin: 0 auto;
}
.mockup-lightbox-grid .mockup-item { text-align: center; }
.mockup-lightbox-grid .mockup-item img {
  width: 100%; height: auto; max-height: 260px; object-fit: contain;
  border-radius: 8px; cursor: zoom-in; transition: transform 0.15s ease;
}
.mockup-lightbox-grid .mockup-item img:hover { transform: scale(1.03); }
.mockup-lightbox-grid .mockup-label { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
.mockup-lightbox-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 24px; color: var(--color-text-muted); font-size: 14px;
}
.mockup-lightbox-progress-track {
  width: 240px; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden;
}
.mockup-lightbox-progress-fill {
  height: 100%; width: 0%; background: var(--color-primary); border-radius: 4px;
  transition: width 0.5s ease;
}
.mockup-spinner-placeholder {
  width: 100%; aspect-ratio: 1; background: var(--color-surface-muted); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.mockup-loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--color-border-strong); border-top-color: var(--color-primary);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Banner slide-in — shared by event/league notification banners (CM-665). */
@keyframes bannerSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Fullscreen single-image viewer (CM-487) — tap a tile to zoom without leaving the page.
 * z-index 1300 keeps it above the review-art modal (1200) so click-to-zoom from the
 * modal preview works (CM-572). */
.image-lightbox-overlay {
  position: fixed; inset: 0; background: var(--color-overlay-strong); z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease-out; cursor: zoom-out;
}
.image-lightbox-image {
  max-width: 96vw; max-height: 92vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.image-lightbox-close {
  position: fixed; top: 12px; right: 12px; z-index: 1301;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.6); color: var(--color-text-inverse); font-size: 24px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
}
.image-lightbox-close:hover { background: rgba(0,0,0,0.85); }

/* Mockup lightbox mobile (CM-312) */
@media (max-width: 600px) {
  .mockup-lightbox {
    max-width: 100vw; max-height: 100vh; border-radius: 0;
    padding: 16px; padding-top: 56px;
  }
  .mockup-lightbox-close {
    position: fixed; top: 12px; right: 12px; z-index: 1001;
    width: 44px; height: 44px; font-size: 22px;
    background: rgba(0,0,0,0.6); color: var(--color-text-inverse);
  }
  .mockup-lightbox-close:hover { background: rgba(0,0,0,0.8); }
  .mockup-lightbox-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* Review art modal (CM-572) — paged review-and-approve flow before checkout */
.review-modal-overlay {
  position: fixed; inset: 0; background: var(--color-overlay); z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease-out;
}
.review-modal {
  background: var(--color-surface); border-radius: 12px; max-width: 720px; width: 92vw;
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal); position: relative;
}
.review-modal-header {
  padding: 20px 24px 12px; border-bottom: 1px solid var(--color-surface-muted);
}
.review-modal-title { font-size: 18px; font-weight: 700; color: var(--color-text-strong); margin: 0; }
.review-modal-subtitle { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.4; }
.review-modal-counter { font-size: 13px; color: var(--color-text-secondary); margin-top: 8px; font-weight: 600; }
.review-modal-dots { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.review-modal-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-faint);
  position: relative; cursor: pointer; border: 2px solid transparent;
  padding: 0; margin: 0; flex: 0 0 auto;
}
.review-modal-dot.current { border-color: var(--color-primary); background: var(--color-primary); }
.review-modal-dot.approved { background: var(--color-success); }
.review-modal-dot.approved.current { background: var(--color-success); border-color: var(--color-primary); }
.review-modal-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: none; background: var(--color-surface-muted); border-radius: 50%; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary); margin: 0; padding: 0;
}
.review-modal-close:hover { background: var(--color-border-strong); }
.review-modal-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 16px 24px;
  position: relative; overflow: hidden;
}
.review-modal-image-wrap {
  flex: 1 1 auto; min-height: 200px; max-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  width: 100%; touch-action: pan-y; position: relative;
}
.review-modal-image {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 8px; cursor: zoom-in; background: var(--color-surface-subtle);
}
.review-modal-image-label {
  font-size: 14px; color: var(--color-text-secondary); margin-top: 10px; text-align: center;
}
.review-modal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.95); color: var(--color-text);
  font-size: 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; z-index: 1;
}
.review-modal-arrow:hover:not(:disabled) { background: var(--color-surface); }
.review-modal-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.review-modal-arrow.prev { left: 8px; }
.review-modal-arrow.next { right: 8px; }
.review-modal-thumbs {
  display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto;
  border-top: 1px solid var(--color-surface-muted); flex: 0 0 auto;
}
.review-modal-thumb {
  width: 56px; height: 56px; border-radius: 6px; border: 2px solid var(--color-border-strong);
  position: relative; cursor: pointer; flex: 0 0 auto; padding: 0; margin: 0;
  background: var(--color-surface-subtle); overflow: hidden;
}
.review-modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.review-modal-thumb.current { border-color: var(--color-primary); }
.review-modal-thumb-check {
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-success); color: var(--color-text-inverse); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-surface);
}
.review-modal-actions {
  padding: 16px 24px; border-top: 1px solid var(--color-surface-muted);
  display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto;
}
.review-modal-actions-row { display: flex; gap: 8px; align-items: center; }
.review-modal-actions button { margin: 0; flex: 1; }
.review-modal-skip {
  background: none; border: none; color: var(--color-text-muted); font-size: 13px;
  cursor: pointer; padding: 6px 0; margin: 0; text-align: center; flex: 0 0 auto;
}
.review-modal-skip:hover { color: var(--color-text); text-decoration: underline; background: none; }
.review-modal-cta-final {
  background: var(--color-success); color: var(--color-text-inverse); border: none; padding: 14px 20px;
  border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer;
  margin: 0; width: 100%;
}
.review-modal-cta-final:hover { background: var(--color-success-hover); }

@media (max-width: 600px) {
  .review-modal {
    max-width: 100vw; width: 100vw; max-height: 100vh; height: 100vh;
    border-radius: 0;
  }
  .review-modal-thumbs { display: none; }
  .review-modal-arrow { display: none; }
  .review-modal-actions { padding: 12px 16px 16px; }
}

/* Size guide (CM-191) */
.size-guide { margin-bottom: 12px; }
.size-guide-toggle { background: none; border: 1px solid var(--color-primary); color: var(--color-primary); padding: 6px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; margin-bottom: 8px; }
.size-guide-toggle:hover { background: var(--color-primary-subtle); }
.size-guide-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.size-guide-table th { background: var(--color-surface-muted); text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--color-border-strong); font-weight: 600; }
.size-guide-table td { padding: 6px 10px; border-bottom: 1px solid var(--color-border); }
.size-guide-table tr.size-guide-selected { background: var(--color-primary-subtle); font-weight: 600; }
.size-guide-meta { font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }

/* Per-item quantity stepper in work item grid (CM-152) */
.work-item-qty { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.work-item-qty .qty-btn { width: 28px; height: 28px; padding: 0; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.work-item-qty .qty-value { min-width: 24px; text-align: center; font-weight: 600; font-size: 14px; }