From e3795575330b16a20a5fce52eeeed80c8baf435b Mon Sep 17 00:00:00 2001
From: Jacek Pyziak <jacek.pyziak@project-pro.pl>
Date: Sun, 22 Mar 2026 23:42:56 +0100
Subject: [PATCH] =?UTF-8?q?feat(24-shipment-presets-ui):=20kolorowe=20przy?=
 =?UTF-8?q?ciski=20preset=C3=B3w,=20popup=20tworzenia,=20autofill=20formul?=
 =?UTF-8?q?arza?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 24 complete:
- SCSS moduł _shipment-presets.scss (przyciski, popup, color picker)
- Sekcja presetów nad formularzem przesyłki z przyciskiem "Dodaj"
- Popup tworzenia presetu z nazwą i wyborem koloru (8 opcji)
- JS autofill: carrier, usługa dostawy, wymiary, waga, label format
- Obsługa 3 paneli: Allegro searchable, InPost select, Apaczka select

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .paul/ROADMAP.md                              |    2 +-
 .paul/STATE.md                                |   19 +-
 .../24-shipment-presets-ui/24-01-PLAN.md      |  254 ++
 .../24-shipment-presets-ui/24-01-SUMMARY.md   |  123 +
 public/assets/css/app.css                     | 2867 +----------------
 resources/scss/app.scss                       |    1 +
 resources/scss/modules/_shipment-presets.scss |   94 +
 resources/views/shipments/prepare.php         |  254 ++
 8 files changed, 740 insertions(+), 2874 deletions(-)
 create mode 100644 .paul/phases/24-shipment-presets-ui/24-01-PLAN.md
 create mode 100644 .paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md
 create mode 100644 resources/scss/modules/_shipment-presets.scss

diff --git a/.paul/ROADMAP.md b/.paul/ROADMAP.md
index ce1e76d..efece9b 100644
--- a/.paul/ROADMAP.md
+++ b/.paul/ROADMAP.md
@@ -13,7 +13,7 @@ Customowe przyciski szybkiego wypełniania formularza przygotowania przesyłki.
 | Phase | Name | Plans | Status |
 |-------|------|-------|--------|
 | 23 | Shipment Presets Backend | 1/1 | Complete ✓ |
-| 24 | Shipment Presets UI | TBD | Not started |
+| 24 | Shipment Presets UI | 1/1 | Complete ✓ |
 | 25 | Shipment Presets Management | TBD | Not started |
 
 ### Phase 23: Shipment Presets Backend
diff --git a/.paul/STATE.md b/.paul/STATE.md
index 1da90d6..39ffc97 100644
--- a/.paul/STATE.md
+++ b/.paul/STATE.md
@@ -10,10 +10,10 @@ See: .paul/PROJECT.md (updated 2026-03-12)
 ## Current Position
 
 Milestone: v1.0 Presety przesyłek
-Phase: [2] of [3] (Shipment Presets UI)
+Phase: [3] of [3] (Shipment Presets Management)
 Plan: Not started
-Status: Phase 23 complete, ready to plan Phase 24
-Last activity: 2026-03-22 — Phase 23 complete, transitioned to Phase 24
+Status: Phase 24 complete, ready to plan Phase 25
+Last activity: 2026-03-22 — Phase 24 complete, transitioned to Phase 25
 
 Progress:
 - v0.1 Initial Release: [██████████] 100% ✓
@@ -67,6 +67,11 @@ PLAN ──▶ APPLY ──▶ UNIFY
 | 2026-03-17 | Email history jako wpisy w order_activity_log (nie osobna sekcja) | Faza 15 | Spójność z istniejącym UX — jeden timeline zamiast fragmentacji |
 | 2026-03-17 | VariableResolver wydzielony z EmailTemplateController | Faza 15 | Reuse logiki zmiennych; resolwer niezależny od kontrolera szablonów |
 
+### Skill Audit (Faza 24, Plan 01)
+| Oczekiwany | Wywołany | Uwagi |
+|------------|---------|-------|
+| sonar-scanner | ✓ | 0 nowych issues na zmienionych plikach |
+
 ### Skill Audit (Faza 23, Plan 01)
 | Oczekiwany | Wywołany | Uwagi |
 |------------|---------|-------|
@@ -201,7 +206,7 @@ PLAN ──▶ APPLY ──▶ UNIFY
 - **Delivery mapping "Szukaj..." layout** — JS `attachSelectFilter()` w allegro.php tworzy input search dla InPost/Apaczka selectów, wizualnie wygląda jakby należał do wiersza powyżej. Pre-existing bug, do naprawy osobno.
 
 ### Git State
-Last commit: d6375cc — fix(22-regon-save-fix): naprawa zapisu REGON, BDO, KRS i logo
+Last commit: 03a237e — feat(23-shipment-presets-backend): tabela DB, repository CRUD i JSON API
 Branch: main
 Feature branches merged: none
 
@@ -211,9 +216,9 @@ Brak.
 ## Session Continuity
 
 Last session: 2026-03-22
-Stopped at: Phase 23 complete, ready to plan Phase 24
-Next action: /paul:plan for Phase 24 (Shipment Presets UI)
-Resume file: .paul/phases/23-shipment-presets-backend/23-01-SUMMARY.md
+Stopped at: Phase 24 complete, ready to plan Phase 25
+Next action: /paul:plan for Phase 25 (Shipment Presets Management)
+Resume file: .paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md
 Resume context:
 - v0.1: COMPLETE ✓ (6 phases, 15 plans)
 - v0.2: COMPLETE ✓ (1 phase, 5 plans)
