:root {
    --bg:#f2f5f9; --card:#fff; --line:#e3e9f1; --txt:#1c2733; --muted:#7a8794;
    --brand:#0b4f8a; --brand2:#0d6bb5; --green:#1d7a3e; --red:#c0392b; --amber:#b7791f;
    --shadow:0 1px 3px rgba(16,42,67,.08), 0 4px 14px rgba(16,42,67,.06);
    --radius:12px;
  }
  * { box-sizing:border-box; }
  body { margin:0; font-family:'Segoe UI', system-ui, Arial, sans-serif; background:var(--bg); color:var(--txt); font-size:14px; }
  .layout { display:flex; min-height:100vh; }

  /* ===== Sidebar ===== */
  .side { width:230px; min-width:230px; background:linear-gradient(180deg,#0b3a66 0%,#0b4f8a 100%); color:#e6eef7; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
  .side .logo { padding:20px 18px 14px; font-size:18px; font-weight:700; letter-spacing:.2px; }
  .side .logo small { display:block; font-size:11px; font-weight:400; opacity:.7; margin-top:2px; }
  .side .client-box { padding:12px 14px; }
  .side .client-box label { font-size:10px; text-transform:uppercase; letter-spacing:.8px; opacity:.65; display:block; margin-bottom:6px; }
  .side select { width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); color:#fff; font-size:13px; }
  .side select option { color:#1c2733; }
  .menu { flex:1; padding:10px 10px; }
  .menu a { display:flex; align-items:center; gap:10px; padding:10px 12px; margin:2px 0; border-radius:9px; color:#d5e3f2; text-decoration:none; font-size:13.5px; transition:.15s; cursor:pointer; }
  .menu a:hover { background:rgba(255,255,255,.1); }
  .menu a.active { background:rgba(255,255,255,.18); color:#fff; font-weight:600; }
  .menu a .ic { width:20px; text-align:center; font-size:15px; }
  .side .foot { padding:14px 14px 52px; font-size:11px; opacity:.55; border-top:1px solid rgba(255,255,255,.12); }

  /* ===== Content ===== */
  .content { flex:1; padding:22px 28px; max-width:calc(100vw - 250px); min-width:1200px; }
  .page { display:none; }
  .page.active { display:block; animation:fade .2s ease; }
  @keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
  .page-head { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .page-head h2 { margin:0; font-size:20px; }
  .page-head .sub { color:var(--muted); font-size:13px; }

  .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
  .stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; }
  .stat .num { font-size:24px; font-weight:700; color:var(--brand); line-height:1.1; }
  .stat .lbl { font-size:12px; color:var(--muted); margin-top:3px; }
  .stat .chg { font-size:11px; margin-top:5px; }
  .up { color:var(--green); } .down { color:var(--red); }

  .panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:16px; }
  .panel h3 { margin:0 0 12px; font-size:14px; color:var(--brand); }
  .panel h3 .hint { font-weight:400; color:var(--muted); font-size:12px; margin-left:8px; }

  .filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:10px; }
  .filters label { font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
  .filters select, .filters input { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; min-width:130px; background:#fff; color:var(--txt); }
  .filters input:focus, .filters select:focus { outline:2px solid #cfe3f5; border-color:var(--brand2); }

  button { background:var(--brand); color:#fff; border:0; border-radius:8px; padding:9px 16px; font-size:13.5px; cursor:pointer; transition:.15s; }
  button:hover { filter:brightness(1.12); }
  button.sec { background:#eef3f9; color:var(--brand); border:1px solid var(--line); }
  button:disabled { background:#c6d2de; cursor:not-allowed; }
  textarea { border:1px solid var(--line); border-radius:8px; padding:10px; font-family:Consolas,monospace; font-size:12px; width:100%; }

  table { width:100%; border-collapse:collapse; font-size:12.8px; }
  #tbl_codes_wrap { overflow:auto; max-height:60vh; }
  #tbl_codes_wrap thead th { position:sticky; top:0; background:#f0f5fa; z-index:1; box-shadow:0 1px 0 var(--line); }
  th { background:#f0f5fa; text-align:left; padding:8px 10px; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  th.sortable { cursor:pointer; user-select:none; }
  th.sortable:hover { color:var(--brand); background:#e8f0f9; }
  td { padding:7px 10px; border-top:1px solid var(--line); vertical-align:top; }
  tr:hover td { background:#f8fbfe; }
  .pager { display:flex; gap:10px; align-items:center; margin-top:10px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
  .pager .pg { min-width:30px; padding:6px 9px; }
  .pager .pg-cur { background:var(--brand); color:#fff; border-color:var(--brand); }
  .pager .pg-dots { color:var(--muted); padding:0 2px; }

  .badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
  .b-green { background:#e4f4ea; color:var(--green); }
  .b-red { background:#fdeaea; color:var(--red); }
  .b-blue { background:#e7f0fa; color:var(--brand); }
  .b-amber { background:#fdf3e0; color:var(--amber); }
  .b-grey { background:#eef1f4; color:#667; }

  .report { white-space:pre-wrap; line-height:1.6; background:#fbfaf3; border:1px solid #ece5c8; border-radius:10px; padding:14px; font-size:13.5px; }
  tr.row-warn td { background:#fff8e1; }
  tr.row-warn:hover td { background:#fff3cd; }
  tr.row-mod td { background:#fff8e1; }
  tr.row-mod:hover td { background:#fff3cd; }
  tr.row-bad td { background:#fdecec; }
  tr.row-bad:hover td { background:#fbdcdc; }
  tr.row-ns td { background:#f2f4f6; }
  tr.row-ns:hover td { background:#e8ebee; }
  tr.row-kiz td { background:#f3ecfa; box-shadow:inset 3px 0 0 #9b59b6; }
  tr.row-kiz:hover td { background:#eadef7; }
  tr.tpl-row td { background:#e0f7f5; box-shadow:inset 3px 0 0 #14b8a6; }
  tr.tpl-row:hover td { background:#d2f1ed; }
  .rd-ico { font-size:14px; text-align:center; }
  .rd-ico.ok { color:#4caf50; }
  .muted { color:var(--muted); font-size:12px; }
  #kiz_info.kiz-active { display:inline-block; background:#e4f4ea; border:1px solid #b5d9c3; color:var(--green); font-weight:700; font-size:12px; padding:3px 10px; border-radius:20px; box-shadow:0 0 0 2px rgba(29,122,62,.12); }
  #kiz_clear_btn { font-size:11px; padding:3px 10px; border-radius:20px; background:#e4f4ea; color:var(--green); border:1px solid #b5d9c3; }
  #kiz_clear_btn:hover { background:var(--red); border-color:var(--red); color:#fff; }
  .spin { display:inline-block; width:14px; height:14px; border:2px solid #d5dee8; border-top-color:var(--brand); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; margin-right:6px; }
  @keyframes sp { to { transform:rotate(360deg); } }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  /* ===== конструктор карточек НК: форма ===== */
  .tpl-form { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
  .tpl-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:#334155; }
  .tpl-form label.full { grid-column:1/-1; }
  .tpl-form input, .tpl-form select, .tpl-form textarea { width:100%; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:13px; background:#fff; color:var(--txt); box-sizing:border-box; transition:border-color .15s, box-shadow .15s, background .15s; font-family:inherit; }
  .tpl-form input:focus, .tpl-form select:focus, .tpl-form textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.13); }
  .tpl-form textarea { resize:vertical; min-height:56px; line-height:1.4; }
  .tpl-form label.req input, .tpl-form label.req select, .tpl-form label.req textarea { border-color:#f59e0b; background:#fffdf5; }
  .tpl-form label.req input:focus, .tpl-form label.req select:focus, .tpl-form label.req textarea:focus { border-color:#d97706; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
  .req-star { color:#dc2626; font-weight:700; margin-left:2px; }
  .tpl-form .field-hint { font-size:11px; color:#94a3b8; font-weight:400; }
  .tpl-form .field-help { display:block; font-size:11px; color:var(--brand); cursor:pointer; text-decoration:underline dotted; margin-top:2px; }
  .tpl-form .field-help:hover { text-decoration:underline; }
  /* подсветка полей: все поля кроме GTIN (оранжеватый фон = поле в работе) */
  .tpl-form label.tpl-hl input, .tpl-form label.tpl-hl select, .tpl-form label.tpl-hl textarea { background:#fffdf2; border-color:#e8d5a0; }
  .tpl-form label.tpl-hl input:focus, .tpl-form label.tpl-hl select:focus, .tpl-form label.tpl-hl textarea:focus { border-color:#d97706; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
  .tpl-form label.tpl-hl.req input, .tpl-form label.tpl-hl.req select, .tpl-form label.tpl-hl.req textarea { border-color:#f59e0b; background:#fffaf0; }
  /* заполненные поля — зелёная подсветка, чтобы было видно, что уже введено
     (!important — перебивает жёлтые req/tpl-hl, у которых специфичность выше) */
  .tpl-form input:not(:placeholder-shown), .tpl-form textarea:not(:placeholder-shown),
  .tpl-form select:has(option:checked:not([value=""])) { border-color:#16a34a !important; background:#f0fdf4 !important; }
  .tpl-form input:not(:placeholder-shown):focus, .tpl-form textarea:not(:placeholder-shown):focus,
  .tpl-form select:has(option:checked:not([value=""])):focus { border-color:#15803d !important; box-shadow:0 0 0 3px rgba(22,163,74,.15); }
  /* поле GTIN — не подсвечиваем (можно не заполнять) */
  .tpl-form label.tpl-no-hl { opacity:.92; }
  /* бейдж «есть справочник» */
  .sugg-badge { display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-size:10px; font-weight:600; color:#b45309; background:#fef3c7; border:1px solid #fde68a; border-radius:20px; padding:1px 8px; cursor:pointer; }

/* ===== Работа с СУЗ: поля-селекты (обведены, выглядят выбираемыми) ===== */
  .suz-fields{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px;border:1.5px dashed #b9a6e6;border-radius:12px;background:#faf8ff}
  .suz-fields select,.suz-fields input{padding:7px 10px;border:1px solid #b9a6e6;border-radius:8px;background:#fff;color:#1c2733;font-size:13px;box-shadow:0 1px 2px rgba(120,80,200,.10);transition:border-color .15s,box-shadow .15s,background .15s}
  .suz-fields select{cursor:pointer;padding-right:26px}
  .suz-fields select:hover,.suz-fields input:hover{border-color:#8b5cf6;box-shadow:0 2px 6px rgba(124,58,237,.18)}
  .suz-fields select:focus,.suz-fields input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.18);background:#fff}
  .suz-fields input{cursor:text}
  .suz-hint{color:#7c3aed;font-weight:600}
  .sugg-badge:hover { background:#fde68a; }
  .sugg-badge .arr { font-size:9px; }
  .tpl-form label .lbl-row { display:flex; align-items:center; gap:6px; }
  /* попап подсказок со справочника */
  .tpl-sugg { position:fixed; z-index:300; background:#fff; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 10px 30px rgba(16,42,67,.22); max-height:240px; overflow:auto; min-width:250px; max-width:420px; font-size:12.5px; padding:4px; }
  .tpl-sugg.wide { min-width:470px; max-width:640px; max-height:360px; font-size:12.5px; }
  .tpl-sugg .item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 10px; border-radius:7px; cursor:pointer; white-space:nowrap; }
  .tpl-sugg.wide .item { white-space:normal; align-items:flex-start; }
  .tpl-sugg .item:hover, .tpl-sugg .item.sel { background:#eef5fc; }
  .tpl-sugg .item .v { font-weight:600; color:#1c2733; }
  .tpl-sugg .item .hint { color:#94a3b8; font-size:11px; text-align:right; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
  .tpl-sugg.wide .item .hint { max-width:400px; text-align:left; line-height:1.4; white-space:normal; }
  .tpl-sugg .item .hint b { color:#64748b; }
  .tpl-sugg .sep { padding:5px 10px 3px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#94a3b8; border-top:1px solid #eef2f7; margin-top:4px; }
  .tpl-sugg .empty { padding:10px 12px; color:#94a3b8; font-size:12px; }
  .tpl-sugg .cnt { padding:4px 10px 6px; font-size:10.5px; color:#94a3b8; border-bottom:1px solid #f1f5f9; margin-bottom:4px; }
  /* пары «номер + дата» для РД */
  .tpl-form .pair-row { display:flex; gap:8px; }
  .tpl-form .pair-row input { flex:1; }
  .tpl-form .pair-row input.date { flex:0 0 150px; }
  /* инфо-блок после выбора кода ТНВЭД */
  .tpl-info { grid-column:1/-1; font-size:11.5px; line-height:1.5; background:#f0f7ff; border:1px solid #cfe0f2; border-radius:8px; padding:6px 10px; color:#334155; display:none; }
  /* доп. поля карточки (вкладка «Доп. поля») */
  .tpl-extra-group { margin-bottom:14px; }
  .tpl-extra-group-title { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#64748b; margin:0 0 8px; padding-bottom:4px; border-bottom:1px solid #eef2f7; }
  .tpl-extra-field.req input { border-color:#f59e0b; background:#fffdf5; }
  .tpl-extra-field.req input:focus { border-color:#d97706; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
  .tpl-info.show { display:block; }
  .tpl-step { grid-column:1/-1; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#0b4f8a; margin:2px 0 -6px; }
  .tpl-step small { font-weight:400; text-transform:none; letter-spacing:0; color:#94a3b8; margin-left:6px; }
  /* типы карточек НК (селектор в форме) */
  .tpl-type-row { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 10px; }
  .tpl-type-row .tpl-type-label { font-size:11px; font-weight:700; color:#334155; }
  .tpl-type-row button { font-size:12px; padding:5px 10px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; cursor:pointer; color:#334155; }
  .tpl-type-row button:hover { border-color:#0b4f8a; }
  .tpl-type-row button.on { background:#0b4f8a; border-color:#0b4f8a; color:#fff; }
  .tpl-type-badge { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; color:#0b4f8a; background:#e8f1fb; border:1px solid #c6dcf3; border-radius:20px; padding:1px 8px; white-space:nowrap; }
  .tpl-set-block, .tpl-pack-block { grid-column:1/-1; border:1px dashed #cbd5e1; border-radius:10px; padding:10px 12px; background:#fbfdff; }
  .tpl-set-block .tpl-step, .tpl-pack-block .tpl-step { margin-top:0; }
  .tpl-set-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
  .tpl-set-row input { flex:1; }
  .tpl-nk-status { font-weight:700; font-size:13px; }
  .tpl-nk-status.s1, .tpl-nk-status.s4 { color:#b45309; }
  .tpl-nk-status.s2, .tpl-nk-status.s3 { color:#16a34a; }
  .tpl-nk-status.s0 { color:#dc2626; }
  @media (max-width:640px){ .tpl-form { grid-template-columns:1fr; } }
  @media (max-width:980px){ .grid2 { grid-template-columns:1fr; } .side { position:static; width:100%; min-width:0; height:auto; } .layout { flex-direction:column; } }
  .add-gtins { display:flex; gap:8px; align-items:center; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
  .add-gtins input { flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; }
  .qty-in { width:70px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:inherit; font-size:12.5px; text-align:center; }
  .mini { font-size:10px; line-height:1; padding:2px 5px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--muted,#888); cursor:pointer; margin-left:4px; vertical-align:middle; }
  .mini:hover { background:var(--red,#d33); border-color:var(--red,#d33); color:#fff; }
  .warn { background:#fdf3e0; border:1px solid #ecd9a8; color:#7a5b17; border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:14px; }

  /* ===== Склад (БД КИЗ): активный таб (Данные из ЧЗ / Факт / Расхождения) ===== */
  .wh-tab.active { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; box-shadow:0 2px 6px rgba(13,107,181,.25); }

  /* ===== Склад (БД КИЗ): зона сканирования + активный раздел ===== */
  .wh-scan-zone { border:2px dashed var(--brand); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:linear-gradient(180deg,#eef6ff,#fbfdff); }
  .wh-scan-head { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--brand); margin-bottom:7px; }
  #wh_scan { padding:9px 12px; font-size:13.5px; border:1.5px solid var(--brand); border-radius:8px; background:#fff; color:var(--txt); }
  #wh_scan:focus { outline:none; border-color:var(--brand2); box-shadow:0 0 0 3px rgba(13,107,181,.18); }
  #wh_scan::placeholder { color:#8fa3b8; }
  .wh-sec { border-radius:6px; transition:background .12s; }
  .wh-sec:hover { background:#f0f6fd; }
  .wh-sec-active { background:#dcebfa; box-shadow:inset 2px 0 0 var(--brand); }
  .wh-sec-active b, .wh-sec-active .wh-pick { color:var(--brand); }