/* ══════════════════════════════════════════════════════════════════
   MEGARA CORE — wspólne style panelu MEGARA PIM
   Jedno źródło prawdy dla: index, delivery, zamowienia, faktury,
   integracje, wiadomosci.
   Podpinaj PRZED lokalnym <style> strony — lokalne style nadpisują rdzeń.
   <link rel="stylesheet" href="megara-core.css">
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fredoka:wght@500;600&display=swap');

  :root, [data-theme="dark"] {
    --bg: #0f0f1a; --text: #e0e0e8; --muted: #8888a0;
    --header-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --header-border: rgba(255,255,255,0.06);
    --card-bg: rgba(255,255,255,0.03); --card-border: rgba(255,255,255,0.06);
    --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.1); --input-text: #e0e0e8;
    --option-bg: #1a1a2e;
    --primary: #e94560; --primary-light: rgba(233,69,96,0.15); --primary-gradient: linear-gradient(135deg, #e94560, #c23152);
    --logo-gradient: linear-gradient(135deg, #e94560, #ff6b6b);
    --td-bg: rgba(255,255,255,0.02); --td-hover: rgba(255,255,255,0.04);
    --modal-bg: #1a1a2e; --modal-border: rgba(255,255,255,0.1);
    --row-selected: rgba(233,69,96,0.06);
    --scrollbar: rgba(255,255,255,0.1);
    --ghost-bg: rgba(255,255,255,0.08); --ghost-border: rgba(255,255,255,0.08);
    --focus-border: rgba(233,69,96,0.4);
  }
  [data-theme="base"] {
    --bg: #eef1f5; --text: #2c3e50; --muted: #7f8c9b;
    --header-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); --header-border: rgba(0,0,0,0.08);
    --card-bg: #ffffff; --card-border: rgba(0,0,0,0.08);
    --input-bg: #f5f7fa; --input-border: rgba(0,0,0,0.12); --input-text: #2c3e50;
    --option-bg: #ffffff;
    --primary: #2980b9; --primary-light: rgba(41,128,185,0.12); --primary-gradient: linear-gradient(135deg, #2980b9, #2471a3);
    --logo-gradient: linear-gradient(135deg, #2980b9, #3498db);
    --td-bg: rgba(0,0,0,0.01); --td-hover: rgba(41,128,185,0.06);
    --modal-bg: #ffffff; --modal-border: rgba(0,0,0,0.1);
    --row-selected: rgba(41,128,185,0.08);
    --scrollbar: rgba(0,0,0,0.12);
    --ghost-bg: rgba(0,0,0,0.04); --ghost-border: rgba(0,0,0,0.1);
    --focus-border: rgba(41,128,185,0.4);
  }
  [data-theme="light"] {
    --bg: #f8f9fa; --text: #1a1a2e; --muted: #6c757d;
    --header-bg: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%); --header-border: rgba(0,0,0,0.06);
    --card-bg: #ffffff; --card-border: rgba(0,0,0,0.06);
    --input-bg: #f1f3f5; --input-border: rgba(0,0,0,0.1); --input-text: #1a1a2e;
    --option-bg: #ffffff;
    --primary: #e94560; --primary-light: rgba(233,69,96,0.1); --primary-gradient: linear-gradient(135deg, #e94560, #c23152);
    --logo-gradient: linear-gradient(135deg, #e94560, #ff6b6b);
    --td-bg: rgba(0,0,0,0.01); --td-hover: rgba(233,69,96,0.04);
    --modal-bg: #ffffff; --modal-border: rgba(0,0,0,0.08);
    --row-selected: rgba(233,69,96,0.06);
    --scrollbar: rgba(0,0,0,0.1);
    --ghost-bg: rgba(0,0,0,0.04); --ghost-border: rgba(0,0,0,0.08);
    --focus-border: rgba(233,69,96,0.4);
  }
  /* ═══ MOTYW MEGARA — paleta Vilde 1:1 (petrol #34677c + pomarańcz #f29104) ═══ */
  [data-theme="megara"] {
    --petrol:#34677c; --petrol-dark:#26505f; --petrol-mid:#4d7a8c; --petrol-light:#b2c6ce;
    --orange:#f29104; --orange-hover:#ffa524; --orange-deep:#c06f02;
    --red:#f29104; --red-deep:#c06f02;
    --bg:#edf1f3; --text:#24404c; --muted:#5b7280;
    --header-bg:#34677c; --header-border: rgba(0,0,0,0.10);
    --card-bg:#ffffff; --card-border:#e1e8ea;
    --input-bg:#f4f8f9; --input-border:#d5e0e4; --input-text:#24404c;
    --option-bg:#ffffff;
    --primary:#34677c; --primary-light: rgba(52,103,124,0.12); --primary-gradient: linear-gradient(135deg, #34677c, #26505f);
    --logo-gradient: linear-gradient(135deg, #f29104, #ffa524);
    --td-bg: rgba(52,103,124,0.025); --td-hover: rgba(52,103,124,0.07);
    --modal-bg:#ffffff; --modal-border: rgba(36,64,76,0.12);
    --row-selected: rgba(242,145,4,0.10);
    --scrollbar: rgba(52,103,124,0.28);
    --ghost-bg: rgba(52,103,124,0.07); --ghost-border: rgba(52,103,124,0.14);
    --focus-border: rgba(52,103,124,0.45);
  }
  [data-theme="megara"] .tab-btn { color: rgba(255,255,255,0.72); font-weight:500; }
  [data-theme="megara"] .tab-btn.active { color:#fff; background: rgba(255,255,255,0.14); font-weight:600; box-shadow: inset 0 -3px 0 #f29104; }
  [data-theme="megara"] .tab-btn:hover { color:#fff; background: rgba(255,255,255,0.08); }
  [data-theme="megara"] .header-info { color: rgba(255,255,255,0.6); }
  [data-theme="megara"] .btn-primary { box-shadow: 0 4px 12px rgba(52,103,124,0.22); }
  [data-theme="megara"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(52,103,124,0.32); }
  [data-theme="megara"] .badge { background: rgba(242,145,4,0.12); color: #c06f02; }
  [data-theme="megara"] .card { box-shadow: 0 1px 3px rgba(36,64,76,0.05); }
  [data-theme="megara"] ::selection { background: rgba(242,145,4,0.25); }
  /* aliasy do stylów inline (var(--fg)/var(--border)/var(--accent)) */
  html { --fg: var(--text); --border: var(--input-border); --accent: var(--primary); }
  /* Logo w nagłówku (badge + PIM) */
  .app-logo { display:inline-flex; align-items:center; gap:12px; margin-right:30px; text-decoration:none; flex:0 0 auto; }
  .app-logo-img { height:30px; width:auto; display:block; }
  .app-logo-sep { width:1px; height:22px; background:rgba(255,255,255,0.28); flex:0 0 auto; }
  .app-logo-sub { font-family:'Fredoka','Poppins',sans-serif; font-size:22px; font-weight:600; letter-spacing:0.5px; color:#fff; white-space:nowrap; line-height:1; }
  [data-theme="light"] .app-logo-sub, [data-theme="base"] .app-logo-sub { color:#fff; }
  [data-theme="base"] .tab-btn { color: rgba(255,255,255,0.55); }
  [data-theme="base"] .tab-btn.active { color: #fff; background: rgba(255,255,255,0.12); }
  [data-theme="base"] .tab-btn:hover { color: rgba(255,255,255,0.85); }
  [data-theme="base"] .header-info { color: rgba(255,255,255,0.5); }
  [data-theme="base"] .logo { background: var(--logo-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  [data-theme="light"] .tab-btn { color: #6c757d; }
  [data-theme="light"] .tab-btn.active { color: var(--primary); background: var(--primary-light); }
  [data-theme="light"] .tab-btn:hover { color: #333; }
  [data-theme="light"] .header-info { color: #6c757d; }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'DM Sans', 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; transition: background 0.3s, color 0.3s; }
  ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }

  header { background: var(--header-bg); border-bottom: 1px solid var(--header-border); padding: 0 32px; display: flex; align-items: center; height: 64px; gap: 8px; position: sticky; top: 0; z-index: 100; }
  .logo { font-size: 20px; font-weight: 700; background: var(--logo-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 40px; letter-spacing: -0.5px; }
  .tab-btn { padding: 8px 20px; border: none; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 400; transition: all 0.2s; font-family: inherit; }
  .tab-btn.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
  .tab-btn:hover { color: var(--text); }
  .header-info { margin-left: auto; font-size: 12px; color: var(--muted); }

  main { padding: 32px; max-width: 1400px; margin: 0 auto; }
  .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 28px; margin-bottom: 20px; }

  h2 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
  h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
  h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
  .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 24px; }

  input[type="text"], input[type="number"], input[type="search"], input[type="password"], textarea {
    background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px;
    padding: 10px 14px; color: var(--input-text); font-size: 14px; outline: none; font-family: inherit; width: 100%;
  }
  textarea { resize: vertical; min-height: 80px; }
  input:focus, textarea:focus { border-color: var(--focus-border); }
  select {
    background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px;
    padding: 10px 14px; color: var(--input-text); font-size: 14px; outline: none; font-family: inherit; width: 100%;
  }
  select option { background: var(--option-bg); color: var(--input-text); }

  .btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: #fff; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
  .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .btn-primary { background: var(--primary-gradient); }
  .btn-success { background: linear-gradient(135deg, #2ECC71, #27ae60); }
  .btn-ghost { background: var(--ghost-bg); color: var(--text); }
  .btn-sm { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; }
  .btn-sm-red { background: rgba(233,69,96,0.15); color: #e94560; }
  .btn-sm-blue { background: rgba(52,152,219,0.15); color: #3498DB; }
  .btn-sm-danger { background: rgba(231,76,60,0.15); color: #E74C3C; }
  .btn-sm-blue { background: rgba(59,130,246,0.15); color: #3b82f6; }
  .btn-sm-neutral { background: var(--ghost-bg); color: var(--muted); }

  table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
  th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
  td { padding: 12px 16px; background: var(--td-bg); font-size: 14px; }
  tr:hover td { background: var(--td-hover); }
  td:first-child { border-radius: 8px 0 0 8px; }
  td:last-child { border-radius: 0 8px 8px 0; }

  .badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--primary-light); color: var(--primary); }
  .badge-blue { background: rgba(52,152,219,0.1); color: #3498DB; }
  .badge-green { background: rgba(46,204,113,0.1); color: #2ECC71; }
  .badge-orange { background: rgba(243,156,18,0.1); color: #F39C12; }

  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
  .modal { background: var(--modal-bg); border: 1px solid var(--modal-border); border-radius: 20px; padding: 0; max-width: 900px; width: 95%; max-height: 90vh; overflow: hidden; position: relative; display: flex; flex-direction: column; }
  .modal-header { padding: 20px 24px 0; flex-shrink: 0; }
  .modal-body { padding: 0 24px 24px; overflow-y: auto; flex: 1; }
  .modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--ghost-bg); color: var(--muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; z-index: 2; }
  .modal-close:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
  .modal.modal-fullscreen { max-width: 90vw; width: 90vw; max-height: 90vh; height: 90vh; max-height: 90dvh; height: 90dvh; }
  .hintph::placeholder { color: var(--muted); font-style: italic; opacity: 0.7; }
  .hintph:focus::placeholder { color: transparent; }
  /* Zwarte, wyśrodkowane parametry (jak Vilde) */
  #productParametersContainer, #setParametersContainer { max-width: 820px; margin-left: auto; margin-right: auto; }
  #productParametersContainer .param-row, #setParametersContainer .param-row { padding: 2px 0 !important; gap: 6px !important; margin-bottom: 0 !important; }
  #productParametersContainer .param-row input, #productParametersContainer .param-row select,
  #setParametersContainer .param-row input, #setParametersContainer .param-row select {
    height: 30px !important; min-height: 0 !important; padding: 3px 8px !important; font-size: 12.5px !important;
  }
  #productParametersContainer .param-section-block, #setParametersContainer .param-section-block { padding: 10px 12px !important; margin-bottom: 8px !important; }
  #productParametersContainer .dnd-handle, #setParametersContainer .dnd-handle { padding: 0 3px !important; font-size: 12px !important; }
  .modal.modal-fullscreen .modal-body { padding: 0 32px 24px; }
  .modal.modal-fullscreen .modal-header { padding: 16px 32px 0; }
  .modal-sticky-footer { padding: 12px 32px; background: var(--modal-bg); border-top: 1px solid var(--card-border); display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-shrink: 0; }

  .modal-tabs { display: flex; gap: 4px; margin: 16px 0; border-bottom: 1px solid var(--card-border); padding-bottom: 0; }
  .modal-tab { padding: 10px 20px; border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; transition: all 0.2s; margin-bottom: -1px; }
  .modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
  .modal-tab:hover { color: var(--text); }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
  .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
  .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
  .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
  .text-center { text-align: center; } .text-muted { color: var(--muted); } .text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .text-right { text-align: right; }
  .hidden { display: none; }

  .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
  .empty-state .icon { font-size: 48px; margin-bottom: 16px; }

  .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
  .toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

  .import-subtab { background: var(--ghost-bg); color: var(--muted); border: 1px solid var(--ghost-border); }
  .import-subtab.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

  .pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
  .page-btn { padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; background: var(--ghost-bg); color: var(--muted); font-family: inherit; transition: all 0.15s; }
  .page-btn.active { background: var(--primary-light); color: var(--primary); }
  .page-btn:hover { background: var(--td-hover); }

  .theme-card { padding: 16px; border-radius: 12px; border: 2px solid var(--card-border); cursor: pointer; transition: all 0.2s; text-align: center; }
  /* WYSIWYG editor */
  .editor-toolbar { background:var(--td-bg);padding:8px;border:1px solid var(--card-border);border-bottom:none;border-radius:10px 10px 0 0;display:flex;gap:4px;flex-wrap:wrap }
  .editor-btn { width:32px;height:32px;border:none;background:transparent;color:var(--text);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s }
  .editor-btn:hover { background:var(--primary-light);color:var(--primary) }
  .img-slot { aspect-ratio:1;background:var(--td-bg);border:2px dashed var(--card-border);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:all .15s }
  .img-slot:hover { border-color:var(--primary);background:rgba(79,255,176,.03) }
  .img-slot.has-image { border-style:solid;border-color:var(--card-border) }
  .img-slot.has-image:hover { border-color:var(--primary) }
  .img-slot img { width:100%;height:100%;object-fit:cover;pointer-events:none }
  .img-slot .slot-num { position:absolute;top:2px;left:3px;font-size:9px;color:#fff;font-weight:600;z-index:2;background:rgba(0,0,0,.5);padding:1px 4px;border-radius:3px }
  .img-slot .slot-actions { position:absolute;bottom:3px;left:0;right:0;display:none;gap:2px;z-index:2;justify-content:center;background:rgba(255,255,255,.85);margin:0 3px;border-radius:4px;padding:2px 0 }
  .img-slot:hover .slot-actions { display:flex }
  .img-slot .slot-actions button { padding:1px 4px;font-size:10px;border:none;border-radius:3px;cursor:pointer;background:transparent;line-height:1.2 }
  .img-slot .slot-actions button:hover { background:rgba(0,0,0,.1) }
  .img-slot .slot-empty { text-align:center;color:var(--muted);font-size:18px }
  .img-slot.dragging { opacity:.4;border-color:var(--primary) }
  .img-slot.drag-over { border-color:var(--primary);background:rgba(79,255,176,.1) }
  .toolbar-sep { width:1px;height:24px;background:var(--card-border);margin:4px 4px;align-self:center }
  .wysiwyg-editor { min-height:250px;padding:16px;border:1px solid var(--card-border);border-radius:0 0 10px 10px;outline:none;font-size:14px;line-height:1.6;color:var(--text);background:var(--input-bg);overflow-y:auto;max-height:450px }
  .wysiwyg-editor:focus { border-color:var(--primary) }
  .wysiwyg-editor ul,.wysiwyg-editor ol { padding-left:24px }
  .wysiwyg-editor b,.wysiwyg-editor strong { font-weight:700 }
  .theme-card:hover { border-color: var(--muted); }
  .theme-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
  .theme-preview { height: 48px; border-radius: 8px; margin-bottom: 8px; }

  .accordion { border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
  .accordion-header { padding: 14px 18px; background: var(--td-bg); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; transition: background 0.15s; user-select: none; }
  .accordion-header:hover { background: var(--td-hover); }
  .accordion-header .arrow { transition: transform 0.2s; font-size: 12px; color: var(--muted); }
  .accordion-header.open .arrow { transform: rotate(180deg); }
  .accordion-body { padding: 18px; display: none; }
  .accordion-body.open { display: block; }

  .param-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
  .param-row input { flex: 1; }
  .param-row .remove-param { width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(231,76,60,0.2); background: rgba(231,76,60,0.08); color: #E74C3C; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s; flex-shrink: 0; }
  .param-row .remove-param:hover { background: rgba(231,76,60,0.2); }

  .dim-box { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; background: rgba(46,204,113,0.1); color: #2ECC71; font-size: 12px; font-weight: 600; }

  .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
  .bulb-tip { position:fixed;z-index:9999;pointer-events:none;max-width:320px;padding:10px 14px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.35);font-size:12px;line-height:1.5;color:var(--text);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s; }
  .bulb-tip.show { opacity:1;transform:translateY(0); }
  .bulb-tip .tip-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px; }
  .bulb-tip .tip-body { white-space:pre-wrap;word-break:break-word; }
  .toast { padding: 14px 22px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #fff; animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; box-shadow: 0 8px 32px rgba(0,0,0,0.3); pointer-events: auto; }
  .toast-success { background: linear-gradient(135deg, #2ECC71, #27ae60); }
  .toast-warning { background: linear-gradient(135deg, #F39C12, #e67e22); }
  .toast-error { background: linear-gradient(135deg, #E74C3C, #c0392b); }
  .toast-info { background: linear-gradient(135deg, #f59e0b, #d97706); }
  @keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

  .field-group { margin-bottom: 14px; }
  .field-group label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

  .set-product-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--card-border); }
  .set-product-item:last-child { border-bottom: none; }
  .set-product-item:hover { background: var(--td-hover); }

  .gtin-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }

  /* Settings layout: sidebar + panel */
  .settings-layout { display: flex; gap: 0; min-height: 520px; border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; background: var(--card-bg); }
  .settings-sidebar { width: 240px; flex-shrink: 0; border-right: 1px solid var(--card-border); padding: 16px 0; display: flex; flex-direction: column; gap: 2px; background: var(--td-bg); }
  .settings-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; border: none; background: transparent; text-align: left; font-family: inherit; transition: all 0.15s; border-left: 3px solid transparent; }
  .settings-sidebar-item:hover { color: var(--text); background: var(--td-hover); }
  .settings-sidebar-item.active { color: var(--primary); background: var(--primary-light); border-left-color: var(--primary); font-weight: 600; }
  .settings-sidebar-item .sidebar-icon { font-size: 16px; width: 22px; text-align: center; }
  .settings-panel { flex: 1; padding: 28px; overflow-y: auto; max-height: 70vh; }

  /* App Dialog (custom confirm/prompt) */
  .app-dialog-overlay { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s; }
  .app-dialog-overlay.login-overlay { background:var(--bg, #1a1a2e); }
  .app-dialog { background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:28px;min-width:380px;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:slideUp .2s; }
  .app-dialog-title { font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text); }
  .app-dialog-body { font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:18px;white-space:pre-line; }
  .app-dialog-buttons { display:flex;gap:10px;justify-content:flex-end; }
  .app-dialog-input { width:100%;padding:10px 14px;border:1px solid var(--card-border);border-radius:10px;background:var(--input-bg);color:var(--text);font-size:14px;font-family:inherit;margin-bottom:16px;outline:none; }
  .app-dialog-input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.15); }
  @keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

  /* Bar dropdown menu items */
  .bar-dropdown-item { display:block;width:100%;padding:8px 14px;font-size:13px;text-align:left;border:none;border-radius:6px;background:transparent;color:var(--fg);cursor:pointer;font-family:inherit;transition:background .15s; }
  .bar-dropdown-item:hover { background:var(--primary-light); }
  .journal-subtab { background:transparent;color:var(--muted);border:none;font-weight:500;transition:all .15s; }
  .journal-subtab.active { background:var(--primary);color:#fff;font-weight:600; }
  .journal-subtab:not(.active):hover { background:var(--td-hover);color:var(--fg); }
  .task-priority-high { border-left:3px solid #ef4444; }
  .task-priority-medium { border-left:3px solid #f59e0b; }
  .task-priority-low { border-left:3px solid #22c55e; }
  .task-priority-none { border-left:3px solid var(--border); }
  .task-done { opacity:0.55; }
  .task-done strong { text-decoration:line-through; }
  .bar-dropdown-sub { position:relative; }
  .bar-dropdown-sub > .bar-dropdown-item { border-bottom:1px solid var(--card-border);margin-bottom:4px;padding-bottom:10px;border-radius:6px 6px 0 0; }

  /* ═══ ADVANCED FILTERS ═══ */
  .adv-modal { max-width: 1100px; width: calc(100vw - 44px); height: 86vh; max-height: 86vh; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
  .adv-modal .modal-header { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: var(--primary-gradient); flex: 0 0 auto; margin: 0; }
  .adv-modal .modal-header h3 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }
  .adv-modal .modal-header .modal-close { margin-left: auto; width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s; }
  .adv-modal .modal-header .modal-close:hover { background: rgba(255,255,255,.32); }
  .adv-modal-body { padding: 18px 22px 22px; overflow-y: auto; flex: 1; }
  .adv-saved-bar { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--td-bg); border: 1px solid var(--card-border); border-radius: 10px; margin-bottom: 18px; flex-wrap: wrap; }
  .adv-saved-bar label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .adv-saved-bar select { flex: 1; min-width: 220px; height: 34px; padding: 0 10px; font-size: 13px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--card-bg); color: var(--text); }
  .adv-cond-header { display: none; }
  .adv-cond-row { display: grid; grid-template-columns: 1.5fr 1.2fr 2.4fr 40px; gap: 10px; align-items: flex-start; padding: 12px; background: var(--td-bg); border: 1px solid var(--card-border); border-radius: 12px; }
  .adv-cond-row select { padding: 0 10px; font-size: 14px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--card-bg); color: var(--text); height: 38px; width: 100%; }
  .adv-cond-remove { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; color: var(--muted); cursor: pointer; height: 38px; width: 40px; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
  .adv-cond-remove:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
  .adv-cond-joiner { display: flex; align-items: center; gap: 14px; margin: 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
  .adv-cond-joiner::before, .adv-cond-joiner::after { content: ''; flex: 1; height: 1px; background: var(--card-border); }
  .adv-add-row { margin-top: 14px; width: 100%; height: 44px; border: 1px dashed var(--input-border); border-radius: 12px; background: transparent; color: var(--primary); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: all .15s; }
  .adv-add-row:hover { border-color: var(--primary); background: var(--primary-light); }
  .adv-modal .modal-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--card-border); background: var(--td-bg); flex: 0 0 auto; }
  .adv-modal .modal-footer .btn-primary { background: var(--orange, #f29104); color: #24404c; box-shadow: 0 6px 16px rgba(242,145,4,.32); min-width: 160px; justify-content: center; }
  .adv-modal .modal-footer .btn-primary:hover { background: var(--orange-hover, #ffa524); }
  /* Chip input */
  .chip-input { display: flex; flex-wrap: wrap; gap: 5px; min-height: 38px; padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--card-bg); cursor: text; align-content: flex-start; align-items: center; }
  .chip-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
  .chip-input .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 10px; background: var(--primary-light); color: var(--primary); border-radius: 12px; font-size: 11px; font-weight: 600; max-width: 220px; }
  .chip-input .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip-input .chip-x { cursor: pointer; border-radius: 50%; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.65; font-size: 14px; line-height: 1; }
  .chip-input .chip-x:hover { opacity: 1; background: rgba(239,68,68,0.2); color: #ef4444; }
  .chip-input input { flex: 1; min-width: 80px; border: none; background: transparent; outline: none; color: var(--text); font-size: 13px; padding: 3px 4px; }
  .chip-input input::placeholder { color: var(--muted); font-style: italic; }
  .chip-input.no-values { border-color: #ef4444; }
  .chip-input-help { font-size: 11px; color: var(--muted); margin-top: 6px; font-style: italic; }
  .adv-between-range { display: flex; gap: 8px; align-items: center; }
  .adv-between-range input { flex: 1; padding: 0 10px; height: 38px; font-size: 14px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--card-bg); color: var(--text); }
  .adv-status-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--primary-light); border: 1px solid var(--card-border); border-radius: 8px; margin-top: 8px; }
  .adv-status-bar .adv-status-icon { font-size: 14px; }
  .adv-status-bar .adv-status-text { font-size: 12px; font-weight: 600; color: var(--primary); flex: 1; }
  .adv-status-bar button { font-size: 11px; padding: 4px 8px; }

  /* === Drag and drop dla parametrów i sekcji === */
  .dnd-handle { cursor: grab; color: var(--muted); font-size: 14px; padding: 0 6px; user-select: none; opacity: 0.5; transition: opacity .15s, color .15s; flex-shrink: 0; }
  .dnd-handle:hover { opacity: 1; color: var(--primary); }
  .dnd-handle:active { cursor: grabbing; }
  .param-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--card-border); transition: background .12s, border-top-color .12s, border-bottom-color .12s; border-top: 2px solid transparent; }
  .param-row.dnd-dragging { opacity: 0.4; }
  .param-row.dnd-over-top { border-top: 2px solid var(--primary); }
  .param-row.dnd-over-bottom { border-bottom: 2px solid var(--primary); }
  .param-section-block { transition: opacity .12s, box-shadow .15s; }
  .param-section-block.dnd-dragging { opacity: 0.4; }
  .param-section-block.dnd-over { box-shadow: 0 0 0 2px var(--primary); }
  .param-section-empty { padding: 14px; color: var(--muted); font-size: 12px; text-align: center; border: 1px dashed var(--card-border); border-radius: 6px; transition: all .12s; }
  .param-section-empty.dnd-over { background: rgba(99,102,241,.08); border-color: var(--primary); color: var(--primary); }

  /* logo fallback gdy grafika się nie wczyta (używane w modułach) */
  .app-logo-fallback { font-family:'Fredoka','Poppins',sans-serif; font-size:20px; font-weight:600; letter-spacing:.5px; background:linear-gradient(135deg,#f29104,#ffa524); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

  /* Style wspólnego menu (.mg-nav/.mg-dd) wstrzykuje megara-core.js —
     dzięki temu menu wygląda tak samo także na stronach, które nie ładują
     tego pliku. Trzymamy je w jednym miejscu, w rdzeniu JS. */

  /* ═══ RAMKA PASKA NARZĘDZI NAD LISTĄ (Produkty / Zestawy) ═══ */
  .panel-toolbar { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px;
    padding:16px 20px; margin-bottom:16px; box-shadow:0 1px 3px rgba(36,64,76,.05); }
  .panel-toolbar h2 { margin-bottom:2px; }
  .panel-toolbar .catalog-select { width:auto; max-width:230px; padding:7px 11px; font-size:13px; font-weight:600;
    border:1px solid var(--card-border); border-radius:8px; background:var(--input-bg); color:var(--text); cursor:pointer; }
  .panel-toolbar .catalog-select:focus { border-color:var(--primary); outline:none; }