diff --git a/.paul/phases/24-shipment-presets-ui/24-01-PLAN.md b/.paul/phases/24-shipment-presets-ui/24-01-PLAN.md
new file mode 100644
index 0000000..b0ac396
--- /dev/null
+++ b/.paul/phases/24-shipment-presets-ui/24-01-PLAN.md
@@ -0,0 +1,254 @@
+---
+phase: 24-shipment-presets-ui
+plan: 01
+type: execute
+wave: 1
+depends_on: ["23-01"]
+files_modified:
+  - resources/views/shipments/prepare.php
+  - resources/scss/modules/_shipment-presets.scss
+  - resources/scss/main.scss
+autonomous: false
+---
+
+<objective>
+## Goal
+Dodać sekcję presetów przesyłek nad formularzem przygotowania przesyłki: kolorowe przyciski, popup tworzenia presetu (nazwa + kolor), JS autofill formularza po kliknięciu.
+
+## Purpose
+Użytkownik chce jednym kliknięciem wypełnić formularz przesyłki zapisanymi parametrami — bez ręcznego wybierania przewoźnika, usługi, wymiarów za każdym razem.
+
+## Output
+- Sekcja presetów z kolorowymi przyciskami nad formularzem
+- Popup do tworzenia presetu (nazwa + kolor) z bieżących wartości formularza
+- JS: autofill formularza po kliknięciu przycisku presetu
+- SCSS style dla presetów
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+@.paul/ROADMAP.md
+@.paul/STATE.md
+
+## Prior Work
+@.paul/phases/23-shipment-presets-backend/23-01-SUMMARY.md
+
+## Source Files
+@resources/views/shipments/prepare.php
+@src/Modules/Shipments/ShipmentPresetController.php
+@routes/web.php
+</context>
+
+<skills>
+No specialized flows required for this plan (sonar-scanner required post-APPLY).
+</skills>
+
+<acceptance_criteria>
+
+## AC-1: Przyciski presetów widoczne nad formularzem
+```gherkin
+Given użytkownik otwiera stronę przygotowania przesyłki
+When w bazie istnieją presety
+Then nad formularzem wyświetlają się kolorowe przyciski z nazwami presetów
+And wyświetla się przycisk "Dodaj przycisk dostawy"
+```
+
+## AC-2: Kliknięcie presetu wypełnia formularz
+```gherkin
+Given preset ma zapisane: carrier=inpost, package_type=PACKAGE, weight=2kg, wymiary 30x25x10
+When użytkownik klika przycisk tego presetu
+Then formularz automatycznie wypełnia się tymi wartościami
+And odpowiedni panel przewoźnika staje się widoczny
+And usługa dostawy zostaje wybrana
+```
+
+## AC-3: Przycisk "Dodaj przycisk dostawy" tworzy preset z bieżących wartości
+```gherkin
+Given użytkownik wypełnił formularz (wybrał przewoźnika, usługę, wymiary itp.)
+When klika "Dodaj przycisk dostawy"
+Then pojawia się popup z polem nazwy i wyborem koloru
+When wpisuje nazwę i klika Zapisz
+Then preset zostaje zapisany przez API i przycisk pojawia się w sekcji
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: SCSS style dla presetów</name>
+  <files>resources/scss/modules/_shipment-presets.scss, resources/scss/main.scss</files>
+  <action>
+    1. Utworzyć `resources/scss/modules/_shipment-presets.scss`:
+       - `.shipment-presets` — kontener sekcji (flex, wrap, gap: 8px, margin-bottom: 16px)
+       - `.shipment-presets__btn` — przycisk presetu:
+         - Inline-flex, border-radius: 6px, padding: 6px 14px
+         - Biały tekst, tło z custom property `--preset-color`
+         - Hover: opacity 0.85, cursor pointer
+         - Font-size: 13px, font-weight: 500
+       - `.shipment-presets__add` — przycisk dodawania:
+         - Border: 1px dashed #ccc, background transparent
+         - Color: #666, hover: border-color #999
+       - `.preset-modal` — overlay popup:
+         - Position fixed, inset 0, background rgba(0,0,0,0.4), z-index 1000
+         - Display flex, align-items center, justify-content center
+       - `.preset-modal__content` — zawartość popup:
+         - Background white, border-radius 8px, padding 24px, min-width 360px, max-width 420px
+       - `.preset-modal__colors` — grid kolorów:
+         - Display flex, gap 8px, flex-wrap wrap
+       - `.preset-modal__color-swatch` — próbka koloru:
+         - Width 28px, height 28px, border-radius 50%, cursor pointer
+         - Border: 2px solid transparent
+         - `&.is-selected` — border-color: #333
+
+    2. Dodać `@import 'modules/shipment-presets';` w `resources/scss/main.scss`
+  </action>
+  <verify>Sprawdzić że plik SCSS istnieje i import dodany do main.scss</verify>
+  <done>AC-1 partially: style gotowe</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: HTML sekcja presetów + popup + JavaScript</name>
+  <files>resources/views/shipments/prepare.php</files>
+  <action>
+    1. **Sekcja presetów** — wstawić PRZED `<form>` (po zamknięciu sekcji flash messages, linia ~63):
+
+       ```html
+       <section class="shipment-presets" id="shipment-presets">
+         <!-- Buttons rendered by JS -->
+         <button type="button" class="shipment-presets__add" id="preset-add-btn">+ Dodaj przycisk dostawy</button>
+       </section>
+       ```
+
+    2. **Popup modal** — wstawić na końcu pliku (przed zamykającym `</script>` lub po ostatnim `</section>`):
+
+       ```html
+       <div class="preset-modal" id="preset-modal" style="display:none">
+         <div class="preset-modal__content">
+           <h3>Nowy przycisk dostawy</h3>
+           <label class="form-field mt-12">
+             <span class="field-label">Nazwa</span>
+             <input class="form-control" type="text" id="preset-name-input" maxlength="100" placeholder="np. InPost Paczkomat Standard">
+           </label>
+           <div class="form-field mt-12">
+             <span class="field-label">Kolor</span>
+             <div class="preset-modal__colors" id="preset-color-picker">
+               <!-- 8 kolorów do wyboru -->
+             </div>
+           </div>
+           <div class="form-actions mt-16">
+             <button type="button" class="btn btn--primary" id="preset-save-btn">Zapisz</button>
+             <button type="button" class="btn btn--secondary" id="preset-cancel-btn">Anuluj</button>
+           </div>
+         </div>
+       </div>
+       ```
+
+    3. **JavaScript** — dodać w istniejącym bloku `<script>` na końcu prepare.php:
+
+       Logika JS (dodać jako IIFE):
+
+       a) **Konfiguracja kolorów:**
+          ```javascript
+          const PRESET_COLORS = [
+            '#3b82f6', '#ef4444', '#10b981', '#f59e0b',
+            '#8b5cf6', '#ec4899', '#06b6d4', '#6b7280'
+          ];
+          ```
+
+       b) **Ładowanie presetów:** fetch GET /api/shipment-presets → renderowanie przycisków
+          - Dla każdego presetu: `<button class="shipment-presets__btn" style="--preset-color: {color}; background: {color}" data-preset-id="{id}">{name}</button>`
+          - Wstawić PRZED przyciskiem "Dodaj"
+
+       c) **Kliknięcie presetu → autofill:**
+          - Ustawić select `#shipment-carrier-select` na preset.carrier i wystrzelić event 'change'
+          - Po 100ms (żeby panel się pokazał):
+            - Ustawić ukryte pola: delivery_method_id, credentials_id, carrier_id, provider_code
+            - Ustawić package_type, length_cm, width_cm, height_cm, weight_kg
+            - Ustawić sender_point_id, label_format
+            - Dla odpowiedniego panelu przewoźnika:
+              - Allegro: znaleźć opcję w searchable dropdown po data-value === delivery_method_id, kliknąć ją
+              - InPost: ustawić select[name="inpost_service"] na delivery_method_id
+              - Apaczka: ustawić select[name="apaczka_service"] na delivery_method_id
+
+       d) **Przycisk "Dodaj" → popup:**
+          - Pokazać modal
+          - Wygenerować swatche kolorów (PRESET_COLORS)
+          - Zaznaczenie koloru → is-selected
+          - Input nazwy focus
+
+       e) **Zapisanie presetu:**
+          - Zebrać bieżące wartości formularza:
+            carrier (z #shipment-carrier-select), provider_code, delivery_method_id, credentials_id, carrier_id,
+            package_type, length_cm, width_cm, height_cm, weight_kg, sender_point_id, label_format
+          - POST /api/shipment-presets z name, color i zebranymi danymi (JSON, Content-Type: application/json)
+          - Po sukcesie: zamknąć modal, przeładować listę presetów
+
+       f) **Anuluj:** zamknąć modal, wyczyścić input
+
+    Ważne:
+    - Nie modyfikować istniejącego JS (carrier selection, status polling itp.)
+    - fetch() z credentials: 'same-origin' (sesja PHP)
+    - Autofill musi obsłużyć 3 różne panele przewoźników (allegro searchable dropdown, inpost select, apaczka select)
+  </action>
+  <verify>php -l resources/views/shipments/prepare.php — brak błędów składni PHP</verify>
+  <done>AC-1, AC-2, AC-3 satisfied</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Sekcja presetów przesyłek nad formularzem: kolorowe przyciski, popup tworzenia, autofill formularza</what-built>
+  <how-to-verify>
+    1. Uruchomić migrację: wykonaj SQL z database/migrations/20260322_000059_create_shipment_presets_table.sql na bazie
+    2. Zbudować SCSS: npm run build (lub odpowiedni skrypt)
+    3. Odwiedź: /orders/{dowolne-id}/shipment/prepare
+    4. Powinien być widoczny przycisk "+ Dodaj przycisk dostawy"
+    5. Wypełnij formularz: wybierz przewoźnika, usługę, wymiary
+    6. Kliknij "Dodaj przycisk dostawy" — popup z nazwą i kolorem
+    7. Wpisz nazwę, wybierz kolor, kliknij Zapisz
+    8. Przycisk powinien się pojawić w sekcji
+    9. Odśwież stronę — przycisk nadal widoczny
+    10. Kliknij przycisk — formularz powinien się wypełnić zapisanymi wartościami
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- src/Modules/Shipments/ShipmentController.php (nie modyfikować kontrolera)
+- src/Modules/Shipments/ShipmentPresetController.php (gotowy z fazy 23)
+- src/Modules/Shipments/ShipmentPresetRepository.php (gotowy z fazy 23)
+- routes/web.php (routing gotowy z fazy 23)
+- Istniejący JS w prepare.php (carrier selection, status polling, print)
+
+## SCOPE LIMITS
+- Tylko tworzenie presetów i autofill — edycja/usuwanie w fazie 25
+- Brak auto-submit formularza po kliknięciu presetu (na razie)
+- Brak drag & drop sortowania (faza 25)
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] Sekcja presetów widoczna nad formularzem
+- [ ] Przyciski ładują się z API
+- [ ] Popup tworzenia działa (nazwa + kolor)
+- [ ] Autofill wypełnia formularz po kliknięciu presetu
+- [ ] php -l na prepare.php — OK
+- [ ] SCSS zbudowany
+- [ ] Human verification checkpoint passed
+</verification>
+
+<success_criteria>
+- Kolorowe przyciski presetów widoczne nad formularzem
+- Kliknięcie presetu wypełnia formularz
+- Popup tworzenia presetu z nazwą i kolorem działa
+- Brak regresji w istniejącej funkcjonalności przesyłek
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md`
+</output>
diff --git a/.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md b/.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md
new file mode 100644
index 0000000..03082e5
--- /dev/null
+++ b/.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md
@@ -0,0 +1,123 @@
+---
+phase: 24-shipment-presets-ui
+plan: 01
+subsystem: shipments
+tags: [shipment-presets, ui, autofill, javascript]
+
+requires:
+  - phase: 23-shipment-presets-backend
+    provides: JSON API endpoints for presets CRUD
+provides:
+  - Kolorowe przyciski presetów nad formularzem przesyłki
+  - Popup tworzenia presetu (nazwa + kolor)
+  - JS autofill formularza po kliknięciu presetu
+affects: [25-shipment-presets-management]
+
+tech-stack:
+  added: []
+  patterns:
+    - URLSearchParams dla fetch POST (Request::input() nie parsuje JSON)
+    - _syncTrigger() na enhanced selectach po programowym ustawieniu value
+
+key-files:
+  created:
+    - resources/scss/modules/_shipment-presets.scss
+  modified:
+    - resources/scss/app.scss
+    - public/assets/css/app.css
+    - resources/views/shipments/prepare.php
+
+key-decisions:
+  - "URLSearchParams zamiast JSON.stringify — Request::input() czyta z $_POST"
+  - "Autofill: _syncTrigger() + bezpośrednie ustawianie hidden fields i search input"
+
+patterns-established:
+  - "Preset autofill musi wywoływać _syncTrigger() na enhanced selectach"
+  - "Allegro searchable dropdown: ustawić is-selected + searchInput.value + hidden fields z data-attributes"
+
+duration: 15min
+started: 2026-03-22T00:00:00Z
+completed: 2026-03-22T00:15:00Z
+---
+
+# Phase 24 Plan 01: Shipment Presets UI Summary
+
+**Kolorowe przyciski presetów nad formularzem przesyłki z popup tworzenia i JS autofill — użytkownik jednym kliknięciem wypełnia formularz zapisanymi parametrami.**
+
+## Performance
+
+| Metric | Value |
+|--------|-------|
+| Duration | ~15 min |
+| Tasks | 3 completed (2 auto + 1 checkpoint) |
+| Files created | 1 |
+| Files modified | 3 |
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Przyciski widoczne nad formularzem | Pass | Sekcja z kolorowymi przyciskami + "Dodaj przycisk dostawy" |
+| AC-2: Kliknięcie presetu wypełnia formularz | Pass | Carrier, usługa, wymiary, waga, label format — potwierdzone przez użytkownika |
+| AC-3: Popup tworzy preset z bieżących wartości | Pass | Nazwa + kolor, zapis przez API, przycisk pojawia się natychmiast |
+
+## Accomplishments
+
+- SCSS moduł `_shipment-presets.scss` z stylami przycisków, popupu i color picker
+- Sekcja presetów wstawiona nad `<form>` w prepare.php
+- Popup z nazwą i 8 kolorami do wyboru
+- JS: fetch presetów z API, renderowanie przycisków, autofill 3 typów paneli (Allegro searchable, InPost select, Apaczka select)
+- SonarQube: 0 nowych issues
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `resources/scss/modules/_shipment-presets.scss` | Created | Style przycisków, popupu, color picker |
+| `resources/scss/app.scss` | Modified | Dodany @use shipment-presets |
+| `public/assets/css/app.css` | Modified | Przebudowany CSS |
+| `resources/views/shipments/prepare.php` | Modified | Sekcja presetów, popup, ~180 linii JS |
+
+## Decisions Made
+
+| Decision | Rationale | Impact |
+|----------|-----------|--------|
+| URLSearchParams zamiast JSON | Request::input() czyta z $_POST, nie parsuje JSON body | Spójne z resztą projektu |
+| _syncTrigger() po value change | enhanceSelect() ukrywa natywny select — trzeba sync custom UI | Wzorzec do reuse w fazie 25 |
+| Bezpośrednie ustawianie hidden fields dla Allegro | opt.click() nie działał niezawodnie w searchable dropdown | Bardziej deterministyczne |
+
+## Deviations from Plan
+
+### Summary
+
+| Type | Count | Impact |
+|------|-------|--------|
+| Auto-fixed | 2 | Zmiana content-type + autofill fix |
+
+**1. JSON → URLSearchParams**
+- Found during: Task 2 (checkpoint testing — 422 error)
+- Fix: Zmieniono Content-Type na form-urlencoded, użyto URLSearchParams
+
+**2. Autofill nie zmieniał carrier/usługi**
+- Found during: Checkpoint (user report)
+- Fix: Dodano _syncTrigger() na carrier select, bezpośrednie ustawianie hidden fields i search input text dla Allegro, _syncTrigger() dla InPost/Apaczka
+
+## Issues Encountered
+
+None remaining — oba issues naprawione podczas checkpointu.
+
+## Next Phase Readiness
+
+**Ready:**
+- Presety tworzą się i wypełniają formularz
+- Faza 25 może dodać edycję/usuwanie/sortowanie
+
+**Concerns:**
+- Brak
+
+**Blockers:**
+- None
+
+---
+*Phase: 24-shipment-presets-ui, Plan: 01*
+*Completed: 2026-03-22*
diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 56e0492..8355b2d 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -1,2866 +1 @@
-@charset "UTF-8";
-:root {
-  --c-primary: #6690f4;
-  --c-primary-dark: #3164db;
-  --c-bg: #f4f6f9;
-  --c-surface: #ffffff;
-  --c-text: #4e5e6a;
-  --c-text-strong: #2d3748;
-  --c-muted: #718096;
-  --c-border: #b0bec5;
-  --c-danger: #cc0000;
-  --focus-ring: 0 0 0 3px rgba(102, 144, 244, 0.15);
-  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 34px;
-  padding: 6px 12px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  font: inherit;
-  font-weight: 600;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
-}
-
-.btn--primary {
-  color: #ffffff;
-  background: var(--c-primary);
-}
-
-.btn--primary:hover {
-  background: var(--c-primary-dark);
-}
-
-.btn--secondary {
-  color: var(--c-text-strong);
-  border-color: var(--c-border);
-  background: var(--c-surface);
-}
-
-.btn--secondary:hover {
-  border-color: #cbd5e0;
-  background: #f8fafc;
-}
-
-.btn--danger {
-  color: #ffffff;
-  border-color: #b91c1c;
-  background: #dc2626;
-}
-
-.btn--danger:hover {
-  border-color: #991b1b;
-  background: #b91c1c;
-}
-
-.btn--sm {
-  min-height: 28px;
-  padding: 3px 10px;
-  font-size: 12px;
-}
-
-.btn--block {
-  width: 100%;
-}
-
-.btn--disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.btn:active {
-  transform: translateY(1px);
-}
-
-.btn:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-  border-color: var(--c-primary);
-}
-
-.form-control {
-  width: 100%;
-  min-height: 30px;
-  border: 1px solid var(--c-border);
-  border-radius: 6px;
-  padding: 4px 8px;
-  font: inherit;
-  color: var(--c-text-strong);
-  background: #ffffff;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: var(--c-primary);
-  box-shadow: var(--focus-ring);
-}
-
-.input {
-  min-height: 34px;
-  border: 1px solid var(--c-border);
-  border-radius: 8px;
-  padding: 5px 10px;
-  font: inherit;
-  color: var(--c-text-strong);
-  background: #ffffff;
-}
-
-.input--sm {
-  min-height: 28px;
-  padding: 3px 8px;
-  font-size: 12px;
-}
-
-.flash {
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-size: 13px;
-}
-
-.flash--success {
-  border: 1px solid #b7ebcf;
-  background: #f0fff6;
-  color: #0f6b39;
-}
-
-.flash--error {
-  border: 1px solid #fed7d7;
-  background: #fff5f5;
-  color: var(--c-danger);
-}
-
-.alert {
-  padding: 12px 14px;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  font-size: 13px;
-  min-height: 44px;
-}
-
-.alert--danger {
-  border-color: #fed7d7;
-  background: #fff5f5;
-  color: var(--c-danger);
-}
-
-.alert--success {
-  border-color: #b7ebcf;
-  background: #f0fff6;
-  color: #0f6b39;
-}
-
-.alert--warning {
-  border-color: #f7dd8b;
-  background: #fff8e8;
-  color: #815500;
-}
-
-.form-field {
-  display: grid;
-  gap: 5px;
-}
-
-.field-label {
-  color: var(--c-text-strong);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.table-wrap {
-  width: 100%;
-  overflow-x: auto;
-}
-.table-wrap--visible {
-  overflow: visible !important;
-  overflow-x: visible !important;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  background: var(--c-surface);
-}
-
-.table th,
-.table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--c-border);
-  text-align: left;
-}
-
-.table th {
-  color: var(--c-text-strong);
-  font-weight: 700;
-  background: #f8fafc;
-}
-
-.table--details th {
-  white-space: nowrap;
-}
-
-.table--details th:first-child,
-.table--details td:first-child {
-  width: 36px;
-  text-align: center;
-}
-
-.pagination {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.pagination__item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 36px;
-  height: 36px;
-  padding: 0 10px;
-  border-radius: 8px;
-  border: 1px solid var(--c-border);
-  color: var(--c-text-strong);
-  background: var(--c-surface);
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.pagination__item:hover {
-  border-color: #cbd5e0;
-  background: #f8fafc;
-}
-
-.pagination__item.is-active {
-  border-color: var(--c-primary);
-  color: var(--c-primary);
-  background: #edf2ff;
-}
-
-.receipt-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid var(--c-text-strong);
-}
-.receipt-header__seller {
-  flex: 1;
-}
-.receipt-header__seller strong {
-  font-size: 14px;
-  display: block;
-  margin-bottom: 4px;
-}
-.receipt-header__title {
-  text-align: right;
-}
-.receipt-header__title h1 {
-  font-size: 18px;
-  font-weight: 700;
-  margin-bottom: 4px;
-}
-
-.receipt-print {
-  max-width: 700px;
-  margin: 0 auto;
-}
-@media print {
-  .receipt-print {
-    max-width: 100%;
-  }
-}
-
-.email-send-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.email-send-modal {
-  background: var(--c-card-bg, #fff);
-  border-radius: 8px;
-  width: 580px;
-  max-width: 95vw;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-}
-.email-send-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--c-border, #e0e0e0);
-}
-.email-send-modal__header h3 {
-  margin: 0;
-  font-size: 15px;
-}
-.email-send-modal__close {
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  color: var(--c-text-muted, #888);
-  padding: 0 4px;
-}
-.email-send-modal__close:hover {
-  color: var(--c-text, #333);
-}
-.email-send-modal__body {
-  padding: 16px;
-  overflow-y: auto;
-  flex: 1;
-}
-.email-send-modal__field {
-  margin-bottom: 10px;
-}
-.email-send-modal__field label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 4px;
-  color: var(--c-text-muted, #666);
-}
-.email-send-modal__field .input {
-  width: 100%;
-}
-.email-send-modal__actions-top {
-  margin-bottom: 10px;
-}
-.email-send-modal__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid var(--c-border, #e0e0e0);
-}
-
-.email-send-preview {
-  border: 1px solid var(--c-border, #e0e0e0);
-  border-radius: 4px;
-  padding: 12px;
-  max-height: 280px;
-  overflow-y: auto;
-  background: var(--c-bg, #fafafa);
-}
-.email-send-preview__subject {
-  font-weight: 600;
-  font-size: 13px;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--c-border, #e0e0e0);
-}
-.email-send-preview__body {
-  font-size: 13px;
-  line-height: 1.5;
-}
-.email-send-preview__body p {
-  margin: 0 0 8px;
-}
-.email-send-preview__attachments {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--c-border, #e0e0e0);
-  font-size: 12px;
-  color: var(--c-text-muted, #666);
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.automation-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px;
-  background: var(--c-surface, #f8f9fa);
-  border: 1px solid var(--c-border, #dee2e6);
-  border-radius: 6px;
-}
-.automation-row__fields {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.automation-row__type {
-  max-width: 280px;
-}
-.automation-row__config {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.automation-row__config .form-control {
-  min-width: 200px;
-  max-width: 300px;
-}
-.automation-row__remove {
-  flex-shrink: 0;
-  margin-top: 2px;
-  line-height: 1;
-  font-size: 16px;
-  padding: 2px 8px;
-}
-
-.checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.checkbox-label input[type=checkbox] {
-  margin: 0;
-}
-
-.print-status-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 3px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.4;
-}
-.print-status-badge--pending {
-  background-color: #fff3cd;
-  color: #856404;
-}
-.print-status-badge--completed {
-  background-color: #d4edda;
-  color: #155724;
-}
-.print-status-badge--failed {
-  background-color: #f8d7da;
-  color: #721c24;
-}
-
-.print-queue-filters {
-  display: flex;
-  gap: 4px;
-}
-
-.print-queue-table td, .print-queue-table th {
-  padding: 6px 8px;
-  font-size: 0.85rem;
-}
-
-.btn--outline-primary {
-  background: transparent;
-  border: 1px solid #4a90d9;
-  color: #4a90d9;
-  cursor: pointer;
-  border-radius: 3px;
-  font-size: 0.75rem;
-  padding: 3px 8px;
-  transition: background-color 0.15s, color 0.15s;
-}
-.btn--outline-primary:hover {
-  background-color: #4a90d9;
-  color: #fff;
-}
-.btn--outline-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.btn--outline-primary.is-success {
-  border-color: #28a745;
-  color: #28a745;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  min-height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: "Roboto", "Segoe UI", sans-serif;
-  font-size: 13px;
-  color: var(--c-text);
-  background: var(--c-bg);
-}
-
-a {
-  color: var(--c-primary);
-}
-
-.app-shell {
-  min-height: 100vh;
-  display: flex;
-}
-
-.sidebar {
-  width: 260px;
-  min-width: 260px;
-  flex-shrink: 0;
-  overflow: hidden;
-  transition: width 0.22s ease, min-width 0.22s ease;
-  border-right: 1px solid #243041;
-  background: #111a28;
-  padding: 18px 10px;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar.is-collapsed {
-  width: 52px;
-  min-width: 52px;
-}
-
-.sidebar__brand {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 4px 4px 16px;
-  gap: 6px;
-  min-width: 0;
-}
-
-.sidebar__brand-text {
-  color: #e9f0ff;
-  font-size: 24px;
-  font-weight: 300;
-  letter-spacing: -0.02em;
-  white-space: nowrap;
-  overflow: hidden;
-  flex: 1;
-  min-width: 0;
-}
-.sidebar__brand-text strong {
-  font-weight: 700;
-}
-
-.sidebar__collapse-btn {
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid #2a3a54;
-  border-radius: 6px;
-  color: #64748b;
-  cursor: pointer;
-  padding: 0;
-  transition: background 0.15s, color 0.15s;
-}
-.sidebar__collapse-btn:hover {
-  background: #1b2a3f;
-  color: #cbd5e1;
-}
-
-.sidebar__collapse-icon {
-  display: block;
-  transition: transform 0.22s ease;
-  flex-shrink: 0;
-}
-
-.sidebar.is-collapsed .sidebar__collapse-icon {
-  transform: rotate(180deg);
-}
-
-.sidebar__nav {
-  display: grid;
-  gap: 4px;
-}
-
-.sidebar__link {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  white-space: nowrap;
-  border-radius: 8px;
-  padding: 9px 10px;
-  text-decoration: none;
-  color: #cbd5e1;
-  font-weight: 600;
-}
-
-.sidebar__link:hover {
-  color: #f8fafc;
-  background: #1b2a3f;
-}
-
-.sidebar__link.is-active {
-  color: #ffffff;
-  background: #2e4f93;
-}
-
-.sidebar__group {
-  display: grid;
-  gap: 2px;
-}
-
-.sidebar__group-toggle {
-  list-style: none;
-  border-radius: 8px;
-  padding: 9px 10px;
-  color: #cbd5e1;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.sidebar__group-toggle::-webkit-details-marker {
-  display: none;
-}
-
-.sidebar__group:hover .sidebar__group-toggle,
-.sidebar__group-toggle:hover {
-  color: #f8fafc;
-  background: #1b2a3f;
-}
-
-.sidebar__group.is-active .sidebar__group-toggle {
-  color: #ffffff;
-  background: #2e4f93;
-}
-
-.sidebar__icon {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.85;
-}
-
-.sidebar__label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.sidebar__toggle-arrow {
-  flex-shrink: 0;
-  margin-left: auto;
-  opacity: 0.5;
-  transition: transform 0.18s ease;
-}
-
-details[open] > .sidebar__group-toggle .sidebar__toggle-arrow {
-  transform: rotate(180deg);
-}
-
-.sidebar__group-links {
-  display: grid;
-  gap: 2px;
-  padding-left: 12px;
-  overflow: hidden;
-}
-
-.sidebar__sublink {
-  border-radius: 6px;
-  padding: 7px 10px 7px 8px;
-  text-decoration: none;
-  color: #94a3b8;
-  font-size: 12.5px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  white-space: nowrap;
-}
-.sidebar__sublink::before {
-  content: "";
-  flex-shrink: 0;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: rgba(148, 163, 184, 0.3);
-  transition: background 0.15s;
-}
-.sidebar__sublink:hover {
-  color: #e2e8f0;
-  background: #1b2a3f;
-}
-.sidebar__sublink:hover::before {
-  background: rgba(148, 163, 184, 0.65);
-}
-.sidebar__sublink.is-active {
-  color: #ffffff;
-  background: rgba(46, 79, 147, 0.55);
-}
-.sidebar__sublink.is-active::before {
-  background: #93c5fd;
-}
-
-.app-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.topbar {
-  height: 50px;
-  border-bottom: 1px solid var(--c-border);
-  background: var(--c-surface);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.brand {
-  font-size: 22px;
-  font-weight: 300;
-  letter-spacing: -0.02em;
-  color: var(--c-text-strong);
-}
-
-.brand strong {
-  font-weight: 700;
-}
-
-.container {
-  max-width: none;
-  width: calc(100% - 20px);
-  margin: 12px 10px;
-  padding: 0 4px 14px;
-}
-
-.card {
-  background: var(--c-surface);
-  border-radius: 10px;
-  box-shadow: var(--shadow-card);
-  padding: 14px;
-}
-
-.card h1 {
-  margin: 0 0 10px;
-  color: var(--c-text-strong);
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.muted {
-  color: var(--c-muted);
-}
-
-.accent {
-  color: var(--c-primary);
-  font-weight: 600;
-}
-
-.users-form {
-  display: grid;
-  gap: 14px;
-  max-width: 460px;
-}
-
-.form-field {
-  margin-bottom: 12px;
-}
-
-.section-title {
-  margin: 0;
-  color: var(--c-text-strong);
-  font-size: 18px;
-  font-weight: 700;
-}
-
-h2.section-title,
-h3.section-title,
-h4.section-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 600;
-  padding: 6px 0;
-  border-bottom: 1px solid #e2e8f0;
-  color: var(--c-primary, #2563eb);
-}
-h2.section-title::before,
-h3.section-title::before,
-h4.section-title::before {
-  content: "■";
-  font-size: 0.55em;
-  opacity: 0.5;
-}
-
-h3.section-title,
-h4.section-title {
-  font-size: 15px;
-}
-h3.section-title::before,
-h4.section-title::before {
-  content: "◆";
-  font-size: 0.5em;
-}
-
-.mt-0 {
-  margin-top: 0;
-}
-
-.mt-4 {
-  margin-top: 4px;
-}
-
-.mt-12 {
-  margin-top: 8px;
-}
-
-.mt-16 {
-  margin-top: 12px;
-}
-
-.settings-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.settings-nav {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.settings-nav__link {
-  text-decoration: none;
-  border: 1px solid var(--c-border);
-  border-radius: 8px;
-  padding: 8px 12px;
-  color: var(--c-text-strong);
-  font-weight: 600;
-}
-
-.settings-nav__link:hover {
-  background: #f8fafc;
-}
-
-.settings-nav__link.is-active {
-  border-color: var(--c-primary);
-  color: var(--c-primary);
-  background: #edf2ff;
-}
-
-.settings-stat {
-  border: 1px solid var(--c-border);
-  border-radius: 8px;
-  padding: 12px;
-  background: #f8fafc;
-}
-
-.settings-stat__label {
-  display: block;
-  color: var(--c-muted);
-  font-size: 12px;
-  margin-bottom: 4px;
-}
-
-.settings-stat__value {
-  color: var(--c-text-strong);
-  font-size: 20px;
-}
-
-.settings-logs {
-  margin: 0;
-  padding: 12px;
-  border-radius: 8px;
-  border: 1px solid var(--c-border);
-  background: #0b1220;
-  color: #d1d5db;
-  font-size: 12px;
-  line-height: 1.5;
-  overflow: auto;
-}
-
-.settings-allegro-callback {
-  display: block;
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--c-border);
-  border-radius: 8px;
-  background: #f8fafc;
-  color: var(--c-text-strong);
-  font-size: 12px;
-  line-height: 1.45;
-  word-break: break-all;
-}
-
-.page-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.filters-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.filters-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.product-form .form-control {
-  width: 100%;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.form-grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-  align-items: start;
-}
-
-.form-grid-3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  align-items: start;
-}
-
-.form-grid-4 {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  align-items: start;
-}
-
-.form-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-.form-actions .btn {
-  align-self: flex-start;
-}
-
-.statuses-form {
-  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.statuses-form .form-actions {
-  grid-column: 1/-1;
-}
-
-.statuses-color-input {
-  min-height: 32px;
-  padding: 2px;
-}
-
-.statuses-hint {
-  grid-column: 1/-1;
-  margin: 0;
-}
-
-.statuses-group-block {
-  border: 1px solid var(--c-border);
-  border-radius: 10px;
-  padding: 8px;
-  background: #fbfdff;
-}
-
-.statuses-group-block__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.statuses-group-block__title {
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--c-text-strong);
-  font-size: 14px;
-}
-
-.statuses-color-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 999px;
-  border: 1px solid rgba(15, 23, 42, 0.15);
-}
-
-.statuses-dnd-list {
-  margin: 6px 0 0;
-  padding: 0;
-  list-style: none;
-  display: grid;
-  gap: 6px;
-}
-
-.statuses-dnd-item {
-  display: grid;
-  grid-template-columns: 24px 1fr;
-  gap: 6px;
-  border: 1px solid #dce4f0;
-  border-radius: 8px;
-  background: #fff;
-  padding: 6px;
-}
-
-.statuses-dnd-item__content {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.statuses-dnd-item.is-dragging {
-  opacity: 0.6;
-}
-
-.statuses-dnd-item__drag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed #cbd5e1;
-  border-radius: 6px;
-  color: #64748b;
-  cursor: grab;
-  user-select: none;
-  font-weight: 700;
-  font-size: 12px;
-}
-
-.statuses-dnd-item__drag:active {
-  cursor: grabbing;
-}
-
-.statuses-inline-form {
-  display: grid;
-  gap: 6px;
-}
-
-.statuses-inline-form--row {
-  grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) auto auto auto;
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.statuses-inline-form--row-group {
-  grid-template-columns: minmax(180px, 1.5fr) 56px auto auto auto;
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.statuses-inline-form--row .form-control,
-.statuses-inline-form--row-group .form-control {
-  min-height: 30px;
-  padding: 4px 8px;
-}
-
-.statuses-inline-form--row .btn,
-.statuses-inline-form--row-group .btn,
-.statuses-inline-delete .btn {
-  min-height: 30px;
-  padding: 4px 10px;
-  font-size: 12px;
-}
-
-.statuses-inline-check {
-  margin-top: 0;
-  white-space: nowrap;
-  font-size: 12px;
-}
-
-.statuses-inline-delete {
-  margin: 0;
-  flex: 0 0 auto;
-}
-
-.statuses-code-label {
-  font-size: 12px;
-  color: var(--c-muted);
-}
-
-.statuses-code-readonly {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-  font-size: 12px;
-}
-
-.statuses-code-readonly code {
-  background: #eef2f7;
-  border-radius: 6px;
-  padding: 1px 6px;
-  color: #1f2937;
-  font-size: 12px;
-}
-
-.field-inline {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 2px;
-}
-
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  z-index: 200;
-}
-
-.modal-backdrop[hidden] {
-  display: none;
-}
-
-.modal {
-  width: min(560px, 100%);
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
-  overflow: hidden;
-}
-
-.modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 16px 18px;
-  border-bottom: 1px solid var(--c-border);
-}
-
-.modal__header h3 {
-  margin: 0;
-  font-size: 18px;
-  color: var(--c-text-strong);
-}
-
-.modal__body {
-  padding: 16px 18px 18px;
-}
-
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #fed7d7;
-  background: #fff5f5;
-  color: #9b2c2c;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.status-pill.is-active {
-  border-color: #b7ebcf;
-  background: #f0fff6;
-  color: #0f6b39;
-}
-
-.table-row-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.table-row-actions form {
-  margin: 0;
-}
-
-.table-list {
-  display: grid;
-  gap: 14px;
-}
-
-.table-list__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.table-list__left {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.table-list-header-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.js-filter-toggle-btn.is-active {
-  border-color: #cbd5e0;
-  background: #edf2ff;
-  color: var(--c-primary-dark);
-}
-
-.table-filter-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  font-size: 11px;
-  font-weight: 700;
-  color: #fff;
-  background: var(--c-primary);
-  border-radius: 999px;
-}
-
-.table-filters-wrapper {
-  display: none;
-}
-
-.table-filters-wrapper.is-open {
-  display: block;
-}
-
-.table-list-filters {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
-  align-items: end;
-}
-
-.table-col-toggle-wrapper {
-  position: relative;
-}
-
-.table-col-toggle-dropdown {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: calc(100% + 6px);
-  z-index: 30;
-  width: 260px;
-  max-height: 360px;
-  overflow: auto;
-  border: 1px solid var(--c-border);
-  border-radius: 10px;
-  background: #fff;
-  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
-}
-
-.table-col-toggle-dropdown.is-open {
-  display: block;
-}
-
-.table-col-toggle-header {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--c-border);
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--c-muted);
-}
-
-.table-col-toggle-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  font-size: 13px;
-  color: var(--c-text-strong);
-}
-
-.table-col-toggle-item:hover {
-  background: #f8fafc;
-}
-
-.table-col-toggle-footer {
-  border-top: 1px solid var(--c-border);
-  padding: 8px 12px;
-}
-
-.table-col-hidden {
-  display: none;
-}
-
-.table-col-switch {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  min-width: 34px;
-  height: 18px;
-}
-
-.table-col-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-  position: absolute;
-}
-
-.table-col-switch-slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: #cbd5e1;
-  border-radius: 999px;
-  transition: background-color 0.2s ease;
-}
-
-.table-col-switch-slider::before {
-  content: "";
-  position: absolute;
-  height: 14px;
-  width: 14px;
-  left: 2px;
-  bottom: 2px;
-  background: #fff;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-}
-
-.table-col-switch input:checked + .table-col-switch-slider {
-  background: #16a34a;
-}
-
-.table-col-switch input:checked + .table-col-switch-slider::before {
-  transform: translateX(16px);
-}
-
-.table-sort-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--c-text-strong);
-  text-decoration: none;
-}
-
-.table-sort-link:hover {
-  color: var(--c-primary-dark);
-}
-
-.table-sort-icon.is-muted {
-  color: #a0aec0;
-}
-
-.table-list__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.table-list-per-page-form {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.table-list-per-page-form .form-control {
-  min-width: 90px;
-}
-
-.table-select-col {
-  width: 44px;
-  text-align: center;
-}
-
-.table-select-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.table-select-toggle input[type=checkbox] {
-  width: 16px;
-  height: 16px;
-}
-
-.orders-page .orders-head {
-  background: linear-gradient(120deg, #f8fbff 0%, #eef5ff 100%);
-  border: 1px solid #dbe7fb;
-}
-.orders-page .table-list {
-  border: 1px solid #dde5f2;
-  border-radius: 12px;
-  box-shadow: 0 6px 16px rgba(20, 44, 86, 0.08);
-}
-.orders-page .table-list__header {
-  padding: 10px 6px 2px;
-}
-.orders-page .table-list-filters {
-  padding: 6px 6px 2px;
-  border-top: 1px solid #ebf0f7;
-  border-bottom: 1px solid #ebf0f7;
-  background: #f9fbff;
-}
-.orders-page .table-wrap {
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid #e7edf6;
-}
-.orders-page .table thead th {
-  background: #f3f7fd;
-  color: #30435f;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-.orders-page .table tbody td {
-  vertical-align: middle;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-bottom-color: #edf2f8;
-}
-.orders-page .table tbody tr:hover td {
-  background: #f9fcff;
-}
-
-.orders-list-page {
-  padding: 10px;
-  margin-bottom: 10px;
-}
-
-.orders-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.orders-stats {
-  display: inline-grid;
-  grid-template-columns: repeat(3, minmax(86px, auto));
-  gap: 8px;
-}
-
-.orders-stat {
-  border: 1px solid #d8e2f0;
-  background: #f8fbff;
-  border-radius: 8px;
-  padding: 6px 8px;
-  line-height: 1.15;
-}
-.orders-stat__label {
-  display: block;
-  color: #5f6f83;
-  font-size: 11px;
-  margin-bottom: 2px;
-}
-.orders-stat__value {
-  color: #12233a;
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.orders-ref {
-  display: grid;
-  gap: 2px;
-  min-width: 170px;
-}
-.orders-ref__main {
-  font-weight: 700;
-  color: #0f1f35;
-  font-size: 14px;
-}
-.orders-ref__meta {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.orders-buyer {
-  display: grid;
-  gap: 2px;
-}
-.orders-buyer__name {
-  color: #0f172a;
-  font-weight: 600;
-  font-size: 14px;
-}
-.orders-buyer__meta {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.orders-status-wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  flex-wrap: wrap;
-}
-
-.order-tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #d8e1ef;
-  background: #f8fafc;
-  color: #334155;
-  border-radius: 999px;
-  padding: 2px 8px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.1;
-}
-.order-tag.is-info {
-  border-color: #bfdbfe;
-  background: #eff6ff;
-  color: #1d4ed8;
-}
-.order-tag.is-success {
-  border-color: #bbf7d0;
-  background: #f0fdf4;
-  color: #166534;
-}
-.order-tag.is-danger {
-  border-color: #fecaca;
-  background: #fef2f2;
-  color: #b91c1c;
-}
-.order-tag.is-warn {
-  border-color: #fde68a;
-  background: #fffbeb;
-  color: #92400e;
-}
-.order-tag.is-cod {
-  border-color: #f9a8d4;
-  background: #fdf2f8;
-  color: #9d174d;
-}
-.order-tag.is-unpaid {
-  border-color: #fca5a5;
-  background: #fef2f2;
-  color: #b91c1c;
-}
-
-.orders-mini {
-  font-size: 14px;
-  color: #223247;
-  line-height: 1.25;
-}
-.orders-mini__delivery {
-  font-size: 12px;
-  color: #64748b;
-  margin-bottom: 2px;
-  max-width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.orders-products {
-  display: grid;
-  gap: 4px;
-  min-width: 240px;
-}
-.orders-products__meta, .orders-products__more {
-  font-size: 12px;
-  color: #64748b;
-}
-
-.orders-product {
-  display: grid;
-  grid-template-columns: 48px 1fr;
-  gap: 6px;
-  align-items: center;
-}
-.orders-product__thumb {
-  width: 48px;
-  height: 48px;
-  border-radius: 4px;
-  border: 1px solid #dbe3ef;
-  object-fit: cover;
-  background: #fff;
-}
-.orders-product__thumb--empty {
-  display: inline-block;
-  background: #eef2f7;
-  border-style: dashed;
-}
-.orders-product__txt {
-  min-width: 0;
-  display: grid;
-  gap: 1px;
-}
-.orders-product__name {
-  font-size: 14px;
-  color: #0f172a;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.orders-product__qty {
-  font-size: 12px;
-  color: #64748b;
-}
-
-.orders-image-hover-wrap {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: zoom-in;
-}
-
-.orders-image-hover-popup {
-  display: none;
-  position: fixed;
-  left: auto;
-  top: auto;
-  width: 350px;
-  max-height: 350px;
-  object-fit: contain;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-  border: 1px solid #dfe3ea;
-  z-index: 100;
-  pointer-events: none;
-}
-
-.orders-image-hover-wrap:hover .orders-image-hover-popup {
-  display: block;
-}
-
-.activity-type-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  background: #e2e8f0;
-  color: #334155;
-}
-.activity-type-badge--status_change {
-  background: #dbeafe;
-  color: #1e40af;
-}
-.activity-type-badge--payment {
-  background: #dcfce7;
-  color: #166534;
-}
-.activity-type-badge--invoice {
-  background: #fef3c7;
-  color: #92400e;
-}
-.activity-type-badge--shipment {
-  background: #e0e7ff;
-  color: #3730a3;
-}
-.activity-type-badge--message {
-  background: #f3e8ff;
-  color: #6b21a8;
-}
-.activity-type-badge--document {
-  background: #fce7f3;
-  color: #9d174d;
-}
-.activity-type-badge--import {
-  background: #f1f5f9;
-  color: #475569;
-}
-.activity-type-badge--note {
-  background: #ecfdf5;
-  color: #065f46;
-}
-
-.text-nowrap {
-  white-space: nowrap;
-}
-
-.orders-money {
-  display: grid;
-  gap: 2px;
-}
-.orders-money__main {
-  color: #0f172a;
-  font-weight: 700;
-  font-size: 14px;
-}
-.orders-money__meta {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.table-list[data-table-list-id=orders] {
-  gap: 8px;
-}
-.table-list[data-table-list-id=orders] .table-list__header {
-  padding: 2px 0 0;
-}
-.table-list[data-table-list-id=orders] .table-list-filters {
-  gap: 8px;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-}
-.table-list[data-table-list-id=orders] .table th,
-.table-list[data-table-list-id=orders] .table td {
-  padding: 6px 8px;
-}
-.table-list[data-table-list-id=orders] .table thead th {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-}
-.table-list[data-table-list-id=orders] .table tbody td {
-  vertical-align: top;
-  font-size: 14px;
-  line-height: 1.25;
-}
-
-.order-show-layout {
-  display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
-  gap: 12px;
-  align-items: start;
-}
-
-.order-statuses-side {
-  position: sticky;
-  top: 60px;
-  padding: 10px;
-}
-.order-statuses-side__title {
-  font-size: 13px;
-  font-weight: 700;
-  color: #0f172a;
-  margin-bottom: 8px;
-}
-
-.order-status-group {
-  margin-bottom: 10px;
-}
-.order-status-group__name {
-  font-size: 12px;
-  color: #475569;
-  font-weight: 700;
-  margin-bottom: 5px;
-}
-
-.order-status-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 4px 6px;
-  border-radius: 6px;
-  color: #334155;
-  font-size: 12px;
-  text-decoration: none;
-}
-.order-status-row__count {
-  min-width: 24px;
-  text-align: center;
-  border-radius: 999px;
-  background: var(--status-color, #64748b);
-  padding: 1px 6px;
-  font-weight: 700;
-  font-size: 11px;
-  color: #ffffff;
-}
-
-.order-status-row:hover {
-  background: #f1f5f9;
-}
-
-.order-status-row.is-active {
-  background: rgba(15, 23, 42, 0.06);
-  color: #0f172a;
-  font-weight: 700;
-}
-
-.order-show-main {
-  min-width: 0;
-}
-
-.order-details-actions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 6px;
-}
-
-.order-details-page {
-  padding: 12px;
-}
-
-.order-details-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.order-back-link {
-  color: #475569;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.order-back-link:hover {
-  color: #1d4ed8;
-}
-
-.order-details-sub {
-  display: inline-flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.order-details-pill {
-  border-radius: 999px;
-  padding: 5px 10px;
-  background: #eef6ff;
-  border: 1px solid #cfe2ff;
-  color: #1d4ed8;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.order-status-change {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.order-status-change__form {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.order-status-change__select {
-  min-width: 180px;
-}
-
-.order-details-tabs {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.order-details-tab {
-  border: 1px solid #d6deea;
-  border-radius: 8px;
-  padding: 5px 10px;
-  color: #475569;
-  font-size: 12px;
-  background: #f8fafc;
-  cursor: pointer;
-}
-
-.order-details-tab.is-active {
-  border-color: #bfdbfe;
-  color: #1d4ed8;
-  background: #eff6ff;
-  font-weight: 700;
-}
-
-.order-item-cell {
-  display: grid;
-  grid-template-columns: 44px 1fr;
-  gap: 8px;
-  align-items: center;
-  min-width: 260px;
-}
-
-.order-item-thumb {
-  width: 44px;
-  height: 44px;
-  border-radius: 6px;
-  border: 1px solid #dbe3ef;
-  object-fit: cover;
-}
-
-.order-item-thumb--empty {
-  display: inline-block;
-  background: #eef2f7;
-  border-style: dashed;
-}
-
-.order-item-name {
-  font-weight: 600;
-  color: #0f172a;
-}
-
-.order-grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.order-grid-3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.order-kv {
-  margin: 0;
-  display: grid;
-  grid-template-columns: 150px 1fr;
-  gap: 6px 10px;
-  font-size: 12px;
-}
-
-.payment-summary {
-  display: grid;
-  gap: 6px;
-  max-width: 420px;
-}
-
-.payment-summary__row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 12px;
-}
-
-.payment-summary__label {
-  width: 150px;
-  flex-shrink: 0;
-  color: #64748b;
-}
-
-.payment-summary__value {
-  font-weight: 600;
-  color: #0f172a;
-}
-
-.order-kv dt {
-  color: #64748b;
-}
-
-.order-kv dd {
-  margin: 0;
-  color: #0f172a;
-  font-weight: 600;
-}
-
-.order-address {
-  display: grid;
-  gap: 3px;
-  font-size: 12px;
-  color: #0f172a;
-}
-
-.order-events {
-  display: grid;
-  gap: 8px;
-}
-
-.order-event {
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 8px;
-  background: #fbfdff;
-}
-
-.order-event__head {
-  color: #64748b;
-  font-size: 11px;
-}
-
-.order-event__body {
-  margin-top: 4px;
-  color: #0f172a;
-  font-size: 12px;
-}
-
-.order-tab-panel {
-  display: none;
-}
-
-.order-tab-panel.is-active {
-  display: block;
-}
-
-.order-empty-placeholder {
-  border: 1px dashed #cbd5e1;
-  border-radius: 8px;
-  min-height: 180px;
-  background: #f8fafc;
-}
-
-.order-status-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  border: 1px solid #cbd5e1;
-  color: #334155;
-  background: #f8fafc;
-}
-.order-status-badge.is-info {
-  border-color: #bfdbfe;
-  background: #eff6ff;
-  color: #1d4ed8;
-}
-.order-status-badge.is-success {
-  border-color: #bbf7d0;
-  background: #f0fdf4;
-  color: #166534;
-}
-.order-status-badge.is-danger {
-  border-color: #fecaca;
-  background: #fef2f2;
-  color: #b91c1c;
-}
-.order-status-badge.is-warn {
-  border-color: #fde68a;
-  background: #fffbeb;
-  color: #92400e;
-}
-.order-status-badge.is-empty {
-  color: #94a3b8;
-}
-
-.order-buyer {
-  display: grid;
-  gap: 2px;
-}
-.order-buyer__name {
-  color: #0f172a;
-  font-weight: 600;
-}
-.order-buyer__email {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.table-inline-action {
-  display: inline-block;
-  margin-right: 6px;
-}
-
-.product-name-cell {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.product-name-thumb {
-  width: 60px;
-  height: 60px;
-  border-radius: 6px;
-  object-fit: cover;
-  border: 1px solid var(--c-border);
-  background: #f8fafc;
-}
-
-.product-name-thumb--empty {
-  display: inline-block;
-  width: 60px;
-  height: 60px;
-  border-radius: 6px;
-  border: 1px dashed #cbd5e0;
-  background: #f8fafc;
-}
-
-.product-name-thumb-btn {
-  border: 0;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.product-name-thumb-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-  border-radius: 8px;
-}
-
-.modal--image-preview {
-  width: min(760px, 100%);
-}
-
-.product-image-preview__img {
-  display: block;
-  width: 100%;
-  max-height: 70vh;
-  object-fit: contain;
-  border-radius: 8px;
-  background: #f8fafc;
-}
-
-.product-images-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 12px;
-}
-
-.product-image-card {
-  border: 1px solid #dfe3ea;
-  border-radius: 10px;
-  padding: 10px;
-  background: #fff;
-}
-
-.product-image-card__thumb-wrap {
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-  background: #f2f5f8;
-}
-
-.product-image-card__thumb {
-  width: 100%;
-  height: 160px;
-  object-fit: cover;
-  display: block;
-}
-
-.product-image-card__thumb.is-empty {
-  height: 160px;
-  display: grid;
-  place-items: center;
-  color: #6b7785;
-  font-size: 12px;
-}
-
-.product-image-card__badge {
-  display: none;
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  background: #1f7a43;
-  color: #fff;
-  padding: 3px 8px;
-  border-radius: 999px;
-  font-size: 11px;
-}
-
-.product-image-card.is-main .product-image-card__badge {
-  display: inline-block;
-}
-
-.product-image-card__meta {
-  margin-top: 8px;
-  font-size: 11px;
-  line-height: 1.25;
-  color: #5f6b79;
-  overflow-wrap: anywhere;
-}
-
-.product-image-card__actions {
-  margin-top: 10px;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-.product-image-card__actions .btn {
-  min-height: 34px;
-  font-size: 12px;
-  line-height: 1.2;
-  padding: 6px 10px;
-}
-
-.product-links-search-form {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: minmax(220px, 320px) minmax(220px, 1fr) auto;
-  align-items: end;
-}
-
-.product-links-head {
-  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.product-tabs-nav {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.product-links-inline-form {
-  display: grid;
-  gap: 8px;
-  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto;
-  align-items: center;
-}
-
-.product-links-actions-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: nowrap;
-}
-
-.product-links-actions-row .product-links-relink-form {
-  flex: 1 1 auto;
-}
-
-.product-links-unlink-form {
-  margin: 0;
-  flex: 0 0 auto;
-}
-
-.product-link-status-cell {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.product-link-alert-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 999px;
-  border: 1px solid #f59e0b;
-  background: #fffbeb;
-  color: #b45309;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: help;
-}
-
-.product-link-events-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: grid;
-  gap: 4px;
-}
-
-.product-link-events-list li {
-  display: grid;
-  gap: 2px;
-}
-
-.product-link-events-type {
-  font-weight: 600;
-  color: var(--c-text-strong);
-}
-
-.product-link-events-date {
-  color: var(--c-muted);
-  font-size: 12px;
-}
-
-.product-show-images-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 12px;
-}
-
-.product-show-image-card {
-  border: 1px solid var(--c-border);
-  border-radius: 10px;
-  background: #fff;
-  padding: 10px;
-  overflow: hidden;
-}
-.product-show-image-card__meta {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-  min-width: 0;
-}
-
-.product-show-image-path {
-  font-size: 12px;
-  min-width: 0;
-  overflow: hidden;
-}
-.product-show-image-path summary {
-  cursor: pointer;
-  color: var(--c-muted, #888);
-  list-style: none;
-  user-select: none;
-  white-space: nowrap;
-}
-.product-show-image-path summary::-webkit-details-marker {
-  display: none;
-}
-.product-show-image-path summary::after {
-  content: " ▾";
-}
-.product-show-image-path[open] summary::after {
-  content: " ▴";
-}
-.product-show-image-path__url {
-  margin-top: 4px;
-  word-break: break-all;
-  overflow-wrap: break-word;
-  font-size: 11px;
-}
-
-.product-show-image {
-  width: 100%;
-  max-height: 260px;
-  object-fit: cover;
-  border-radius: 8px;
-  border: 1px solid #d9e0ea;
-}
-
-.shipment-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.searchable-select {
-  position: relative;
-}
-.searchable-select__trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  user-select: none;
-  min-height: 34px;
-}
-.searchable-select__trigger::after {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 5px solid var(--c-text-muted, #6b7280);
-  margin-left: 8px;
-  flex-shrink: 0;
-}
-.searchable-select__trigger--placeholder {
-  color: var(--c-text-muted, #6b7280);
-}
-.searchable-select__dropdown {
-  display: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 100%;
-  z-index: 50;
-  max-height: 280px;
-  overflow: auto;
-  background: #fff;
-  border: 1px solid var(--c-border);
-  border-top: 0;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
-}
-.searchable-select__dropdown.is-open {
-  display: block;
-}
-.searchable-select__search {
-  position: sticky;
-  top: 0;
-  border: none !important;
-  border-bottom: 1px solid var(--c-border) !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  font-size: 13px;
-  background: #fff;
-  z-index: 1;
-}
-.searchable-select__option {
-  padding: 7px 10px;
-  font-size: 13px;
-  cursor: pointer;
-  color: var(--c-text-strong);
-}
-.searchable-select__option:hover {
-  background: #f1f5f9;
-}
-.searchable-select__option.is-selected {
-  background: #edf2ff;
-  font-weight: 600;
-}
-
-.flash {
-  padding: 10px 14px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-}
-.flash--success {
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-  color: #166534;
-}
-.flash--error {
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #b91c1c;
-}
-
-.content-tabs-card {
-  margin-top: 0;
-}
-
-.content-tabs-nav {
-  display: flex;
-  gap: 4px;
-  border-bottom: 2px solid var(--c-border);
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-}
-
-.content-tab-btn {
-  padding: 8px 16px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--c-text-muted, #6b7280);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
-  border-radius: 4px 4px 0 0;
-  transition: color 0.15s, border-color 0.15s;
-}
-.content-tab-btn:hover {
-  color: var(--c-text-strong, #111827);
-}
-.content-tab-btn.is-active {
-  color: var(--c-primary, #2563eb);
-  border-bottom-color: var(--c-primary, #2563eb);
-}
-
-.content-tab-panel {
-  display: none;
-}
-.content-tab-panel.is-active {
-  display: block;
-}
-
-.shoppro-tabs-toolbar {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 10px;
-  flex-wrap: wrap;
-}
-
-.shoppro-tabs-toolbar__field {
-  margin: 0;
-  min-width: 260px;
-  max-width: 420px;
-  flex: 1 1 320px;
-}
-
-.shoppro-tabs-toolbar__field .form-control {
-  width: 100%;
-}
-
-.shoppro-tabs-toolbar__actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dm-carrier-select {
-  min-width: 140px;
-}
-
-.dm-service-wrap {
-  min-width: 200px;
-}
-.dm-service-wrap .dm-inpost-panel .form-control,
-.dm-service-wrap .dm-apaczka-panel .form-control {
-  width: 100%;
-}
-
-.integration-settings-group {
-  grid-column: 1/-1;
-  border: 1px solid var(--c-border);
-  border-radius: 10px;
-  background: #f8fbff;
-  padding: 10px;
-}
-
-.integration-settings-group__head {
-  margin-bottom: 8px;
-  padding: 4px 0;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.integration-settings-group__title {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--c-text-strong, #1e293b);
-}
-
-.integration-settings-group__desc {
-  margin: 4px 0 0;
-  color: #4b5563;
-}
-
-.integration-settings-group__grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 12px;
-  align-items: start;
-}
-
-.integration-settings-group__full {
-  grid-column: 1/-1;
-}
-
-.integration-settings-group__grid .form-field {
-  margin: 0;
-  align-self: start;
-}
-
-.integration-settings-group__grid .form-control {
-  min-height: 34px;
-  height: 34px;
-}
-
-.integration-settings-group__grid input[type=date].form-control {
-  line-height: 1.2;
-}
-
-.integration-settings-checkboxes {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.integration-settings-checkboxes .field-label {
-  display: block;
-  margin-bottom: 2px;
-}
-
-.integration-settings-checkboxes__list {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px 12px;
-}
-
-.integration-settings-checkboxes__item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: #334155;
-}
-
-@media (max-width: 768px) {
-  .app-shell {
-    flex-direction: column;
-  }
-  .sidebar {
-    width: 100% !important;
-    min-width: 0 !important;
-    border-right: 0;
-    border-bottom: 1px solid #243041;
-    padding: 14px;
-    overflow-x: auto;
-  }
-  .sidebar__brand {
-    margin: 0 0 10px;
-    font-size: 22px;
-  }
-  .sidebar__collapse-btn {
-    display: none;
-  }
-  .sidebar__nav {
-    display: flex;
-    gap: 8px;
-    overflow-x: auto;
-  }
-  .sidebar__link {
-    white-space: nowrap;
-  }
-  .topbar {
-    padding: 0 14px;
-  }
-  .container {
-    margin-top: 16px;
-    width: calc(100% - 16px);
-    margin-left: 8px;
-    margin-right: 8px;
-    padding: 0 3px 12px;
-  }
-  .settings-grid {
-    grid-template-columns: 1fr;
-  }
-  .page-head {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .orders-stats {
-    grid-template-columns: 1fr;
-    width: 100%;
-  }
-  .order-show-layout {
-    grid-template-columns: 1fr;
-  }
-  .order-statuses-side {
-    position: static;
-    top: auto;
-  }
-  .order-details-actions {
-    justify-content: flex-start;
-  }
-  .order-grid-2,
-  .order-grid-3 {
-    grid-template-columns: 1fr;
-  }
-  .order-kv {
-    grid-template-columns: 1fr;
-    gap: 2px;
-  }
-  .filters-grid,
-  .form-grid,
-  .form-grid-2,
-  .form-grid-3,
-  .form-grid-4,
-  .shipment-grid,
-  .statuses-form,
-  .statuses-inline-form,
-  .table-list-filters,
-  .product-links-search-form,
-  .product-links-inline-form {
-    grid-template-columns: 1fr;
-  }
-  .statuses-dnd-item__content {
-    display: block;
-  }
-  .statuses-inline-delete {
-    margin-top: 6px;
-  }
-  .filters-actions {
-    align-items: center;
-  }
-  .table-list__header,
-  .table-list__footer {
-    align-items: flex-start;
-  }
-  .product-links-head {
-    grid-template-columns: 1fr;
-  }
-  .integration-settings-group__grid {
-    grid-template-columns: 1fr;
-  }
-  .integration-settings-checkboxes__list {
-    grid-template-columns: 1fr;
-  }
-  .card {
-    padding: 12px;
-  }
-  .modal--image-preview {
-    width: min(92vw, 100%);
-  }
-  .email-tpl-editor-wrap {
-    flex-direction: column;
-  }
-  .email-tpl-var-panel {
-    min-width: 200px;
-  }
-  .modal-box {
-    width: 95vw;
-    max-height: 90vh;
-  }
-}
-.email-tpl-editor-wrap {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--c-border);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.email-tpl-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  background: var(--c-bg-subtle, #f8f9fa);
-  border-bottom: 1px solid var(--c-border);
-}
-
-.email-tpl-var-dropdown {
-  position: relative;
-}
-
-.email-tpl-var-panel {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 50;
-  min-width: 260px;
-  max-height: 320px;
-  overflow-y: auto;
-  background: var(--c-bg);
-  border: 1px solid var(--c-border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  padding: 6px;
-  margin-top: 4px;
-}
-
-.email-var-group:not(:first-child) {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px solid var(--c-border);
-}
-.email-var-group__label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--c-text-muted);
-  padding: 2px 4px;
-  letter-spacing: 0.03em;
-}
-
-.email-var-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 3px 6px;
-  margin: 1px 0;
-  border: none;
-  background: none;
-  font-size: 12px;
-  font-family: "Roboto Mono", monospace;
-  color: var(--c-text);
-  border-radius: 3px;
-  cursor: pointer;
-}
-.email-var-item:hover {
-  background: var(--c-primary);
-  color: #fff;
-}
-
-#js-quill-editor {
-  min-height: 200px;
-}
-#js-quill-editor .ql-editor {
-  min-height: 200px;
-  font-size: 13px;
-}
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.45);
-}
-
-.modal-box {
-  width: min(680px, 90vw);
-  max-height: 80vh;
-  background: var(--c-bg);
-  border-radius: 8px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.modal-box__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--c-border);
-}
-.modal-box__title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-}
-.modal-box__close {
-  background: none;
-  border: none;
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-  color: var(--c-text-muted);
-  padding: 0 4px;
-}
-.modal-box__close:hover {
-  color: var(--c-text);
-}
-.modal-box__body {
-  padding: 12px 16px;
-  overflow-y: auto;
-  flex: 1;
-}
+:root{--c-primary: #6690f4;--c-primary-dark: #3164db;--c-bg: #f4f6f9;--c-surface: #ffffff;--c-text: #4e5e6a;--c-text-strong: #2d3748;--c-muted: #718096;--c-border: #b0bec5;--c-danger: #cc0000;--focus-ring: 0 0 0 3px rgba(102, 144, 244, 0.15);--shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border:1px solid rgba(0,0,0,0);border-radius:8px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .1s ease}.btn--primary{color:#fff;background:var(--c-primary)}.btn--primary:hover{background:var(--c-primary-dark)}.btn--secondary{color:var(--c-text-strong);border-color:var(--c-border);background:var(--c-surface)}.btn--secondary:hover{border-color:#cbd5e0;background:#f8fafc}.btn--danger{color:#fff;border-color:#b91c1c;background:#dc2626}.btn--danger:hover{border-color:#991b1b;background:#b91c1c}.btn--sm{min-height:28px;padding:3px 10px;font-size:12px}.btn--block{width:100%}.btn--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--c-primary)}.form-control{width:100%;min-height:30px;border:1px solid var(--c-border);border-radius:6px;padding:4px 8px;font:inherit;color:var(--c-text-strong);background:#fff;transition:border-color .2s ease,box-shadow .2s ease}.form-control:focus{outline:none;border-color:var(--c-primary);box-shadow:var(--focus-ring)}.input{min-height:34px;border:1px solid var(--c-border);border-radius:8px;padding:5px 10px;font:inherit;color:var(--c-text-strong);background:#fff}.input--sm{min-height:28px;padding:3px 8px;font-size:12px}.flash{padding:8px 12px;border-radius:6px;font-size:13px}.flash--success{border:1px solid #b7ebcf;background:#f0fff6;color:#0f6b39}.flash--error{border:1px solid #fed7d7;background:#fff5f5;color:var(--c-danger)}.alert{padding:12px 14px;border-radius:8px;border:1px solid rgba(0,0,0,0);font-size:13px;min-height:44px}.alert--danger{border-color:#fed7d7;background:#fff5f5;color:var(--c-danger)}.alert--success{border-color:#b7ebcf;background:#f0fff6;color:#0f6b39}.alert--warning{border-color:#f7dd8b;background:#fff8e8;color:#815500}.form-field{display:grid;gap:5px}.field-label{color:var(--c-text-strong);font-size:13px;font-weight:600}.table-wrap{width:100%;overflow-x:auto}.table-wrap--visible{overflow:visible !important;overflow-x:visible !important}.table{width:100%;border-collapse:collapse;background:var(--c-surface)}.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--c-border);text-align:left}.table th{color:var(--c-text-strong);font-weight:700;background:#f8fafc}.table--details th{white-space:nowrap}.table--details th:first-child,.table--details td:first-child{width:36px;text-align:center}.pagination{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.pagination__item{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--c-border);color:var(--c-text-strong);background:var(--c-surface);text-decoration:none;font-weight:600}.pagination__item:hover{border-color:#cbd5e0;background:#f8fafc}.pagination__item.is-active{border-color:var(--c-primary);color:var(--c-primary);background:#edf2ff}.receipt-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--c-text-strong)}.receipt-header__seller{flex:1}.receipt-header__seller strong{font-size:14px;display:block;margin-bottom:4px}.receipt-header__title{text-align:right}.receipt-header__title h1{font-size:18px;font-weight:700;margin-bottom:4px}.receipt-print{max-width:700px;margin:0 auto}@media print{.receipt-print{max-width:100%}}.email-send-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.email-send-modal{background:var(--c-card-bg, #fff);border-radius:8px;width:580px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.2)}.email-send-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--c-border, #e0e0e0)}.email-send-modal__header h3{margin:0;font-size:15px}.email-send-modal__close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--c-text-muted, #888);padding:0 4px}.email-send-modal__close:hover{color:var(--c-text, #333)}.email-send-modal__body{padding:16px;overflow-y:auto;flex:1}.email-send-modal__field{margin-bottom:10px}.email-send-modal__field label{display:block;font-size:12px;font-weight:600;margin-bottom:4px;color:var(--c-text-muted, #666)}.email-send-modal__field .input{width:100%}.email-send-modal__actions-top{margin-bottom:10px}.email-send-modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--c-border, #e0e0e0)}.email-send-preview{border:1px solid var(--c-border, #e0e0e0);border-radius:4px;padding:12px;max-height:280px;overflow-y:auto;background:var(--c-bg, #fafafa)}.email-send-preview__subject{font-weight:600;font-size:13px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--c-border, #e0e0e0)}.email-send-preview__body{font-size:13px;line-height:1.5}.email-send-preview__body p{margin:0 0 8px}.email-send-preview__attachments{margin-top:8px;padding-top:8px;border-top:1px solid var(--c-border, #e0e0e0);font-size:12px;color:var(--c-text-muted, #666)}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.automation-row{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background:var(--c-surface, #f8f9fa);border:1px solid var(--c-border, #dee2e6);border-radius:6px}.automation-row__fields{flex:1;display:flex;flex-direction:column;gap:6px}.automation-row__type{max-width:280px}.automation-row__config{display:flex;flex-wrap:wrap;gap:8px}.automation-row__config .form-control{min-width:200px;max-width:300px}.automation-row__remove{flex-shrink:0;margin-top:2px;line-height:1;font-size:16px;padding:2px 8px}.checkbox-group{display:flex;flex-wrap:wrap;gap:4px 16px}.checkbox-label{display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;white-space:nowrap}.checkbox-label input[type=checkbox]{margin:0}.print-status-badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:.75rem;font-weight:600;line-height:1.4}.print-status-badge--pending{background-color:#fff3cd;color:#856404}.print-status-badge--completed{background-color:#d4edda;color:#155724}.print-status-badge--failed{background-color:#f8d7da;color:#721c24}.print-queue-filters{display:flex;gap:4px}.print-queue-table td,.print-queue-table th{padding:6px 8px;font-size:.85rem}.btn--outline-primary{background:rgba(0,0,0,0);border:1px solid #4a90d9;color:#4a90d9;cursor:pointer;border-radius:3px;font-size:.75rem;padding:3px 8px;transition:background-color .15s,color .15s}.btn--outline-primary:hover{background-color:#4a90d9;color:#fff}.btn--outline-primary:disabled{opacity:.6;cursor:not-allowed}.btn--outline-primary.is-success{border-color:#28a745;color:#28a745}.shipment-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}.shipment-presets__btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:none;border-radius:6px;background:var(--preset-color, #3b82f6);color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s;line-height:1.4}.shipment-presets__btn:hover{opacity:.85}.shipment-presets__add{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1px dashed #ccc;border-radius:6px;background:rgba(0,0,0,0);color:#666;font-size:13px;cursor:pointer;transition:border-color .15s,color .15s;line-height:1.4}.shipment-presets__add:hover{border-color:#999;color:#444}.preset-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;align-items:center;justify-content:center}.preset-modal__content{background:#fff;border-radius:8px;padding:24px;min-width:360px;max-width:420px;box-shadow:0 8px 32px rgba(0,0,0,.2)}.preset-modal__content h3{margin:0 0 4px;font-size:16px}.preset-modal__colors{display:flex;gap:8px;flex-wrap:wrap}.preset-modal__color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid rgba(0,0,0,0);transition:border-color .15s}.preset-modal__color-swatch:hover{border-color:#aaa}.preset-modal__color-swatch.is-selected{border-color:#333}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:"Roboto","Segoe UI",sans-serif;font-size:13px;color:var(--c-text);background:var(--c-bg)}a{color:var(--c-primary)}.app-shell{min-height:100vh;display:flex}.sidebar{width:260px;min-width:260px;flex-shrink:0;overflow:hidden;transition:width .22s ease,min-width .22s ease;border-right:1px solid #243041;background:#111a28;padding:18px 10px;display:flex;flex-direction:column}.sidebar.is-collapsed{width:52px;min-width:52px}.sidebar__brand{display:flex;align-items:center;justify-content:space-between;margin:4px 4px 16px;gap:6px;min-width:0}.sidebar__brand-text{color:#e9f0ff;font-size:24px;font-weight:300;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;flex:1;min-width:0}.sidebar__brand-text strong{font-weight:700}.sidebar__collapse-btn{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:1px solid #2a3a54;border-radius:6px;color:#64748b;cursor:pointer;padding:0;transition:background .15s,color .15s}.sidebar__collapse-btn:hover{background:#1b2a3f;color:#cbd5e1}.sidebar__collapse-icon{display:block;transition:transform .22s ease;flex-shrink:0}.sidebar.is-collapsed .sidebar__collapse-icon{transform:rotate(180deg)}.sidebar__nav{display:grid;gap:4px}.sidebar__link{display:flex;align-items:center;gap:9px;white-space:nowrap;border-radius:8px;padding:9px 10px;text-decoration:none;color:#cbd5e1;font-weight:600}.sidebar__link:hover{color:#f8fafc;background:#1b2a3f}.sidebar__link.is-active{color:#fff;background:#2e4f93}.sidebar__group{display:grid;gap:2px}.sidebar__group-toggle{list-style:none;border-radius:8px;padding:9px 10px;color:#cbd5e1;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:9px;white-space:nowrap;user-select:none}.sidebar__group-toggle::-webkit-details-marker{display:none}.sidebar__group:hover .sidebar__group-toggle,.sidebar__group-toggle:hover{color:#f8fafc;background:#1b2a3f}.sidebar__group.is-active .sidebar__group-toggle{color:#fff;background:#2e4f93}.sidebar__icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.85}.sidebar__label{flex:1;min-width:0;overflow:hidden}.sidebar__toggle-arrow{flex-shrink:0;margin-left:auto;opacity:.5;transition:transform .18s ease}details[open]>.sidebar__group-toggle .sidebar__toggle-arrow{transform:rotate(180deg)}.sidebar__group-links{display:grid;gap:2px;padding-left:12px;overflow:hidden}.sidebar__sublink{border-radius:6px;padding:7px 10px 7px 8px;text-decoration:none;color:#94a3b8;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}.sidebar__sublink::before{content:"";flex-shrink:0;width:5px;height:5px;border-radius:50%;background:rgba(148,163,184,.3);transition:background .15s}.sidebar__sublink:hover{color:#e2e8f0;background:#1b2a3f}.sidebar__sublink:hover::before{background:rgba(148,163,184,.65)}.sidebar__sublink.is-active{color:#fff;background:rgba(46,79,147,.55)}.sidebar__sublink.is-active::before{background:#93c5fd}.app-main{flex:1;min-width:0}.topbar{height:50px;border-bottom:1px solid var(--c-border);background:var(--c-surface);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100}.brand{font-size:22px;font-weight:300;letter-spacing:-0.02em;color:var(--c-text-strong)}.brand strong{font-weight:700}.container{max-width:none;width:calc(100% - 20px);margin:12px 10px;padding:0 4px 14px}.card{background:var(--c-surface);border-radius:10px;box-shadow:var(--shadow-card);padding:14px}.card h1{margin:0 0 10px;color:var(--c-text-strong);font-size:24px;font-weight:700}.muted{color:var(--c-muted)}.accent{color:var(--c-primary);font-weight:600}.users-form{display:grid;gap:14px;max-width:460px}.form-field{margin-bottom:12px}.section-title{margin:0;color:var(--c-text-strong);font-size:18px;font-weight:700}h2.section-title,h3.section-title,h4.section-title{display:flex;align-items:center;gap:6px;font-weight:600;padding:6px 0;border-bottom:1px solid #e2e8f0;color:var(--c-primary, #2563eb)}h2.section-title::before,h3.section-title::before,h4.section-title::before{content:"■";font-size:.55em;opacity:.5}h3.section-title,h4.section-title{font-size:15px}h3.section-title::before,h4.section-title::before{content:"◆";font-size:.5em}.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-12{margin-top:8px}.mt-16{margin-top:12px}.settings-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}.settings-nav{display:flex;gap:8px;flex-wrap:wrap}.settings-nav__link{text-decoration:none;border:1px solid var(--c-border);border-radius:8px;padding:8px 12px;color:var(--c-text-strong);font-weight:600}.settings-nav__link:hover{background:#f8fafc}.settings-nav__link.is-active{border-color:var(--c-primary);color:var(--c-primary);background:#edf2ff}.settings-stat{border:1px solid var(--c-border);border-radius:8px;padding:12px;background:#f8fafc}.settings-stat__label{display:block;color:var(--c-muted);font-size:12px;margin-bottom:4px}.settings-stat__value{color:var(--c-text-strong);font-size:20px}.settings-logs{margin:0;padding:12px;border-radius:8px;border:1px solid var(--c-border);background:#0b1220;color:#d1d5db;font-size:12px;line-height:1.5;overflow:auto}.settings-allegro-callback{display:block;width:100%;padding:8px 10px;border:1px solid var(--c-border);border-radius:8px;background:#f8fafc;color:var(--c-text-strong);font-size:12px;line-height:1.45;word-break:break-all}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.filters-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}.filters-actions{display:flex;align-items:center;gap:8px}.product-form .form-control{width:100%}.form-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}.form-grid-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;align-items:start}.form-grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;align-items:start}.form-grid-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px;align-items:start}.form-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}.form-actions .btn{align-self:flex-start}.statuses-form{display:grid;gap:8px;grid-template-columns:repeat(2, minmax(0, 1fr))}.statuses-form .form-actions{grid-column:1/-1}.statuses-color-input{min-height:32px;padding:2px}.statuses-hint{grid-column:1/-1;margin:0}.statuses-group-block{border:1px solid var(--c-border);border-radius:10px;padding:8px;background:#fbfdff}.statuses-group-block__head{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}.statuses-group-block__title{margin:0;display:inline-flex;align-items:center;gap:6px;color:var(--c-text-strong);font-size:14px}.statuses-color-dot{width:12px;height:12px;border-radius:999px;border:1px solid rgba(15,23,42,.15)}.statuses-dnd-list{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}.statuses-dnd-item{display:grid;grid-template-columns:24px 1fr;gap:6px;border:1px solid #dce4f0;border-radius:8px;background:#fff;padding:6px}.statuses-dnd-item__content{display:flex;align-items:center;gap:6px;min-width:0}.statuses-dnd-item.is-dragging{opacity:.6}.statuses-dnd-item__drag{display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;border-radius:6px;color:#64748b;cursor:grab;user-select:none;font-weight:700;font-size:12px}.statuses-dnd-item__drag:active{cursor:grabbing}.statuses-inline-form{display:grid;gap:6px}.statuses-inline-form--row{grid-template-columns:minmax(180px, 1.4fr) minmax(150px, 1fr) auto auto auto;align-items:center;flex:1 1 auto;min-width:0}.statuses-inline-form--row-group{grid-template-columns:minmax(180px, 1.5fr) 56px auto auto auto;align-items:center;flex:1 1 auto;min-width:0}.statuses-inline-form--row .form-control,.statuses-inline-form--row-group .form-control{min-height:30px;padding:4px 8px}.statuses-inline-form--row .btn,.statuses-inline-form--row-group .btn,.statuses-inline-delete .btn{min-height:30px;padding:4px 10px;font-size:12px}.statuses-inline-check{margin-top:0;white-space:nowrap;font-size:12px}.statuses-inline-delete{margin:0;flex:0 0 auto}.statuses-code-label{font-size:12px;color:var(--c-muted)}.statuses-code-readonly{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px}.statuses-code-readonly code{background:#eef2f7;border-radius:6px;padding:1px 6px;color:#1f2937;font-size:12px}.field-inline{display:flex;align-items:center;gap:8px;margin-top:2px}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:200}.modal-backdrop[hidden]{display:none}.modal{width:min(560px,100%);background:#fff;border-radius:10px;box-shadow:0 20px 40px rgba(15,23,42,.35);overflow:hidden}.modal__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--c-border)}.modal__header h3{margin:0;font-size:18px;color:var(--c-text-strong)}.modal__body{padding:16px 18px 18px}.status-pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid #fed7d7;background:#fff5f5;color:#9b2c2c;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}.status-pill.is-active{border-color:#b7ebcf;background:#f0fff6;color:#0f6b39}.table-row-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-row-actions form{margin:0}.table-list{display:grid;gap:14px}.table-list__header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.table-list__left{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.table-list-header-actions{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.js-filter-toggle-btn.is-active{border-color:#cbd5e0;background:#edf2ff;color:var(--c-primary-dark)}.table-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700;color:#fff;background:var(--c-primary);border-radius:999px}.table-filters-wrapper{display:none}.table-filters-wrapper.is-open{display:block}.table-list-filters{display:grid;gap:12px;grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));align-items:end}.table-col-toggle-wrapper{position:relative}.table-col-toggle-dropdown{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:260px;max-height:360px;overflow:auto;border:1px solid var(--c-border);border-radius:10px;background:#fff;box-shadow:0 10px 25px rgba(15,23,42,.12)}.table-col-toggle-dropdown.is-open{display:block}.table-col-toggle-header{padding:10px 12px;border-bottom:1px solid var(--c-border);font-size:12px;font-weight:700;color:var(--c-muted)}.table-col-toggle-item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;color:var(--c-text-strong)}.table-col-toggle-item:hover{background:#f8fafc}.table-col-toggle-footer{border-top:1px solid var(--c-border);padding:8px 12px}.table-col-hidden{display:none}.table-col-switch{position:relative;display:inline-block;width:34px;min-width:34px;height:18px}.table-col-switch input{opacity:0;width:0;height:0;position:absolute}.table-col-switch-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:#cbd5e1;border-radius:999px;transition:background-color .2s ease}.table-col-switch-slider::before{content:"";position:absolute;height:14px;width:14px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:transform .2s ease}.table-col-switch input:checked+.table-col-switch-slider{background:#16a34a}.table-col-switch input:checked+.table-col-switch-slider::before{transform:translateX(16px)}.table-sort-link{display:inline-flex;align-items:center;gap:6px;color:var(--c-text-strong);text-decoration:none}.table-sort-link:hover{color:var(--c-primary-dark)}.table-sort-icon.is-muted{color:#a0aec0}.table-list__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.table-list-per-page-form{display:inline-flex;align-items:center;gap:8px}.table-list-per-page-form .form-control{min-width:90px}.table-select-col{width:44px;text-align:center}.table-select-toggle{display:inline-flex;align-items:center;justify-content:center}.table-select-toggle input[type=checkbox]{width:16px;height:16px}.orders-page .orders-head{background:linear-gradient(120deg, #f8fbff 0%, #eef5ff 100%);border:1px solid #dbe7fb}.orders-page .table-list{border:1px solid #dde5f2;border-radius:12px;box-shadow:0 6px 16px rgba(20,44,86,.08)}.orders-page .table-list__header{padding:10px 6px 2px}.orders-page .table-list-filters{padding:6px 6px 2px;border-top:1px solid #ebf0f7;border-bottom:1px solid #ebf0f7;background:#f9fbff}.orders-page .table-wrap{border-radius:10px;overflow:hidden;border:1px solid #e7edf6}.orders-page .table thead th{background:#f3f7fd;color:#30435f;font-size:12px;text-transform:uppercase;letter-spacing:.03em}.orders-page .table tbody td{vertical-align:middle;padding-top:10px;padding-bottom:10px;border-bottom-color:#edf2f8}.orders-page .table tbody tr:hover td{background:#f9fcff}.orders-list-page{padding:10px;margin-bottom:10px}.orders-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.orders-stats{display:inline-grid;grid-template-columns:repeat(3, minmax(86px, auto));gap:8px}.orders-stat{border:1px solid #d8e2f0;background:#f8fbff;border-radius:8px;padding:6px 8px;line-height:1.15}.orders-stat__label{display:block;color:#5f6f83;font-size:11px;margin-bottom:2px}.orders-stat__value{color:#12233a;font-size:16px;font-weight:700}.orders-ref{display:grid;gap:2px;min-width:170px}.orders-ref__main{font-weight:700;color:#0f1f35;font-size:14px}.orders-ref__meta{display:inline-flex;flex-wrap:wrap;gap:4px 10px;color:#64748b;font-size:12px}.orders-buyer{display:grid;gap:2px}.orders-buyer__name{color:#0f172a;font-weight:600;font-size:14px}.orders-buyer__meta{display:inline-flex;flex-wrap:wrap;gap:4px 10px;color:#64748b;font-size:12px}.orders-status-wrap{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}.order-tag{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8e1ef;background:#f8fafc;color:#334155;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700;line-height:1.1}.order-tag.is-info{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.order-tag.is-success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}.order-tag.is-danger{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.order-tag.is-warn{border-color:#fde68a;background:#fffbeb;color:#92400e}.order-tag.is-cod{border-color:#f9a8d4;background:#fdf2f8;color:#9d174d}.order-tag.is-unpaid{border-color:#fca5a5;background:#fef2f2;color:#b91c1c}.orders-mini{font-size:14px;color:#223247;line-height:1.25}.orders-mini__delivery{font-size:12px;color:#64748b;margin-bottom:2px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.orders-products{display:grid;gap:4px;min-width:240px}.orders-products__meta,.orders-products__more{font-size:12px;color:#64748b}.orders-product{display:grid;grid-template-columns:48px 1fr;gap:6px;align-items:center}.orders-product__thumb{width:48px;height:48px;border-radius:4px;border:1px solid #dbe3ef;object-fit:cover;background:#fff}.orders-product__thumb--empty{display:inline-block;background:#eef2f7;border-style:dashed}.orders-product__txt{min-width:0;display:grid;gap:1px}.orders-product__name{font-size:14px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.orders-product__qty{font-size:12px;color:#64748b}.orders-image-hover-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:zoom-in}.orders-image-hover-popup{display:none;position:fixed;left:auto;top:auto;width:350px;max-height:350px;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);border:1px solid #dfe3ea;z-index:100;pointer-events:none}.orders-image-hover-wrap:hover .orders-image-hover-popup{display:block}.activity-type-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap;background:#e2e8f0;color:#334155}.activity-type-badge--status_change{background:#dbeafe;color:#1e40af}.activity-type-badge--payment{background:#dcfce7;color:#166534}.activity-type-badge--invoice{background:#fef3c7;color:#92400e}.activity-type-badge--shipment{background:#e0e7ff;color:#3730a3}.activity-type-badge--message{background:#f3e8ff;color:#6b21a8}.activity-type-badge--document{background:#fce7f3;color:#9d174d}.activity-type-badge--import{background:#f1f5f9;color:#475569}.activity-type-badge--note{background:#ecfdf5;color:#065f46}.text-nowrap{white-space:nowrap}.orders-money{display:grid;gap:2px}.orders-money__main{color:#0f172a;font-weight:700;font-size:14px}.orders-money__meta{color:#64748b;font-size:12px}.table-list[data-table-list-id=orders]{gap:8px}.table-list[data-table-list-id=orders] .table-list__header{padding:2px 0 0}.table-list[data-table-list-id=orders] .table-list-filters{gap:8px;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}.table-list[data-table-list-id=orders] .table th,.table-list[data-table-list-id=orders] .table td{padding:6px 8px}.table-list[data-table-list-id=orders] .table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}.table-list[data-table-list-id=orders] .table tbody td{vertical-align:top;font-size:14px;line-height:1.25}.order-show-layout{display:grid;grid-template-columns:220px minmax(0, 1fr);gap:12px;align-items:start}.order-statuses-side{position:sticky;top:60px;padding:10px}.order-statuses-side__title{font-size:13px;font-weight:700;color:#0f172a;margin-bottom:8px}.order-status-group{margin-bottom:10px}.order-status-group__name{font-size:12px;color:#475569;font-weight:700;margin-bottom:5px}.order-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px;border-radius:6px;color:#334155;font-size:12px;text-decoration:none}.order-status-row__count{min-width:24px;text-align:center;border-radius:999px;background:var(--status-color, #64748b);padding:1px 6px;font-weight:700;font-size:11px;color:#fff}.order-status-row:hover{background:#f1f5f9}.order-status-row.is-active{background:rgba(15,23,42,.06);color:#0f172a;font-weight:700}.order-show-main{min-width:0}.order-details-actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.order-details-page{padding:12px}.order-details-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.order-back-link{color:#475569;text-decoration:none;font-weight:600}.order-back-link:hover{color:#1d4ed8}.order-details-sub{display:inline-flex;gap:10px;flex-wrap:wrap;color:#64748b;font-size:12px}.order-details-pill{border-radius:999px;padding:5px 10px;background:#eef6ff;border:1px solid #cfe2ff;color:#1d4ed8;font-size:12px;font-weight:700}.order-status-change{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.order-status-change__form{display:flex;align-items:center;gap:6px}.order-status-change__select{min-width:180px}.order-details-tabs{display:flex;gap:6px;flex-wrap:wrap}.order-details-tab{border:1px solid #d6deea;border-radius:8px;padding:5px 10px;color:#475569;font-size:12px;background:#f8fafc;cursor:pointer}.order-details-tab.is-active{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff;font-weight:700}.order-item-cell{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;min-width:260px}.order-item-thumb{width:44px;height:44px;border-radius:6px;border:1px solid #dbe3ef;object-fit:cover}.order-item-thumb--empty{display:inline-block;background:#eef2f7;border-style:dashed}.order-item-name{font-weight:600;color:#0f172a}.order-grid-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}.order-grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}.order-kv{margin:0;display:grid;grid-template-columns:150px 1fr;gap:6px 10px;font-size:12px}.payment-summary{display:grid;gap:6px;max-width:420px}.payment-summary__row{display:flex;align-items:center;gap:10px;font-size:12px}.payment-summary__label{width:150px;flex-shrink:0;color:#64748b}.payment-summary__value{font-weight:600;color:#0f172a}.order-kv dt{color:#64748b}.order-kv dd{margin:0;color:#0f172a;font-weight:600}.order-address{display:grid;gap:3px;font-size:12px;color:#0f172a}.order-events{display:grid;gap:8px}.order-event{border:1px solid #e2e8f0;border-radius:8px;padding:8px;background:#fbfdff}.order-event__head{color:#64748b;font-size:11px}.order-event__body{margin-top:4px;color:#0f172a;font-size:12px}.order-tab-panel{display:none}.order-tab-panel.is-active{display:block}.order-empty-placeholder{border:1px dashed #cbd5e1;border-radius:8px;min-height:180px;background:#f8fafc}.order-status-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid #cbd5e1;color:#334155;background:#f8fafc}.order-status-badge.is-info{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.order-status-badge.is-success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}.order-status-badge.is-danger{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.order-status-badge.is-warn{border-color:#fde68a;background:#fffbeb;color:#92400e}.order-status-badge.is-empty{color:#94a3b8}.order-buyer{display:grid;gap:2px}.order-buyer__name{color:#0f172a;font-weight:600}.order-buyer__email{color:#64748b;font-size:12px}.table-inline-action{display:inline-block;margin-right:6px}.product-name-cell{display:inline-flex;align-items:center;gap:10px}.product-name-thumb{width:60px;height:60px;border-radius:6px;object-fit:cover;border:1px solid var(--c-border);background:#f8fafc}.product-name-thumb--empty{display:inline-block;width:60px;height:60px;border-radius:6px;border:1px dashed #cbd5e0;background:#f8fafc}.product-name-thumb-btn{border:0;padding:0;background:rgba(0,0,0,0);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.product-name-thumb-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px}.modal--image-preview{width:min(760px,100%)}.product-image-preview__img{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:8px;background:#f8fafc}.product-images-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px}.product-image-card{border:1px solid #dfe3ea;border-radius:10px;padding:10px;background:#fff}.product-image-card__thumb-wrap{position:relative;border-radius:8px;overflow:hidden;background:#f2f5f8}.product-image-card__thumb{width:100%;height:160px;object-fit:cover;display:block}.product-image-card__thumb.is-empty{height:160px;display:grid;place-items:center;color:#6b7785;font-size:12px}.product-image-card__badge{display:none;position:absolute;top:8px;left:8px;background:#1f7a43;color:#fff;padding:3px 8px;border-radius:999px;font-size:11px}.product-image-card.is-main .product-image-card__badge{display:inline-block}.product-image-card__meta{margin-top:8px;font-size:11px;line-height:1.25;color:#5f6b79;overflow-wrap:anywhere}.product-image-card__actions{margin-top:10px;display:grid;grid-template-columns:1fr;gap:8px}.product-image-card__actions .btn{min-height:34px;font-size:12px;line-height:1.2;padding:6px 10px}.product-links-search-form{display:grid;gap:12px;grid-template-columns:minmax(220px, 320px) minmax(220px, 1fr) auto;align-items:end}.product-links-head{display:grid;gap:8px;grid-template-columns:repeat(3, minmax(0, 1fr))}.product-tabs-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.product-links-inline-form{display:grid;gap:8px;grid-template-columns:minmax(140px, 1fr) minmax(140px, 1fr) auto;align-items:center}.product-links-actions-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.product-links-actions-row .product-links-relink-form{flex:1 1 auto}.product-links-unlink-form{margin:0;flex:0 0 auto}.product-link-status-cell{display:inline-flex;align-items:center;gap:6px}.product-link-alert-indicator{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:1px solid #f59e0b;background:#fffbeb;color:#b45309;font-size:12px;font-weight:700;cursor:help}.product-link-events-list{margin:0;padding:0;list-style:none;display:grid;gap:4px}.product-link-events-list li{display:grid;gap:2px}.product-link-events-type{font-weight:600;color:var(--c-text-strong)}.product-link-events-date{color:var(--c-muted);font-size:12px}.product-show-images-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px}.product-show-image-card{border:1px solid var(--c-border);border-radius:10px;background:#fff;padding:10px;overflow:hidden}.product-show-image-card__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}.product-show-image-path{font-size:12px;min-width:0;overflow:hidden}.product-show-image-path summary{cursor:pointer;color:var(--c-muted, #888);list-style:none;user-select:none;white-space:nowrap}.product-show-image-path summary::-webkit-details-marker{display:none}.product-show-image-path summary::after{content:" ▾"}.product-show-image-path[open] summary::after{content:" ▴"}.product-show-image-path__url{margin-top:4px;word-break:break-all;overflow-wrap:break-word;font-size:11px}.product-show-image{width:100%;max-height:260px;object-fit:cover;border-radius:8px;border:1px solid #d9e0ea}.shipment-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}.searchable-select{position:relative}.searchable-select__trigger{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;min-height:34px}.searchable-select__trigger::after{content:"";width:0;height:0;border-left:4px solid rgba(0,0,0,0);border-right:4px solid rgba(0,0,0,0);border-top:5px solid var(--c-text-muted, #6b7280);margin-left:8px;flex-shrink:0}.searchable-select__trigger--placeholder{color:var(--c-text-muted, #6b7280)}.searchable-select__dropdown{display:none;position:absolute;left:0;right:0;top:100%;z-index:50;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--c-border);border-top:0;border-radius:0 0 8px 8px;box-shadow:0 8px 20px rgba(15,23,42,.12)}.searchable-select__dropdown.is-open{display:block}.searchable-select__search{position:sticky;top:0;border:none !important;border-bottom:1px solid var(--c-border) !important;border-radius:0 !important;box-shadow:none !important;font-size:13px;background:#fff;z-index:1}.searchable-select__option{padding:7px 10px;font-size:13px;cursor:pointer;color:var(--c-text-strong)}.searchable-select__option:hover{background:#f1f5f9}.searchable-select__option.is-selected{background:#edf2ff;font-weight:600}.flash{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.flash--success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}.flash--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.content-tabs-card{margin-top:0}.content-tabs-nav{display:flex;gap:4px;border-bottom:2px solid var(--c-border);margin-bottom:16px;flex-wrap:wrap}.content-tab-btn{padding:8px 16px;border:none;background:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--c-text-muted, #6b7280);border-bottom:2px solid rgba(0,0,0,0);margin-bottom:-2px;border-radius:4px 4px 0 0;transition:color .15s,border-color .15s}.content-tab-btn:hover{color:var(--c-text-strong, #111827)}.content-tab-btn.is-active{color:var(--c-primary, #2563eb);border-bottom-color:var(--c-primary, #2563eb)}.content-tab-panel{display:none}.content-tab-panel.is-active{display:block}.shoppro-tabs-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}.shoppro-tabs-toolbar__field{margin:0;min-width:260px;max-width:420px;flex:1 1 320px}.shoppro-tabs-toolbar__field .form-control{width:100%}.shoppro-tabs-toolbar__actions{display:inline-flex;align-items:center;gap:8px}.dm-carrier-select{min-width:140px}.dm-service-wrap{min-width:200px}.dm-service-wrap .dm-inpost-panel .form-control,.dm-service-wrap .dm-apaczka-panel .form-control{width:100%}.integration-settings-group{grid-column:1/-1;border:1px solid var(--c-border);border-radius:10px;background:#f8fbff;padding:10px}.integration-settings-group__head{margin-bottom:8px;padding:4px 0;border-bottom:1px solid #e2e8f0}.integration-settings-group__title{margin:0;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--c-text-strong, #1e293b)}.integration-settings-group__desc{margin:4px 0 0;color:#4b5563}.integration-settings-group__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px 12px;align-items:start}.integration-settings-group__full{grid-column:1/-1}.integration-settings-group__grid .form-field{margin:0;align-self:start}.integration-settings-group__grid .form-control{min-height:34px;height:34px}.integration-settings-group__grid input[type=date].form-control{line-height:1.2}.integration-settings-checkboxes{border:0;padding:0;margin:0}.integration-settings-checkboxes .field-label{display:block;margin-bottom:2px}.integration-settings-checkboxes__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:6px 12px}.integration-settings-checkboxes__item{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#334155}@media(max-width: 768px){.app-shell{flex-direction:column}.sidebar{width:100% !important;min-width:0 !important;border-right:0;border-bottom:1px solid #243041;padding:14px;overflow-x:auto}.sidebar__brand{margin:0 0 10px;font-size:22px}.sidebar__collapse-btn{display:none}.sidebar__nav{display:flex;gap:8px;overflow-x:auto}.sidebar__link{white-space:nowrap}.topbar{padding:0 14px}.container{margin-top:16px;width:calc(100% - 16px);margin-left:8px;margin-right:8px;padding:0 3px 12px}.settings-grid{grid-template-columns:1fr}.page-head{flex-direction:column;align-items:flex-start}.orders-stats{grid-template-columns:1fr;width:100%}.order-show-layout{grid-template-columns:1fr}.order-statuses-side{position:static;top:auto}.order-details-actions{justify-content:flex-start}.order-grid-2,.order-grid-3{grid-template-columns:1fr}.order-kv{grid-template-columns:1fr;gap:2px}.filters-grid,.form-grid,.form-grid-2,.form-grid-3,.form-grid-4,.shipment-grid,.statuses-form,.statuses-inline-form,.table-list-filters,.product-links-search-form,.product-links-inline-form{grid-template-columns:1fr}.statuses-dnd-item__content{display:block}.statuses-inline-delete{margin-top:6px}.filters-actions{align-items:center}.table-list__header,.table-list__footer{align-items:flex-start}.product-links-head{grid-template-columns:1fr}.integration-settings-group__grid{grid-template-columns:1fr}.integration-settings-checkboxes__list{grid-template-columns:1fr}.card{padding:12px}.modal--image-preview{width:min(92vw,100%)}.email-tpl-editor-wrap{flex-direction:column}.email-tpl-var-panel{min-width:200px}.modal-box{width:95vw;max-height:90vh}}.email-tpl-editor-wrap{display:flex;flex-direction:column;border:1px solid var(--c-border);border-radius:6px;overflow:hidden}.email-tpl-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--c-bg-subtle, #f8f9fa);border-bottom:1px solid var(--c-border)}.email-tpl-var-dropdown{position:relative}.email-tpl-var-panel{position:absolute;top:100%;left:0;z-index:50;min-width:260px;max-height:320px;overflow-y:auto;background:var(--c-bg);border:1px solid var(--c-border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.12);padding:6px;margin-top:4px}.email-var-group:not(:first-child){margin-top:6px;padding-top:6px;border-top:1px solid var(--c-border)}.email-var-group__label{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--c-text-muted);padding:2px 4px;letter-spacing:.03em}.email-var-item{display:block;width:100%;text-align:left;padding:3px 6px;margin:1px 0;border:none;background:none;font-size:12px;font-family:"Roboto Mono",monospace;color:var(--c-text);border-radius:3px;cursor:pointer}.email-var-item:hover{background:var(--c-primary);color:#fff}#js-quill-editor{min-height:200px}#js-quill-editor .ql-editor{min-height:200px;font-size:13px}.modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}.modal-box{width:min(680px,90vw);max-height:80vh;background:var(--c-bg);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden}.modal-box__header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--c-border)}.modal-box__title{margin:0;font-size:15px;font-weight:600}.modal-box__close{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--c-text-muted);padding:0 4px}.modal-box__close:hover{color:var(--c-text)}.modal-box__body{padding:12px 16px;overflow-y:auto;flex:1}
diff --git a/resources/scss/app.scss b/resources/scss/app.scss
index 82fb0fc..959769f 100644
--- a/resources/scss/app.scss
+++ b/resources/scss/app.scss
@@ -2,6 +2,7 @@
 @use "modules/email-send";
 @use "modules/automation";
 @use "modules/printing";
+@use "modules/shipment-presets";
 
 * {
   box-sizing: border-box;
diff --git a/resources/scss/modules/_shipment-presets.scss b/resources/scss/modules/_shipment-presets.scss
new file mode 100644
index 0000000..024bb9e
--- /dev/null
+++ b/resources/scss/modules/_shipment-presets.scss
@@ -0,0 +1,94 @@
+.shipment-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.shipment-presets__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 6px;
+  background: var(--preset-color, #3b82f6);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+  line-height: 1.4;
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+.shipment-presets__add {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border: 1px dashed #ccc;
+  border-radius: 6px;
+  background: transparent;
+  color: #666;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+  line-height: 1.4;
+
+  &:hover {
+    border-color: #999;
+    color: #444;
+  }
+}
+
+.preset-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preset-modal__content {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  min-width: 360px;
+  max-width: 420px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+  h3 {
+    margin: 0 0 4px;
+    font-size: 16px;
+  }
+}
+
+.preset-modal__colors {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.preset-modal__color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: border-color 0.15s;
+
+  &:hover {
+    border-color: #aaa;
+  }
+
+  &.is-selected {
+    border-color: #333;
+  }
+}
diff --git a/resources/views/shipments/prepare.php b/resources/views/shipments/prepare.php
index a45951b..37c9165 100644
--- a/resources/views/shipments/prepare.php
+++ b/resources/views/shipments/prepare.php
@@ -61,6 +61,28 @@ $defaultCodAmount = $isCod ? number_format($totalWithTax, 2, '.', '') : '0';
   <?php endif; ?>
 </section>
 
+<section class="shipment-presets" id="shipment-presets">
+  <button type="button" class="shipment-presets__add" id="preset-add-btn">+ Dodaj przycisk dostawy</button>
+</section>
+
+<div class="preset-modal" id="preset-modal" style="display:none">
+  <div class="preset-modal__content">
+    <h3>Nowy przycisk dostawy</h3>
+    <label class="form-field mt-12">
+      <span class="field-label">Nazwa</span>
+      <input class="form-control" type="text" id="preset-name-input" maxlength="100" placeholder="np. InPost Paczkomat Standard">
+    </label>
+    <div class="form-field mt-12">
+      <span class="field-label">Kolor</span>
+      <div class="preset-modal__colors" id="preset-color-picker"></div>
+    </div>
+    <div class="form-actions mt-16">
+      <button type="button" class="btn btn--primary" id="preset-save-btn">Zapisz</button>
+      <button type="button" class="btn btn--secondary" id="preset-cancel-btn">Anuluj</button>
+    </div>
+  </div>
+</div>
+
 <form method="post" action="/orders/<?= $e((string) ($orderId ?? 0)) ?>/shipment/create" novalidate>
   <input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
 
@@ -790,3 +812,235 @@ $defaultCodAmount = $isCod ? number_format($totalWithTax, 2, '.', '') : '0';
 
 })();
 </script>
+<script>
+(function () {
+  'use strict';
+
+  var PRESET_COLORS = ['#3b82f6','#ef4444','#10b981','#f59e0b','#8b5cf6','#ec4899','#06b6d4','#6b7280'];
+  var presetsContainer = document.getElementById('shipment-presets');
+  var addBtn = document.getElementById('preset-add-btn');
+  var modal = document.getElementById('preset-modal');
+  var nameInput = document.getElementById('preset-name-input');
+  var colorPicker = document.getElementById('preset-color-picker');
+  var saveBtn = document.getElementById('preset-save-btn');
+  var cancelBtn = document.getElementById('preset-cancel-btn');
+
+  if (!presetsContainer || !addBtn || !modal) return;
+
+  var selectedColor = PRESET_COLORS[0];
+  var presetsData = [];
+
+  // --- Color picker ---
+  PRESET_COLORS.forEach(function (color, idx) {
+    var swatch = document.createElement('div');
+    swatch.className = 'preset-modal__color-swatch' + (idx === 0 ? ' is-selected' : '');
+    swatch.style.background = color;
+    swatch.setAttribute('data-color', color);
+    swatch.addEventListener('click', function () {
+      colorPicker.querySelectorAll('.preset-modal__color-swatch').forEach(function (s) { s.classList.remove('is-selected'); });
+      swatch.classList.add('is-selected');
+      selectedColor = color;
+    });
+    colorPicker.appendChild(swatch);
+  });
+
+  // --- Load presets ---
+  function loadPresets() {
+    fetch('/api/shipment-presets', { credentials: 'same-origin' })
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        presetsData = data.presets || [];
+        renderPresets();
+      })
+      .catch(function () {});
+  }
+
+  function renderPresets() {
+    var existing = presetsContainer.querySelectorAll('.shipment-presets__btn');
+    existing.forEach(function (btn) { btn.remove(); });
+
+    presetsData.forEach(function (preset) {
+      var btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'shipment-presets__btn';
+      btn.style.background = preset.color || '#3b82f6';
+      btn.textContent = preset.name;
+      btn.setAttribute('data-preset-id', preset.id);
+      btn.addEventListener('click', function () { applyPreset(preset); });
+      presetsContainer.insertBefore(btn, addBtn);
+    });
+  }
+
+  // --- Apply preset (autofill form) ---
+  function applyPreset(preset) {
+    var carrierSelect = document.getElementById('shipment-carrier-select');
+    var hiddenInput = document.getElementById('shipment-delivery-service');
+    var credentialsInput = document.getElementById('shipment-credentials-id');
+    var carrierInput = document.getElementById('shipment-carrier-id');
+    var providerInput = document.getElementById('shipment-provider-code');
+
+    if (!carrierSelect) return;
+
+    // Set carrier — use native change so existing handler shows correct panel
+    carrierSelect.value = preset.carrier || '';
+    if (carrierSelect._syncTrigger) carrierSelect._syncTrigger();
+    carrierSelect.dispatchEvent(new Event('change'));
+
+    // The existing change handler clears hidden fields and resets selects.
+    // We must wait for that to finish, then override with preset values.
+    setTimeout(function () {
+      // Hidden fields — set AFTER the change handler cleared them
+      if (hiddenInput) hiddenInput.value = preset.delivery_method_id || '';
+      if (credentialsInput) credentialsInput.value = preset.credentials_id || '';
+      if (carrierInput) carrierInput.value = preset.carrier_id || '';
+      if (providerInput) providerInput.value = preset.provider_code || '';
+
+      // Package fields
+      setFieldValue('package_type', preset.package_type || 'PACKAGE');
+      setFieldValue('length_cm', preset.length_cm || '25');
+      setFieldValue('width_cm', preset.width_cm || '20');
+      setFieldValue('height_cm', preset.height_cm || '8');
+      setFieldValue('weight_kg', preset.weight_kg || '1');
+      setFieldValue('sender_point_id', preset.sender_point_id || '');
+      setFieldValue('label_format', preset.label_format || 'PDF');
+
+      // Select delivery service in the correct panel
+      selectDeliveryService(preset);
+    }, 200);
+  }
+
+  function setFieldValue(name, value) {
+    var field = document.querySelector('[name="' + name + '"]');
+    if (!field) return;
+    field.value = value;
+    if (field.tagName === 'SELECT' && field._syncTrigger) {
+      field._syncTrigger();
+    }
+  }
+
+  function selectDeliveryService(preset) {
+    var carrier = preset.carrier || '';
+    var methodId = preset.delivery_method_id || '';
+    var credentialsId = preset.credentials_id || '';
+    var carrierId = preset.carrier_id || '';
+
+    var hiddenInput = document.getElementById('shipment-delivery-service');
+    var credentialsInput = document.getElementById('shipment-credentials-id');
+    var carrierInput = document.getElementById('shipment-carrier-id');
+
+    if (carrier === 'allegro') {
+      // Click the matching option in Allegro searchable dropdown
+      var dropdown = document.getElementById('shipment-service-dropdown');
+      if (dropdown) {
+        var opts = dropdown.querySelectorAll('.searchable-select__option');
+        opts.forEach(function (opt) {
+          opt.classList.remove('is-selected');
+          if (opt.getAttribute('data-value') === methodId) {
+            opt.classList.add('is-selected');
+            // Update search input to show selected service name
+            var searchInput = document.getElementById('shipment-service-search');
+            if (searchInput) searchInput.value = opt.getAttribute('data-label') || opt.textContent.trim();
+            // Set hidden fields from option data attributes
+            if (hiddenInput) hiddenInput.value = methodId;
+            if (credentialsInput) credentialsInput.value = opt.getAttribute('data-credentials-id') || credentialsId;
+            if (carrierInput) carrierInput.value = opt.getAttribute('data-carrier-id') || carrierId;
+          }
+        });
+      }
+    } else if (carrier === 'inpost') {
+      var inpostSelect = document.getElementById('shipment-inpost-select');
+      if (inpostSelect) {
+        inpostSelect.value = methodId;
+        if (inpostSelect._syncTrigger) inpostSelect._syncTrigger();
+        // Trigger change to set hidden fields via existing handler
+        inpostSelect.dispatchEvent(new Event('change'));
+      }
+    } else if (carrier === 'apaczka') {
+      var apaczkaSelect = document.getElementById('shipment-apaczka-select');
+      if (apaczkaSelect) {
+        apaczkaSelect.value = methodId;
+        if (apaczkaSelect._syncTrigger) apaczkaSelect._syncTrigger();
+        // Trigger change to set hidden fields via existing handler
+        apaczkaSelect.dispatchEvent(new Event('change'));
+      }
+    }
+  }
+
+  // --- Modal: add preset ---
+  addBtn.addEventListener('click', function () {
+    nameInput.value = '';
+    selectedColor = PRESET_COLORS[0];
+    colorPicker.querySelectorAll('.preset-modal__color-swatch').forEach(function (s, i) {
+      s.classList.toggle('is-selected', i === 0);
+    });
+    modal.style.display = '';
+    nameInput.focus();
+  });
+
+  cancelBtn.addEventListener('click', function () {
+    modal.style.display = 'none';
+  });
+
+  modal.addEventListener('click', function (e) {
+    if (e.target === modal) modal.style.display = 'none';
+  });
+
+  saveBtn.addEventListener('click', function () {
+    var name = nameInput.value.trim();
+    if (!name) {
+      nameInput.focus();
+      return;
+    }
+
+    var carrierSelect = document.getElementById('shipment-carrier-select');
+    var hiddenInput = document.getElementById('shipment-delivery-service');
+    var credentialsInput = document.getElementById('shipment-credentials-id');
+    var carrierInput = document.getElementById('shipment-carrier-id');
+    var providerInput = document.getElementById('shipment-provider-code');
+
+    var payload = {
+      name: name,
+      color: selectedColor,
+      carrier: carrierSelect ? carrierSelect.value : '',
+      provider_code: providerInput ? providerInput.value : '',
+      delivery_method_id: hiddenInput ? hiddenInput.value : '',
+      credentials_id: credentialsInput ? credentialsInput.value : '',
+      carrier_id: carrierInput ? carrierInput.value : '',
+      package_type: getFieldValue('package_type'),
+      length_cm: getFieldValue('length_cm'),
+      width_cm: getFieldValue('width_cm'),
+      height_cm: getFieldValue('height_cm'),
+      weight_kg: getFieldValue('weight_kg'),
+      sender_point_id: getFieldValue('sender_point_id'),
+      label_format: getFieldValue('label_format')
+    };
+
+    saveBtn.disabled = true;
+    var formBody = new URLSearchParams(payload);
+    fetch('/api/shipment-presets', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: formBody.toString()
+    })
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        if (data.preset) {
+          modal.style.display = 'none';
+          loadPresets();
+        }
+      })
+      .catch(function () {})
+      .finally(function () { saveBtn.disabled = false; });
+  });
+
+  function getFieldValue(name) {
+    var field = document.querySelector('[name="' + name + '"]');
+    return field ? field.value : '';
+  }
+
+  // --- Init ---
+  loadPresets();
+
+})();
+</script>