:root{
    --rail-bg:#262626;--rail-text:#ababab;--accent:#f4b400;
    --header-bg:#333;--header-text:#ccc;
    --body-bg:#f1f1f1;--content-bg:#fff;
    --text:#454545;--text-2:#7a7a7a;--faint:#999;--border:#e3e3e3;
    --th-text:#7a7a7a;--row-hover:#f5faff;--stripe:#fafafa;--link:#2a72d4;
    --ok:#2f9e44;--warn:#e08a00;--info:#2a72d4;--bad:#e03131;--sky:#0ea5e9;--new:#5b6bf5;--pur:#7c5cff;
    --rail-w:44px;--head-h:40px;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:13px;color:var(--text);background:var(--body-bg)}
  a{color:var(--link);text-decoration:none}
  .app{padding-left:var(--rail-w)}
  .rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);background:var(--rail-bg);z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:width .18s ease}
  .rail:hover{width:200px;box-shadow:3px 0 14px rgba(0,0,0,.25)}
  .rail .logo{height:var(--head-h);display:flex;align-items:center;gap:12px;padding-left:11px;background:rgba(0,0,0,.25);color:#fff;font-weight:800;white-space:nowrap;flex-shrink:0}
  .rail .logo .m{width:22px;text-align:center;font-size:16px;color:var(--accent)}
  .rail .logo b{opacity:0;transition:opacity .18s ease .03s;font-size:14px}.rail:hover .logo b{opacity:1}
  .rail a{display:flex;align-items:center;height:42px;color:var(--rail-text);white-space:nowrap;cursor:pointer;border-left:3px solid transparent;position:relative}
  .rail a .ic{width:41px;text-align:center;font-size:17px;flex-shrink:0}
  .rail a .lb{opacity:0;transition:opacity .18s ease .03s}.rail:hover a .lb{opacity:1}
  .rail a:hover{color:#fff;background:rgba(255,255,255,.06)}
  .rail a.active{color:#fff;background:rgba(255,255,255,.08);border-left-color:var(--accent)}
  .rail a.active .ic{color:var(--accent)}
  .rail a .badge{position:absolute;left:26px;top:7px;background:var(--bad);color:#fff;font-size:9px;font-weight:800;border-radius:20px;min-width:15px;height:15px;line-height:15px;text-align:center;padding:0 3px}
  .rail:hover a .badge{position:static;margin-left:auto;margin-right:12px}
  .head{height:var(--head-h);background:var(--header-bg);color:var(--header-text);display:flex;align-items:center;padding:0 14px;position:sticky;top:0;z-index:50}
  .head h1{font-size:15px;font-weight:600;color:#fff;margin:0}
  .head .sum{margin-left:14px;color:#9a9a9a;font-size:12px}
  .head .right{margin-left:auto;display:flex;align-items:center;gap:6px}
  .head .bot{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:4px;padding:4px 9px;font-size:12px;color:#ddd}
  .head .bot .g{width:8px;height:8px;border-radius:50%;background:var(--ok)}
  .head .hi{width:30px;height:30px;border-radius:4px;display:grid;place-items:center;color:#cfcfcf;cursor:pointer;font-size:15px}
  .head .hi:hover{background:rgba(255,255,255,.09);color:#fff}
  .head .av{width:27px;height:27px;border-radius:50%;background:var(--accent);color:#3a2e00;display:grid;place-items:center;font-weight:800}
  .wrap{padding:14px}
  .view{display:none}.view.on{display:block}
  .panel{background:var(--content-bg);border:1px solid var(--border);border-radius:4px}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
  .kpi{background:#fff;border:1px solid var(--border);border-radius:4px;padding:12px 14px;display:flex;gap:12px;align-items:center}
  .kpi .ic{width:38px;height:38px;border-radius:6px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
  .kpi .lab{color:var(--text-2);font-size:12px;font-weight:600}
  .kpi .val{font-size:21px;font-weight:800;line-height:1.1;margin-top:2px}
  .kpi .sub{font-size:11px;font-weight:700;margin-top:1px}.up{color:var(--ok)}
  .bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .tab{background:#fff;border:1px solid var(--border);border-radius:3px;padding:6px 12px;font-weight:600;color:#555;cursor:pointer;font-size:12px}
  .tab:hover{border-color:#bbb}.tab.on{background:var(--accent);border-color:var(--accent);color:#3a2e00}
  .btn{border:0;border-radius:3px;padding:7px 13px;font:inherit;font-weight:700;cursor:pointer;background:var(--accent);color:#3a2e00;font-size:12px}
  .btn:hover{filter:brightness(.96)}.btn.g{background:#fff;border:1px solid var(--border);color:#555}
  .btn.sm{padding:5px 10px;font-size:11px}.btn.blue{background:var(--link);color:#fff}.btn.grn{background:var(--ok);color:#fff}
  table{width:100%;border-collapse:collapse;background:#fff}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--th-text);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:var(--head-h)}
  td{padding:9px 12px;border-bottom:1px solid var(--border)}
  tbody tr{cursor:pointer}tbody tr:nth-child(even){background:var(--stripe)}tbody tr:hover{background:var(--row-hover)}
  .cust b{display:block;font-weight:700;color:#333}.cust small{color:var(--text-2)}
  .money{font-weight:800;color:#333}
  .lbl{display:inline-block;padding:3px 9px;border-radius:3px;font-size:11px;font-weight:700;border:1px solid}
  .l-new{color:var(--new);background:#eef0fe;border-color:#dfe3fd}.l-conf{color:var(--ok);background:#eaf6ee;border-color:#d5edda}
  .l-call{color:var(--warn);background:#fdf3e0;border-color:#f7e5c0}.l-ttn{color:var(--sky);background:#e7f6fd;border-color:#cfeefb}
  .l-ship{color:#7c5cff;background:#f0edff;border-color:#e0d9fd}.l-arr{color:var(--info);background:#e7f0fd;border-color:#cfe0fb}
  .l-done{color:#0f8a4d;background:#e6f5ec;border-color:#cdeed9}.l-ref{color:var(--bad);background:#fdeaea;border-color:#f8d4d4}
  .ttn{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:#555;font-size:12px}.ttn.no{color:var(--faint);font-weight:600}
  .date{color:var(--text-2);font-size:12px}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.15s;z-index:200}.scrim.on{opacity:1;pointer-events:auto}
  .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:600px;max-width:96vw;max-height:92vh;overflow:auto;background:#fff;border-radius:5px;box-shadow:0 20px 60px rgba(0,0,0,.35);z-index:210;opacity:0;pointer-events:none;transition:.18s}
  .modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .mh{min-height:44px;background:var(--header-bg);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 14px;position:sticky;top:0;flex-wrap:wrap}
  .mh b{font-size:14px}.mh .x{margin-left:auto;background:none;border:0;color:#bbb;font-size:22px;cursor:pointer;line-height:1}
  .mb{padding:14px}
  .sec{border:1px solid var(--border);border-radius:4px;margin-bottom:12px}
  .sec .st{background:#fafafa;border-bottom:1px solid var(--border);padding:7px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-2);font-weight:700;display:flex;align-items:center;gap:7px}
  .sec .sc{padding:10px 12px}
  .kv{display:flex;justify-content:space-between;padding:4px 0;font-weight:600;gap:12px}.kv span{color:var(--text-2);flex-shrink:0}.kv b{text-align:right}
  .it{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border)}.it:last-child{border:0}
  .it .th2{width:34px;height:34px;border-radius:5px;background:#f4eef7;display:grid;place-items:center;font-size:15px}
  .gift{font-size:11px;font-weight:700;color:var(--warn);background:#fff8e5;border:1px solid #f2e2ab;padding:2px 7px;border-radius:3px;margin-left:auto}
  .tl{position:relative;padding-left:20px}
  .tl .s{position:relative;padding:0 0 12px}
  .tl .s::before{content:"";position:absolute;left:-14px;top:2px;width:10px;height:10px;border-radius:50%;background:#d7d7d7;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
  .tl .s.done::before{background:var(--ok)}.tl .s.cur::before{background:var(--accent);box-shadow:0 0 0 3px #fdf0c8}
  .tl::after{content:"";position:absolute;left:-9px;top:4px;bottom:10px;width:2px;background:var(--border)}
  .tl .s b{font-weight:700}.tl .s small{color:var(--text-2);display:block;font-weight:600}
  select.sel,input.inp,textarea.inp{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:4px;font:inherit;font-weight:600}
  textarea.inp{resize:vertical;font-weight:500}
  .hist{font-size:12px}.hist .r{display:flex;gap:8px;padding:5px 0;border-bottom:1px dashed var(--border)}.hist .r:last-child{border:0}
  .hist .r .t{color:var(--faint);white-space:nowrap;font-weight:600}.hist .r . av{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#3a2e00;display:grid;place-items:center;font-weight:800;font-size:10px;flex-shrink:0}
  /* chat */
  .chat{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - var(--head-h) - 28px);min-height:400px}
  .dlgs{border-right:1px solid var(--border);overflow-y:auto}
  .dlg{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer}
  .dlg:hover,.dlg.on{background:#f6f8fb}
  .dlg .av{width:34px;height:34px;border-radius:50%;background:#eee;display:grid;place-items:center;font-weight:800;color:#666;flex-shrink:0}
  .dlg .m{flex:1;min-width:0}.dlg .m b{display:block;font-size:13px}.dlg .m small{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .un{float:right;background:var(--bad);color:#fff;border-radius:20px;font-size:10px;font-weight:800;padding:0 6px}
  .thread{display:flex;flex-direction:column;min-width:0}
  .chd{height:44px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;padding:0 14px}
  .chd .av{width:30px;height:30px;border-radius:50%;background:#eee;display:grid;place-items:center;font-weight:800;color:#666}
  .msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:#f6f8fb}
  .bub{max-width:74%;padding:8px 12px;border-radius:10px;font-weight:500;line-height:1.35}
  .bub.in{background:#fff;border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:3px}
  .bub.out{background:#dcf0d8;border:1px solid #c3e6bd;align-self:flex-end;border-bottom-right-radius:3px}
  .bub small{display:block;font-size:10px;color:var(--faint);margin-top:3px;font-weight:600}
  .comp{border-top:1px solid var(--border);padding:10px;display:flex;gap:8px}.comp input{flex:1;border:1px solid var(--border);border-radius:4px;padding:9px 12px;font:inherit}
  .g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .card{background:#fff;border:1px solid var(--border);border-radius:4px}
  .card .h{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border)}
  .card .h .mi{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;font-size:16px;color:#fff;font-weight:800;flex-shrink:0}
  .card .h b{font-size:14px}.card .h .on{margin-left:auto;font-size:12px;font-weight:700;color:var(--ok);display:flex;align-items:center;gap:5px}
  .card .h .on::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  .card .bd{padding:14px}
  .fld{margin-bottom:11px}.fld label{display:block;font-weight:700;font-size:12px;color:#555;margin-bottom:4px}
  .fld input,.fld select,.fld textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:4px;font:inherit;font-weight:600}
  .fld textarea{resize:vertical;font-weight:500}
  .sw{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13px;cursor:pointer}
  .sw i{width:38px;height:22px;border-radius:20px;background:var(--ok);position:relative;transition:.15s}
  .sw i::after{content:"";position:absolute;top:3px;left:19px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
  .sw.off i{background:#c9c9c9}.sw.off i::after{left:3px}
  .hint{color:var(--text-2);font-size:12px;font-weight:600;margin-top:4px}
  .kbrow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--border)}.kbrow:last-child{border:0}
  .kbrow .nm{width:120px;font-weight:800;flex-shrink:0}.kbrow .ds{flex:1;color:#555}
  @media(max-width:900px){.kpis{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}.chat{grid-template-columns:1fr}}

/* ── Status tabs (як Metra) ── */
.stabs{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:10px;padding-bottom:4px}
.stabs::-webkit-scrollbar{height:5px}.stabs::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}
.stab{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);border-radius:3px;padding:6px 11px;font-weight:600;color:#555;cursor:pointer;font-size:12px;white-space:nowrap;flex-shrink:0}
.stab:hover{border-color:#bbb}
.stab.on{background:#fff;border-color:#333;color:#222;box-shadow:inset 0 -2px 0 var(--accent)}
.stab .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.stab .cnt{background:#eef0f3;color:#555;border-radius:20px;font-size:11px;font-weight:800;padding:0 7px;min-width:18px;text-align:center}
.stab.on .cnt{background:var(--accent);color:#3a2e00}

/* ── Order card: 3 колонки (як Metra) ── */
.modal.omwide{width:960px}
.omcols{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:0}
.omcol{padding:14px 16px;border-right:1px solid var(--border)}
.omcol:last-child{border-right:0}
.omcol h4{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#333;font-weight:800;padding-bottom:7px;border-bottom:2px solid var(--accent);display:inline-block}
.omcol h5{margin:16px 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-2);font-weight:800}
.of{display:block;margin-bottom:9px}
.of>span{display:block;font-size:11px;font-weight:700;color:var(--text-2);margin-bottom:3px}
.oi{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:3px;font:inherit;font-weight:600;background:#fff}
.oi:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px #fdf0c8}
textarea.oi{resize:vertical;font-weight:500}
.omfoot{position:sticky;bottom:0;background:#fafafa;border-top:1px solid var(--border);padding:11px 16px;display:flex;align-items:center;gap:12px}
@media(max-width:820px){.omcols{grid-template-columns:1fr}.omcol{border-right:0;border-bottom:1px solid var(--border)}.modal.omwide{width:96vw}}

/* ── Багата картка: парні поля, стать, мітки товарів ── */
.of2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.of2 .of{margin-bottom:9px}
.gbtns{float:right;display:inline-flex;gap:3px}
.gb{width:18px;height:16px;line-height:16px;text-align:center;border:1px solid var(--border);border-radius:3px;font-size:10px;color:var(--faint);cursor:pointer;background:#fff}
.gb.on{background:var(--accent);color:#3a2e00;border-color:var(--accent)}
.ib{display:inline-block;font-size:10px;font-weight:800;padding:1px 6px;border-radius:3px;margin-left:6px;vertical-align:middle}
.ib.rs{color:#0f8a4d;background:#e6f5ec}
.ib.sw{color:#7c5cff;background:#f0edff}
.omcol .kv{font-size:12px}

/* ── Модалка ТТН + автопошук міста ── */
.scrim2{z-index:220}
.modal.ttnm{width:460px;z-index:230}
.ttn-note{background:#e7f0fd;border:1px solid #cfe0fb;border-radius:4px;padding:8px 11px;font-size:12px;font-weight:600;color:#2a5a9e;margin-bottom:12px}
.ac{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-top:0;border-radius:0 0 4px 4px;box-shadow:0 8px 20px rgba(0,0,0,.12);z-index:5;max-height:200px;overflow:auto}
.ac:empty{display:none}
.aci{padding:7px 11px;cursor:pointer;font-weight:600}
.aci:hover{background:var(--row-hover)}

/* ── Панель списку: пошук + вибір колонок ── */
.listbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.search2{flex:1;max-width:400px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:7px 11px;color:var(--faint)}
.search2 input{border:0;background:transparent;outline:0;flex:1;font:inherit;font-weight:600;color:var(--ink)}
.colwrap{position:relative;margin-left:auto}
.colmenu{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:6px;z-index:20;min-width:190px;max-height:360px;overflow:auto;display:none}
.colmenu.on{display:block}
.colmenu label{display:flex;align-items:center;gap:8px;padding:6px 8px;font-weight:600;cursor:pointer;border-radius:3px;font-size:12px}
.colmenu label:hover{background:var(--row-hover)}

/* ── Список як у Metra: тулбар + фільтр-рядок + сорт ── */
.orders-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:7px 11px;background:#fff;border:1px solid var(--border);border-radius:4px}
.ot-info{font-size:12px;font-weight:700;color:var(--text-2)}.ot-info b{color:var(--ink)}.ot-info .sep{margin:0 8px;color:#ccc}
.ot-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.ot-actions .search2{max-width:240px;padding:6px 10px}.ot-actions .search2 input{font-size:12px}
.crm-scroll{max-height:calc(100vh - 240px);overflow:auto;border:1px solid var(--border);border-radius:4px;background:#fff}
.crm-table{width:100%;border-collapse:collapse;min-width:680px}
.crm-table th{background:#fff;position:sticky;top:0;cursor:pointer;user-select:none;white-space:nowrap;z-index:3}
.crm-table th:hover{background:#f6f7fa}
.crm-table .sar{color:var(--accent);font-size:10px}
.crm-table .filter-row td{padding:5px 8px;border-bottom:1px solid var(--border);background:#fafafa}
.fcol{width:100%;min-width:70px;padding:5px 7px;border:1px solid var(--border);border-radius:3px;font:inherit;font-size:11px;font-weight:600;background:#fff}
.fcol:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px #fdf0c8}
.crm-table td.col-total,.crm-table td.col-n{white-space:nowrap}
.crm-empty{text-align:center;color:var(--faint);padding:26px}

/* ── Щільна таблиця як у Metra (компактні рядки, дрібний шрифт) ── */
.crm-table{font-size:12px}
.crm-table th{padding:5px 8px;font-size:10px;letter-spacing:.02em}
.crm-table td{padding:4px 8px;border-bottom:1px solid #eee}
.crm-table tbody tr:nth-child(even){background:#fff}
.crm-table tbody tr:hover{background:var(--row-hover)}
.crm-table .cust b{font-size:12px;font-weight:700;line-height:1.2}
.crm-table .cust small{font-size:11px}
.crm-table .lbl{padding:2px 7px;font-size:10px}
.crm-table .money{font-size:12px}
.crm-table .ttn{font-size:11px}
.crm-table .date{font-size:11px}
.crm-table .filter-row td{padding:3px 6px}
.fcol{padding:3px 6px;font-size:11px;min-width:60px}

/* Липкий заголовок + рядок фільтрів (щоб рядки не лізли поверх колонок) */
.crm-table thead th{position:sticky;top:0;z-index:3}
.crm-table .filter-row td{position:sticky;top:25px;z-index:2}

/* ══════════ Картка замовлення v2 - візуальний клон картки Metra CRM ══════════
   Біла картка, лівий рейл круглих дій, 3 колонки, поля «іконка + підкреслений
   інпут» (фокус #fffbe6), таблиця товарів з капс-заголовками, пунктирна історія,
   футер #f5f7fa з червоною сумою і синьою кнопкою. */
.modal.om2{background:#fff;color:#333;width:1380px;max-width:calc(100vw - 40px);max-height:calc(100vh - 60px);
  border:1px solid #d0d0d0;border-radius:6px;box-shadow:0 6px 30px rgba(0,0,0,.18);font-size:12px;
  display:flex;flex-direction:column;overflow:hidden;padding:0}
.om2-head{display:flex;align-items:center;gap:8px;padding:7px 12px;background:#f7f7f7;border-bottom:1px solid #e3e3e3;position:relative;flex:0 0 auto}
.om2-head>b{font-size:13px;color:#111}
.om2-dim{color:#94a3b8;font-size:11px}
.om2-close{position:absolute;top:4px;right:6px;width:24px;height:24px;background:transparent;border:none;font-size:18px;line-height:1;cursor:pointer;color:#555;border-radius:4px}
.om2-close:hover{color:#000;background:#eceef1}
.om2-body{display:flex;flex:1 1 auto;overflow:hidden;min-height:0}
.om2-rail{flex:0 0 44px;background:#f7f7f7;border-right:1px solid #e3e3e3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0}
.om2-rb{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #d0d0d0;background:#fff;border-radius:50%;
  cursor:pointer;font-size:14px;color:#555;text-decoration:none;transition:background .1s,border-color .1s,color .1s;font-weight:700}
.om2-rb:hover{background:#2a72d4;color:#fff;border-color:#2a72d4}
.om2-rb[disabled]{opacity:.4;cursor:not-allowed}
.om2-rb[disabled]:hover{background:#fff;color:#555;border-color:#d0d0d0}
.om2-rb--viber{color:#7360f2}
.om2-rb--viber:hover{background:#f3f0ff;color:#7360f2;border-color:#7360f2}
.om2-rb--tg{color:#229ED9}
.om2-rb--tg:hover{background:#eaf6fd;color:#229ED9;border-color:#229ED9}
.om2-cols{flex:1 1 auto;display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,1fr) minmax(340px,1.35fr);overflow:auto}
.om2-col{padding:8px 14px 14px;border-right:1px solid #e3e3e3;overflow-y:auto;min-width:0}
.om2-col:last-child{border-right:none}
.om2-title{font-size:13px;font-weight:500;color:#777;text-align:center;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #ececec;letter-spacing:.4px}
.om2-sub{font-size:11px;font-weight:500;color:#888;text-align:center;margin:12px 0 6px;padding-bottom:4px;border-bottom:1px dashed #d8d8d8;text-transform:uppercase;letter-spacing:.5px}
.om2-f{display:flex;align-items:center;gap:6px;margin-bottom:5px;min-height:22px}
.om2-fi{flex-shrink:0;width:18px;text-align:center;color:#888;font-size:12px}
.om2-i{flex:1;width:100%;border:none;border-bottom:1px solid #e3e3e3;padding:2px 4px;font-size:12px;color:#333;background:transparent;font-family:inherit;border-radius:0}
.om2-i:focus{outline:none;border-bottom-color:#2a72d4;background:#fffbe6}
select.om2-i{cursor:pointer}
.om2-i--status{font-weight:600}
textarea.om2-i{border:1px solid #e3e3e3;border-radius:3px;min-height:110px;resize:vertical;line-height:1.4;padding:5px 7px}
.om2-extra{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;opacity:.72}
.om2-extra:focus-within{opacity:1}
.om2-i--mini{font-size:11px;padding:1px 3px}
.om2-kv{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed #f0f0f0;font-size:11.5px}
.om2-kv span{color:#94a3b8}
.om2-kv b{font-weight:600;color:#333;text-align:right;word-break:break-word}
.om2-row{display:flex;gap:6px;margin:6px 0}
.om2-btn{display:inline-flex;align-items:center;gap:5px;background:#fafafa;border:1px solid #d0d0d0;color:#555;cursor:pointer;font-size:11.5px;border-radius:3px;padding:4px 10px}
.om2-btn:hover{background:#2a72d4;color:#fff;border-color:#2a72d4}
.om2-btn[disabled]{opacity:.45;cursor:not-allowed}
.om2-btn--accent{background:#fffbe0;border-color:#f4d56a;color:#7a5b00}
.om2-products{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:6px}
.om2-products thead th{background:#f3f5f7;color:#555;font-weight:500;padding:4px 5px;border-bottom:1px solid #d0d0d0;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.3px}
.om2-products tbody td{padding:4px 5px;border-bottom:1px solid #f0f0f0;color:#333;vertical-align:middle}
.om2-products tbody tr:hover{background:#fffbe6}
.om2-products tfoot td{padding:5px;border-top:1px solid #d0d0d0;font-weight:500}
.om2-num{text-align:right;white-space:nowrap}
.om2-act{width:24px}
.om2-cell-name{display:flex;align-items:center;gap:6px;min-width:0}
.om2-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.om2-thumb{flex-shrink:0;width:24px;height:24px;border:1px solid #e3e3e3;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;background:#fafafa;font-size:13px}
.om2-gift{flex-shrink:0;cursor:help}
.om2-mini{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:#f5f5f5;border:1px solid #d8d8d8;border-radius:2px;color:#666;font-size:11px;font-weight:700;cursor:pointer}
.om2-mini:hover{background:#2a72d4;color:#fff;border-color:#2a72d4}
.om2-mini--danger:hover{background:#c0392b;border-color:#c0392b}
.om2-addrow{display:grid;grid-template-columns:1fr 46px auto;gap:6px;align-items:center}
.om2-addrow .om2-i{border:1px solid #d8d8d8;border-radius:3px;padding:4px 6px}
.om2-addrow .om2-i:focus{border-color:#2a72d4}
.om2-hist{list-style:none;padding:0;margin:0;font-size:11px}
.om2-hist li{padding:3px 0;border-bottom:1px dashed #f0f0f0;line-height:1.5}
.om2-hist-t{color:#94a3b8;font-variant-numeric:tabular-nums;margin-right:2px}
.om2-foot{flex:0 0 auto;border-top:1px solid #d0d0d0;padding:9px 16px;background:#f5f7fa;display:flex;align-items:center;gap:12px}
.om2-total{color:#333;font-size:13px}
.om2-total strong{color:#c0392b;font-size:16px;font-weight:500;margin-left:4px}
.om2-save{background:#2a72d4;color:#fff;border:1px solid #2a72d4;padding:6px 24px;font-size:13px;font-weight:500;cursor:pointer;border-radius:14px}
.om2-save:hover{background:#1559b8;border-color:#1559b8}
.modal.om2 .gbtns{display:inline-flex;gap:2px}
.modal.om2 .gb{border:1px solid #d1d5db;border-radius:4px;background:#fff;color:#6b7280;font-weight:600;font-size:11px;padding:0 7px;line-height:18px}
.modal.om2 .gb.on{background:#2563eb;color:#fff;border-color:#2563eb}
.modal.om2 .tl .s{font-size:11px}

/* ══════════ Модулі списком + модалки налаштувань + ТТН v2 (стиль Metra) ══════════ */
.modlist{width:100%;border-collapse:collapse;font-size:12.5px}
.modlist tr{cursor:pointer;border-bottom:1px solid var(--border)}
.modlist tr:last-child{border-bottom:none}
.modlist tr:hover{background:#f8fafc}
.modlist td{padding:11px 12px;vertical-align:middle}
.ml-flag{width:34px;text-align:center;font-size:16px}
.ml-ico{width:40px}
.ml-ico span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;color:#fff;font-size:11px;font-weight:800}
.ml-main b{font-size:13px}
.ml-main div{color:var(--text-2);font-size:11.5px;margin-top:2px}
.ml-def{width:130px}
.ml-badge{display:inline-block;padding:2px 8px;border:1px dashed #f4d56a;background:#fffbe0;color:#7a5b00;border-radius:10px;font-size:10.5px;font-weight:700;white-space:nowrap}
.ml-tgl{width:52px}
.ml-cfg{width:130px;text-align:right}
.modal.om2.modm{width:960px}
.modm-body{flex:1 1 auto;overflow-y:auto;padding:12px 16px}
.modm-cols{display:grid;grid-template-columns:1fr 1.15fr;gap:0 22px}
.modm-body .st{font-size:11px;font-weight:600;color:#888;margin:0 0 6px;padding-bottom:4px;border-bottom:1px dashed #d8d8d8;text-transform:uppercase;letter-spacing:.5px}
.modm-body .sc{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.modm-map{width:100%;border-collapse:collapse;font-size:11.5px}
.modm-map th{background:#f3f5f7;color:#555;font-weight:500;padding:4px 6px;text-align:left;font-size:10px;text-transform:uppercase;border-bottom:1px solid #d0d0d0}
.modm-map td{padding:4px 6px;border-bottom:1px solid #f0f0f0}
/* Типахед НП (місто/відділення) - випадайка як у Metra */
.np-ta{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border:1px solid #c8c8c8;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:232px;overflow-y:auto}
.np-ta:empty{display:none}
.np-ta__i{padding:7px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid #f0f0f0;color:#333}
.np-ta__i:last-child{border-bottom:none}
.np-ta__i:hover{background:#f0f7ff}
.np-ta__i span{color:#94a3b8;font-size:11px}
.np-ta__e{padding:9px 10px;color:#94a3b8;font-size:12px}
/* ТТН-модалка: сітка 2×2 як у Metra */
.modal.ttnm{width:840px;max-width:calc(100vw - 40px)}
.ttn2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 14px;max-height:calc(100vh - 210px);overflow-y:auto}
.ttn2 .sec{border:1px solid var(--border);border-radius:8px;padding:10px 12px;min-width:0}
.ttn2 .st{font-size:11px;font-weight:600;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px;display:flex;gap:8px;align-items:center}
.ttn2 .sc{display:flex;flex-direction:column;gap:7px}
.ttn2 .kv{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:12px}
.ttn2 .kv span{color:#94a3b8}
.ttn2-foot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid #d0d0d0;background:#f5f7fa}

/* ТТН v2.1: місця з габаритами, обʼємна вага, тост успіху */
.tt-seat-head{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 24px;gap:6px;font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.3px}
.tt-seat{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 24px;gap:6px;align-items:center;margin-top:4px}
.tt-seat .oi{border:1px solid #d8d8d8;border-radius:3px;padding:3px 6px;text-align:right}
.tt-seat .oi:focus{border-color:#2a72d4}
.tt-seat .oi.tt-fb{border-color:#f4b400;background:#fffbeb}
.tt-vol{margin-top:8px;padding:6px 9px;background:#f8fafc;border:1px solid #e8ebef;border-radius:6px;font-size:11.5px;color:#475569}
.tt-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#fff;border-left:4px solid var(--ok,#0f8a4d);border-radius:8px;box-shadow:0 12px 32px rgba(15,23,42,.25);padding:13px 18px;font-size:13px;z-index:3000;animation:ttToastIn .25s ease-out}
@keyframes ttToastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* ══════════ Тіні й відтінки: картка замовлення (om2) + картка товару (pm) ══════════ */
/* Картка замовлення: колонки як окремі плитки на м'якій підложці, глибина тінями */
.modal.om2{box-shadow:0 24px 70px rgba(15,23,42,.28),0 4px 14px rgba(15,23,42,.12);border-color:#e2e5ea}
.om2-head{background:linear-gradient(180deg,#fafbfc,#f2f4f7);box-shadow:0 1px 0 #fff inset}
.om2-body{background:#eef1f5}
.om2-rail{background:linear-gradient(180deg,#f7f8fa,#eef1f5);border-right-color:#e2e5ea}
.om2-rb{box-shadow:0 1px 2px rgba(15,23,42,.10)}
.om2-rb:hover{box-shadow:0 3px 8px rgba(42,114,212,.35)}
.om2-cols{gap:10px;padding:10px}
.om2-col{background:#fff;border:1px solid #e6e9ee;border-radius:10px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.05);padding:10px 14px 14px}
.om2-col:last-child{border-right:1px solid #e6e9ee}
/* кольорові відтінки заголовків колонок: Контакт - синій, Доставка - теплий, Продаж - зелений */
.om2-col:nth-child(1) .om2-title{color:#2a72d4;border-bottom:2px solid #dbe7fa}
.om2-col:nth-child(2) .om2-title{color:#b45309;border-bottom:2px solid #fdeccf}
.om2-col:nth-child(3) .om2-title{color:#0f8a4d;border-bottom:2px solid #d5efdf}
.om2-i:focus{background:#fffbe6;box-shadow:0 2px 0 -1px #2a72d4}
textarea.om2-i:focus{box-shadow:0 0 0 3px rgba(42,114,212,.12);border-color:#2a72d4}
.om2-products{box-shadow:0 1px 3px rgba(15,23,42,.05);border-radius:6px;overflow:hidden}
.om2-products thead th{background:linear-gradient(180deg,#f6f8fa,#eef1f5)}
.om2-products tbody tr{transition:background .12s}
.om2-addrow .om2-i:focus{box-shadow:0 0 0 3px rgba(42,114,212,.12)}
.om2-kv:hover{background:#f8fafc}
.om2-hist li:hover{background:#f8fafc}
.om2-foot{background:linear-gradient(180deg,#f8fafc,#eef1f5);box-shadow:0 -3px 10px rgba(15,23,42,.05)}
.om2-save{box-shadow:0 3px 10px rgba(42,114,212,.35)}
.om2-save:hover{box-shadow:0 5px 16px rgba(42,114,212,.45)}
.om2-btn--accent{box-shadow:0 1px 3px rgba(244,180,0,.3)}
.tl .s.cur b{color:#2a72d4}
/* Картка товару (pm): плитки-секції з відтінками + жива маржа/сума */
.modal.pm .omcols{background:#eef1f5;gap:10px;padding:10px}
.pm-sec{background:#fff;border:1px solid #e6e9ee;border-radius:10px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.05)}
.pm-sec--blue h4{color:#2a72d4;border-bottom:2px solid #dbe7fa}
.pm-sec--warm h4{color:#b45309;border-bottom:2px solid #fdeccf}
.pm-hd-emoji{font-size:20px;filter:drop-shadow(0 2px 3px rgba(15,23,42,.25))}
.pm-stock{padding:2px 10px;border-radius:10px;font-size:11px;font-weight:700}
.pm-stock--ok{background:#e6f5ec;color:#0f8a4d;border:1px solid #c4e7d2}
.pm-stock--low{background:#fff8e5;color:#b45309;border:1px solid #fde9b8}
.pm-stock--zero{background:#fdecec;color:#b91c1c;border:1px solid #f6caca}
.pm-photo{display:flex;align-items:center;justify-content:center;min-height:150px;margin-bottom:10px;border-radius:12px;
  background:linear-gradient(160deg,#f8fafc,#e9edf3);border:1px dashed #d5dae2;box-shadow:inset 0 2px 8px rgba(15,23,42,.06)}
.pm-photo img{max-width:150px;max-height:140px;border-radius:8px;box-shadow:0 6px 16px rgba(15,23,42,.18)}
.pm-photo__emoji{font-size:64px;line-height:1;filter:drop-shadow(0 6px 10px rgba(15,23,42,.25));transition:transform .15s}
.pm-photo:hover .pm-photo__emoji{transform:scale(1.12) rotate(-4deg)}
.pm-i-cost{background:#f8fafc}
.pm-i-price{background:#f2fbf5;font-weight:700}
.pm-margin{margin:2px 0 6px;padding:6px 9px;background:#f8fafc;border:1px solid #e8ebef;border-radius:6px;font-size:11.5px;color:#475569}
.pm-good{color:#0f8a4d}.pm-bad{color:#b91c1c}
.pm-sum{margin-top:6px;padding:6px 9px;background:#f8fafc;border:1px solid #e8ebef;border-radius:6px;font-size:11.5px;color:#475569}

/* ФІКС: глобальний sticky th (top:40px для великих списків) ламав таблиці в модалках -
   шапка зʼїжджала і наїжджала на рядки. У модалках th звичайний. */
.om2-products thead th,.modm-map thead th,.modal table thead th{position:static;top:auto}
/* Продаж: рядок додавання як пігулка, історія охайніше */
.om2-addrow{background:#f8fafc;border:1px solid #e8ebef;border-radius:8px;padding:7px 8px;box-shadow:inset 0 1px 3px rgba(15,23,42,.04)}
.om2-addrow select.om2-i{cursor:pointer}
.om2-hist{max-height:220px;overflow-y:auto;padding-right:4px}
.om2-hist li{padding:4px 6px;border-radius:5px}
/* ══ ТТН-модалка: той самий стиль плиток з тінями й відтінками ══ */
.modal.ttnm{border:1px solid #e2e5ea;border-radius:10px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,.30),0 4px 14px rgba(15,23,42,.12);padding:0}
.modal.ttnm .mh{background:linear-gradient(180deg,#fafbfc,#f2f4f7);color:#111;border-bottom:1px solid #e2e5ea;box-shadow:0 1px 0 #fff inset}
.modal.ttnm .mh b{color:#111}
.modal.ttnm .mh .x{color:#555}
.ttn2{background:#eef1f5}
.ttn2 .sec{background:#fff;border:1px solid #e6e9ee;border-radius:10px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.05)}
.ttn2 .sec:nth-child(1) .st{color:#2a72d4;border-bottom:2px solid #dbe7fa;padding-bottom:5px}
.ttn2 .sec:nth-child(2) .st{color:#b45309;border-bottom:2px solid #fdeccf;padding-bottom:5px}
.ttn2 .sec:nth-child(3) .st{color:#0f8a4d;border-bottom:2px solid #d5efdf;padding-bottom:5px}
.ttn2 .sec:nth-child(4) .st{color:#7c3aed;border-bottom:2px solid #e9dcfd;padding-bottom:5px}
.ttn2 .oi:focus{background:#fffbe6;border-color:#2a72d4;box-shadow:0 0 0 3px rgba(42,114,212,.12)}
.ttn2 .kv:hover{background:#f8fafc}
.ttn2-foot{background:linear-gradient(180deg,#f8fafc,#eef1f5);box-shadow:0 -3px 10px rgba(15,23,42,.05)}
.ttn2-foot .btn{box-shadow:0 3px 10px rgba(244,180,0,.35)}
.tt-vol{box-shadow:inset 0 1px 3px rgba(15,23,42,.04)}
.tt-seat .oi.tt-fb{box-shadow:0 0 0 3px rgba(244,180,0,.12)}
.np-ta{border-radius:8px;box-shadow:0 14px 34px rgba(15,23,42,.22)}
.np-ta__i:hover{background:#eef4ff}