:root{--bg:#f6f6f7;--panel:#fff;--bd:#e3e3e3;--bd2:#c9cccf;--tx:#202223;--mut:#6d7175;--grn:#0c6b58;--grnbg:#e3f1ec;--red:#b42318;--redbg:#fce9e6;--accent:#0c8b6c;--accentbg:#e7f3ee;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font-size:14px;-webkit-font-smoothing:antialiased}
.app{display:flex;min-height:100vh}
.side{width:222px;flex:none;background:#fbfbfa;border-right:1px solid var(--bd);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:15px 13px 13px;border-bottom:1px solid var(--bd)}
.brand .bdrop{position:relative}
.brand #brandSel{display:none}
.brand .bdrop-btn{display:flex;align-items:center;gap:9px;width:100%;background:var(--panel);border:1px solid var(--bd);border-radius:8px;padding:6px 9px;cursor:pointer;font-family:inherit;color:var(--tx);transition:border-color .15s,background .15s}
.brand .bdrop-btn:hover{background:#fbfbfb;border-color:var(--bd2)}
.brand .bdrop.open .bdrop-btn{border-color:var(--bd2);background:#fbfbfb}
.brand .bmark{width:30px;height:30px;flex:none;border-radius:8px;object-fit:cover;display:block}
.brand .bname{flex:1;min-width:0;font:600 14.5px/1.15 inherit;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .bcar{flex:none;width:7px;height:7px;margin-right:2px;border-right:1.7px solid var(--mut);border-bottom:1.7px solid var(--mut);transform:rotate(45deg);transition:transform .18s}
.brand .bdrop.open .bcar{transform:rotate(-135deg)}
.brand .bdrop-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:400;background:var(--panel);border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:5px;display:none;min-width:172px}
.brand .bdrop.open .bdrop-menu{display:block}
.brand .bdrop-menu .bopt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:var(--tx);font:500 14px/1.2 inherit;padding:9px 10px;border-radius:7px;cursor:pointer}
.brand .bdrop-menu .bopt:hover{background:#eef0f2}
.brand .bdrop-menu .bopt.on{font-weight:600}
.brand .bdrop-menu .bopt .bnm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .bdrop-menu .bopt .bchk{flex:none;color:var(--accent);font-size:13px;line-height:1;opacity:0}
.brand .bdrop-menu .bopt.on .bchk{opacity:1}
nav{padding:10px 10px;display:flex;flex-direction:column;gap:2px}
nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--tx);font-size:14px;padding:9px 11px;border-radius:9px;cursor:pointer;font-family:inherit}
nav button i{font-size:18px;color:var(--mut)}nav button:hover{background:#f3f4f6}
nav button.on{background:#eef0f2;font-weight:600}nav button.on i{color:var(--tx)}
.hmseg{display:inline-flex;background:#f1f2f4;border-radius:9px;padding:3px;gap:2px}
.hmseg button{border:0;background:transparent;border-radius:7px;padding:6px 11px;font:inherit;font-size:13px;color:var(--mut);cursor:pointer}
.hmseg button.on{background:#fff;color:var(--tx);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.navcat{margin:2px 0}
.navcat-h{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;font-size:12px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:9px}
.navcat-h:hover{background:#f3f3f3}
.navcat-ar{font-size:10px}
.navcat-b{padding-left:8px;margin-left:9px;border-left:2px solid var(--bd)}
.navadd{display:block;width:100%;text-align:left;border:1px dashed var(--bd2);background:transparent;color:var(--mut);font-size:12px;padding:8px 11px;border-radius:9px;cursor:pointer;font-family:inherit;margin-top:10px}
.navadd:hover{background:#f3f3f3;color:var(--tx)}
nav [draggable=true]{cursor:grab}
.navcat-menu{margin-left:auto;padding:0 6px;cursor:pointer;opacity:.45;font-weight:700;font-size:16px;line-height:1}
.navcat-menu:hover{opacity:1}
.navmenu{position:fixed;z-index:99999;background:#fff;border:1px solid var(--bd2);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;min-width:160px}
.navmenu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 11px;font-family:inherit;font-size:13px;cursor:pointer;border-radius:6px;color:var(--tx)}
.navmenu button:hover{background:#f3f3f3}
.navmenu button:last-child{color:var(--red)}
.navcat-inp{font-family:inherit;font-size:12px;border:1px solid var(--accent);border-radius:6px;padding:3px 7px;width:130px;outline:none;text-transform:none;letter-spacing:0}
.navcat-nm{cursor:text}
.navcat-b:empty::before{content:'перетягни папки сюди';display:block;color:var(--mut);font-size:11px;padding:7px 11px;font-style:italic;opacity:.7}
.crg{border:1px solid var(--bd);border-radius:11px;margin-bottom:14px;overflow:hidden}
.crg-h{padding:13px 16px;background:#fafafa;cursor:pointer;font-size:15px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:9px}
.crh-m{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;font-weight:400;color:var(--mut)}
.crh-m b{font-weight:700;color:var(--tx)}
.crg-h span{font-size:11px;color:var(--mut);margin-right:6px}
.crt{width:100%;border-collapse:collapse;table-layout:fixed}
.crt th,.crt td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crt th:first-child,.crt td:first-child{width:31%;white-space:normal}
.crt td.r,.crt th.r{width:auto}
.usub{font-size:11px;margin-top:2px;white-space:normal;overflow:visible}
.crt th,.crt td{padding:9px 16px;border-bottom:1px solid #f0f0f0;font-size:13px}
.crt th{color:var(--mut);font-weight:500;text-align:left}
.crt td.r,.crt th.r{text-align:right}
.crt tr:last-child td{border-bottom:0}
.crsum{font-size:12px;color:var(--mut);font-weight:400;margin-left:8px}
.crsub{font-weight:600;font-size:13px;padding:13px 16px 5px;color:var(--accent)}
.crflat{border:1px solid var(--bd);border-radius:11px;margin-bottom:10px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.crflat span{color:var(--mut);font-size:13px}
.crtot td{border-bottom:2px solid var(--bd)!important;font-weight:700;background:#f4f6f8}
.crt td .muted{font-weight:400}
.side .foot{margin-top:auto;padding:12px}.side .foot a{color:var(--tx);font-size:14px;text-decoration:none;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-family:inherit}.side .foot a i{font-size:18px;color:var(--mut)}.side .foot a:hover{background:#f3f4f6}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:16px 24px;border-bottom:1px solid var(--bd);background:var(--bg);position:sticky;top:0;z-index:15;flex-wrap:wrap}
.top h1{font-size:18px;font-weight:500;margin:0}.grow{flex:1}
select,input,.btn{font-family:inherit;font-size:13px;border:1px solid var(--bd2);background:var(--panel);color:var(--tx);border-radius:9px;padding:8px 11px;cursor:pointer}
input{cursor:text}.btn{background:var(--tx);color:#fff;border-color:var(--tx);font-weight:500;cursor:pointer}
.wrap{padding:22px 24px;max-width:1480px;width:100%;margin-inline:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kc{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:14px 16px}
.kc .l{color:var(--mut);font-size:13px}.kc .v{font-size:23px;font-weight:500;margin-top:6px;letter-spacing:-.01em}
.d{display:inline-flex;align-items:center;gap:3px;font-size:12px;margin-top:7px;padding:1px 7px;border-radius:20px}
.d.up{color:var(--grn);background:var(--grnbg)}.d.dn{color:var(--red);background:var(--redbg)}.d.fl{color:var(--mut);background:#eee}
.panel{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.panel h2{font-size:14px;font-weight:500;margin:0 0 2px}.panel .sub{color:var(--mut);font-size:12px;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--bd2);border-radius:9px;overflow:hidden}
.seg button{border:0;background:var(--panel);color:var(--mut);font-size:13px;padding:6px 12px;cursor:pointer;font-family:inherit}
.seg button.on{background:#f0f0f0;color:var(--tx);font-weight:500}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.cols{grid-template-columns:1fr}.side{width:64px}nav button span,.side .foot a span{display:none}.brand{padding:12px 6px 10px}.brand .bname,.brand .bcar{display:none}.brand .bdrop-btn{justify-content:center;border:0;background:transparent;padding:4px}.brand .bdrop-btn:hover{background:transparent}.brand .bdrop-menu{left:6px;right:auto}}
.fn{display:flex;flex-direction:column;gap:10px}
.fn .row{display:flex;align-items:center;gap:10px}
.fn .bar{height:30px;border-radius:7px;background:var(--accentbg);min-width:40px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:var(--grn);font-weight:500}
.fn .nm{width:96px;flex:none;color:var(--mut);font-size:13px}.fn .pc{color:var(--mut);font-size:12px;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #efefef;white-space:nowrap}
th{color:var(--mut);font-weight:400;font-size:12px}
tbody tr.clk{cursor:pointer}tbody tr.clk:hover{background:#fafafa}
td.r,th.r{text-align:right}
.st{font-size:11px;padding:2px 8px;border-radius:20px;display:inline-block}
.st-ok{background:var(--grnbg);color:var(--grn)}.st-error{background:var(--redbg);color:var(--red)}.st-pending{background:#fdf3e0;color:#9a6a00}.st-review{background:#efe9f7;color:#6a3fb0}.st-dup{background:#e8eef5;color:#4a6580}
.rt{font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--bd2);background:var(--panel);color:var(--tx)}
.pf{margin-bottom:12px}.pf>label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}.pf input,.pf select{width:100%;box-sizing:border-box}
.tgl{position:relative;display:inline-block;width:38px;height:22px;cursor:pointer;vertical-align:middle}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl span{position:absolute;inset:0;background:#d0d3d6;border-radius:20px;transition:background .18s}
.tgl span:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tgl input:checked+span{background:var(--accent)}
.tgl input:checked+span:before{transform:translateX(16px)}
.pc-off td{opacity:.5}.pc-off td:first-child{opacity:1}
.pcode{user-select:all;-webkit-user-select:all;cursor:text}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--bd2);background:var(--panel);color:var(--mut);border-radius:8px;cursor:pointer;vertical-align:middle}
.iconbtn:hover{color:var(--accent);border-color:var(--accent)}
.iconbtn i{font-size:16px}
.pctag{display:inline-block;background:var(--accentbg);color:var(--accent);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:600;user-select:all;-webkit-user-select:all}
.colrz{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:3}
#ot{table-layout:auto}
#ot th{position:relative}
#ot td,#ot th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tablecard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.tablecard .hd{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.empty{padding:34px;text-align:center;color:var(--mut)}
/* Пагінація списків: скільки на сторінці + сторінки. Один вигляд на всю BI. */
.pgr{display:flex;gap:10px;align-items:center;padding:11px 14px;border-top:1px solid var(--bd);flex-wrap:wrap;font-size:13px}
.pgr.hide{display:none}
.pgr select{margin:0;height:30px;padding:0 26px 0 9px;font-size:13px}
.pgr .pgi{color:var(--mut)}
.pgr .pgn{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pgr button{height:30px;min-width:30px;padding:0 9px;border-radius:8px;border:1px solid var(--bd2);background:var(--panel);color:var(--tx);font-size:13px;cursor:pointer}
.pgr button:hover:not(:disabled){border-color:var(--mut)}
.pgr button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pgr button:disabled{opacity:.4;cursor:default}
.pgr .pgd{color:var(--mut);padding:0 2px}
.hide{display:none}
.fcols{display:grid;grid-template-columns:280px 1fr;gap:16px}
@media(max-width:860px){.fcols{grid-template-columns:1fr}}
.flist{display:flex;flex-direction:column;gap:10px}
.fcard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;cursor:pointer}
.fcard.on{border-color:var(--accent);background:#f3faf7}
.fcard .t{font-weight:500}.fcard .dm{color:var(--mut);font-size:12px;margin:1px 0 9px}
.fcard .ms{display:flex;gap:16px}.fcard .ms div{font-size:11px;color:var(--mut)}.fcard .ms b{display:block;color:var(--tx);font-size:15px;font-weight:500;margin-top:1px}
.ftitle{font-size:26px;font-weight:500;letter-spacing:-.02em;text-transform:uppercase;margin:2px 0 0}
.ftitle-dm{color:var(--mut);font-size:13px;margin:4px 0 16px}
.pgroup{margin-top:14px}.pgroup:first-child{margin-top:4px}
.pgroup .ph{font-weight:500;margin-bottom:4px}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:20}
.drawer.show{display:block}
.drawer .sheet{position:absolute;right:0;top:0;height:100%;width:420px;max-width:92vw;background:var(--panel);border-left:1px solid var(--bd);padding:20px 22px;overflow:auto}
.drawer h3{font-size:16px;font-weight:500;margin:0 0 2px}
.drawer .x{position:absolute;right:16px;top:16px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--mut)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #f0f0f0;font-size:13px}
.chn{display:flex;flex-direction:column;margin-top:2px}
.chn-node{display:flex;gap:11px;align-items:flex-start}
.chn-rail{flex:none;width:20px;display:flex;flex-direction:column;align-items:center}
.chn-cd{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #9aa0a6;margin-top:2px;flex:none}
.chn-cd.rtg{border-color:#0c8b6c}
.chn-cd.soc{border-color:#c0873a}
.chn-cd.buy{background:#0c6b58;border-color:#0c6b58;box-shadow:0 0 0 4px #e6f2ed}
.chn-stem{flex:1;width:2px;background:#f0f0f0;min-height:12px}
.chn-c{flex:1;min-width:0;padding-bottom:5px}
.chn-r1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.chn-s{font-weight:600;font-size:13px}
.chn-r2{font-size:11.5px;color:#6d7175;margin-top:1px}
.chn-gap{display:flex;gap:11px;align-items:center;color:#9aa0a6;font-size:11px}
.chn-gap .chn-stem{height:15px;flex:none;min-height:0}
.chn-gaplbl{padding:1px 8px;border-radius:20px;background:#f4f4f5;font-weight:600}
.chn-buyb{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:#0c6b58;color:#fff;white-space:nowrap;margin-left:6px}
/* Таблиця замовлень: ФІКСОВАНА (table-layout:fixed), без горизонтального скролу.
   Керування колонками в заголовку: × ховає колонку, «＋ Колонка» повертає. Повна сітка. */
#ot{width:100%;table-layout:fixed}
#ot th,#ot td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-right:1px solid #eef0f1;padding:9px 10px}
#ot th:last-child,#ot td:last-child{border-right:0}
#ot th{position:relative;padding-right:20px;letter-spacing:.2px}
.otres{position:absolute;right:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:4;user-select:none}
.otres:hover{background:var(--accent,#0c8b6c);opacity:.35}
.ot-scroll{max-height:calc(100vh - 210px);overflow-y:auto;overflow-x:hidden}
#ot thead th{position:sticky;top:0;z-index:3;background:#fcfcfd;box-shadow:inset 0 -1px 0 var(--bd)}
.gdot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle}.gdot.gm{background:#3b82f6}.gdot.gf{background:#ec4899}
.gf{background:#e64980}
.gm{background:#1c7ed6}
#ot .c-gender{text-align:center}
#ot .c-quiz{text-align:center}
.qy{color:#0c8b6c;font-weight:700}
.qn{color:#b42318;font-weight:700}
.pathc{white-space:nowrap;font-variant-numeric:tabular-nums}
.pathc .pdot{color:#c2c5c8;margin:0 5px}
.quizc{display:inline-flex;align-items:center;justify-content:center;gap:0}
.quizc .qd{display:inline-block;width:8px;height:8px;border-radius:50%;background:#dcdfe2;margin-right:3px}
.quizc .qd.on{background:#0c8b6c}
.quizc .qsep{display:inline-block;width:1px;height:11px;background:#dcdfe2;margin:0 6px 0 3px;vertical-align:middle}
#ot td.otact{overflow:hidden;text-align:right;padding-left:6px;padding-right:8px}
.othx{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:13px;height:14px;padding:0;line-height:1;border:0;background:transparent;color:#c2c5c8;cursor:pointer;font-size:12px;border-radius:4px;opacity:0;transition:opacity .1s}
#ot th:hover .othx{opacity:1}
.othx:hover{background:#ececec;color:#333}
.otico{padding:3px 6px;font-size:13px;line-height:1;margin-left:4px}
.otaddwrap{position:relative;display:inline-flex}
.otmenu{position:absolute;right:0;top:34px;z-index:8;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:150px}
.otmenu[hidden]{display:none}
.otmenu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:7px;font:inherit;font-size:13px;cursor:pointer;color:var(--tx)}
.otmenu button:hover{background:#f3f4f5}
.otmenu .otempty{color:#9aa0a6;font-size:12px;padding:7px 10px}
.kv span{color:var(--mut)}
.it{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid #f4f4f4}
.muted{color:var(--mut)}
.dp{position:relative}
.dpbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--tx);font-family:inherit}
.dppop{position:absolute;right:0;top:44px;background:var(--panel);border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.14);z-index:50;width:528px;max-width:94vw}
.dpgrid{display:flex}
.dppr{width:194px;flex:none;border-right:1px solid var(--bd);padding:8px;max-height:78vh;overflow-y:auto}
.dppr button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--tx)}
.dppr button:hover{background:#f3f3f3}.dppr button.on{background:#eef0f2;color:var(--tx);font-weight:600}
.dpcal{flex:1;padding:12px}
.dpcalhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-weight:500;text-transform:capitalize}
.dpnav{border:0;background:transparent;cursor:pointer;color:var(--mut);padding:4px 6px;border-radius:6px;font-family:inherit}.dpnav:hover{background:#f0f0f0}
.dpdow,.dpdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpdow div{text-align:center;font-size:11px;color:var(--mut);padding:4px 0}
.dpdays button{border:0;background:transparent;padding:7px 0;font-size:13px;cursor:pointer;border-radius:7px;font-family:inherit;color:var(--tx)}
.dpdays button:hover{background:#f3f4f6}
.dpdays button.in{background:#eef0f2;border-radius:0}
.dpdays button.today{box-shadow:inset 0 0 0 2px var(--bd2);font-weight:700}
.dpdays button.sel{background:var(--tx);color:#fff}
.dpdays .blank{visibility:hidden}
.dpfoot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--bd)}
.prevgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.prevcard{display:block;border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--panel);text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.prevcard:hover{box-shadow:0 8px 22px rgba(0,0,0,.10);transform:translateY(-2px)}
.previmg{height:184px;overflow:hidden;background:#f0f0f0;border-bottom:1px solid var(--bd);display:flex;align-items:flex-start;justify-content:center}
.previmg img{width:100%;height:auto;display:block}
.prevmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;font-size:14px}
.prevtag{font-size:11px;color:#713f12;background:#fde047;padding:2px 9px;border-radius:999px;white-space:nowrap;font-weight:600}
.dblk-h{font-size:15px;font-weight:600;margin:0 0 12px}
.dcard{position:relative;border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;transition:opacity .15s}
.dcard.off{opacity:.5}
.dcard-img{display:block;height:150px;overflow:hidden;background:#f0f0f0;border-bottom:1px solid var(--bd)}
.dcard-img img{width:100%;height:auto;display:block}
.dcard-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;font-size:14px}
.dcard-meta b{font-weight:600}
.dcard-font{padding:0 13px 11px;font-size:12px;color:var(--mut)}
.dtoggle{position:absolute;top:8px;left:8px;z-index:2;width:42px;height:24px;border-radius:999px;border:0;background:#d9503a;cursor:pointer;padding:0;transition:.15s;box-shadow:0 1px 5px rgba(0,0,0,.22)}
.dtoggle.on{background:#15a06b}
.dtoggle .dknob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.dtoggle.on .dknob{left:21px}
.dcard-del{position:absolute;top:8px;left:8px;z-index:2;min-width:28px;height:24px;padding:0 6px;border-radius:7px;border:0;background:rgba(255,255,255,.93);box-shadow:0 1px 5px rgba(0,0,0,.18);cursor:pointer;font-size:13px;line-height:1;color:#333}
.dcard-del.arm{background:#d9503a;color:#fff}
#ltvseg{display:inline-flex;gap:4px;background:#f0f1f2;border-radius:9px;padding:3px}
#ltvseg button{border:0;background:transparent;padding:6px 15px;border-radius:7px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--mut)}
#ltvseg button.on{background:#fff;color:var(--tx);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ltvcards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ltvc{background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ltvc span{font-size:12px;color:var(--mut)}.ltvc b{font-size:19px;font-weight:600}
.ordc{border:1px solid var(--bd);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.ordc-h{display:flex;align-items:center;justify-content:space-between;font-size:13px}
@media(max-width:1000px){.ltvcards{grid-template-columns:repeat(3,1fr)}}
.sgroup{margin-bottom:14px;border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--panel)}
.sgrouphd{padding:13px 16px;background:#fafafa;cursor:pointer;font-size:15px;border-bottom:1px solid var(--bd)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;padding:14px}
.scard2{border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column}
.scard2-img{display:block;height:150px;overflow:hidden;background:#f0f0f0;border-bottom:1px solid var(--bd)}
.scard2-img img{width:100%;height:auto;display:block}
.scard2-b{padding:11px 13px;display:flex;flex-direction:column;gap:2px}
.scard2-t{font-weight:600;font-size:14px}
.scard2-m{font-size:12px;color:var(--mut);margin-top:3px}
.scard2-act{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.fld{margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.fld label{font-size:12px;color:var(--mut)}
.fld input{padding:9px 11px;border:1px solid var(--bd2);border-radius:8px;font-family:inherit;font-size:13px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot.on{background:#22c55e}.dot.off{background:#ef4444}
.segbtns{display:inline-flex;align-items:center;gap:3px;background:#f0f1f2;border-radius:8px;padding:3px}
.segbtns button{border:0;background:transparent;width:26px;height:24px;border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit;color:var(--mut)}
.segbtns button.on{background:#fff;color:var(--tx);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
#adst .adt-acc{cursor:pointer}#adst .adt-total td,#adst .adt-acc td{font-weight:600}#adst .adt-total td{font-weight:700}
#adst.v1 .adt-total td{background:#e7f3ee}#adst.v1 .adt-acc td{background:#fff}#adst.v1 .adt-camp td{background:#fafafa}
#adst.v2 .adt-total td{background:#fff;border-top:2px solid var(--accent)}#adst.v2 .adt-acc td{background:#fff}#adst.v2 .adt-acc td:first-child{box-shadow:inset 3px 0 #cbd5e1}#adst.v2 .adt-camp td{background:#fff;color:#475569}
#adst.v3 .adt-total td{background:#dcfce7}#adst.v3 .adt-acc td{background:#eef2f6}#adst.v3 .adt-camp td{background:#fff}
#adst.v4 .adt-total td{background:#ecfdf5}#adst.v4 .adt-acc td{background:#fff;border-top:7px solid #f3f4f6}#adst.v4 .adt-camp td{background:#fbfbfb;color:#334155}
#adst .adt-day td{font-weight:700}#adst.v4 .adt-day td{background:#f5f6f8;color:#111827;border-top:10px solid #eef0f3}#adst.v4 .adt-day td:first-child{font-size:14px}
#adst .adt-month td{background:#edf0f4;color:#111827;font-weight:700;border-top:2px solid #d5dae1;border-bottom:2px solid #d5dae1}
#adst{min-width:max-content}#adst th,#adst td{padding-left:10px;padding-right:10px;overflow:visible;text-overflow:clip;white-space:nowrap}
.todaybadge{font-size:10px;background:var(--accent);color:#fff;padding:1px 8px;border-radius:999px;margin-left:7px;font-weight:700;vertical-align:middle;letter-spacing:.3px}
.scard2{position:relative}
.gear{position:absolute;top:8px;right:8px;z-index:2;width:46px;height:46px;border-radius:11px;border:0;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;font-size:24px;line-height:1;color:#222}
.gear:hover{background:#fff}
.scard2-t{text-decoration:none;color:inherit}.scard2-t:hover{color:var(--accent)}
#ot{table-layout:fixed}
#ot th,#ot td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ot th:nth-child(1),#ot td:nth-child(1){width:84px}
#ot th:nth-child(2),#ot td:nth-child(2){width:120px}
#ot th:nth-child(3),#ot td:nth-child(3){width:120px}
#ot th:nth-child(5),#ot td:nth-child(5){width:120px}
#ot th:nth-child(6),#ot td:nth-child(6){width:92px}
#ot th:nth-child(7),#ot td:nth-child(7){width:64px}
#ot th:nth-child(8),#ot td:nth-child(8){width:170px;overflow:visible;white-space:nowrap}
#ot td:nth-child(8) .rt{padding:5px 9px;margin-left:4px}
#ot th:nth-child(8),#ot td:nth-child(8){width:150px}
/* Замовлення: панель фільтрів/пошуку завжди видима при скролі (тільки .hd, без липкого thead) */
#view-orders .tablecard{overflow:visible}
#view-orders .tablecard .hd{position:sticky;top:56px;z-index:8;background:var(--panel);border-radius:12px 12px 0 0;box-shadow:0 1px 0 var(--bd)}
.rt{white-space:nowrap;font-size:12px}
.antiles{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:16px}
.antile{background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:10px 8px;cursor:pointer;text-align:center;transition:.12s}
.antile:hover{border-color:var(--bd2)}
.antile.on{border-color:var(--accent);background:var(--accentbg)}
.antile .l{font-size:11px;color:var(--mut)}.antile .v{font-size:16px;font-weight:600;margin-top:3px}
.anrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.anchart{border:1px solid var(--bd);border-radius:10px;padding:13px}
.anh{font-size:13px;font-weight:600;margin-bottom:12px}
.bars{display:flex;align-items:flex-end;gap:4px;height:180px;overflow-x:auto;padding-bottom:2px}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:22px;height:100%}
.barfill{width:18px;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px}
.barlbl{font-size:10px;color:var(--mut);margin-top:5px}
.hbar{display:grid;grid-template-columns:150px 1fr 78px;gap:8px;align-items:center;margin-bottom:7px;font-size:12px}
#fdetail.fv2 .ftitle{font-size:30px;letter-spacing:-.5px}
#fdetail.fv2 .kc{border:0;border-top:3px solid var(--accent);border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:16px}
#fdetail.fv2 .kc .v{font-size:24px}
#fdetail.fv2 .panel{border:0;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,.07)}
#fdetail.fv2 .panel h2{color:var(--accent)}
#fdetail.fv3 .ftitle{background:#202223;color:#fff;padding:14px 18px;border-radius:12px;display:inline-block}
#fdetail.fv3 .ftitle-dm{color:var(--mut);margin-top:6px}
#fdetail.fv3 .kc{background:#202223;color:#fff;border:0;border-radius:12px}
#fdetail.fv3 .kc .l{color:#9aa0a6}
#fdetail.fv3 .panel{border-radius:12px}
#fdetail.fv4 .kc{background:var(--grnbg);border:0;border-radius:16px}
#fdetail.fv4 .kc .v{color:var(--grn)}
#fdetail.fv4 .ftitle{color:var(--grn)}
#fdetail.fv4 .panel{background:#fbfdfc;border-radius:16px}
#fdetail.fv4 .pgroup .ph{background:var(--grnbg);color:var(--grn);border-radius:8px;padding:6px 10px}
#fdetail.fv5 .kc{border:0;border-right:1px solid var(--bd);border-radius:0;box-shadow:none}
#fdetail.fv5 .kc:last-child{border-right:0}
#fdetail.fv5 .kc .v{font-size:26px;font-weight:700}
#fdetail.fv5 .ftitle{font-size:34px;font-weight:800;letter-spacing:-1px}
#fdetail.fv5 .panel{border:0;border-top:2px solid #ececec;border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
#fdetail.fv5 .panel h2{text-transform:uppercase;letter-spacing:1px;font-size:13px;color:var(--mut)}
.hbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htrack{background:#f0f1f2;border-radius:6px;height:18px;overflow:hidden}
.hfill{height:100%;background:var(--accent);border-radius:6px;min-width:2px}
.hval{text-align:right;font-weight:600}
.antt{position:fixed;display:none;background:#202223;color:#fff;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:700;pointer-events:none;z-index:9999;box-shadow:0 6px 18px rgba(0,0,0,.28);white-space:nowrap}
#ct{table-layout:fixed}
#ct th,#ct td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ct th:nth-child(2),#ct td:nth-child(2){width:130px}
#ct th:nth-child(3),#ct td:nth-child(3){width:96px}
#ct th:nth-child(4),#ct td:nth-child(4){width:110px}
#ct th:nth-child(6),#ct td:nth-child(6){width:74px}
#ct th:nth-child(7),#ct td:nth-child(7){width:150px}
#adst{table-layout:auto}
#adst th,#adst td{overflow:visible;text-overflow:clip;white-space:nowrap}
#adst th:first-child,#adst td:first-child{min-width:210px}
#buyt{table-layout:fixed}#buyt th,#buyt td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subtabs{display:inline-flex;gap:4px;background:#f0f1f2;border-radius:9px;padding:3px;margin-bottom:14px}
.subtabs button{border:0;background:transparent;padding:7px 16px;border-radius:7px;font-family:inherit;font-size:13px;cursor:pointer;color:var(--mut)}
.subtabs button.on{background:#fff;color:var(--tx);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ndot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5484d;margin-left:7px;vertical-align:middle;animation:ndotp 1.4s ease-in-out infinite}
@keyframes ndotp{0%,100%{opacity:1}50%{opacity:.35}}
.archhd{padding:10px 12px;margin-top:10px;background:#fafafa;border:1px solid var(--bd);border-radius:9px;cursor:pointer;font-weight:600;color:var(--mut)}
@media(max-width:1000px){.anrow{grid-template-columns:1fr}.antiles{grid-template-columns:repeat(4,1fr)}}
#adst.v5 .adt-total td{background:#fff;color:var(--grn)}#adst.v5 .adt-acc td{background:#fff}#adst.v5 .adt-camp td{background:#fff;color:#64748b}#adst.v5 tbody td{border-bottom:1px solid #f1f1f1}
.dpcancel{border:1px solid var(--bd2);background:var(--panel);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px;font-family:inherit;color:var(--tx)}
.slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.scard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:15px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.scard .t{font-weight:500;font-size:15px}.scard .dm{color:var(--mut);font-size:12px;margin-top:2px}
.sact{display:flex;gap:8px;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:6px;background:var(--tx);color:#fff;border:1px solid var(--tx);border-radius:8px;padding:7px 11px;font-size:13px;text-decoration:none}
.sbtn2{background:var(--panel);color:var(--tx);border:1px solid var(--bd2);border-radius:8px;padding:7px 11px;font-size:13px;cursor:pointer;font-family:inherit}

.crtree{display:none;padding:2px 0 6px 8px}
.crtree.on{display:block}
/* окрема система Zarmilkas Creative BI: дерево стає головним меню */
body.sysc .crtree{display:block;padding:4px 0 6px 0}
body.sysc .crtree a{font-size:14px;padding:9px 11px}
body.sysc .crtree .sub a{font-size:13px;padding:6px 9px}
body.sysc .crtree .sub{margin-left:14px}
.crtree a{display:flex;align-items:center;gap:6px;color:var(--tx);text-decoration:none;font-size:13px;padding:6px 9px;border-radius:8px;cursor:pointer}
.crtree a:hover{background:#efefef}
.crtree a.on{background:#ebebeb;font-weight:500}
.crtree .g>a{font-size:13.5px}
.crtree .car{width:10px;height:10px;flex:none;transition:transform .15s;color:var(--mut)}
.crtree .g.open>a .car{transform:rotate(90deg)}
.crtree .sub{display:none;padding-left:14px;border-left:1px solid var(--bd);margin-left:12px}
.crtree .g.open .sub{display:block}
.crtree .sub a{font-size:12.5px;color:var(--mut);padding:5px 8px}
.crtree .sub a.on{color:var(--tx)}
.crtree .cnt{margin-left:auto;font-size:11px;color:var(--mut)}
.crhd{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.crhd h2{font-size:17px;font-weight:500;margin:0}
.crhd .sub{color:var(--mut);font-size:13px}
.crpick{display:flex;gap:6px;flex-wrap:wrap}
.crpick button{border:1px solid var(--bd2);background:var(--panel);color:var(--tx);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;font-family:inherit}
.crpick button.on{background:var(--tx);color:#fff;border-color:var(--tx)}
.crwarn{background:#fff8e6;border:1px solid #f0dfae;color:#7a5a10;border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px;line-height:1.5}
.crok{background:var(--grnbg);border:1px solid #bfe0d4;color:var(--grn);border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.5}
.crgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.crcard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.crcard .pv{aspect-ratio:9/16;max-height:330px;background:#f1f1f0;position:relative;display:flex;align-items:center;justify-content:center}
.crcard .pv iframe{width:100%;height:100%;border:0}
.crcard .pv img{width:100%;height:100%;object-fit:cover}
.crcard .pv .ph{color:var(--mut);font-size:12.5px;text-align:center;padding:0 16px;line-height:1.5}
.crcard .bd{padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.crcard .nm{font-size:12.5px;color:var(--mut);word-break:break-all}
.crcard .tt{font-size:13.5px;line-height:1.45}
.crcard .rw{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-top:auto;padding-top:8px;border-top:1px solid #f0f0f0}
.crcard .rw b{color:var(--tx);font-weight:500}
.crdot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.crmeta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--mut)}
.crsec{margin-bottom:26px}
.crsec>h3{font-size:15px;font-weight:500;margin:0 0 4px}
.crsec>p{color:var(--mut);font-size:13px;margin:0 0 12px;max-width:720px;line-height:1.5}
.crtable{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--bd);border-radius:12px;overflow:hidden;font-size:13px}
.crtable th{background:#fbfbfa;color:var(--mut);font-weight:500;font-size:12px;text-align:left;padding:9px 10px;white-space:nowrap;cursor:pointer;position:sticky;top:0}
.crtable th.r,.crtable td.r{text-align:right}
.crtable td{padding:9px 10px;border-top:1px solid #f0f0f0;white-space:nowrap}
.crtable tr:hover td{background:#fafafa}
.crtable th.up:after{content:' ↑'}
.crtable th.dn:after{content:' ↓'}
.crtable .thumb{width:34px;height:46px;object-fit:cover;border-radius:5px;background:#f1f1f0;display:block}
.crtable .nmc{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.crwrap{overflow:auto;max-height:calc(100vh - 230px);border-radius:12px}
.crtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:12px;overflow:hidden;margin-bottom:16px}
.crtile{background:var(--panel);padding:13px 14px}
.crtile .k{font-size:12px;color:var(--mut)}
.crtile .v{font-size:19px;font-weight:500;margin-top:3px}
.crbar{height:6px;border-radius:3px;background:#eee;overflow:hidden;min-width:56px;display:block}
.crbar i{display:block;height:100%;background:var(--accent)}
.crscope{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin-bottom:16px}
.crscope select{padding:6px 10px;border:1px solid var(--bd2);border-radius:8px;font-family:inherit;font-size:13px;background:var(--panel);color:var(--tx);max-width:340px}
.crdists{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--bd)}
.crdist .k{font-size:12px;color:var(--tx);margin-bottom:10px;font-weight:500}
.crdist .k span{font-weight:400;margin-left:5px}
.crdist .row{display:grid;grid-template-columns:1fr 74px 58px;align-items:center;gap:9px;padding:5px 0;font-size:12.5px}
.crdist .row .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}
.crdist .row b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.crdist .row .crbar i{background:#c9cccf}
@media(max-width:1000px){.crtree{display:none!important}.crmob{display:block!important}}
.crmob{display:none;margin-bottom:12px}
.crmob select{width:100%;padding:9px 11px;border:1px solid var(--bd2);border-radius:9px;font-family:inherit;font-size:14px;background:var(--panel)}


#view-ads .aud-wrap{padding:2px 0 6px;width:100%;--ink:#202223;--sub:#6d7175;--faint:#9aa1a9;--line:#eceef1;--linestr:#e3e3e3;--up:#0c6b58;--down:#b42318;--bar:#202223;--barsoft:#d7dade;--cfl:#dfe2e6}
/* рядок контролів */
#view-ads .aud-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 20px}
#view-ads .aud-chips{display:inline-flex;background:#e7e9ed;border-radius:999px;padding:3px;gap:2px}
#view-ads .aud-chips button{border:0;background:transparent;color:var(--sub);font:inherit;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;white-space:nowrap;cursor:pointer}
#view-ads .aud-chips button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(11,13,16,.10)}
#view-ads .aud-range{font-size:12.5px;color:var(--sub);font-weight:540;font-variant-numeric:tabular-nums;white-space:nowrap}
#view-ads .aud-grow{flex:1;min-width:8px}
#view-ads .aud-dd{position:relative}
#view-ads .aud-dd>button{max-width:220px;border:1px solid var(--linestr);background:#fff;border-radius:9px;padding:8px 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
#view-ads .aud-dd>button>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
#view-ads .aud-dd>button .cv{flex:none;color:var(--sub);font-size:10px}
#view-ads .aud-dd .menu{position:absolute;top:calc(100% + 5px);right:0;background:#fff;border:1px solid var(--linestr);border-radius:10px;box-shadow:0 8px 26px rgba(11,13,16,.11);padding:5px;min-width:210px;max-width:340px;max-height:340px;overflow:auto;z-index:40;display:none}
#view-ads .aud-dd.open .menu{display:block}
#view-ads .aud-dd .menu button{display:flex;width:100%;align-items:center;gap:8px;border:0;background:transparent;border-radius:7px;padding:8px 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
#view-ads .aud-dd .menu button:hover{background:#f3f4f6}
#view-ads .aud-dd .menu button .ck{width:13px;flex:none;color:var(--up);font-size:12px;opacity:0}
#view-ads .aud-dd .menu button.sel .ck{opacity:1}
#view-ads .aud-dd .menu button .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-ads .aud-act{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:9px;padding:8px 13px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
#view-ads .aud-act i{font-size:15px}
/* секції + картки (клон Event-трекера) */
#view-ads .aud-sec{margin-bottom:24px}
#view-ads .aud-sec>.h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 12px 2px;letter-spacing:-.01em}
#view-ads .aud-sec>.h .m{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--sub);background:#eef0f2;border-radius:4px;padding:1px 5px;font-weight:600}
#view-ads .aud-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
#view-ads .cfcard{background:#fff;border:1px solid var(--linestr);border-radius:12px;min-width:0}
#view-ads .cfcard .cfhd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 11px;border-bottom:1px solid var(--line)}
#view-ads .cfcard .cftitle{font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
#view-ads .cfcard .cfsteps{padding:4px 18px 12px}
#view-ads .cfcard .cfhead{display:grid;grid-template-columns:24px 1fr 62px 52px 62px;align-items:center;padding:7px 0 5px;border-bottom:1px solid var(--line);margin-bottom:2px}
#view-ads .cfcard .cfhead span{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--faint);text-align:center;white-space:nowrap}
#view-ads .cfcard .cfhead span.nm{text-align:left;grid-column:1 / 3}
#view-ads .cfcard .cfhead span.so{cursor:pointer;user-select:none;-webkit-user-select:none}
#view-ads .cfcard .cfhead span.so:hover{color:var(--sub)}
#view-ads .cfcard .cfhead span.so.on{color:var(--ink)}
#view-ads .cfcard .cfmodel{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--sub);background:#eef0f2;border-radius:4px;padding:2px 6px;font-weight:600}
#view-ads .cfcard .cfrow.more{cursor:pointer}
#view-ads .cfcard .cfrow.more .chev{font-size:9px}
#view-ads .cfcard .cfrow{position:relative;display:grid;grid-template-columns:24px 1fr 62px 52px 62px;align-items:center;min-height:42px;border-radius:8px}
#view-ads .cfcard .cfrow:hover{background:#fafbfc}
#view-ads .cfcard .cfnodecol{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
#view-ads .cfcard .cfnodecol::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--cfl)}
#view-ads .cfcard .cfrow:first-child .cfnodecol::before{top:50%}
#view-ads .cfcard .cfrow:last-child .cfnodecol::before{bottom:50%}
#view-ads .cfcard .cfnode{position:relative;z-index:2;width:10px;height:10px;border-radius:50%;background:var(--barsoft);box-shadow:0 0 0 4px #fff}
#view-ads .cfcard .cfnode.goal{background:var(--bar)}
#view-ads .cfcard .cfrow:hover .cfnode{background:var(--bar);box-shadow:0 0 0 4px #fafbfc}
#view-ads .cfcard .cfname{font-size:13px;font-weight:540;color:var(--ink);letter-spacing:-.01em;padding-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-ads .cfcard .cfrow.lead .cfname{font-weight:680}
#view-ads .cfcard .cfv{font-size:13px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;padding:4px 2px;border-radius:6px}
#view-ads .cfcard .cfz{color:var(--faint)}
@media(max-width:600px){
#view-ads .aud-grid{grid-template-columns:1fr}
#view-ads .aud-chips{flex-wrap:wrap}
#view-ads .aud-chips button{padding:6px 11px}
#view-ads .aud-grow{display:none}
#view-ads .aud-dd{flex:1 1 46%}
#view-ads .aud-dd>button{width:100%;max-width:none}
#view-ads .aud-dd .menu{right:auto;left:0;max-width:calc(100vw - 40px)}
#view-ads .aud-act{flex:1 1 100%;justify-content:center}
}


/* ===== палітра прототипу, перекладена в BI, scoped на #view-catalog ===== */
#view-catalog{
  --bg:#f6f6f7; --surface:#ffffff; --panel:#fafbfc;
  --line:#e3e3e3; --line-strong:#c9cccf;
  --text:#202223; --text-2:#6d7175; --text-3:#9aa0a6;
  --accent:#202223; --accent-weak:#f0f1f3;
  --green:#0c6b58; --green-weak:#e3f1ec;
  --amber:#a9720f; --amber-weak:#fbf1dd;
  --red:#b42318; --red-weak:#fce9e6;
  --sel:#eef0f2; --sel-line:#d3d8de;
  --radius:8px; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --row-h:36px; --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --shadow-lg:0 12px 40px rgba(16,24,40,.16);
  font-size:13px;line-height:1.4;color:var(--text);
}
#view-catalog *{box-sizing:border-box}
#view-catalog button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
#view-catalog input,#view-catalog select{font-family:inherit;font-size:inherit}

/* ---------- Tabs ---------- */
#view-catalog .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
#view-catalog .tab{background:none;border:none;padding:9px 14px;color:var(--text-2);font-weight:550;position:relative;border-radius:6px 6px 0 0}
#view-catalog .tab:hover{color:var(--text)}
#view-catalog .tab.active{color:var(--text)}
#view-catalog .tab.active:after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
#view-catalog .tab .cnt{color:var(--text-3);font-weight:500;margin-left:6px;font-size:11px;font-variant-numeric:tabular-nums}

/* ---------- Stats ---------- */
#view-catalog .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
#view-catalog .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
#view-catalog .stat .k{color:var(--text-3);font-size:11px;font-weight:550;text-transform:uppercase;letter-spacing:.04em}
#view-catalog .stat .v{font-size:22px;font-weight:680;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
#view-catalog .stat .v small{font-size:12px;font-weight:600;color:var(--text-3)}

/* ---------- Toolbar ---------- */
#view-catalog .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#view-catalog .search{position:relative;flex:0 0 280px}
#view-catalog .search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text-3)}
#view-catalog .search input{width:100%;height:34px;border:1px solid var(--line-strong);border-radius:7px;padding:0 10px 0 30px;background:var(--surface);outline:none;color:var(--text)}
#view-catalog .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
#view-catalog .spacer{flex:1}
#view-catalog .btn{height:34px;padding:0 13px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;font-weight:550;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--text)}
#view-catalog .btn:hover{background:var(--panel);border-color:var(--text-3)}
#view-catalog .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
#view-catalog .btn.primary:hover{background:#000}
#view-catalog .seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:7px;overflow:hidden;height:34px}
#view-catalog .seg button{border:none;background:var(--surface);padding:0 11px;color:var(--text-2);display:flex;align-items:center;gap:6px}
#view-catalog .seg button.on{background:var(--accent-weak);color:var(--accent)}
#view-catalog .seg button+button{border-left:1px solid var(--line-strong)}
#view-catalog .filterchip{height:34px;padding:0 11px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-weight:550}
#view-catalog .filterchip:hover{border-color:var(--text-3)}
#view-catalog .filterchip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
#view-catalog .metrics{display:flex;align-items:center;gap:16px;margin-left:4px}
#view-catalog .metrics .m{font-size:13px;color:var(--text-2);white-space:nowrap}
#view-catalog .metrics .m b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- Bulk bar ---------- */
#view-catalog .bulkbar{display:none;align-items:center;gap:8px;background:#202223;color:#fff;border-radius:9px;padding:8px 10px 8px 14px;margin-bottom:12px;box-shadow:var(--shadow-lg)}
#view-catalog .bulkbar.show{display:flex}
#view-catalog .bulkbar .cnt{font-weight:650;font-variant-numeric:tabular-nums}
#view-catalog .bulkbar .sep{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 3px}
#view-catalog .bulkbar .baction{height:30px;padding:0 11px;border-radius:7px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-weight:550;display:inline-flex;align-items:center;gap:6px}
#view-catalog .bulkbar .baction:hover{background:rgba(255,255,255,.14)}
#view-catalog .bulkbar .baction.danger:hover{background:var(--red);border-color:var(--red)}
#view-catalog .bulkbar .clear{margin-left:auto;height:30px;padding:0 11px;border-radius:7px;border:none;background:rgba(255,255,255,.1);color:#fff;font-weight:550}
#view-catalog .bulkbar .clear:hover{background:rgba(255,255,255,.2)}

/* ---------- Grid (Excel-like) ---------- */
#view-catalog .gridwrap{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
#view-catalog .gridscroll{overflow:auto;max-height:calc(100vh - 300px)}
#view-catalog table.grid{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed}
#view-catalog table.grid col.c-chk{width:38px}
#view-catalog table.grid col.c-photo{width:52px}
#view-catalog table.grid col.c-id{width:60px}
#view-catalog table.grid col.c-art{width:120px}
#view-catalog table.grid col.c-name{width:auto}
#view-catalog table.grid col.c-cat{width:170px}
#view-catalog table.grid col.c-price{width:110px}
#view-catalog table.grid col.c-cost{width:120px}
#view-catalog table.grid col.c-buys{width:100px}
#view-catalog table.grid col.c-open{width:44px}
#view-catalog table.grid thead th{
  position:sticky;top:0;z-index:5;background:var(--panel);
  border-bottom:1px solid var(--line-strong);border-right:1px solid var(--line);
  text-align:left;font-weight:600;color:var(--text-2);font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;padding:0 10px;height:34px;white-space:nowrap;user-select:none
}
#view-catalog table.grid thead th.sortable{cursor:pointer}
#view-catalog table.grid thead th.sortable:hover{background:#f0f1f3;color:var(--text)}
#view-catalog table.grid thead th .arrow{color:var(--accent);margin-left:4px;font-size:10px}
#view-catalog table.grid thead th.num{text-align:right}
#view-catalog table.grid tbody td{
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:0 10px;height:var(--row-h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle
}
#view-catalog table.grid td.num{text-align:right;font-variant-numeric:tabular-nums}
#view-catalog table.grid td.mono{font-family:var(--mono);font-size:12px;color:var(--text-2)}
#view-catalog table.grid tbody tr{cursor:pointer}
#view-catalog table.grid tbody tr:hover{background:#f8fafc}
#view-catalog table.grid tbody tr.sel{background:var(--sel)}
#view-catalog table.grid tbody tr.sel td{border-bottom-color:var(--sel-line)}
#view-catalog table.grid tbody tr.sel:hover{background:#e6e9ec}
#view-catalog table.grid tbody tr.off td{opacity:.5}
#view-catalog table.grid tbody td.emptyrow{text-align:center;color:var(--text-3);height:120px;white-space:normal;padding:20px}
#view-catalog table.grid tbody td.emptyrow b{display:block;color:var(--text);font-weight:600;margin-bottom:5px}
#view-catalog .cellchk{display:flex;align-items:center;justify-content:center}
#view-catalog input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
#view-catalog .thumb{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;border:1px solid var(--line);background:#f2f2f3;color:var(--text-3);overflow:hidden}
#view-catalog .thumb img{width:100%;height:100%;object-fit:cover;display:block}
#view-catalog .name-cell{font-weight:550;color:var(--text);overflow:hidden;text-overflow:ellipsis}
#view-catalog .catpill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:20px;background:#f0f1f3;color:var(--text-2);font-size:12px;font-weight:550;max-width:100%;overflow:hidden}
#view-catalog .catpill .pdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--accent)}
#view-catalog .catpill .sub{color:var(--text-3);font-weight:500}
#view-catalog .ccy{color:var(--text-3);font-size:11px}
#view-catalog td.buysnum{font-weight:600;color:var(--text)}
#view-catalog .openbtn{width:26px;height:26px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-3);display:flex;align-items:center;justify-content:center}
#view-catalog tr:hover .openbtn{color:var(--accent);background:var(--accent-weak)}

/* editable cells */
#view-catalog td.editable{position:relative}
#view-catalog td.editable:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
#view-catalog td.editing{box-shadow:inset 0 0 0 2px var(--accent);background:#fff !important;padding:0;overflow:visible}
#view-catalog td.editing input,#view-catalog td.editing .celledit{width:100%;height:calc(var(--row-h) - 2px);border:none;outline:none;padding:0 9px;background:#fff;font:inherit;color:var(--text)}
#view-catalog td.num.editing input{text-align:right}
#view-catalog .cellhint{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--text-3);opacity:0;font-size:10px}
#view-catalog td.editable:hover .cellhint{opacity:.7}

/* ---------- Tiles view ---------- */
#view-catalog .tiles{display:none;grid-template-columns:repeat(4,1fr);gap:14px}
#view-catalog .tiles.show{display:grid}
#view-catalog .tilecard{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.12s}
#view-catalog .tilecard:hover{border-color:var(--text-3);transform:translateY(-2px)}
#view-catalog .tilecard.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-weak)}
#view-catalog .tilecard.off{opacity:.55}
#view-catalog .tilecard .cover{height:110px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-3);background:#f2f2f3;overflow:hidden}
#view-catalog .tilecard .cover img{width:100%;height:100%;object-fit:cover;display:block}
#view-catalog .tilecard .body{padding:11px 12px}
#view-catalog .tilecard .tname{font-weight:600;font-size:13px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-catalog .tilecard .meta{display:flex;justify-content:space-between;color:var(--text-2);font-size:12px}
#view-catalog .tilecard .price{font-weight:650;color:var(--text)}

/* ---------- Categories tab ---------- */
#view-catalog .catpanel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);max-width:720px}
#view-catalog .catpanel .head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
#view-catalog .catpanel .head h3{margin:0;font-size:14px;font-weight:650}
#view-catalog .tree{padding:8px 8px 14px}
#view-catalog .trow{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px;border-radius:7px;position:relative}
#view-catalog .trow:hover{background:var(--panel)}
#view-catalog .trow.dragover{background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--sel-line)}
#view-catalog .trow .grip{color:var(--text-3);cursor:grab;display:flex;width:16px}
#view-catalog .trow .twist{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--text-2);border-radius:4px;cursor:pointer}
#view-catalog .trow .twist:hover{background:#e6e9ee}
#view-catalog .trow .twist.leaf{visibility:hidden}
#view-catalog .trow .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--accent)}
#view-catalog .trow .label{font-weight:550;flex:1;outline:none;border-radius:4px;padding:2px 4px}
#view-catalog .trow .label[contenteditable=true]:focus{box-shadow:0 0 0 2px var(--accent-weak);background:#fff}
#view-catalog .trow .qty{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}
#view-catalog .trow .tacts{display:flex;gap:2px;opacity:0}
#view-catalog .trow:hover .tacts{opacity:1}
#view-catalog .iconbtn{width:26px;height:26px;border:none;background:transparent;border-radius:6px;color:var(--text-3);display:flex;align-items:center;justify-content:center}
#view-catalog .iconbtn:hover{background:#e6e9ee;color:var(--text)}
#view-catalog .iconbtn.dng:hover{background:var(--red-weak);color:var(--red)}
#view-catalog .children{margin-left:26px;border-left:1px solid var(--line);padding-left:6px}
#view-catalog .children.collapsed{display:none}
#view-catalog .addsub{display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;margin-left:26px;color:var(--accent);font-weight:550;border-radius:6px;background:none;border:none;width:calc(100% - 26px);justify-content:flex-start}
#view-catalog .addsub:hover{background:var(--accent-weak)}

/* ---------- Modal / drawer ---------- */
#view-catalog .scrim{position:fixed;inset:0;background:rgba(16,24,40,.42);backdrop-filter:blur(1px);display:none;z-index:40}
#view-catalog .scrim.show{display:block}
#view-catalog .drawer{position:fixed;top:0;right:0;bottom:0;left:auto;width:520px;max-width:100vw;background:var(--surface);z-index:50;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
#view-catalog .drawer.show{transform:none}
#view-catalog .drawer.card{width:600px}
#view-catalog .drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
#view-catalog .drawer .dhead h3{margin:0;font-size:15px;font-weight:650}
#view-catalog .drawer .dbody{overflow:auto;padding:18px 20px;flex:1}
#view-catalog .drawer .dfoot{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel)}
#view-catalog .field{margin-bottom:16px}
#view-catalog .field>label{display:block;font-weight:600;font-size:12px;color:var(--text-2);margin-bottom:6px}
#view-catalog .field input.tin,#view-catalog .field select.tin{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;outline:none;background:#fff;color:var(--text);font-variant-numeric:tabular-nums}
#view-catalog .field input.tin:focus,#view-catalog .field select.tin:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
#view-catalog .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* dropzone */
#view-catalog .dropzone{border:1.5px dashed var(--line-strong);border-radius:10px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-3);background:var(--panel);cursor:pointer;transition:.12s;text-align:center;padding:14px}
#view-catalog .dropzone:hover,#view-catalog .dropzone.over{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
#view-catalog .dropzone .big{font-size:26px}
#view-catalog .previews{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#view-catalog .previews .pv{width:56px;height:56px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;overflow:hidden;background:#f2f2f3}
#view-catalog .previews .pv img{width:100%;height:100%;object-fit:cover}
#view-catalog .previews .pv .x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#202223;color:#fff;border:none;font-size:11px;display:flex;align-items:center;justify-content:center;z-index:2}

/* custom dropdown */
#view-catalog .dd{position:relative}
#view-catalog .dd .ddbtn{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;font-weight:500;color:var(--text)}
#view-catalog .dd .ddbtn:hover{border-color:var(--text-3)}
#view-catalog .dd.open .ddbtn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
#view-catalog .dd .ddbtn .ph{color:var(--text-3)}
#view-catalog .dd .ddbtn .chev{color:var(--text-3);transition:.15s}
#view-catalog .dd.open .ddbtn .chev{transform:rotate(180deg)}
#view-catalog .ddmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line-strong);border-radius:9px;box-shadow:var(--shadow-lg);z-index:20;padding:6px;display:none;max-height:280px;overflow:auto}
#view-catalog .dd.open .ddmenu{display:block}
#view-catalog .ddopt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;font-weight:500;cursor:pointer;color:var(--text)}
#view-catalog .ddopt:hover{background:var(--panel)}
#view-catalog .ddopt.child{padding-left:26px;color:var(--text-2)}
#view-catalog .ddopt.on{background:var(--accent-weak);color:var(--accent)}
#view-catalog .ddopt .pdot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
#view-catalog .ddsep{height:1px;background:var(--line);margin:6px 4px}
#view-catalog .ddadd{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:6px;color:var(--accent);font-weight:600;cursor:pointer}
#view-catalog .ddadd:hover{background:var(--accent-weak)}
#view-catalog .ddaddform{display:none;padding:8px;gap:6px}
#view-catalog .ddaddform.show{display:flex}
#view-catalog .ddaddform input{flex:1;height:32px;border:1px solid var(--line-strong);border-radius:6px;padding:0 9px;outline:none;color:var(--text)}
#view-catalog .ddaddform input:focus{border-color:var(--accent)}
#view-catalog .ddaddform button{height:32px;padding:0 12px;border-radius:6px;border:none;background:var(--accent);color:#fff;font-weight:600}

/* ---------- Product card ---------- */
#view-catalog .card-cover{height:150px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-3);background:#f2f2f3;position:relative;border-bottom:1px solid var(--line);overflow:hidden}
#view-catalog .card-cover img{width:100%;height:100%;object-fit:cover;display:block}
#view-catalog .card-cover .idbadge{position:absolute;left:16px;top:14px;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-family:var(--mono);font-size:11px;color:var(--text-2)}
#view-catalog .blocks{padding:18px 22px}
#view-catalog .blocktitle{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:650;margin:20px 0 10px}
#view-catalog .blocktitle:first-child{margin-top:0}
#view-catalog .field input:disabled,#view-catalog .field select:disabled{background:var(--panel);color:var(--text-2);cursor:default;-webkit-text-fill-color:var(--text-2)}
#view-catalog .card-cover .changephoto{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.9);border:1px solid var(--line-strong);border-radius:7px;padding:6px 11px;font-size:12px;font-weight:550;color:var(--text);display:inline-flex;align-items:center;gap:6px}
#view-catalog .card-cover .changephoto:hover{background:#fff;border-color:var(--text-3)}
#view-catalog .chanlist{display:flex;flex-direction:column}
#view-catalog .chan{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
#view-catalog .chan:last-child{border-bottom:none}
#view-catalog .chan .cnm{font-weight:550;color:var(--text);font-size:13px}
#view-catalog .chan .cnm small{display:block;font-weight:500;color:var(--text-3);font-family:var(--mono);font-size:11px;margin-top:2px}
#view-catalog .chan .cst{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;color:var(--text-3);white-space:nowrap}
#view-catalog .chan .cst .cd{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:0 0 auto}
#view-catalog .chan .cst.on{color:var(--green)}
#view-catalog .chan .cst.on .cd{background:var(--green)}
#view-catalog .chan .cright{display:inline-flex;align-items:center;gap:10px}
#view-catalog .csync{height:28px;padding:0 11px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;font-size:12px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#view-catalog .csync:hover{background:var(--panel);border-color:var(--text-3)}
#view-catalog .csync:disabled{opacity:.5;cursor:default}
#view-catalog .chanhd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
#view-catalog .csyncall{height:30px;padding:0 12px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:7px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
#view-catalog .csyncall:hover{background:#000}
#view-catalog .csyncall:disabled{opacity:.6;cursor:default}
/* кастом-дропдаун категорії у рядку (popup) */
#view-catalog .catddmenu{position:absolute;background:#fff;border:1px solid var(--line-strong);border-radius:9px;box-shadow:var(--shadow-lg);z-index:70;padding:6px;min-width:200px;max-height:300px;overflow:auto}

/* mini prompt */
#view-catalog .mini{position:absolute;background:#fff;border:1px solid var(--line-strong);border-radius:9px;box-shadow:var(--shadow-lg);padding:12px;z-index:60;width:250px;display:none}
#view-catalog .mini.show{display:block}
#view-catalog .mini label{font-size:12px;font-weight:600;color:var(--text-2);display:block;margin-bottom:6px}
#view-catalog .mini input{width:100%;height:34px;border:1px solid var(--line-strong);border-radius:7px;padding:0 10px;outline:none;margin-bottom:8px;color:var(--text)}
#view-catalog .mini input:focus{border-color:var(--accent)}
#view-catalog .mini .list{max-height:220px;overflow:auto;margin:-2px -4px}
#view-catalog .mini .li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--text)}
#view-catalog .mini .li:hover{background:var(--panel)}
#view-catalog .mini .li.child{padding-left:24px;color:var(--text-2)}
#view-catalog .mini .li .pdot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
#view-catalog .mini .mrow{display:flex;gap:8px;justify-content:flex-end}
#view-catalog .mini .mrow button{height:30px;padding:0 12px;border-radius:6px;border:1px solid var(--line-strong);background:#fff;font-weight:550;color:var(--text)}
#view-catalog .mini .mrow button.go{background:var(--accent);color:#fff;border-color:var(--accent)}

/* toast */
#view-catalog .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#202223;color:#fff;padding:11px 18px;border-radius:9px;font-weight:550;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.2s;z-index:80;display:flex;align-items:center;gap:9px}
#view-catalog .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#view-catalog .hidden{display:none !important}
#view-catalog .saved{background:var(--green) !important;border-color:var(--green) !important}

@media(max-width:900px){
  #view-catalog .stats{grid-template-columns:repeat(2,1fr)}
  #view-catalog .tiles{grid-template-columns:repeat(2,1fr)}
  #view-catalog .gridscroll{max-height:none}
  #view-catalog .toolbar{flex-wrap:wrap}
  #view-catalog .search{flex:1 1 160px}
  #view-catalog .metrics{width:100%;order:5}
  #view-catalog .drawer,#view-catalog .drawer.card{width:100vw}
}


#view-upsell .u-hero{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-end}
#view-upsell .u-big{font-size:42px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
#view-upsell .u-big .u-unit{font-size:17px;font-weight:400;color:var(--mut);margin-left:6px}
#view-upsell .u-lbl{font-size:12px;color:var(--mut);margin-bottom:6px}
#view-upsell .u-mid{font-size:22px;font-weight:600;line-height:1.15}
#view-upsell .u-arrow{color:var(--mut);margin:0 8px;font-size:15px}
#view-upsell .u-up{color:var(--grn);font-weight:600;font-size:14px;margin-left:8px}
#view-upsell table{width:100%;border-collapse:collapse;font-size:14px}
#view-upsell thead th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:500;text-align:left;padding:10px 14px;border-bottom:1px solid var(--bd);white-space:nowrap}
#view-upsell thead th.r,#view-upsell td.r{text-align:right}
#view-upsell tbody td{padding:13px 14px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
#view-upsell tbody tr:last-child td{border-bottom:0}
#view-upsell .u-name{font-weight:600}
#view-upsell .u-sub{font-size:12px;color:var(--mut);margin-top:2px}
#view-upsell .u-rate{font-weight:600}
#view-upsell .u-rate.hi{color:var(--grn)}
#view-upsell .u-rate.lo{color:var(--red)}
#view-upsell .u-none{padding:22px 14px;color:var(--mut);font-size:14px;line-height:1.5}
#view-upsell .u-note{font-size:12px;color:var(--mut);margin-top:10px;line-height:1.5}
#view-upsell details{margin-top:2px}
#view-upsell summary{cursor:pointer;font-size:13px;color:var(--mut);padding:4px 0}
#view-upsell details p{font-size:13px;color:var(--mut);line-height:1.6;margin:8px 0 0}
#view-upsell .u-scroll{overflow-x:auto}
#view-upsell .u-m{display:none;font-size:12px;color:var(--mut);margin-top:3px}
@media(max-width:640px){
  #view-upsell .u-big{font-size:34px}
  #view-upsell .u-hero{gap:22px}
  /* На вузькому екрані ключова колонка (Взяли, % / Виручка) не має ховатись за краєм:
     другорядні колонки згортаються, а їхні числа переїжджають у підпис під назвою. */
  #view-upsell .u-m{display:block}
  #view-upsell th.u-hide,#view-upsell td.u-hide{display:none}
  #view-upsell thead th{padding:9px 12px}
  #view-upsell tbody td{padding:12px}
}


/* ---- */

        /* ===== Вкладка «Замовлення» — дизайн v11-airy-cards. Усі селектори під #view-orders,
           змінні на .ovv, щоб не конфліктувати з рештою DASH_HTML. ===== */
        #view-orders .ovv{--ink:#202223;--sub:#6d7175;--faint:#9aa1a9;--line:#eceef1;--linestr:#e3e3e3;--up:#0c6b58;--down:#b42318;--panel:#fff;--seg:#f1f2f4}
        #view-orders .num{font-variant-numeric:tabular-nums}
        #view-orders .ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
        #view-orders .ov-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
        #view-orders .toprow{display:flex;align-items:stretch;gap:22px;margin-bottom:24px;flex-wrap:wrap}
        #view-orders .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1 1 460px;border-top:1px solid var(--linestr);border-bottom:1px solid var(--linestr)}
        #view-orders .kpi{padding:14px 20px 14px 0;min-width:0;position:relative}
        #view-orders .kpi + .kpi{padding-left:20px;box-shadow:inset 1px 0 0 var(--line)}
        #view-orders .kpi .kl{font-size:11px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-orders .kpi .kv{font-size:22px;font-weight:720;letter-spacing:-.03em;line-height:1;margin-top:9px}
        #view-orders .kpi.crit .kv::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);vertical-align:middle;margin-right:8px;position:relative;top:-2px}
        #view-orders .kpi .kv .u{font-size:13px;font-weight:560;letter-spacing:0;color:var(--sub)}
        #view-orders .tacts{display:flex;align-items:center;gap:10px}
        #view-orders .datebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linestr);background:var(--panel);color:var(--ink);font-size:13px;font-weight:560;padding:9px 14px;border-radius:9px;white-space:nowrap;cursor:pointer;font-family:inherit}
        #view-orders .datebtn:hover{border-color:#c9cccf}
        #view-orders .datebtn .ic{color:var(--sub);font-size:13px}
        #view-orders .datebtn .mut{color:var(--faint);font-size:11px}
        #view-orders .add{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;box-sizing:border-box;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:0 18px;font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;font-family:inherit}
        #view-orders .add:active{transform:scale(.97)}
        #view-orders .body{display:block}
        #view-orders .rail{position:sticky;top:14px;min-width:0}
        #view-orders .railtop{display:flex;gap:8px;margin-bottom:16px}
        #view-orders .rall{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--linestr);background:var(--seg);color:var(--ink);font-size:12.5px;font-weight:600;padding:8px 0;border-radius:8px;cursor:pointer;font-family:inherit}
        #view-orders .rall.on{background:var(--ink);color:#fff}
        #view-orders .rreset{width:34px;flex:none;border:1px solid var(--linestr);background:var(--panel);color:var(--sub);border-radius:8px;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit}
        #view-orders .rreset:hover{border-color:#c9cccf;color:var(--ink)}
        #view-orders .rsec{font-size:11px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 8px}
        #view-orders .rgrid>div>.rsec:first-child{margin-top:0}
        #view-orders .opt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;font-weight:520;color:var(--ink);cursor:pointer}
        #view-orders .opt input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid var(--linestr);border-radius:4px;flex:none;position:relative;cursor:pointer;margin:0}
        #view-orders .opt input:checked{background:var(--ink);border-color:var(--ink)}
        #view-orders .opt input:checked::after{content:"";position:absolute;left:50%;top:46%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
        #view-orders .opt .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
        #view-orders .opt .c{margin-left:auto;color:var(--faint);font-size:12px;font-weight:560;padding-left:8px}
        #view-orders .mtool{display:flex;align-items:center;gap:10px;margin-bottom:16px;position:relative;flex-wrap:wrap}
        #view-orders .search{display:inline-flex;align-items:center;gap:10px;height:40px;box-sizing:border-box;border:1px solid var(--linestr);background:var(--panel);border-radius:999px;padding:0 20px;flex:1 1 220px;min-width:0}
        #view-orders .search .sic{color:var(--sub);font-size:22px;line-height:1;flex:none}
        #view-orders .search input{border:0;outline:0;font:inherit;font-size:13.5px;background:transparent;width:100%;height:24px;line-height:24px;padding:0;color:var(--ink)}
        #view-orders .search input::placeholder{color:var(--faint)}
        #view-orders .chips{display:inline-flex;background:var(--seg);border-radius:999px;padding:3px;gap:2px}
        #view-orders .chip{border:0;background:transparent;color:var(--sub);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;white-space:nowrap;cursor:pointer;font-family:inherit}
        #view-orders .chip.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(11,13,16,.10)}
        #view-orders .ovcount{color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap}
        #view-orders .ovcount.selcnt{color:#0c6b58;font-weight:700}
        /* B8-8: чіпи активних фільтрів біля пошуку (клік по ✕ знімає фільтр) */
        #view-orders .ovactf{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
        #view-orders .ovaf{display:inline-flex;align-items:center;gap:5px;background:var(--seg);border:1px solid var(--linestr);border-radius:999px;padding:3px 4px 3px 11px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
        #view-orders .ovaf .ovaft{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-orders .ovaf .ovafx{width:18px;height:18px;border:0;border-radius:50%;background:transparent;color:var(--down);font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
        #view-orders .ovaf .ovafx:hover{background:var(--down);color:#fff}
        /* db-10: вертикальний розділювач між лічильником/дiями і між сегментом/статусами */
        #view-orders .ovdiv{width:1px;align-self:stretch;min-height:22px;background:var(--linestr);margin:0 4px;flex:none}
        /* Виділення = чекбокс-тогл у верхньому ряду (замість кнопки «Виділити») */
        #view-orders .ovselcb{display:inline-flex;align-items:center;gap:8px;height:40px;box-sizing:border-box;padding:0 14px;border:1px solid var(--linestr);background:var(--panel);border-radius:10px;font-size:12.5px;font-weight:560;color:var(--ink);cursor:pointer;white-space:nowrap;user-select:none}
        #view-orders .ovselcb:hover{border-color:#c9cccf}
        #view-orders .ovselcb.on{border-color:var(--ink);background:#f3f7ff}
        #view-orders .ovselcb input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--bd2);border-radius:4px;flex:none;position:relative;cursor:pointer;margin:0}
        #view-orders .ovselcb input:checked{background:var(--ink);border-color:var(--ink)}
        #view-orders .ovselcb input:checked::after{content:"";position:absolute;left:50%;top:46%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
        /* db-10: фільтр-ярус під верхнім рядом — період-сегмент + статус-пілі в ОДНОМУ ряду. nowrap + пілі flex:1 1 0 (скролюються всередині), шестерня пришпилена праворуч і завжди видима */
        #view-orders .ovfbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin:0 0 14px;padding-top:16px;border-top:1px solid var(--line)}
        #view-orders .ovfbar .ovtabswrap{flex:1 1 0;min-width:0;margin:0;overflow:hidden}
        #view-orders .ovfbar .ovtabgear{margin-left:0}
        #view-orders .cols{display:inline-flex;align-items:center;gap:7px;height:40px;box-sizing:border-box;border:1px solid var(--linestr);background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:560;padding:0 14px;border-radius:10px;white-space:nowrap;cursor:pointer;font-family:inherit}
        #view-orders .cols .cv{color:var(--faint);font-size:11px}
        #view-orders .cols:hover{border-color:#c9cccf}
        /* Batch-10 W: активний стан кнопки «Колонки» поки попап відкритий */
        #view-orders .cols.on{border-color:var(--ink);background:var(--seg)}
        #view-orders .cols.on .cv{color:var(--ink)}
        #view-orders select.ovsortsel{-webkit-appearance:none;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa1a9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
        #view-orders .colpop{display:none;position:absolute;right:0;top:calc(100% + 8px);width:232px;max-width:calc(100vw - 30px);background:var(--panel);border:1px solid var(--linestr);border-radius:12px;box-shadow:0 10px 30px rgba(11,13,16,.10);padding:12px 14px 14px;z-index:5}
        #view-orders .colpop.open{display:block}
        #view-orders .colpop .pt{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin:12px 0 4px}
        #view-orders .colpop .pt:first-child{margin-top:0}
        #view-orders .colopt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;font-weight:520;cursor:pointer}
        #view-orders .colopt input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid var(--linestr);border-radius:4px;flex:none;position:relative;cursor:pointer;margin:0}
        #view-orders .colopt input:checked{background:var(--ink);border-color:var(--ink)}
        #view-orders .colopt input:checked::after{content:"";position:absolute;left:50%;top:46%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
        #view-orders .colopt.base{color:var(--sub)}
        #view-orders .colopt.base input{background:var(--seg);border-color:var(--linestr)}
        #view-orders .colopt.base input:checked{background:#c3c6ca;border-color:#c3c6ca}
        #view-orders .colopt .lk{margin-left:auto;color:var(--faint);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-orders .otwrap{--otpl:62px minmax(0,1.5fr) 112px 74px 148px 104px 92px minmax(0,1.4fr) 44px 96px}
        /* Канон BI 3.4: таблиця списку прокручується горизонтально ВСЕРЕДИНІ своєї картки (#ot), сторінка без гориз. overflow.
           --otmin = мінімальна ширина сітки рядка (сума колонок+гепи+паддінги), рахується в otRender(); тримає крайню колонку «Стать» досяжною. */
        #view-orders #ot{overflow-x:auto}
        #view-orders .day{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:18px;box-shadow:0 1px 2px rgba(11,13,16,.04);min-width:var(--otmin,0)}
        #view-orders .dayhd{display:flex;align-items:baseline;gap:11px;padding:16px 20px 13px;box-shadow:inset 0 -1px 0 var(--line)}
        #view-orders .dayhd .d{font-size:15px;font-weight:660;letter-spacing:-.01em}
        #view-orders .dayhd .n{font-size:12px;color:var(--faint);font-weight:540}
        #view-orders .dayhd .s{margin-left:auto;font-size:12.5px;color:var(--sub);font-weight:600}
        #view-orders .thead,#view-orders .row{display:grid;grid-template-columns:var(--otpl);gap:10px;align-items:center;padding-left:20px;padding-right:20px}
        #view-orders .thead{padding-top:12px;padding-bottom:10px;box-shadow:inset 0 -1px 0 var(--line);background:#fcfcfd}
        #view-orders .thead span{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-orders .thead .r{text-align:right}
        /* L2: сортування кліком по заголовку колонки (замість дропдауна). Реєстр: sort-by-column-header-not-dropdown. */
        #view-orders .thead .ovth{cursor:pointer;user-select:none;transition:color .12s}
        #view-orders .thead .ovth:hover{color:var(--sub)}
        #view-orders .thead .ovth.on{color:var(--ink)}
        #view-orders .thead .ovsar{font-size:8px;margin-left:3px;letter-spacing:0}
        #view-orders .thead .ovth-info{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1;overflow:visible}
        #view-orders .thead .ovth-info .ovth-main{font-size:10.5px;font-weight:640;text-transform:uppercase;letter-spacing:.04em}
        #view-orders .thead .ovth-info .ovth-sub{font-size:8.5px;font-weight:600;color:var(--faint);text-transform:none;letter-spacing:0}
        #view-orders .thead .ovth-info.on .ovth-main{color:var(--ink)}
        /* L1: РІВНА висота рядків незалежно від вмісту. Фіксована height + overflow:hidden клампує будь-яку
           «важку» комірку (порожня стать «·» у fallback-шрифті давала line-height≈83px і роздувала рядок до 111px).
           line-height явний, щоб метрики резервного шрифта не інфлейтили рядок. Реєстр: list-rows-equal-height. */
        #view-orders .row{padding-top:14px;padding-bottom:14px;box-shadow:inset 0 -1px 0 var(--line);cursor:pointer;background:var(--rowtint,transparent);height:60px;box-sizing:border-box;overflow:hidden;line-height:1.35}
        #view-orders .row:last-child{box-shadow:none}
        #view-orders .row:hover{filter:brightness(.975)}
        #view-orders .cid{font-size:12px;color:var(--sub);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-orders .ctime{font-size:11px;color:var(--faint);font-weight:540;margin-top:3px}
        #view-orders .cli{min-width:0}
        #view-orders .cli .nm{font-size:13.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
        #view-orders .cli .nm .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
        #view-orders .cli .sub{font-size:11.5px;color:var(--sub);font-weight:500;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:8px;align-items:center}
        #view-orders .phone{font-size:13px;color:var(--ink);font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-orders .chk{font-size:14.5px;font-weight:720;letter-spacing:-.02em;text-align:center}
        #view-orders .pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:560;padding:4px 11px;border-radius:999px;white-space:nowrap;max-width:100%}
        #view-orders .pill .pd{width:6px;height:6px;border-radius:50%;flex:none}
        #view-orders .pill .pt{overflow:hidden;text-overflow:ellipsis}
        #view-orders .pill.neutral{background:var(--seg);color:var(--sub)} #view-orders .pill.neutral .pd{background:var(--faint)}
        #view-orders .pill.crit{background:var(--ink);color:#fff} #view-orders .pill.crit .pd{background:#fff}
        #view-orders .pill.ok{background:#e3f1ec;color:var(--up)} #view-orders .pill.ok .pd{background:var(--up)}
        #view-orders .pill.bad{background:#fdecea;color:var(--down)} #view-orders .pill.bad .pd{background:var(--down)}
        #view-orders .pill.wait{background:#fdefd9;color:#9a5b00} #view-orders .pill.wait .pd{background:#e0912a}
        #view-orders .csite{display:flex;align-items:center;min-width:0}
        #view-orders .ovclick{cursor:pointer}
        #view-orders .src.ovclick:hover,#view-orders .csite.ovclick:hover{opacity:.72}
        #view-orders .sbadge{display:inline-block;max-width:100%;padding:3px 9px;border-radius:7px;font-size:12px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-orders .pill.pillbtn{border:0;cursor:pointer;font:inherit;transition:filter .12s}
        #view-orders .pill.pillbtn:hover{filter:brightness(.97)}
        #view-orders .pill .pcar{font-size:9px;opacity:.6;margin-left:1px}
        #view-orders .ovbx{display:flex;align-items:center;justify-content:center}
        #view-orders .ovbx input{width:16px;height:16px;cursor:pointer;accent-color:var(--ink)}
        #view-orders .row.rowsel{background:#f3f7ff}
        /* Масові дії над виділеними: світла канон-панель (перемістити в статус / архівувати / готово) */
        #view-orders .ovbulk{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;background:var(--panel);border:1px solid var(--linestr);color:var(--ink);border-radius:12px;box-shadow:0 1px 2px rgba(11,13,16,.04);position:sticky;top:56px;z-index:9;flex-wrap:wrap}
        #view-orders .ovbulk[hidden]{display:none}
        #view-orders .ovbulk .ovbsp{flex:1 1 auto}
        #view-orders .ovtabswrap{margin:0 0 14px}
        #view-orders .ovtabs{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px}
        #view-orders .ovtabs::-webkit-scrollbar{height:6px}
        #view-orders .ovtabs::-webkit-scrollbar-thumb{background:#e3e3e3;border-radius:999px}
        #view-orders .ovtab{flex:none}
        #view-orders .ovtabset{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:9px;border:1px solid var(--linestr);background:var(--panel);color:var(--sub);cursor:pointer;font-size:12.5px;font-weight:560;font-family:inherit;white-space:nowrap}
        #view-orders .ovtabset:hover{border-color:var(--ink);color:var(--ink)}
        #view-orders .ovtab{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--linestr);background:var(--panel);font-size:12.5px;font-weight:560;color:var(--sub);cursor:pointer;transition:border-color .12s,box-shadow .12s}
        #view-orders .ovtab:hover{border-color:var(--ink)}
        #view-orders .ovtab.on{box-shadow:0 0 0 2px var(--ink) inset;color:var(--ink)}
        #view-orders .ovtab.stcustom.on{box-shadow:0 0 0 2px rgba(0,0,0,.28) inset}
        #view-orders .ovtab .ovtd{width:7px;height:7px;border-radius:50%;flex:none}
        #view-orders .ovtab .ovtc{font-variant-numeric:tabular-nums;font-weight:700;opacity:.85;margin-left:2px}
        #view-orders .ovtaball .ovtc{margin-left:6px}
        #view-orders .ovtabgear{margin-left:auto;flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--linestr);background:var(--panel);color:var(--sub);cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
        #view-orders .ovtabgear:hover{border-color:var(--ink);color:var(--ink)}
        #view-orders .ovtabpop{display:none;position:absolute;right:0;top:calc(100% + 6px);width:280px;max-width:calc(100vw - 30px);background:var(--panel);border:1px solid var(--linestr);border-radius:12px;box-shadow:0 10px 30px rgba(11,13,16,.10);padding:10px 12px 12px;z-index:6}
        #view-orders .ovtabpop.open{display:block}
        #view-orders .ovtabpt{font-size:10.5px;font-weight:640;color:var(--faint);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
        #view-orders .ovtabopt{display:flex;align-items:center;gap:8px;padding:6px 2px;border-radius:8px}
        #view-orders .ovtabopt[draggable=true]{cursor:grab}
        #view-orders .ovtabopt.ovdragging{opacity:.45;background:#f4f5f7}
        #view-orders .ovtabgrip{flex:none;width:14px;text-align:center;color:var(--faint);font-size:13px;line-height:1;cursor:grab;user-select:none}
        #view-orders .ovtabopt.ovdragging .ovtabgrip{cursor:grabbing}
        #view-orders .ovtabopt .ovtd{width:8px;height:8px;border-radius:50%;flex:none}
        #view-orders .ovtabnm{flex:1;min-width:0;font-size:13px}
        #view-orders .ovtabmv{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--linestr);color:var(--sub);cursor:pointer;font-size:12px;flex:none}
        #view-orders .ovtabmv.off{opacity:.3;pointer-events:none}
        #view-orders .ovtabsw{width:34px;height:20px;border-radius:999px;background:#d7d9dd;position:relative;cursor:pointer;flex:none;transition:background .15s}
        #view-orders .ovtabsw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
        #view-orders .ovtabsw.on{background:#157347}
        #view-orders .ovtabsw.on::after{left:16px}
        #view-orders .ovbulk .ovbn{font-weight:700;font-size:13.5px;white-space:nowrap}
        #view-orders .ovbulk .ovblbl{color:var(--faint);font-size:12.5px;font-weight:560;white-space:nowrap}
        #view-orders .ovbulk .ovbsel{-webkit-appearance:none;appearance:none;font:inherit;font-size:13px;font-weight:560;padding:8px 30px 8px 12px;border-radius:9px;border:1px solid var(--linestr);background-color:var(--panel);color:var(--ink);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa1a9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
        #view-orders .ovbulk .ovbsel:hover{border-color:#c9cccf}
        #view-orders .ovbulk .ovbsel:disabled{opacity:.5;cursor:default}
        #view-orders .ovbulk .ovbarch{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:560;padding:8px 13px;border-radius:9px;border:1px solid var(--linestr);background:var(--panel);color:var(--ink);cursor:pointer}
        #view-orders .ovbulk .ovbarch i{font-size:16px;color:var(--sub)}
        #view-orders .ovbulk .ovbarch:hover{border-color:#c9cccf}
        #view-orders .ovbulk .ovbarch:disabled{opacity:.5;cursor:default}
        #view-orders .ovbulk .ovbclr{font:inherit;font-size:13px;font-weight:560;padding:8px 12px;border-radius:9px;border:1px solid var(--linestr);background:var(--panel);color:var(--sub);cursor:pointer}
        #view-orders .ovbulk .ovbclr:hover{color:var(--ink);border-color:#c9cccf}
        .ovstmenu{position:absolute;z-index:1000;min-width:212px;max-width:260px;background:#fff;border:1px solid var(--bd,#e7e7e9);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:6px;max-height:60vh;overflow:auto}
        .ovstmenu .ovsti{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;cursor:pointer;color:#1e2022}
        .ovstmenu .ovsti:hover{background:#f4f5f7}
        .ovstmenu .ovsti.cur{font-weight:600}
        .ovstmenu .ovsti .ovstt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .ovstmenu .ovsti .ck{color:#0c6b58;font-weight:700}
        .ovstmenu .pd{width:8px;height:8px;border-radius:50%;flex:none;background:#9aa1a9}
        .ovstmenu .pd.ok{background:#0c6b58}.ovstmenu .pd.wait{background:#e0912a}.ovstmenu .pd.bad{background:#b42318}.ovstmenu .pd.neutral{background:#9aa1a9}
        .ovtoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:#1e2022;color:#fff;font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:2000;max-width:80vw}
        .ovtoast.show{opacity:1;transform:translate(-50%,0)}
        .ovtoast.bad{background:#b42318}
        #view-orders .src{font-size:12.5px;color:var(--sub);font-weight:540;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-orders .path{font-size:11px;letter-spacing:-.01em;color:var(--sub);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-orders .path.empty{color:var(--faint)}
        #view-orders .sex{font-size:12.5px;line-height:1.2;color:var(--sub);font-weight:560;text-align:center}
        #view-orders .sex.empty{color:var(--faint)}
        /* A2: ОПЛАТА окремим бейджем (окремо від робочого статусу). A3: числові — праворуч, текст/бейдж — ліворуч, усе по центру рядка. */
        #view-orders .paycell{min-width:0;display:flex;align-items:center}
        #view-orders .paybdg{display:inline-block;max-width:100%;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-orders .paybdg.pb-paid{background:#e3f1ec;color:var(--up)}
        /* Batch-10 X: передплата = ОПЛАЧЕНА передплата → зелений (як «оплачено»), не бурштин */
        #view-orders .paybdg.pb-prepaid{background:#e3f1ec;color:var(--up)}
        #view-orders .paybdg.pb-unpaid{background:var(--seg);color:var(--faint)}
        /* Інлайн-дропдаун ОПЛАТА: бейдж стає клікабельною пігулкою (той самий патерн, що статус-піла). */
        #view-orders .paybdg.paybtn{display:inline-flex;align-items:center;gap:4px;border:0;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;transition:filter .12s}
        /* Batch-10 X: коли є обраний метод — бейдж стає у 2 рядки (статус + дрібно метод) */
        #view-orders .paybdg.paybtn.hasm{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15}
        #view-orders .paybdg.paybtn .pbtop{display:inline-flex;align-items:center;gap:4px}
        /* batch12: канал (WFP/ФОП) = маленький бордер-тег під станом оплати, читабельний, не мікротекст */
        #view-orders .paybdg.paybtn .pbm{display:inline-block;padding:0 5px;border-radius:5px;border:1px solid var(--bd2,#c9cccf);background:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1.55;color:#5b616a;opacity:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-orders .paybdg.paybtn .pbm.pbm-wfp{color:#0c6b58;border-color:#bfe0d5;background:#f2f9f6}
        #view-orders .paybdg.paybtn:hover{filter:brightness(.97)}
        #view-orders .paybdg.paybtn .pcar{font-size:9px;opacity:.6;margin-left:1px}
        .ovstmenu .ovpaysep{height:1px;background:var(--bd,#e7e7e9);margin:5px 6px}
        /* Batch-10 X: заголовок секції в інлайн-меню оплати (Спосіб / Статус) */
        .ovstmenu .ovsth{font-size:10px;color:#9aa1a9;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:6px 10px 3px}
        .ovstmenu .ovsth:first-child{padding-top:2px}
        /* batch11 D: інлайн-toggle «Оплачено» у меню оплати списку */
        .ovstmenu .ovsti.ovpaytog{justify-content:space-between}
        .ovstmenu .ovtogsw{width:34px;height:20px;border-radius:999px;background:#d6d9dc;position:relative;flex:none;transition:background .18s}
        .ovstmenu .ovtogsw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .18s}
        .ovstmenu .ovtogsw.on{background:#0c6b58}
        .ovstmenu .ovtogsw.on::after{left:16px}
        .ovstmenu .ovsti.ovpaytog.ovdis{opacity:.5;cursor:not-allowed}
        .ovstmenu .ovpayhint{font-size:11px;color:#9aa1a9;padding:1px 10px 5px;line-height:1.35}
        /* A3: хедер числової колонки праворуч (як клітинка Чек) */
        #view-orders .thead .ovth.r,#view-orders .thead span.r{text-align:right}
        /* B7-4: центрування колонок від «Чек» і далі (хедер + клітинки); Інфо/Клієнт/Телефон ліворуч. */
        #view-orders .thead .ovth.c,#view-orders .thead span.c{text-align:center}
        #view-orders .thead .ovth.c{justify-self:center}
        #view-orders .rstat{display:flex;align-items:center;justify-content:center;min-width:0}
        #view-orders .paycell{justify-content:center}
        #view-orders .csite{justify-content:center}
        #view-orders .cpath{display:flex;align-items:center;justify-content:center;min-width:0}
        #view-orders .csex{display:flex;align-items:center;justify-content:center}
        #view-orders .src{text-align:center}
        #view-orders .acts{display:flex;align-items:center;gap:6px;justify-content:flex-end}
        #view-orders .act{width:30px;height:30px;flex:none;border:1px solid var(--linestr);background:var(--panel);border-radius:8px;color:var(--sub);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit}
        #view-orders .act:hover{border-color:#c9cccf;color:var(--ink)}
        #view-orders .otempty{padding:34px 20px;text-align:center;color:var(--faint);font-size:13px}
        @media(max-width:1160px){
          #view-orders .body{grid-template-columns:1fr;gap:22px}
          #view-orders .rail{position:static}
          #view-orders .rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
        }
        @media(max-width:760px){
          #view-orders .toprow{gap:16px}
          #view-orders .metrics{grid-template-columns:repeat(2,1fr)}
          #view-orders .kpi{padding:14px 16px 14px 0}
          #view-orders .kpi:nth-child(odd){box-shadow:none;padding-left:0}
          #view-orders .kpi:nth-child(even){padding-left:16px;box-shadow:inset 1px 0 0 var(--line)}
          #view-orders .kpi:nth-child(3),#view-orders .kpi:nth-child(4){border-top:1px solid var(--line)}
          #view-orders .search{flex:1 1 100%}
          #view-orders .thead{display:none}
          #view-orders #ot{overflow-x:visible}
          #view-orders .day{min-width:0}
          #view-orders .dayhd{padding-left:16px;padding-right:16px}
          #view-orders .row{grid-template-columns:1fr auto!important;gap:7px 12px;padding:14px 16px;height:auto;overflow:visible}
          #view-orders .cid-wrap{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:10px}
          #view-orders .cid-wrap .ctime{margin-top:0}
          #view-orders .acts{grid-column:2;grid-row:1}
          #view-orders .cli{grid-column:1/-1;grid-row:2}
          #view-orders .phone{grid-column:1;grid-row:3;align-self:center}
          #view-orders .chk{grid-column:2;grid-row:3}
          #view-orders .rstat{grid-column:1;grid-row:4;align-self:center}
          #view-orders .src{grid-column:2;grid-row:4;text-align:right;align-self:center}
          #view-orders .cpath{grid-column:1/-1;grid-row:5}
          #view-orders .csex{grid-column:1/-1;grid-row:6}
          #view-orders .csex .sex{text-align:left}
          #view-orders .rgrid{grid-template-columns:1fr}
        }
        
/* ---- */

#view-marketing .mkt-subnav{display:inline-flex;background:var(--seg,#eef0f2);border-radius:12px;padding:3px;gap:2px;margin-bottom:16px}
#view-marketing .mkt-subnav button{border:0;background:transparent;color:var(--mut);font-size:13px;font-weight:580;padding:8px 18px;border-radius:9px;cursor:pointer;font-family:inherit;transition:color .15s,background .15s}
#view-marketing .mkt-subnav button.on{background:#fff;color:var(--tx);box-shadow:0 1px 2px rgba(11,13,16,.10);font-weight:620}
#view-marketing .mkt-pane{display:none}
#view-marketing .mkt-pane.on{display:block}
@media(max-width:560px){#view-marketing .mkt-subnav{display:flex;width:100%;box-sizing:border-box}#view-marketing .mkt-subnav button{flex:1;padding:8px 4px;font-size:12px}}

/* ---- */

#mkt-promo{max-width:1180px}
#mkt-promo *{box-sizing:border-box}

/* ── 1. KPI ряд (весь час, дата-щільний, left-aligned) ── */
#mkt-promo .mp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:760px;margin-bottom:18px}
#mkt-promo .mp-kc{background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:14px 16px}
#mkt-promo .mp-kc .l{color:#6d7175;font-size:13px}
#mkt-promo .mp-kc .v{font-size:24px;font-weight:600;margin-top:7px;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums}
#mkt-promo .mp-kc .v .u{font-size:13px;font-weight:500;color:#6d7175;margin-left:4px;letter-spacing:0}

/* ── 2. Панель керування: дропдаун + пошук + кнопка ── */
#mkt-promo .mp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
#mkt-promo .mp-search{position:relative;flex:1;min-width:180px;max-width:280px}
#mkt-promo .mp-search input{width:100%;border:1px solid #c9cccf;background:#fff;color:#202223;border-radius:9px;padding:9px 12px 9px 34px;font-family:inherit;font-size:13px;outline:0;transition:border-color .15s}
#mkt-promo .mp-search input:focus{border-color:#b7bbbf}
#mkt-promo .mp-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#9aa1a9;font-size:16px}
#mkt-promo .mp-count{color:#6d7175;font-size:13px;font-variant-numeric:tabular-nums;margin-left:auto}
/* .mp-bar prefix: піднімає специфічність над шелловим #view-marketing .s2 button{color:inherit} */
#mkt-promo .mp-bar .mp-btnnew{background:#202223;color:#fff;border:1px solid #202223;border-radius:9px;padding:9px 15px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
#mkt-promo .mp-bar .mp-btnnew:hover{background:#000}

/* Кастом-дропдаун «усі сайти» (кнопка + шеврон + меню з галочкою, портал fixed) */
#mkt-promo .mp-dd{position:relative}
#mkt-promo .mp-dd-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #c9cccf;border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit;font-size:13px;color:#202223;min-width:148px}
#mkt-promo .mp-dd-btn:hover{border-color:#b7bbbf}
#mkt-promo .mp-dd.open .mp-dd-btn{border-color:#b7bbbf;background:#fbfbfb}
#mkt-promo .mp-dd-btn .lbl{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mkt-promo .mp-dd-btn .car{flex:none;width:7px;height:7px;margin-left:2px;border-right:1.7px solid #6d7175;border-bottom:1.7px solid #6d7175;transform:rotate(45deg);transition:transform .18s}
#mkt-promo .mp-dd.open .mp-dd-btn .car{transform:rotate(-135deg)}
#mkt-promo .mp-dd-menu{position:fixed;z-index:600;background:#fff;border:1px solid #e3e3e3;border-radius:10px;box-shadow:0 10px 30px rgba(11,13,16,.14);padding:5px;display:none;min-width:172px}
#mkt-promo .mp-dd-menu.show{display:block}
#mkt-promo .mp-dd-o{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:#202223;font:500 13.5px/1.2 inherit;padding:9px 10px;border-radius:7px;cursor:pointer}
#mkt-promo .mp-dd-o:hover{background:#eef0f2}
#mkt-promo .mp-dd-o.on{font-weight:600}
#mkt-promo .mp-dd-o .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mkt-promo .mp-dd-o .chk{flex:none;color:#0c8b6c;font-size:13px;line-height:1;opacity:0}
#mkt-promo .mp-dd-o.on .chk{opacity:1}

/* ── 3. Таблиця (виміряна ширина, числа по центру, без мікротексту-домену) ── */
#mkt-promo .mp-tablecard{background:#fff;border:1px solid #e3e3e3;border-radius:12px;overflow:hidden}
#mkt-promo .mp-tscroll{overflow-x:auto}
#mkt-promo table.mp-t{width:100%;min-width:1002px;border-collapse:collapse;table-layout:fixed;font-size:13px}
#mkt-promo .mp-t th,#mkt-promo .mp-t td{padding:11px 10px;border-bottom:1px solid #f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#mkt-promo .mp-t th{color:#6d7175;font-weight:500;font-size:12px}
#mkt-promo .mp-t tbody tr:last-child td{border-bottom:0}
#mkt-promo .mp-t tbody tr.clk{cursor:pointer}
#mkt-promo .mp-t tbody tr.clk:hover{background:#fafbfc}
/* Ширини колонок: Код гнучкий (ліворуч), решта фіксовані */
#mkt-promo .mp-t th:nth-child(1),#mkt-promo .mp-t td:nth-child(1){width:44px;padding-left:14px;padding-right:0}
#mkt-promo .mp-t th:nth-child(2),#mkt-promo .mp-t td:nth-child(2){text-align:left}
#mkt-promo .mp-t th:nth-child(2),#mkt-promo .mp-t td:nth-child(2){width:118px;overflow:visible;text-overflow:clip}
#mkt-promo .mp-t th:nth-child(3),#mkt-promo .mp-t td:nth-child(3){width:88px}
#mkt-promo .mp-t th:nth-child(4),#mkt-promo .mp-t td:nth-child(4){width:110px}
#mkt-promo .mp-t th:nth-child(5),#mkt-promo .mp-t td:nth-child(5){width:106px}
#mkt-promo .mp-t th:nth-child(6),#mkt-promo .mp-t td:nth-child(6){width:96px;overflow:visible}
#mkt-promo .mp-t th:nth-child(7),#mkt-promo .mp-t td:nth-child(7){width:102px}
#mkt-promo .mp-t th:nth-child(8),#mkt-promo .mp-t td:nth-child(8){width:122px}
#mkt-promo .mp-t th:nth-child(9),#mkt-promo .mp-t td:nth-child(9){width:98px}
/* Дії (Змінити): без ellipsis/clip — інакше кнопка ледь ширша за клітинку і text-overflow малює
   артефакт-крапки «‥» на краю картки. overflow:visible + clip прибирають глиф, ширина вміщає кнопку. */
#mkt-promo .mp-t th:nth-child(10),#mkt-promo .mp-t td:nth-child(10){width:100px;padding-right:14px;overflow:visible;text-overflow:clip}
#mkt-promo .mp-t td.num{font-variant-numeric:tabular-nums}
#mkt-promo .mp-code{font-weight:600;font-size:13.5px;letter-spacing:.1px;-webkit-user-select:all;user-select:all}
#mkt-promo .mp-t tr.off td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(6)){opacity:.5}
#mkt-promo .mp-dash{color:#c2c5c8}
#mkt-promo .mp-edit{border:1px solid #c9cccf;background:#fff;color:#202223;border-radius:8px;padding:6px 12px;font-family:inherit;font-size:12.5px;cursor:pointer}
#mkt-promo .mp-edit:hover{border-color:#9aa1a9}

/* Тумблер активності (канон .tgl, скоуплений) */
#mkt-promo .mp-tgl{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer;vertical-align:middle}
#mkt-promo .mp-tgl input{position:absolute;opacity:0;width:0;height:0}
#mkt-promo .mp-tgl .sl{position:absolute;inset:0;background:#d0d3d6;border-radius:20px;transition:background .18s}
#mkt-promo .mp-tgl .sl:before{content:"";position:absolute;width:15px;height:15px;left:3px;top:2.5px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
#mkt-promo .mp-tgl input:checked+.sl{background:#0c8b6c}
#mkt-promo .mp-tgl input:checked+.sl:before{transform:translateX(16px)}

/* Статус-пілі (реальні системні кольори з status_defs) */
#mkt-promo .mp-st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
#mkt-promo .mp-st .pd{width:6px;height:6px;border-radius:50%;flex:none}
#mkt-promo .mp-st.ok{background:#e3f1ec;color:#0c6b58} #mkt-promo .mp-st.ok .pd{background:#0c6b58}
#mkt-promo .mp-st.bad{background:#fce9e6;color:#b42318} #mkt-promo .mp-st.bad .pd{background:#b42318}
#mkt-promo .mp-st.warn{background:#fdf3e0;color:#9a6a00} #mkt-promo .mp-st.warn .pd{background:#9a6a00}
#mkt-promo .mp-st.purple{background:#efe9f7;color:#6a3fb0} #mkt-promo .mp-st.purple .pd{background:#6a3fb0}
#mkt-promo .mp-st.slate{background:#e8eef5;color:#4a6580} #mkt-promo .mp-st.slate .pd{background:#4a6580}
#mkt-promo .mp-st.neutral{background:#f1f2f4;color:#6d7175} #mkt-promo .mp-st.neutral .pd{background:#9aa1a9}

/* ── Деталь коду (drawer) ── */
#mkt-promo .mp-drawer{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:1200}
#mkt-promo .mp-drawer.show{display:block}
#mkt-promo .mp-sheet{position:absolute;right:0;top:0;height:100%;width:440px;max-width:94vw;background:#fff;border-left:1px solid #e3e3e3;padding:22px 24px;overflow-y:auto}
#mkt-promo .mp-sheet .mp-x,#mkt-promo .mp-modal .mp-x{position:absolute;right:16px;top:16px;width:32px;height:32px;border:1px solid #e2e5e9;background:#fff;border-radius:9px;color:#6d7175;font-size:16px;cursor:pointer}
#mkt-promo .mp-sheet .mp-x:hover,#mkt-promo .mp-modal .mp-x:hover{border-color:#c9cccf;color:#202223}
#mkt-promo .mp-modal .mp-x{position:static}
#mkt-promo .mp-dh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 40px 4px 0}
#mkt-promo .mp-dh .dcode{font-size:22px;font-weight:700;letter-spacing:.2px;-webkit-user-select:all;user-select:all}
#mkt-promo .mp-dmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
#mkt-promo .mp-tag{font-size:11.5px;font-weight:560;color:#6d7175;background:#f1f2f4;border-radius:6px;padding:3px 9px}
#mkt-promo .mp-dkpi{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid #eceef1;border-radius:12px;overflow:hidden;margin-bottom:18px}
#mkt-promo .mp-dkpi .c{padding:13px 14px;box-shadow:inset 0 -1px 0 #eceef1,inset -1px 0 0 #eceef1}
#mkt-promo .mp-dkpi .c:nth-child(2n){box-shadow:inset 0 -1px 0 #eceef1}
#mkt-promo .mp-dkpi .c:nth-last-child(-n+2){box-shadow:inset -1px 0 0 #eceef1}
#mkt-promo .mp-dkpi .c:nth-child(2n):nth-last-child(-n+2),#mkt-promo .mp-dkpi .c:last-child{box-shadow:none}
#mkt-promo .mp-dkpi .c .k{font-size:11px;color:#9aa1a9;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
#mkt-promo .mp-dkpi .c .val{font-size:19px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums}
#mkt-promo .mp-dkpi .c .val .u{font-size:12px;color:#6d7175;font-weight:500;margin-left:3px}
#mkt-promo .mp-sec{font-size:13px;font-weight:600;margin:0 0 12px}
/* Моно-графік series (трек #d7dade, філл #202223, не зелений) */
#mkt-promo .mp-chart{display:flex;align-items:flex-end;gap:4px;height:118px;margin-bottom:6px}
#mkt-promo .mp-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
#mkt-promo .mp-col .trk{width:100%;max-width:16px;background:#d7dade;border-radius:4px 4px 0 0;display:flex;align-items:flex-end;overflow:hidden;height:100%}
#mkt-promo .mp-col .fil{width:100%;background:#202223;border-radius:4px 4px 0 0;min-height:2px}
#mkt-promo .mp-xax{display:flex;gap:4px;margin-bottom:22px}
#mkt-promo .mp-xax span{flex:1;text-align:center;font-size:10px;color:#9aa1a9;font-variant-numeric:tabular-nums}
#mkt-promo .mp-red{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f0f0f0}
#mkt-promo .mp-red:last-child{border-bottom:0}
#mkt-promo .mp-red .rn{flex:1;min-width:0;font-size:13.5px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mkt-promo .mp-red .rs{flex:none;text-align:right;font-variant-numeric:tabular-nums}
#mkt-promo .mp-red .rs .t{font-size:13.5px;font-weight:600}
#mkt-promo .mp-red .rs .g{font-size:11.5px;color:#b42318;margin-top:2px}
#mkt-promo .mp-red .rst{flex:none}
#mkt-promo .mp-dact{display:flex;gap:9px;margin-top:18px}
#mkt-promo .mp-dact .b{flex:1;border-radius:10px;padding:11px 15px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:center}
#mkt-promo .mp-dact .b.pri{background:#202223;color:#fff;border:1px solid #202223}
#mkt-promo .mp-dact .b.sec{background:#fff;color:#202223;border:1px solid #e2e5e9}

/* ── Модалка «Новий промокод» (кастомна, не native) ── */
#mkt-promo .mp-mo{position:fixed;inset:0;background:rgba(20,22,24,.42);z-index:1210;display:none;align-items:flex-start;justify-content:center;padding:48px 22px;overflow:auto}
#mkt-promo .mp-mo.show{display:flex}
#mkt-promo .mp-modal{width:100%;max-width:520px;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(11,13,16,.28);overflow:hidden}
#mkt-promo .mp-mh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 16px;box-shadow:inset 0 -1px 0 #eceef1}
#mkt-promo .mp-mh .mt{font-size:17px;font-weight:700;letter-spacing:-.02em}
#mkt-promo .mp-mb{padding:18px 22px}
#mkt-promo .mp-fld{margin-bottom:14px}
#mkt-promo .mp-fld label{display:block;font-size:11px;color:#9aa1a9;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
#mkt-promo .mp-fld input,#mkt-promo .mp-fld .mp-seg{width:100%}
#mkt-promo .mp-fld input{border:1px solid #e2e5e9;background:#fff;border-radius:9px;padding:10px 13px;font-family:inherit;font-size:14px;color:#202223;outline:0}
#mkt-promo .mp-fld input:focus{border-color:#b7bbbf}
#mkt-promo .mp-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#mkt-promo .mp-seg{display:inline-flex;background:#f1f2f4;border-radius:9px;padding:3px;gap:2px}
#mkt-promo .mp-seg button{flex:1;border:0;background:transparent;color:#6d7175;font:inherit;font-size:13px;padding:8px 10px;border-radius:7px;cursor:pointer}
#mkt-promo .mp-seg button.on{background:#fff;color:#202223;font-weight:600;box-shadow:0 1px 2px rgba(11,13,16,.10)}
#mkt-promo .mp-togrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 2px}
#mkt-promo .mp-togrow .a{font-size:14px;font-weight:600}
#mkt-promo .mp-mf{display:flex;align-items:center;gap:10px;padding:14px 22px;box-shadow:inset 0 1px 0 #eceef1}
#mkt-promo .mp-mf .sp{flex:1}
#mkt-promo .mp-mbtn{border-radius:10px;padding:10px 16px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid #e2e5e9;background:#fff;color:#202223}
#mkt-promo .mp-mbtn.pri{background:#202223;color:#fff;border-color:#202223}
/* значення знижки: приховати для «безкошт. доставка» */
#mkt-promo .mp-fld.hide{display:none}
/* мультивибір сайтів (кастом-дропдаун, меню порталом position:fixed) */
#mkt-promo .mp-msd{position:relative}
#mkt-promo .mp-msd-btn{display:inline-flex;align-items:center;gap:9px;width:100%;justify-content:space-between;border:1px solid #e2e5e9;background:#fff;border-radius:9px;padding:10px 13px;cursor:pointer;font-family:inherit;font-size:14px;color:#202223}
#mkt-promo .mp-msd-btn:hover{border-color:#b7bbbf}
#mkt-promo .mp-msd-btn .lbl{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mkt-promo .mp-msd-btn .car{flex:none;width:7px;height:7px;border-right:1.7px solid #6d7175;border-bottom:1.7px solid #6d7175;transform:rotate(45deg);transition:transform .18s}
#mkt-promo .mp-msd.open .mp-msd-btn .car{transform:rotate(-135deg)}
.mp-msd-menu{position:fixed;z-index:1320;background:#fff;border:1px solid #e3e3e3;border-radius:10px;box-shadow:0 12px 34px rgba(11,13,16,.18);padding:5px;min-width:200px;max-height:260px;overflow:auto;display:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.mp-msd-menu.show{display:block}
.mp-msd-o{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:#202223;font:500 13.5px/1.2 inherit;padding:9px 10px;border-radius:7px;cursor:pointer}
.mp-msd-o:hover{background:#eef0f2}
.mp-msd-o .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-msd-o .chk{flex:none;color:#0c8b6c;font-size:13px;line-height:1;opacity:0}
.mp-msd-o.on .chk{opacity:1}
.mp-msd-o.all{box-shadow:inset 0 -1px 0 #eceef1;margin-bottom:3px;padding-bottom:11px}

@media(max-width:560px){
  #mkt-promo .mp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #mkt-promo .mp-kc{padding:12px 13px;overflow:hidden}
  #mkt-promo .mp-kc .v{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mkt-promo .mp-kc .v .u{font-size:12px;margin-left:3px}
  #mkt-promo .mp-search{max-width:none}
  #mkt-promo .mp-count{display:none}
}

/* ---- */

/* ── усі селектори скоуплено під #mkt-email ── */
#mkt-email{max-width:1180px}
#mkt-email .me-seg{margin-bottom:16px}

/* сегмент-пілі внутрішніх розділів = канон .seg (глобальний), тут лише відступ */
#mkt-email .me-sec{display:none}
#mkt-email .me-sec.on{display:block}

/* ── таблиця підписників ── */
#mkt-email .me-tblcard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
#mkt-email .me-hd{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
#mkt-email .me-search{flex:1;min-width:180px;max-width:320px;border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:8px 12px;font:inherit;font-size:13px;color:var(--tx)}
#mkt-email .me-hd .sp{flex:1}
#mkt-email .me-csv{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;color:var(--tx)}
#mkt-email .me-csv:hover{border-color:var(--mut)}
#mkt-email .me-scroll{overflow-x:auto}
#mkt-email .me-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
#mkt-email .me-tbl th,#mkt-email .me-tbl td{padding:11px 14px;border-bottom:1px solid #eceef1;white-space:nowrap;text-align:left}
#mkt-email .me-tbl th{color:var(--mut);font-weight:400;font-size:12px}
#mkt-email .me-tbl th.c,#mkt-email .me-tbl td.c{text-align:center}
#mkt-email .me-tbl tbody tr:last-child td{border-bottom:0}
#mkt-email .me-tbl tbody tr:hover{background:#fafbfc}
#mkt-email .me-tbl .em{font-weight:500}
#mkt-email .me-empty{padding:34px;text-align:center;color:var(--mut);font-size:13px}

/* пілі згоди (колір лише на стані, не декор) */
#mkt-email .me-pill{font-size:11px;padding:2px 9px;border-radius:20px;display:inline-block;font-weight:500;white-space:nowrap}
#mkt-email .me-pill.ok{background:var(--grnbg);color:var(--grn)}
#mkt-email .me-pill.neut{background:#f1f2f4;color:var(--mut)}
#mkt-email .me-pill.bad{background:var(--redbg);color:var(--red)}

/* ── кастом-дропдаун джерела (портал position:fixed, не клипається) ── */
#mkt-email .me-dd{position:relative;display:inline-block}
#mkt-email .me-dd-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;color:var(--tx)}
#mkt-email .me-dd-btn:hover{border-color:var(--mut)}
#mkt-email .me-dd-lbl{white-space:nowrap}
#mkt-email .me-car{width:7px;height:7px;flex:none;border-right:1.7px solid var(--mut);border-bottom:1.7px solid var(--mut);transform:rotate(45deg);margin-left:1px;transition:transform .18s}
#mkt-email .me-dd.open .me-car{transform:rotate(-135deg)}
#mkt-email .me-dd-menu{position:fixed;z-index:9000;background:var(--panel);border:1px solid var(--bd);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:5px;min-width:190px;display:none}
#mkt-email .me-dd-menu.open{display:block}
#mkt-email .me-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:var(--tx);font:inherit;font-size:13px;padding:9px 10px;border-radius:7px;cursor:pointer}
#mkt-email .me-opt:hover{background:#eef0f2}
#mkt-email .me-opt .bnm{flex:1;min-width:0}
#mkt-email .me-opt .bchk{flex:none;color:var(--accent);opacity:0}
#mkt-email .me-opt.on{font-weight:600}
#mkt-email .me-opt.on .bchk{opacity:1}

/* ── Flow (автоматизації) — канон-картки, кроки без даних чесно «очікує дані» ── */
#mkt-email .me-flow{background:var(--panel);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
#mkt-email .me-fstep{display:flex;align-items:center;gap:14px;padding:15px 18px;box-shadow:inset 0 -1px 0 #eceef1}
#mkt-email .me-fstep:last-child{box-shadow:none}
#mkt-email .me-fnum{width:30px;height:30px;flex:none;border-radius:9px;background:var(--tx);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
#mkt-email .me-fmain{flex:1;min-width:0}
#mkt-email .me-fname{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
#mkt-email .me-ftrig{font-size:12.5px;color:var(--mut);margin-top:3px}
#mkt-email .me-fright{flex:none}

/* ── Переписка ── */
#mkt-email .me-chat{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:820px){#mkt-email .me-chat{grid-template-columns:minmax(0,1fr)}}
#mkt-email .me-threads{display:flex;flex-direction:column;gap:10px;min-width:0}
#mkt-email .me-thread{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;cursor:pointer;transition:border-color .15s,background .15s}
#mkt-email .me-thread:hover{border-color:var(--bd2)}
#mkt-email .me-thread.on{border-color:var(--accent);background:#f3faf7}
#mkt-email .me-thread .te{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mkt-email .me-thread .tl{font-size:12px;color:var(--mut);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mkt-email .me-conv{background:var(--panel);border:1px solid var(--bd);border-radius:12px;display:flex;flex-direction:column;min-height:440px;min-width:0}
#mkt-email .me-conv-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
#mkt-email .me-conv-h .ce{font-size:14px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mkt-email .me-bcast{border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:7px 12px;font:inherit;font-size:13px;color:var(--tx);cursor:pointer}
#mkt-email .me-bcast:hover{border-color:var(--mut)}
#mkt-email .me-msgs{flex:1;display:flex;flex-direction:column;gap:14px;padding:18px 16px;overflow-y:auto;max-height:460px}
#mkt-email .me-msg{max-width:78%;display:flex;flex-direction:column}
#mkt-email .me-msg.in{align-self:flex-start;align-items:flex-start}
#mkt-email .me-msg.out{align-self:flex-end;align-items:flex-end}
#mkt-email .me-subj{font-size:11.5px;font-weight:600;color:var(--mut);margin-bottom:5px}
#mkt-email .me-bub{padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.45}
#mkt-email .me-msg.in .me-bub{background:#f1f2f4;color:var(--tx);border-bottom-left-radius:4px}
#mkt-email .me-msg.out .me-bub{background:var(--tx);color:#fff;border-bottom-right-radius:4px}
#mkt-email .me-att{display:inline-flex;align-items:center;gap:6px;margin-top:7px;border:1px solid var(--bd2);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--tx);background:var(--panel)}
#mkt-email .me-att .cl{width:11px;height:11px;flex:none;border:1.6px solid var(--mut);border-radius:3px}
#mkt-email .me-ts{font-size:11px;color:var(--mut);margin-top:5px}
#mkt-email .me-reply{border-top:1px solid var(--bd);padding:12px;display:flex;gap:10px;align-items:flex-end}
#mkt-email .me-reply textarea{flex:1;min-width:0;border:1px solid var(--bd2);border-radius:9px;padding:10px 12px;font:inherit;font-size:13.5px;color:var(--tx);resize:vertical;min-height:44px;max-height:160px;outline:none}
#mkt-email .me-reply textarea:focus{border-color:var(--mut)}
#mkt-email .me-send{flex:none}
/* канон-primary кнопка «Надіслати»: специфічність (1,2,0) перебиває шелловий
   #view-marketing .s2 button{color:inherit} (1,1,1), інакше чорний текст на чорному фоні */
#mkt-email .me-reply .me-send{background:var(--tx);color:#fff;border-color:var(--tx)}
#mkt-email .me-reply .me-send:hover{background:#000;border-color:#000}

/* ── МАСОВА РОЗСИЛКА: власна канон-модалка (кастом-дропдаун, 0 native select) ── */
#mkt-email .meb-ovl{position:fixed;inset:0;z-index:1300;display:flex;align-items:flex-start;justify-content:center;padding:56px 22px;overflow:auto;background:rgba(20,22,24,.42);opacity:0;pointer-events:none;transition:opacity .2s}
#mkt-email .meb-ovl.show{opacity:1;pointer-events:auto}
#mkt-email .meb-modal{width:100%;max-width:520px;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(11,13,16,.28);overflow:hidden;transform:translateY(10px) scale(.99);transition:transform .24s cubic-bezier(.23,1,.32,1)}
#mkt-email .meb-ovl.show .meb-modal{transform:none}
#mkt-email .meb-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px 15px;box-shadow:inset 0 -1px 0 #eceef1}
#mkt-email .meb-t{font-size:16px;font-weight:700;letter-spacing:-.01em}
#mkt-email .meb-x{width:32px;height:32px;flex:none;border:1px solid #e2e5e9;background:#fff;border-radius:9px;color:#6d7175;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
#mkt-email .meb-x:hover{border-color:#c9cccf;color:#202223}
#mkt-email .meb-b{padding:18px 20px 8px;display:flex;flex-direction:column;gap:6px}
#mkt-email .meb-lab{font-size:12.5px;font-weight:600;color:var(--tx);margin-top:8px}
#mkt-email .meb-lab:first-child{margin-top:0}
#mkt-email .meb-inp,#mkt-email .meb-ta{width:100%;border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:10px 12px;font:inherit;font-size:13.5px;color:var(--tx);outline:none}
#mkt-email .meb-inp:focus,#mkt-email .meb-ta:focus{border-color:var(--mut)}
#mkt-email .meb-ta{resize:vertical;min-height:96px;max-height:220px;line-height:1.45}
/* аудиторія: кастом-дропдаун (не native select) */
#mkt-email .meb-dd{position:relative}
#mkt-email .meb-dd-btn{display:inline-flex;align-items:center;gap:10px;width:100%;justify-content:space-between;border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:10px 12px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--tx)}
#mkt-email .meb-dd-btn:hover{border-color:var(--mut)}
#mkt-email .meb-car{width:7px;height:7px;flex:none;border-right:1.7px solid var(--mut);border-bottom:1.7px solid var(--mut);transform:rotate(45deg);transition:transform .18s}
#mkt-email .meb-dd.open .meb-car{transform:rotate(-135deg)}
#mkt-email .meb-dd-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--panel);border:1px solid var(--bd);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:5px;display:none}
#mkt-email .meb-dd.open .meb-dd-menu{display:block}
#mkt-email .meb-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:var(--tx);font:inherit;font-size:13.5px;padding:9px 10px;border-radius:7px;cursor:pointer}
#mkt-email .meb-opt:hover{background:#eef0f2}
#mkt-email .meb-opt .bnm{flex:1;min-width:0}
#mkt-email .meb-opt .bchk{flex:none;color:var(--accent);opacity:0}
#mkt-email .meb-opt.on{font-weight:600}
#mkt-email .meb-opt.on .bchk{opacity:1}
#mkt-email .meb-foot{display:flex;align-items:center;gap:10px;padding:14px 20px 16px}
#mkt-email .meb-foot .sp{flex:1}
#mkt-email .meb-cancel{border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:9px 15px;font:inherit;font-size:13.5px;color:var(--tx);cursor:pointer}
#mkt-email .meb-cancel:hover{border-color:var(--mut)}
/* специфічність (1,2,0) > шеллового (1,1,1): білий текст на темному */
#mkt-email .meb-foot .meb-send{background:var(--tx);color:#fff;border:1px solid var(--tx);border-radius:9px;padding:9px 17px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
#mkt-email .meb-foot .meb-send:hover{background:#000;border-color:#000}
#mkt-email .meb-foot .meb-send:disabled{opacity:.5;cursor:not-allowed}

/* ---- */

  /* ── усе скоуплено під #mkt-quiz ── */
  #mkt-quiz{--mq-track:#d7dade;--mq-fill:#202223}
  #mkt-quiz .mq-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  /* суб-нав = канон .seg (той самий, що в Email), єдина величина на всіх суб-табах */

  /* виміряна ширина контенту, не full-width */
  #mkt-quiz .mq-sec{max-width:1080px}
  #mkt-quiz .mq-sec[hidden]{display:none}

  /* KPI */
  #mkt-quiz .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
  #mkt-quiz .kc{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:14px 16px}
  #mkt-quiz .kc .l{color:var(--mut);font-size:13px}
  #mkt-quiz .kc .v{font-size:23px;font-weight:500;margin-top:6px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  #mkt-quiz .kc .v2{font-size:13px;font-weight:600;margin-top:5px;color:var(--tx);font-variant-numeric:tabular-nums}

  /* панель + заголовок */
  #mkt-quiz .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  #mkt-quiz .panel{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:16px 18px;margin-bottom:16px}
  #mkt-quiz .panel h2{font-size:14px;font-weight:600;margin:0 0 14px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}

  /* ── МОНО-бари (канон Огляду) ── */
  #mkt-quiz .mq-bars{display:flex;flex-direction:column;gap:12px}
  #mkt-quiz .mq-row{display:grid;grid-template-columns:150px minmax(0,1fr) 96px;align-items:center;gap:12px}
  #mkt-quiz .mq-bars.narrow .mq-row{grid-template-columns:118px minmax(0,1fr) 96px}
  #mkt-quiz .mq-bars.time .mq-row{grid-template-columns:150px minmax(0,1fr) 128px}
  #mkt-quiz .mq-nm{font-size:13px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mkt-quiz .mq-track{height:8px;border-radius:6px;background:var(--mq-track);overflow:hidden}
  #mkt-quiz .mq-fill{height:100%;border-radius:6px;background:var(--mq-fill);min-width:3px}
  #mkt-quiz .mq-val{font-size:13px;font-weight:600;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

  /* ── UTM таблиця ── */
  #mkt-quiz .tablecard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
  #mkt-quiz .tablecard .hd{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
  #mkt-quiz .tablecard .hd .ht{font-size:14px;font-weight:600}
  #mkt-quiz .tablecard .hd .grow{flex:1}
  #mkt-quiz .mq-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
  #mkt-quiz .mq-tbl th,#mkt-quiz .mq-tbl td{padding:11px 14px;border-bottom:1px solid #f0f0f0;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums;overflow:hidden}
  #mkt-quiz .mq-tbl th{color:var(--mut);font-weight:500;font-size:12px}
  /* Джерело: фіксована ширина + обрізка довгих UTM, решта таблиці нормального розміру, 0 горизонт. скролу */
  #mkt-quiz .mq-tbl th:first-child,#mkt-quiz .mq-tbl td:first-child{text-align:left;font-weight:600;width:205px;max-width:205px}
  #mkt-quiz .mq-srcnm{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  /* колонка «CR старт→замовлення» ширша, щоб заголовок не обрізався */
  #mkt-quiz .mq-tbl th:nth-child(6),#mkt-quiz .mq-tbl td:nth-child(6){width:165px}
  #mkt-quiz .mq-tbl tbody tr:last-child td{border-bottom:0}
  #mkt-quiz .mq-tbl tbody tr:hover{background:#fafbfc}
  #mkt-quiz .mq-tbl tr.mq-tot td{border-top:2px solid var(--bd);background:#f7f8f9;font-weight:700}
  #mkt-quiz .mq-src{display:inline-flex;align-items:center;gap:8px}
  #mkt-quiz .mq-dot{width:8px;height:8px;border-radius:50%;background:#c2c5c8;flex:0 0 auto}

  /* ── кастом-дропдаун (кнопка; меню порталом у body, стилі нижче поза скоупом) ── */
  #mkt-quiz .mq-dd-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd2);background:var(--panel);border-radius:9px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--tx);font-family:inherit}
  #mkt-quiz .mq-dd-btn:hover{border-color:var(--mut)}
  #mkt-quiz .mq-dd-btn .cap{color:var(--mut)}
  #mkt-quiz .mq-dd-btn .car{width:7px;height:7px;border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);transform:rotate(45deg);margin-left:1px;transition:transform .18s}
  #mkt-quiz .mq-dd-btn.open .car{transform:rotate(-135deg)}

  @media(max-width:900px){
    #mkt-quiz .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    #mkt-quiz .cols{grid-template-columns:1fr}
    #mkt-quiz .mq-row{grid-template-columns:120px minmax(0,1fr) 86px}
    #mkt-quiz .mq-bars.narrow .mq-row,#mkt-quiz .mq-bars.time .mq-row{grid-template-columns:110px minmax(0,1fr) 110px}
  }
  /* вузькі екрани: бар на власному рядку під лейблом+значенням (інакше трек стискається в нуль) */
  @media(max-width:620px){
    #mkt-quiz .mq-row,
    #mkt-quiz .mq-bars.narrow .mq-row,
    #mkt-quiz .mq-bars.time .mq-row{
      grid-template-columns:1fr auto;
      grid-template-areas:'nm val' 'bar bar';
      gap:7px 10px}
    #mkt-quiz .mq-nm{grid-area:nm;white-space:normal}
    #mkt-quiz .mq-val{grid-area:val}
    #mkt-quiz .mq-track{grid-area:bar}
  }
  
/* ---- */

/* ── скоуп: усе під #mkt-clients (плюс portal-меню .mc-ddmenu, position:fixed) ── */
#mkt-clients{max-width:1080px}
#mkt-clients .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
#mkt-clients .kc{background:var(--panel,#fff);border:1px solid var(--bd,#e3e3e3);border-radius:12px;padding:14px 16px}
#mkt-clients .kc .l{color:var(--mut,#6d7175);font-size:13px}
#mkt-clients .kc .v{font-size:23px;font-weight:500;margin-top:6px;letter-spacing:-.01em}
#mkt-clients .kc .v .u{font-size:13px;font-weight:400;color:var(--mut,#6d7175);margin-left:4px}

#mkt-clients .tablecard{background:var(--panel,#fff);border:1px solid var(--bd,#e3e3e3);border-radius:12px;overflow:hidden}
#mkt-clients .hd{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--bd,#e3e3e3);flex-wrap:wrap}
#mkt-clients .hd .mc-search{position:relative;flex:1;min-width:220px}
#mkt-clients .hd .mc-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mut,#6d7175);font-size:15px}
#mkt-clients .hd .mc-search input{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;border:1px solid var(--bd2,#c9cccf);background:var(--panel,#fff);color:var(--tx,#202223);border-radius:9px;padding:9px 12px 9px 34px;cursor:text}
#mkt-clients .hd .mc-search input:focus{outline:0;border-color:#b7bbbf}
#mkt-clients .hd .mc-count{color:var(--mut,#6d7175);font-size:13px;white-space:nowrap;margin-left:auto}

/* кастом-дропдаун (кнопка + шеврон), меню — портал position:fixed */
#mkt-clients .mc-dd{position:relative;flex:0 0 auto}
#mkt-clients .mc-ddbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd2,#c9cccf);background:var(--panel,#fff);border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--tx,#202223)}
#mkt-clients .mc-ddbtn:hover{border-color:var(--mut,#6d7175)}
#mkt-clients .mc-dd.open .mc-ddbtn{border-color:#b7bbbf;background:#fbfbfb}
#mkt-clients .mc-ddcar{width:7px;height:7px;border-right:1.7px solid var(--mut,#6d7175);border-bottom:1.7px solid var(--mut,#6d7175);transform:rotate(45deg);transition:transform .18s}
#mkt-clients .mc-dd.open .mc-ddcar{transform:rotate(-135deg)}
.mc-ddmenu{position:fixed;z-index:600;background:#fff;border:1px solid var(--bd,#e3e3e3);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:5px;min-width:172px;display:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.mc-ddmenu.open{display:block}
.mc-ddmenu .mc-ddo{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:#202223;font:500 14px/1.2 inherit;padding:9px 10px;border-radius:7px;cursor:pointer}
.mc-ddmenu .mc-ddo:hover{background:#eef0f2}
.mc-ddmenu .mc-ddo.on{font-weight:600}
.mc-ddmenu .mc-ddo .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-ddmenu .mc-ddo .chk{flex:0 0 auto;color:var(--accent,#0c8b6c);font-size:13px;line-height:1;opacity:0}
.mc-ddmenu .mc-ddo.on .chk{opacity:1}

/* таблиця: числа по центру, перша колонка (Клієнт) — ліва */
#mkt-clients table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
#mkt-clients th,#mkt-clients td{padding:11px 14px;border-bottom:1px solid #f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mkt-clients th{color:var(--mut,#6d7175);font-weight:500;font-size:12px;text-align:center}
#mkt-clients td{text-align:center}
#mkt-clients th.l,#mkt-clients td.l{text-align:left}
#mkt-clients tbody tr:last-child td{border-bottom:0}
#mkt-clients tbody tr.clk{cursor:pointer}
#mkt-clients tbody tr.clk:hover{background:#fafbfc}
#mkt-clients th:nth-child(1),#mkt-clients td:nth-child(1){width:30%}
#mkt-clients th:nth-child(2),#mkt-clients td:nth-child(2){width:16%}
#mkt-clients th:nth-child(3),#mkt-clients td:nth-child(3){width:13%}
#mkt-clients th:nth-child(4),#mkt-clients td:nth-child(4){width:15%}
#mkt-clients th:nth-child(5),#mkt-clients td:nth-child(5){width:15%}
#mkt-clients th:nth-child(6),#mkt-clients td:nth-child(6){width:11%}
#mkt-clients .cl-nm{font-weight:600;overflow:hidden;text-overflow:ellipsis}
#mkt-clients .cl-em{color:var(--mut,#6d7175);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
#mkt-clients .cl-ltv{font-weight:600}
#mkt-clients .rep{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:600;color:var(--grn,#0c6b58);background:var(--grnbg,#e3f1ec);border-radius:20px;padding:1px 7px;vertical-align:middle}
#mkt-clients .mc-empty{padding:34px;text-align:center;color:var(--mut,#6d7175)}
#mkt-clients .mc-empty .mc-emptybtn{margin-top:12px}
#mkt-clients .btn{font-family:inherit;font-size:13px;border-radius:9px;padding:9px 13px;cursor:pointer;background:var(--tx,#202223);color:#fff;border:1px solid var(--tx,#202223);font-weight:500}

/* деталь клієнта (drawer) — position:fixed, лишається у DOM пейну (скоуп) */
#mkt-clients .mc-drw{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:1100}
#mkt-clients .mc-drw.show{display:block}
#mkt-clients .mc-sheet{position:absolute;right:0;top:0;height:100%;width:440px;max-width:94vw;background:var(--panel,#fff);border-left:1px solid var(--bd,#e3e3e3);padding:22px 24px;overflow:auto;box-shadow:-10px 0 40px rgba(0,0,0,.10)}
#mkt-clients .mc-x{position:absolute;right:16px;top:16px;width:32px;height:32px;border:1px solid var(--bd2,#c9cccf);background:#fff;border-radius:9px;color:var(--mut,#6d7175);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#mkt-clients .mc-x:hover{border-color:var(--mut,#6d7175);color:var(--tx,#202223)}
#mkt-clients .mc-dh{font-size:19px;font-weight:600;letter-spacing:-.01em;padding-right:40px}
#mkt-clients .mc-dsub{color:var(--mut,#6d7175);font-size:13px;margin-top:3px}
#mkt-clients .mc-dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 10px}
#mkt-clients .mc-dstat{border:1px solid var(--bd,#e3e3e3);border-radius:10px;padding:11px 13px}
#mkt-clients .mc-dstat .k{font-size:11px;color:var(--mut,#6d7175)}
#mkt-clients .mc-dstat .val{font-size:18px;font-weight:600;margin-top:4px}
#mkt-clients .mc-dstat .val .u{font-size:12px;font-weight:400;color:var(--mut,#6d7175);margin-left:3px}
#mkt-clients .mc-dordh{font-size:11px;color:var(--mut,#6d7175);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 10px}
#mkt-clients .ordc{border:1px solid var(--bd,#e3e3e3);border-radius:10px;padding:11px 13px;margin-bottom:8px}
#mkt-clients .ordc-t{display:flex;align-items:center;justify-content:space-between;gap:10px}
#mkt-clients .ordc-id{font-weight:600;font-size:13px}
#mkt-clients .ordc-sum{font-weight:600;font-size:14px}
#mkt-clients .ordc-m{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12px;color:var(--mut,#6d7175);flex-wrap:wrap}
#mkt-clients .ordc-m .dot{color:#c2c5c8}
#mkt-clients .st{font-size:11px;padding:2px 8px;border-radius:20px;display:inline-block;font-weight:500}
#mkt-clients .st-ok{background:var(--grnbg,#e3f1ec);color:var(--grn,#0c6b58)}
#mkt-clients .st-pending{background:#fdf3e0;color:#9a6a00}
#mkt-clients .st-error{background:var(--redbg,#fce9e6);color:var(--red,#b42318)}
@media(max-width:640px){#mkt-clients .cards{grid-template-columns:repeat(2,1fr)}}

/* ---- */
/* FINAL — Аналітика BI.
   BASE v4 shell/toolbar/head + V14 gridlines + V6/V14 clean leaf + refined variable colors. */
#view-ads{--seg:#eef0f2;--ink:#202223;--sub:#6d7175;--faint:#9aa1a9;--line:#eceef1;--linestr:#e3e3e3;--panel:#fff;
  --hg:#0c8b6c;--hgbg:#e7f3ee;--ho:#b06a00;--hobg:#fbeed8;--hr:#b42318;--hrbg:#fbe7e4;
  --grid:rgba(20,24,28,.045);--gridS:rgba(20,24,28,.09);}
#view-ads .num,#view-ads td,#view-ads th{font-variant-numeric:tabular-nums}

/* toolbar */
#view-ads .antools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
#view-ads .antools-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#view-ads .antools-r{display:flex;align-items:center;gap:10px}
#view-ads .anbtn-dark{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;border-color:var(--ink);font-weight:560;padding:8px 13px;border-radius:9px}
#view-ads .anbtn-dark i{font-size:15px}
#view-ads .anbtn-dark.synced{background:var(--hg);border-color:var(--hg)}
#view-ads .anbtn-ghost{display:inline-flex;align-items:center;gap:7px;background:var(--panel);color:var(--ink);border:1px solid var(--linestr);font-weight:540;padding:8px 13px;border-radius:9px}
#view-ads .anbtn-ghost i{font-size:15px}
#view-ads .anbtn-ghost:not(:disabled):hover{border-color:var(--ink)}
#view-ads .anbtn-ghost:disabled{opacity:.5;cursor:default}
#view-ads .anbtn-ghost.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* filter button — cancel state (filter active): muted red outline, same slot/size */
#view-ads .anbtn-ghost.cancel{background:var(--panel);color:var(--hr);border-color:var(--hr)}
#view-ads .anbtn-ghost.cancel:not(:disabled):hover{background:var(--hrbg);border-color:var(--hr);color:var(--hr)}
#view-ads .anmetrics{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--sub);padding:6px 4px}
#view-ads .subtabs{margin-bottom:14px}

/* selection bar */
#view-ads .selbar{display:flex;align-items:center;gap:12px;background:var(--hgbg);border:1px solid #cfe6dd;border-radius:10px;padding:8px 14px;margin-bottom:12px;font-size:13px;color:var(--ink)}
#view-ads .selbar.hide{display:none}
#view-ads .selbar b{font-weight:640}
#view-ads .selbar .selx{margin-left:auto;background:transparent;border:0;color:var(--sub);cursor:pointer;font:inherit;text-decoration:underline}

/* card + scroll only inside */
#view-ads .ancard{background:var(--panel);border:1px solid var(--linestr);border-radius:14px;overflow:hidden}
#view-ads .anscroll{overflow-x:auto;overflow-y:visible}
#view-ads .fblock{margin-bottom:14px}
#view-ads .fblock .fbh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfc}
#view-ads .fblock .fbh .fbn{font-weight:640;font-size:14px}
#view-ads .fblock .fbh .fbtag{font-size:11px;color:var(--sub);background:var(--seg);border-radius:999px;padding:2px 9px}

/* table (v4 head style) + V14 vertical gridlines */
#view-ads table.antab{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
#view-ads .antab th,#view-ads .antab td{padding:9px 8px;border-bottom:1px solid var(--line);border-right:1px solid var(--grid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#view-ads .antab th:last-child,#view-ads .antab td:last-child{border-right:0}
#view-ads .antab thead th{position:sticky;top:0;z-index:6;background:var(--panel);color:var(--sub);font-weight:520;font-size:11.5px;letter-spacing:.01em;cursor:pointer;user-select:none;box-shadow:inset 0 -1px 0 var(--linestr)}
#view-ads .antab thead th:first-child,#view-ads .antab tbody td:first-child{text-align:left;padding-left:16px}
#view-ads .antab thead th .sar{opacity:0;font-size:9px;margin-left:2px}
#view-ads .antab thead th.sorton{color:var(--ink);font-weight:640}
#view-ads .antab thead th.sorton .sar{opacity:1}
#view-ads .antab thead th:hover{color:var(--ink)}

/* month row */
#view-ads .antab tr.r-month td{background:#f4f6f8;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--linestr)}
#view-ads .antab tr.r-month td:first-child{font-size:14px}

/* day row */
#view-ads .antab tr.r-day{cursor:pointer}
#view-ads .antab tr.r-day td{font-weight:600;transition:opacity .16s,color .16s}
#view-ads .antab tr.r-day:hover td{background:#fafafa}
#view-ads .antab tr.r-day.open td{background:#f2f5f8;box-shadow:inset 0 -1px 0 var(--linestr)}
/* ⭐ closed days quiet down while another day is open (focus on open day) */
#view-ads .antab tr.r-day.dim td{opacity:.5;color:var(--sub)}
#view-ads .antab tr.r-day.dim td .daycnt,#view-ads .antab tr.r-day.dim td .daywd{color:var(--faint)}
#view-ads .antab tr.r-day.dim:hover td{opacity:1}
#view-ads .daycell{display:flex;align-items:center;gap:9px}
#view-ads .daychev{flex:none;width:16px;height:16px;color:var(--faint);transition:transform .16s;display:inline-flex;align-items:center;justify-content:center}
#view-ads .antab tr.r-day.open .daychev{transform:rotate(90deg);color:var(--ink)}
#view-ads .dayd{font-weight:700}
#view-ads .daywd{color:var(--sub);font-weight:540;margin-left:1px}
#view-ads .daycnt{color:var(--faint);font-weight:500;font-size:11.5px;margin-left:6px}

/* leaf row — compact single line */
#view-ads .antab tr.r-leaf td{background:#fff;padding-top:4px;padding-bottom:4px}
#view-ads .antab tr.r-leaf:hover td{background:#fbfcfd}
#view-ads .antab tr.r-leaf:hover td:first-child{box-shadow:inset 3px 0 0 var(--hg)}

/* leaf name cell — single-line: [chk] rank + name (+ Каб/status/domain for campaigns) */
#view-ads .lname{display:flex;align-items:center;gap:8px;min-width:0;padding:0 0 0 4px}
#view-ads .lchk{flex:none;width:15px;height:15px;border:1.5px solid var(--bd2);border-radius:4px;cursor:pointer;position:relative;background:#fff}
#view-ads .lchk.on{background:var(--ink);border-color:var(--ink)}
#view-ads .lchk.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#view-ads .rank{flex:none;width:18px;height:18px;border-radius:5px;background:#e7e9ed;color:var(--ink);font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
#view-ads .ltitle{min-width:0;flex:1}
#view-ads .ltxt{flex:1;min-width:0;font-weight:500;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-ads .lsub{display:flex;align-items:center;gap:7px;margin-top:1px;overflow:hidden;font-size:10.5px;color:var(--sub);white-space:nowrap;text-overflow:ellipsis}
#view-ads .lsub>span{white-space:nowrap}
#view-ads .cabchip{flex:none;font-size:10.5px;font-weight:600;background:#eef0f2;color:var(--ink);border-radius:5px;padding:0 5px}
#view-ads .ofchip{color:var(--ink);font-weight:600;flex:none;white-space:nowrap}
#view-ads .stdot{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap;font-size:11px;font-weight:540}
#view-ads .stdot i{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--faint)}
#view-ads .stdot.act i{background:var(--hg)}#view-ads .stdot.act{color:var(--hg)}
#view-ads .stdot.pau i{background:var(--faint)}#view-ads .stdot.pau{color:var(--sub)}
#view-ads .logbtn{flex:none;margin:1px 0 0 auto;width:24px;height:24px;border:1px solid var(--linestr);border-radius:7px;background:#fff;color:var(--sub);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
#view-ads .logbtn:hover{color:var(--ink);border-color:var(--bd2)}
#view-ads .logbtn.has{color:var(--hg);border-color:#bfe0d5}
#view-ads .logbtn i{font-size:14px}

/* Окупність anchor cell */
#view-ads .okc{display:flex;flex-direction:column;align-items:center;gap:3px}
#view-ads .okv{font-weight:700;font-size:13px}
#view-ads .okbar{width:52px;height:4px;border-radius:3px;background:#edeef0;overflow:hidden}
#view-ads .okbar i{display:block;height:100%;border-radius:3px}
#view-ads .dot{color:var(--faint)}
#view-ads .mbv{font-weight:640}

/* Статус column (Кампанії only) — FB-style: кольорова крапка + підпис (+ пілюля High performing) */
#view-ads .antab td.st-cell{text-align:left;padding-left:12px}
#view-ads .stwrap{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#view-ads .stdot{width:8px;height:8px;border-radius:50%;flex:none}
#view-ads .stdot.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}
#view-ads .stdot.off{background:#c4c8cd}
#view-ads .stlbl{font-weight:560;font-size:12.5px}
#view-ads .stlbl.on{color:var(--ink)}
#view-ads .stlbl.off{color:var(--sub)}
#view-ads .stpill{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.01em;color:#1a56db;background:#e8f0fe;border-radius:999px;padding:2px 7px;white-space:nowrap}
#view-ads .antab thead th.nosort{cursor:default}
#view-ads .antab thead th.nosort:hover{color:var(--sub)}

/* Тип кампанії — кастомний дропдаун у клітинці (fixed-меню, не native select) */
#view-ads .antab td.ct-cell{padding:5px 8px}
#view-ads .adtbtn{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--linestr);background:var(--panel);border-radius:8px;padding:5px 9px;font:inherit;font-size:12px;color:var(--ink);cursor:pointer;line-height:1.1;transition:border-color .15s ease}
#view-ads .adtbtn:hover{border-color:#c9cccf}
#view-ads .adtbtn.open{border-color:var(--ink)}
#view-ads .adtbtn .adtt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560}
#view-ads .adtbtn .adtt.ph{color:var(--faint);font-weight:500}
#view-ads .adtbtn .adtcar{color:var(--faint);font-size:10px;flex:none}
.adtdotmark{width:7px;height:7px;border-radius:2px;flex:none;display:inline-block}
/* Меню типу монтується у <body> (fixed за координатами кнопки), тому стилі ГЛОБАЛЬНІ з
   літеральними кольорами — CSS-змінні #view-ads сюди не доходять, а #view-ads-скоуп не матчить body. */
.adtmenu{position:fixed;background:#fff;border:1px solid #e3e3e3;border-radius:11px;box-shadow:0 16px 40px rgba(11,13,16,.16);padding:6px;z-index:1200;min-width:156px;font-family:inherit}
.adtmenu .adto{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:12.5px;color:#202223;cursor:pointer;font-weight:560;white-space:nowrap}
.adtmenu .adto:hover{background:#f1f2f4}
.adtmenu .adto.on{background:#f1f2f4}
.adtmenu .adto .adtchk{margin-left:auto;color:#0c8b6c;opacity:0;font-size:13px;display:inline-flex}
.adtmenu .adto.on .adtchk{opacity:1}

/* heat cells */
#view-ads td.h-g{background:var(--hgbg)}
#view-ads td.h-o{background:var(--hobg)}
#view-ads td.h-r{background:var(--hrbg)}
#view-ads td.h-mb{font-weight:640}

/* month picker menu items reuse .ocdd* from dropdown.css */
#view-ads .ocddo.on{background:var(--seg)}
#view-ads .ocddo .occhk{margin-left:auto;color:var(--hg);opacity:0}
#view-ads .ocddo.on .occhk{opacity:1}

/* note modal */
.nmodal{position:fixed;inset:0;background:rgba(16,18,20,.42);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}
.nmodal.hide{display:none}
.nmbox{background:#fff;border-radius:16px;width:min(440px,100%);box-shadow:0 24px 64px rgba(0,0,0,.28);padding:18px 18px 16px;max-height:86vh;overflow:auto}
.nmhead{display:flex;align-items:center;gap:10px}
.nmtitle{font-weight:640;font-size:15px}
.nmx{margin-left:auto;border:0;background:transparent;color:#6d7175;cursor:pointer;font-size:18px;display:inline-flex}
.nmsub{color:#6d7175;font-size:12px;margin:4px 0 12px;white-space:normal;line-height:1.4}
.nmaudio{display:flex;align-items:center;gap:10px;background:#f6f7f8;border-radius:11px;padding:9px 12px;margin-bottom:12px}
.nmplay{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:#202223;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.nmwave{flex:1;height:22px;border-radius:4px;background:repeating-linear-gradient(90deg,#c9cccf 0 2px,transparent 2px 5px)}
.nmdur{color:#6d7175;font-size:12px;font-variant-numeric:tabular-nums}
.nmta{width:100%;box-sizing:border-box;min-height:76px;border:1px solid #c9cccf;border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13px;resize:vertical;outline:none}
.nmta:focus{border-color:#202223}
.nmrow{display:flex;justify-content:flex-end;margin-top:10px}
.nmhist{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.nmhi{border-top:1px solid #eceef1;padding-top:10px}
.nmhi .nmhm{color:#9aa1a9;font-size:11px;margin-bottom:3px}
.nmhi .nmhb{font-size:13px;line-height:1.45}

/* per-day comment area (toggled) */
#view-ads .antab tr.daycmt td{background:#fafbfc;padding:8px 16px;border-bottom:1px solid var(--linestr)}
#view-ads .dcmt-wrap{display:flex;flex-direction:column;gap:8px}
#view-ads .dcmt-list{display:flex;flex-direction:column;gap:6px}
#view-ads .dcmt-item{display:flex;align-items:baseline;gap:9px;font-size:12.5px;line-height:1.4}
#view-ads .dcmt-meta{flex:none;color:var(--faint);font-size:11px}
#view-ads .dcmt-text{color:var(--ink);white-space:normal}
#view-ads .dcmt-add{display:flex;align-items:center;gap:8px}
#view-ads .dcmt-add>i{color:var(--sub);font-size:16px;flex:none}
#view-ads .dcmt-input{flex:1;min-width:0;border:1px solid var(--linestr);border-radius:9px;padding:7px 11px;font-family:inherit;font-size:12.5px;color:var(--ink);background:#fff;outline:none}
#view-ads .dcmt-input:focus{border-color:var(--ink)}
#view-ads .dcmt-btn{flex:none;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:9px;padding:7px 14px;font:inherit;font-size:12.5px;font-weight:560;cursor:pointer}
#view-ads .dcmt-btn:hover{opacity:.9}

/* responsive */
@media(max-width:900px){
  #view-ads .antools{flex-direction:column;align-items:stretch}
  #view-ads .antools-l,#view-ads .antools-r{width:100%}
  #view-ads .antools-r .anbtn-ghost{width:100%;justify-content:center}
  #view-ads .ocdd{width:100%!important;position:relative}
#mdd{position:relative!important;height:42px;align-self:flex-start}
}
@media(max-width:640px){
  .wrap{padding:16px 12px}
  #view-ads .antab th,#view-ads .antab td{padding:8px 7px}
}

/* ---- */

        /* ═══ «Огляд» · шкіра nv-mix (затверджений власником макет ov-c «Бенто», 18.08.2026) ═══
           Картки без обводок з мʼякою тінню і радіусом 22, чорні пілюлі-сегменти,
           таблиця на волосяних лініях, шкала графіка праворуч. Кольори показників
           графіка лишились рідні (OG_MSPEC), як просив власник. */
        #view-ogliad{--ink:#111;--ink-3:rgba(17,17,17,.03);--ink-4:rgba(17,17,17,.04);--ink-6:rgba(17,17,17,.06);
          --ink-10:rgba(17,17,17,.10);--ink-14:rgba(17,17,17,.14);--ink-18:rgba(17,17,17,.18);
          --ink-26:rgba(17,17,17,.26);--ink-34:rgba(17,17,17,.34);--ink-62:rgba(17,17,17,.62);
          --sub:rgba(17,17,17,.62);--faint:rgba(17,17,17,.34);--line:rgba(17,17,17,.06);--linestr:rgba(17,17,17,.10);
          --up:#0c6b58;--down:#b42318;--bar:#111;--barsoft:#d7dade;--panel:#fff;--prof:#0c6b58;
          --card:#fff;--rad:22px;--sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);}
        #view-ogliad *{font-variant-numeric:tabular-nums}
        #view-ogliad .num{font-variant-numeric:tabular-nums}
        /* Р2: порожній стан метрики. Не прочерк, а слова + причина + дія. Ті самі токени картки,
           щоб «немає даних» читалось як стан системи, а не як помилка верстки. */
        #view-ogliad .ognd{color:var(--ink-62);font-weight:500;letter-spacing:normal}
        #view-ogliad .ogbig.ognd{font-size:30px;height:auto;line-height:1.2;align-items:center}
        #view-ogliad .ogwhy{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-62);max-width:38ch}
        #view-ogliad .ogwhy a{color:var(--ink);text-underline-offset:3px}
        #view-ogliad .ogchip[disabled]{opacity:.4;cursor:not-allowed}
        #view-ogliad .ogmnote{font-size:12.5px;color:var(--ink-62);margin-top:8px}
        #view-ogliad .oggrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);max-width:1240px;margin-inline:auto;width:100%}

        /* ряд періодів + Синхронізувати */
        #view-ogliad .ogtools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
        #view-ogliad .chips{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--card);border-radius:999px;padding:4px;box-shadow:var(--sh)}
        #view-ogliad .chip{border:0;background:transparent;color:var(--ink-62);font-size:13.5px;font-weight:500;padding:8px 16px;
          border-radius:999px;white-space:nowrap;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
        #view-ogliad .chip:hover{color:var(--ink)}
        #view-ogliad .chip.on{background:var(--ink);color:#fff;font-weight:600}
        #view-ogliad .ogsync{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--ink);color:#fff;font:inherit;
          font-size:13px;font-weight:500;padding:10px 17px;border-radius:999px;cursor:pointer}
        #view-ogliad .ogsync:hover{background:#000}
        #view-ogliad .ogsync:disabled{opacity:.65;cursor:default}
        #view-ogliad .ogsync i{display:inline-flex}
        #view-ogliad .ogsync.busy i{animation:ogspin 1s linear infinite}
        @keyframes ogspin{to{transform:rotate(360deg)}}
        #view-ogliad .ogupd{font-size:12.5px;color:var(--ink-62)}

        /* сітка-бенто: ряд 1 три рівні плитки, ряд 2 графік на всю ширину, ряд 3 воронки + трекер */
        #view-ogliad .ogbento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:stretch}
        #view-ogliad .ogcard{background:var(--card);border:0;border-radius:var(--rad);box-shadow:var(--sh);padding:20px 22px;
          display:flex;flex-direction:column;min-width:0}
        #view-ogliad .og-roas{grid-column:1/5;grid-row:1}
        #view-ogliad .og-okup{grid-column:5/9;grid-row:1}
        #view-ogliad .og-keys{grid-column:9/13;grid-row:1}
        #view-ogliad .ogchart{grid-column:1/13;grid-row:2}
        #view-ogliad .ogfunnelcard{grid-column:1/9;grid-row:3}
        #view-ogliad #cfunnel{grid-column:9/13;grid-row:3}

        /* шапка картки: іконка в скругленому квадраті + назва + контрол праворуч */
        #view-ogliad .chead{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap;row-gap:9px;min-height:38px}
        #view-ogliad .og-roas>.chead,#view-ogliad .og-okup>.chead{min-height:52px;align-items:flex-start}
        #view-ogliad .chip-i{width:32px;height:32px;flex:none;border-radius:11px;background:var(--ink-6);display:flex;align-items:center;justify-content:center}
        #view-ogliad .chip-i i{font-size:17px;color:var(--ink);line-height:1}
        #view-ogliad .chead h2{margin:0;font-size:15px;line-height:1.2;font-weight:600;flex:1;min-width:0}
        /* у вузькій плиті заголовок не тиснеться під контрол: контрол іде на свій рядок */
        #view-ogliad .og-keys .chead h2,#view-ogliad #cfunnel .chead h2{min-width:118px}
        #view-ogliad .cnt{flex:none;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--ink-6);border-radius:999px;padding:5px 11px;white-space:nowrap}

        /* сегмент Усі/Апрув і Стек/Лінії */
        #view-ogliad .ogseg,#view-ogliad .ogmodeseg{display:inline-flex;gap:4px;background:var(--ink-6);border-radius:999px;padding:4px;flex:none}
        #view-ogliad .ogseg button,#view-ogliad .ogmodeseg button{border:0;background:transparent;color:var(--ink-62);font:inherit;font-size:12.5px;
          font-weight:500;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
        #view-ogliad .ogseg button:hover,#view-ogliad .ogmodeseg button:hover{color:var(--ink)}
        #view-ogliad .ogseg button.on,#view-ogliad .ogmodeseg button.on{background:var(--ink);color:#fff;font-weight:600}

        /* герой-плитка: велике число, дріб формули справжніми числами, два опорні рядки */
        #view-ogliad .oghero{flex:1;display:flex;flex-direction:column}
        #view-ogliad .ogbig{font-size:88px;line-height:1;height:88px;font-weight:600;letter-spacing:-.03em;color:var(--ink);display:flex;align-items:baseline}
        #view-ogliad .ogform{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:15px 0 4px}
        #view-ogliad .ogfl{display:flex;align-items:center;gap:9px;max-width:100%}
        #view-ogliad .ogdiv{font-size:15px;font-weight:600;color:var(--ink-34);line-height:1;width:11px;flex:none;text-align:center}
        #view-ogliad .ogpill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);
          background:var(--ink-6);border-radius:999px;padding:6px 12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
        #view-ogliad .ogpill .pk{color:var(--ink-62);font-weight:500}
        #view-ogliad .oghrows{flex:1;display:flex;flex-direction:column;border-top:1px solid var(--ink-6);margin-top:16px}
        #view-ogliad .ogmrow{flex:1;min-height:48px;display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ink-6)}
        #view-ogliad .ogmrow:last-child{border-bottom:0}
        #view-ogliad .ogmrow .k{flex:1;min-width:0;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-ogliad .ogmrow .v{flex:none;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}

        /* Ключові показники: назва ліворуч, число праворуч на спільній осі, реордер лівим хендлом */
        #view-ogliad .kmwrap{position:relative;flex:none}
        #view-ogliad .kmenubtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ink-10);background:var(--card);
          color:var(--ink);font:inherit;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
        #view-ogliad .kmenubtn:hover{border-color:var(--ink-26)}
        #view-ogliad .kmenubtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
        #view-ogliad .kmenubtn.on svg{transform:rotate(180deg)}
        #view-ogliad .kmenu{position:absolute;top:calc(100% + 7px);right:0;z-index:60;background:var(--card);border-radius:16px;
          box-shadow:0 10px 34px rgba(0,0,0,.14);padding:6px;min-width:212px;max-height:330px;overflow:auto}
        #view-ogliad .kmhint{font-size:11.5px;color:var(--ink-62);padding:7px 10px 6px}
        #view-ogliad .kchk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;cursor:pointer;font-size:13px;color:var(--ink)}
        #view-ogliad .kchk:hover{background:var(--ink-4)}
        #view-ogliad .kchk input{appearance:none;-webkit-appearance:none;flex:none;width:17px;height:17px;margin:0;border-radius:5px;
          border:1.5px solid var(--ink-18);background:var(--card);cursor:pointer;position:relative;transition:background .12s,border-color .12s}
        #view-ogliad .kchk input:checked{background:var(--ink);border-color:var(--ink)}
        #view-ogliad .kchk input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
          border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
        #view-ogliad .kchk span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-ogliad .kmbody{flex:1;display:flex;flex-direction:column;min-height:0}
        #view-ogliad .krow{flex:1;min-height:50px;display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;padding:8px 0;
          border-bottom:1px solid var(--ink-6)}
        #view-ogliad .krow:last-child{border-bottom:0}
        #view-ogliad .kh{flex:none;color:var(--ink-26);font-size:15px;line-height:1;cursor:grab}
        #view-ogliad .kh:hover{color:var(--ink-62)}
        #view-ogliad .kl{flex:1 0 108px;min-width:0;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-ogliad .kv{flex:none;margin-left:auto;text-align:right;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
        #view-ogliad .kv .muted{font-size:12.5px;font-weight:500;color:var(--ink-62)}
        #view-ogliad .kx{flex:none;border:0;background:transparent;color:var(--ink-26);font-size:15px;line-height:1;cursor:pointer;padding:0 2px;opacity:0;transition:opacity .12s}
        #view-ogliad .krow:hover .kx{opacity:1}
        #view-ogliad .kx:hover{color:var(--down)}
        #view-ogliad .krow.drag{opacity:.4}
        #view-ogliad .kempty{color:var(--ink-62);font-size:13px;padding:22px 0;text-align:center}

        /* графік по днях: полотно svg, шкала праворуч, межа місяця пунктиром */
        #view-ogliad .ogmhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
        #view-ogliad .ogchips{display:inline-flex;gap:4px;background:var(--ink-6);border-radius:999px;padding:4px;flex-wrap:wrap}
        #view-ogliad .ogchip{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--ink-62);
          font:inherit;font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
        #view-ogliad .ogchip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
        #view-ogliad .ogchip:hover{color:var(--ink)}
        #view-ogliad .ogchip.on{background:var(--ink);color:#fff;font-weight:600}
        #view-ogliad .ogchw{width:100%;min-width:0}
        #view-ogliad .ogbars{width:100%;min-width:0}
        #view-ogliad .ogbars svg{display:block;width:100%;height:auto}
        #view-ogliad .ogax{font-size:11.5px;fill:var(--ink-62)}
        #view-ogliad .oggl{stroke:var(--ink-6);stroke-width:1}
        #view-ogliad .ogzl{stroke:var(--ink-14);stroke-width:1}
        #view-ogliad .ogml{stroke:var(--ink-10);stroke-width:1;stroke-dasharray:3 4}
        #view-ogliad .oghit{fill:var(--ink);fill-opacity:0;cursor:pointer}
        #view-ogliad .oghit:hover{fill-opacity:.035}
        #view-ogliad .oghit.sel{fill-opacity:.06}
        #view-ogliad .ogln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
        #view-ogliad .ogmleg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:13px;font-size:12.5px;color:var(--ink-62)}
        #view-ogliad .ogmleg .li{display:inline-flex;align-items:center;gap:7px}
        #view-ogliad .ogmleg .li .dot{width:11px;height:11px;border-radius:4px;background:var(--c);flex:none;box-shadow:inset 0 0 0 1px var(--ink-10)}
        #view-ogliad .ogmleg .li b{color:var(--ink);font-weight:600;font-size:13px}

        /* Воронки за період: метрики по центру, ледве помітні вертикальні лінії */
        #view-ogliad .v2fwrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
        #view-ogliad .v2fwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:52px;pointer-events:none;
          background:linear-gradient(to left,var(--card),rgba(255,255,255,0));opacity:0;transition:opacity .18s}
        #view-ogliad .v2fwrap.sr::after{opacity:1}
        /* Рука-курсор ТІЛЬКИ коли є куди гортати. Інакше таблиця, яка повністю влазить,
           обіцяла перетягування, якого нема (клас вішає ogFunnelShadows за реальним скролом). */
        #view-ogliad .v2ftbl{flex:1;overflow-x:auto;cursor:default;scrollbar-width:thin;scrollbar-color:var(--ink-18) transparent}
        #view-ogliad .v2ftbl.canscroll{cursor:grab}
        #view-ogliad .v2ftbl.canscroll.grabbing{cursor:grabbing}
        #view-ogliad .v2ftbl::-webkit-scrollbar{height:6px}
        #view-ogliad .v2ftbl::-webkit-scrollbar-track{background:transparent}
        #view-ogliad .v2ftbl::-webkit-scrollbar-thumb{background:var(--ink-18);border-radius:6px}
        #view-ogliad .v2ftbl table{width:100%;height:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;table-layout:auto}
        /* Рядки воронок НЕ розтягуються по висоті картки: вони стоять щільно зверху,
           а весь залишок висоти забирає рядок «Разом», і він притиснутий до низу. */
        #view-ogliad .v2ftbl tbody tr{height:1px}
        /* увесь залишок висоти забирає порожній рядок-заповнювач, тому рядки воронок
           лишаються своєї висоти зверху, а «Разом» стоїть унизу картки */
        #view-ogliad .v2ftbl tbody tr.v2gap{height:100%}
        #view-ogliad .v2ftbl tbody tr.v2gap td{padding:0;border:0}
        #view-ogliad .v2ftbl th{font-size:12px;color:var(--ink-62);font-weight:500;text-align:center;padding:9px 2px;white-space:nowrap;
          border-bottom:1px solid var(--ink-6);letter-spacing:-.01em;cursor:default;user-select:none}
        #view-ogliad .v2ftbl th.sortable{cursor:pointer}
        #view-ogliad .v2ftbl th.sortable:hover{color:var(--ink)}
        #view-ogliad .v2ftbl th.active{color:var(--ink);font-weight:600}
        #view-ogliad .v2ftbl th .ind{margin-left:3px;font-size:9px;opacity:.6}
        #view-ogliad .v2ftbl td{padding:11px 2px;border-bottom:1px solid var(--ink-4);text-align:center;white-space:nowrap;color:var(--ink);font-size:12px}
        #view-ogliad .v2ftbl th+th,#view-ogliad .v2ftbl td+td{border-left:1px solid var(--ink-4)}
        #view-ogliad .v2ftbl th:first-child,#view-ogliad .v2ftbl td:first-child{width:16px;padding-left:0}
        #view-ogliad .v2ftbl th:last-child,#view-ogliad .v2ftbl td:last-child{padding-right:0}
        #view-ogliad .v2ftbl td.v2rk{color:var(--ink-34);font-weight:600}
        #view-ogliad .v2ftbl td.v2fn{text-align:left;font-weight:600;max-width:82px;overflow:hidden;text-overflow:ellipsis}
        #view-ogliad .v2ftbl tbody tr:hover td{background:var(--ink-3)}
        #view-ogliad .v2ftbl tbody tr.v2gap:hover td{background:transparent}
        #view-ogliad .v2ftbl .v2mut{color:var(--ink-34)}
        #view-ogliad .v2ftbl td.v2hi{color:var(--up);font-weight:600}
        #view-ogliad .v2ftbl td.v2lo{color:var(--down);font-weight:600}
        #view-ogliad .v2ftbl tfoot td{border-top:1px solid var(--ink-10);border-bottom:0;font-weight:600;background:transparent}
        #view-ogliad .v2ftbl tfoot td.v2fn{font-weight:600}
        #view-ogliad .ogfnote{font-size:11.5px;color:var(--ink-62);line-height:1.45;padding-top:8px}
        #view-ogliad .ogempty{padding:22px 0;color:var(--ink-62);font-size:13px;text-align:center}

        /* Event-трекер: число веде рядок («8 328 Visitors») і воно ж найпомітніше */
        #view-ogliad #cfunnel .cfdomwrap{position:relative;flex:none}
        #view-ogliad #cfunnel .cfdombtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink-10);background:var(--card);
          color:var(--ink);font:inherit;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;max-width:180px}
        #view-ogliad #cfunnel .cfdombtn:hover{border-color:var(--ink-26)}
        #view-ogliad #cfunnel .cfdombtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-ogliad #cfunnel .cfdombtn svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
        #view-ogliad #cfunnel .cfdomwrap.open .cfdombtn svg{transform:rotate(180deg)}
        #view-ogliad #cfunnel .cfdommenu{position:absolute;top:calc(100% + 7px);right:0;min-width:206px;max-height:320px;overflow:auto;
          background:var(--card);border-radius:16px;box-shadow:0 10px 34px rgba(0,0,0,.14);padding:6px;z-index:60;display:none}
        #view-ogliad #cfunnel .cfdomwrap.open .cfdommenu{display:block}
        #view-ogliad #cfunnel .cfdommenu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
          border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:9px 12px;border-radius:11px;cursor:pointer}
        #view-ogliad #cfunnel .cfdommenu button:hover{background:var(--ink-4)}
        #view-ogliad #cfunnel .cfdommenu button.on{font-weight:600}
        #view-ogliad #cfunnel .cfdommenu button .ck{flex:none;width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
        #view-ogliad #cfunnel .cfdommenu button.on .ck{opacity:1}
        #view-ogliad #cfunnel .cfsteps{flex:1;display:flex;flex-direction:column}
        #view-ogliad #cfunnel .cfrow{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:9px 0;
          border-bottom:1px solid var(--ink-6);min-width:0}
        #view-ogliad #cfunnel .cfrow:last-child{border-bottom:0}
        #view-ogliad #cfunnel .cfh{display:flex;align-items:baseline;gap:9px;min-width:0}
        #view-ogliad #cfunnel .cfcount{flex:none;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
        #view-ogliad #cfunnel .cfname{flex:1;min-width:0;font-size:13px;color:var(--ink-62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-ogliad #cfunnel .cfrow.goal .cfname{color:var(--ink);font-weight:600}
        #view-ogliad #cfunnel .cfb{display:flex;align-items:center;gap:10px}
        #view-ogliad #cfunnel .cftrack{flex:1;min-width:22px;height:8px;border-radius:999px;background:var(--ink-6);overflow:hidden}
        #view-ogliad #cfunnel .cftrack i{display:block;height:100%;background:var(--ink-34);border-radius:999px}
        #view-ogliad #cfunnel .cfrow.goal .cftrack i{background:var(--ink)}
        /* Частка і ціна події = теж акцентні числа, не сірі підписи: частка темна
           на своїй колонці, ціна в пілюлі, щоб гроші читались окремим токеном. */
        #view-ogliad #cfunnel .cfpct{flex:none;width:48px;text-align:right;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
        #view-ogliad #cfunnel .cfprice{flex:none;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--ink-6);
          border-radius:999px;padding:5px 10px;white-space:nowrap}

        /* складання під вужчий екран: спершу герої, далі показники, графік, воронки, трекер */
        @media(max-width:1080px){
          #view-ogliad .og-roas,#view-ogliad .og-okup{grid-column:span 6;grid-row:auto}
          #view-ogliad .og-keys,#view-ogliad .ogchart,#view-ogliad .ogfunnelcard{grid-column:span 12;grid-row:auto}
          #view-ogliad #cfunnel{grid-column:span 12;grid-row:auto;order:6}
        }
        @media(max-width:760px){
          #view-ogliad .ogbento{gap:12px}
          #view-ogliad .og-roas,#view-ogliad .og-okup,#view-ogliad .og-keys,#view-ogliad .ogchart,
          #view-ogliad .ogfunnelcard,#view-ogliad #cfunnel{grid-column:span 12}
          #view-ogliad .ogcard{padding:16px 16px;border-radius:18px}
          #view-ogliad .ogbig{font-size:54px;height:54px}
          #view-ogliad .chip{padding:7px 12px;font-size:12.5px}
          #view-ogliad .ogsync{padding:9px 14px}
        }
        
/* ---- */

        #view-email .e2bar{display:flex;gap:2px;border-bottom:1px solid var(--bd);margin-bottom:16px;overflow-x:auto}
        #view-email .e2{border:0;background:transparent;color:var(--mut);font:inherit;font-size:14px;padding:11px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
        #view-email .e2.on{color:var(--tx);font-weight:600;border-bottom-color:var(--accent)}
        #view-email .fstep{border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
        #view-email .fhead{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
        #view-email .fn{width:25px;height:25px;border-radius:50%;background:#1a1a1a;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
        #view-email .fst{font-size:11px;padding:2px 9px;border-radius:20px;white-space:nowrap}
        #view-email .fst.live{background:#e3f1ec;color:#0c6b58}#view-email .fst.wait{background:#fff4e5;color:#9a6b2a}
        #view-email .fbody{border-top:1px solid var(--bd);padding:16px;background:#fafafa;display:none}
        #view-email .fstep.open .fbody{display:block}
        #view-email .eprev{max-width:440px;margin:0 auto;border:1px solid #ededed;border-radius:12px;padding:22px;background:#fff}
        #view-email .cli{padding:11px 14px;border-bottom:1px solid var(--bd);cursor:pointer}#view-email .cli:hover{background:#f3f3f3}#view-email .cli.on{background:#eef}
        
/* ---- */

        /* ===== «Поведінка» = розділ із трьома суб-вкладками (Поведінка · Записи · Теплокарта).
           Порт затвердженого превʼю nv-mix. УСІ класи мають префікс bh- і живуть під
           #view-behavior, щоб не зіткнутись із каркасними іменами панелі
           (.card .grid .hero .pill .chip .panel .seg .row .top .stack .tablecard).
           Каркас (сайдбар, топбар, .wrap, :root) не чіпано. ===== */
        #view-behavior{
          --ink:#111;
          --ink-3:rgba(17,17,17,.03);--ink-4:rgba(17,17,17,.04);--ink-6:rgba(17,17,17,.06);
          --ink-10:rgba(17,17,17,.10);--ink-18:rgba(17,17,17,.18);
          --ink-26:rgba(17,17,17,.26);--ink-34:rgba(17,17,17,.34);--ink-62:rgba(17,17,17,.62);
          --bhup:#0c6b58;--bhdn:#b42318;--sig:#b42318;--sig-bg:rgba(180,35,24,.10);
          --bhcard:#fff;--bhrad:22px;
          --bhsh:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
        }
        #view-behavior *{font-variant-numeric:tabular-nums;box-sizing:border-box}
        #view-behavior .bh-nv{max-width:1240px;margin-inline:auto;width:100%}
        #view-behavior .bh-nv h2,#view-behavior .bh-nv h3{margin:0;font-weight:600}
        #view-behavior button{font-family:inherit}

        /* ── пігулкова навігація ── */
        #view-behavior .bh-nvnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
        #view-behavior .bh-pills{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:4px;background:var(--bhcard);border-radius:999px;padding:4px;box-shadow:var(--bhsh)}
        #view-behavior .bh-pills button{border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink-62);
          padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
          transition:background .15s,color .15s}
        #view-behavior .bh-pills button i{font-size:15px}
        #view-behavior .bh-pills button:hover{color:var(--ink)}
        #view-behavior .bh-pills button.bh-on{background:var(--ink);color:#fff;font-weight:600}
        #view-behavior .bh-pills.bh-sm button{padding:6px 13px;font-size:13px}

        /* ── картки ── */
        #view-behavior .bh-card{background:var(--bhcard);border-radius:var(--bhrad);padding:20px 22px;box-shadow:var(--bhsh)}
        #view-behavior .bh-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:stretch}
        #view-behavior .bh-g4{grid-column:span 4}
        #view-behavior .bh-g5{grid-column:span 5}
        #view-behavior .bh-g6{grid-column:span 6}
        #view-behavior .bh-g7{grid-column:span 7}
        #view-behavior .bh-g12{grid-column:span 12}
        #view-behavior .bh-chead{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap;row-gap:9px}
        #view-behavior .bh-chip{width:32px;height:32px;flex:none;border-radius:11px;background:var(--ink-6);display:flex;align-items:center;justify-content:center}
        #view-behavior .bh-chip i{font-size:17px;color:var(--ink)}
        #view-behavior .bh-chead h2{font-size:15px;line-height:1.2;flex:1;min-width:100px}
        #view-behavior .bh-exp{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--ink-10);background:var(--bhcard);color:var(--ink);
          cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .15s,border-color .15s}
        #view-behavior .bh-exp:hover{background:var(--ink-6);border-color:var(--ink-18)}
        #view-behavior .bh-exp.bh-on{background:var(--ink);color:#fff;border-color:var(--ink)}
        #view-behavior .bh-cnt{flex:none;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--ink-6);border-radius:999px;padding:5px 11px;
          max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

        /* ── герой-панель «Пульс» ── */
        #view-behavior .bh-hero{padding:26px 26px 0}
        #view-behavior .bh-herotop{display:flex;gap:30px;align-items:stretch}
        #view-behavior .bh-heroL{flex:1;min-width:0;display:flex;flex-direction:column}
        #view-behavior .bh-eyebrow{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.01em}
        #view-behavior .bh-bignum{font-size:64px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin:10px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
        #view-behavior .bh-bignum .bh-unit{font-size:20px;font-weight:500;letter-spacing:0;color:var(--ink-34)}
        #view-behavior .bh-hpills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
        #view-behavior .bh-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);
          background:var(--ink-6);border-radius:999px;padding:6px 12px;white-space:nowrap}
        #view-behavior .bh-pill.bh-up{color:var(--bhup)}
        #view-behavior .bh-pill.bh-dn{color:var(--bhdn)}
        #view-behavior .bh-hchart{margin-top:18px;position:relative}
        #view-behavior .bh-hchart svg{display:block;width:100%;height:172px}
        #view-behavior .bh-heroR{width:288px;flex:none;border-left:1px solid var(--ink-6);padding-left:26px;display:flex;flex-direction:column;gap:4px}
        #view-behavior .bh-heroR .bh-rh{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;flex:none}
        #view-behavior .bh-mrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--ink-6);flex:1}
        #view-behavior .bh-mrow:last-child{border-bottom:0}
        #view-behavior .bh-mrow .bh-mk{flex:1;min-width:0;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-behavior .bh-mrow .bh-mv{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
        #view-behavior .bh-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink-6);margin:22px -26px 0}
        #view-behavior .bh-strip .bh-sc{padding:16px 26px;border-right:1px solid var(--ink-6);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
        #view-behavior .bh-strip .bh-sc:last-child{border-right:0}
        #view-behavior .bh-strip .bh-sk{font-size:13.5px;color:var(--ink);font-weight:500;white-space:nowrap}
        #view-behavior .bh-strip .bh-sv{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}

        /* ── списки-рядки з чіпом ── */
        #view-behavior .bh-lrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ink-6)}
        #view-behavior .bh-lrow:last-child{border-bottom:0}
        #view-behavior .bh-ava{width:28px;height:28px;flex:none;border-radius:9px;background:var(--ink-6);color:var(--ink);display:flex;align-items:center;
          justify-content:center;font-size:12.5px;font-weight:700;text-transform:uppercase}
        #view-behavior .bh-ava.bh-dark{background:var(--ink);color:#fff}
        #view-behavior .bh-lname{flex:1;min-width:0;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-behavior .bh-lval{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
        #view-behavior .bh-lsub{font-size:13px;color:var(--ink-62);white-space:nowrap}

        /* ── бари уваги ── */
        #view-behavior .bh-abar{display:flex;align-items:center;gap:12px;padding:9px 0}
        #view-behavior .bh-abar .bh-abn{width:118px;flex:none;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-behavior .bh-abar .bh-abt{flex:1;min-width:50px;height:8px;border-radius:999px;background:var(--ink-6);overflow:hidden}
        #view-behavior .bh-abar .bh-abt i{display:block;height:100%;background:var(--ink-34)}
        #view-behavior .bh-abar.bh-lead .bh-abt i{background:var(--ink)}
        #view-behavior .bh-abar .bh-abv{width:74px;text-align:right;font-size:13.5px;font-weight:600;color:var(--ink)}
        #view-behavior .bh-abar .bh-abc{width:62px;text-align:right;font-size:13px;color:var(--ink-62)}

        #view-behavior .bh-load{padding:60px 0;text-align:center;color:var(--ink-62);font-size:14px}
        #view-behavior .bh-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:#111;color:#fff;font-size:13px;font-weight:500;
          padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:700}
        #view-behavior .bh-toast.bh-show{opacity:1;transform:translate(-50%,0)}

        /* ── воронка скролу: щаблі однією логікою ── */
        #view-behavior .bh-ladder{display:flex;flex-direction:column;gap:10px;margin-top:4px}
        #view-behavior .bh-rung{display:grid;grid-template-columns:150px minmax(0,1fr) 46px 92px;align-items:center;gap:14px}
        #view-behavior .bh-rname{display:flex;align-items:baseline;gap:8px;min-width:0}
        #view-behavior .bh-rname .bh-rn{font-size:14.5px;font-weight:600;white-space:nowrap}
        #view-behavior .bh-rname .bh-rv{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-behavior .bh-rail{position:relative;min-width:0;height:24px;border-radius:999px;background:var(--ink-4);overflow:hidden}
        #view-behavior .bh-fill{position:absolute;left:0;top:0;bottom:0;min-width:9px;border-radius:8px}
        #view-behavior .bh-rshare{font-size:13px;font-weight:600;text-align:right;white-space:nowrap}
        #view-behavior .bh-rdelta{display:flex;justify-content:flex-end}
        #view-behavior .bh-dpill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 12px;font-size:12.5px;
          font-weight:600;background:var(--ink-6);color:var(--ink)}
        #view-behavior .bh-dpill.bh-worst{background:var(--sig-bg);color:var(--sig)}
        #view-behavior .bh-dpill.bh-start{background:transparent;color:var(--ink-62);font-weight:500}
        #view-behavior .bh-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px}
        #view-behavior .bh-hpill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;font-size:12.5px;
          background:var(--ink);color:#fff;font-weight:500}
        #view-behavior .bh-hpill.bh-ghost{background:var(--ink-6);color:var(--ink)}
        #view-behavior .bh-hpill b{font-weight:600}

        /* ── горизонтальні бари (візити, доскрол) ── */
        #view-behavior .bh-hbar{display:grid;grid-template-columns:minmax(96px,152px) minmax(0,1fr) 74px;align-items:center;gap:12px;padding:6px 0}
        #view-behavior .bh-hbn{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-behavior .bh-htrack{height:16px;border-radius:999px;background:var(--ink-4);overflow:hidden}
        #view-behavior .bh-hfill{height:100%;min-width:8px;border-radius:6px;background:var(--ink-26)}
        #view-behavior .bh-hfill.bh-lead{background:var(--ink)}
        #view-behavior .bh-hbv{font-size:13px;font-weight:600;text-align:right;white-space:nowrap}
        #view-behavior .bh-hbar.bh-slim{grid-template-columns:minmax(58px,86px) minmax(0,1fr) 96px}

        /* ── заходів до покупки ── */
        #view-behavior .bh-stack{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--ink-6)}
        #view-behavior .bh-stack:first-of-type{border-top:0}
        #view-behavior .bh-stop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
        #view-behavior .bh-sname{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #view-behavior .bh-sval{font-size:14px;font-weight:600;white-space:nowrap}
        #view-behavior .bh-smeta{font-size:12.5px;color:var(--ink-62);white-space:nowrap}
        #view-behavior .bh-dots{display:inline-flex;gap:4px;align-items:center}
        #view-behavior .bh-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-10);display:block}
        #view-behavior .bh-dots i.bh-on{background:var(--ink)}

        /* ── таблиці ── */
        #view-behavior .bh-tscroll{overflow-x:auto;margin:0 -22px;padding:0 22px}
        #view-behavior table.bh-t{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:660px;table-layout:auto}
        #view-behavior table.bh-t th{text-align:left;font-weight:500;font-size:12.5px;color:var(--ink-62);padding:9px 7px;
          white-space:nowrap;cursor:pointer;user-select:none;border-bottom:1px solid var(--ink-6);background:transparent}
        #view-behavior table.bh-t th:first-child,#view-behavior table.bh-t td:first-child{padding-left:0}
        #view-behavior table.bh-t th.bh-r{text-align:right}
        #view-behavior table.bh-t th.bh-nos{cursor:default}
        #view-behavior table.bh-t th.bh-on{color:var(--ink);font-weight:600}
        #view-behavior table.bh-t th .bh-arw{font-size:9px;margin-left:3px;opacity:.5}
        #view-behavior table.bh-t td{padding:10px 7px;border-bottom:1px solid var(--ink-4);white-space:nowrap;color:var(--ink);text-align:left}
        #view-behavior table.bh-t td.bh-r{text-align:right;font-weight:500}
        #view-behavior table.bh-t tbody tr:hover td{background:var(--ink-3)}
        #view-behavior table.bh-t tbody tr:last-child td{border-bottom:0}
        /* колонка дії їде разом з таблицею. Липкою вона бути не може: у липкому стані вона лягала
           зверху на «Статус» і різала його на «Пере…», а статус входить в обовʼязкові колонки. */
        #view-behavior table.bh-t th.bh-act,#view-behavior table.bh-t td.bh-act{text-align:right;padding-right:0}
        #view-behavior .bh-cellname{font-weight:500;max-width:104px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
        #view-behavior .bh-mini{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end;width:100%}
        #view-behavior .bh-mtrack{width:32px;height:8px;border-radius:999px;background:var(--ink-6);overflow:hidden;flex:none}
        #view-behavior .bh-mfill{height:100%;min-width:3px;border-radius:4px;background:var(--ink-34)}
        #view-behavior .bh-heatpad{border-radius:8px;padding:3px 9px;display:inline-block;font-weight:600}
        #view-behavior .bh-expand{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;border:0;width:100%;
          background:var(--ink-4);border-radius:999px;padding:11px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
        #view-behavior .bh-expand:hover{background:var(--ink-6)}
        #view-behavior .bh-none{text-align:center;color:var(--ink-62);padding:26px}

        /* ── статуси і кнопки журналу ── */
        #view-behavior .bh-st{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:500}
        #view-behavior .bh-st-ord{background:var(--ink);color:#fff}
        #view-behavior .bh-st-lead{background:var(--ink-10);color:var(--ink)}
        #view-behavior .bh-st-view{background:var(--ink-4);color:var(--ink-62)}
        #view-behavior .bh-rage{color:var(--sig);font-weight:600}
        #view-behavior .bh-play{display:inline-flex;align-items:center;gap:5px;border:0;background:var(--ink);color:#fff;
          border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
        #view-behavior .bh-play:hover{background:#000}
        #view-behavior .bh-tgl{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 15px;background:var(--ink);
          color:#fff;font-size:12.5px;cursor:pointer;border:0;font-weight:500;white-space:nowrap}
        #view-behavior .bh-tgl.bh-off{background:var(--ink-6);color:var(--ink)}
        #view-behavior .bh-recdot{width:8px;height:8px;border-radius:50%;background:var(--sig);display:inline-block;flex:none}
        #view-behavior .bh-recline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
        #view-behavior .bh-growx{flex:1}

        /* ── дропдаун розрізу і сайту ── */
        #view-behavior .bh-dd{position:relative;display:inline-block}
        #view-behavior .bh-ddbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink-10);background:var(--bhcard);
          border-radius:999px;padding:9px 15px;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;max-width:min(280px,100%)}
        #view-behavior .bh-ddbtn .bh-cap{color:var(--ink-62);font-size:12.5px}
        #view-behavior .bh-ddbtn .bh-lab{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-behavior .bh-ddbtn:hover{border-color:var(--ink-26)}
        #view-behavior .bh-ddmenu{position:absolute;right:0;top:calc(100% + 7px);z-index:60;background:var(--bhcard);border-radius:16px;
          box-shadow:0 10px 34px rgba(0,0,0,.14);padding:6px;min-width:206px;max-height:320px;overflow:auto;display:none}
        #view-behavior .bh-dd.bh-open .bh-ddmenu{display:block}
        #view-behavior .bh-ddmenu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
          border:0;background:transparent;color:var(--ink);font-size:13px;padding:9px 12px;border-radius:11px;cursor:pointer}
        #view-behavior .bh-ddmenu button:hover{background:var(--ink-4)}
        #view-behavior .bh-ddmenu button.bh-sel{background:var(--ink);color:#fff;font-weight:600}
        #view-behavior .bh-ddmenu .bh-tick{opacity:0;font-size:12px}
        #view-behavior .bh-ddmenu button.bh-sel .bh-tick{opacity:1}

        /* ── модалка запису ── */
        #view-behavior .bh-mask{position:fixed;inset:0;background:rgba(17,17,17,.42);display:flex;align-items:center;justify-content:center;
          padding:20px;z-index:900}
        #view-behavior .bh-modal{background:var(--bhcard);border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.28);width:min(560px,100%);
          padding:22px;max-height:88vh;overflow:auto}
        #view-behavior .bh-mh{display:flex;align-items:center;gap:12px;margin-bottom:16px}
        #view-behavior .bh-mh h3{font-size:16px;font-weight:600;margin:0;flex:1;min-width:0}
        #view-behavior .bh-player{border-radius:18px;background:var(--ink);color:#fff;padding:26px 20px;text-align:center;margin-bottom:16px;
          display:block;text-decoration:none}
        #view-behavior .bh-player:hover{background:#000}
        #view-behavior .bh-player .bh-pico{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;
          align-items:center;justify-content:center;font-size:20px;margin:0 auto 12px}
        #view-behavior .bh-player .bh-pcap{font-size:13px;opacity:.82}
        #view-behavior .bh-player .bh-popen{font-size:13.5px;font-weight:600;margin-top:12px}
        #view-behavior .bh-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        #view-behavior .bh-mm{background:var(--ink-4);border-radius:14px;padding:11px 14px;display:flex;align-items:baseline;
          justify-content:space-between;gap:10px}
        #view-behavior .bh-mm .bh-ml{font-size:12.5px;color:var(--ink-62)}
        #view-behavior .bh-mm .bh-mvv{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-behavior .bh-mnote{margin-top:14px;font-size:13px;color:var(--ink-62);line-height:1.55}

        /* ── вкладка «Теплокарта» ── */
        #view-behavior .bh-navplate{background:var(--bhcard);border-radius:26px;box-shadow:var(--bhsh);padding:9px 11px;display:flex;align-items:center;
          gap:12px;flex-wrap:wrap;margin-bottom:14px}
        #view-behavior .bh-cgrow{flex:1}
        #view-behavior .bh-seg{display:inline-flex;gap:4px;background:var(--ink-6);border-radius:999px;padding:4px;flex-wrap:wrap}
        #view-behavior .bh-seg button{border:0;background:transparent;font-weight:500;font-size:13px;line-height:1;font-family:inherit;color:var(--ink-62);
          padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap}
        #view-behavior .bh-seg button:hover{color:var(--ink)}
        #view-behavior .bh-seg button.bh-on{background:var(--ink);color:#fff;font-weight:600}
        #view-behavior .bh-seg.bh-sm button{padding:7px 12px;font-size:12.5px}
        #view-behavior .bh-cpill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink-10);background:var(--bhcard);border-radius:999px;
          padding:8px 14px;font-weight:500;font-size:13px;line-height:1;font-family:inherit;color:var(--ink);cursor:pointer;max-width:280px}
        #view-behavior .bh-cpill:hover{border-color:var(--ink-18)}
        #view-behavior .bh-cpill .bh-pv{color:var(--ink-62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-behavior .bh-cpill .bh-carw{color:var(--ink-34);font-size:11px}
        #view-behavior .bh-scene{background:rgba(17,17,17,.035);border-radius:28px;padding:14px}
        #view-behavior .bh-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:start}
        #view-behavior .bh-c3{grid-column:span 3}
        #view-behavior .bh-c4{grid-column:span 4}
        #view-behavior .bh-c6{grid-column:span 6}
        #view-behavior .bh-c12{grid-column:span 12}
        #view-behavior .bh-cstack{display:flex;flex-direction:column;gap:14px}
        #view-behavior .bh-chero{font-weight:600;font-size:40px;line-height:1;letter-spacing:-.025em;display:flex;align-items:baseline;gap:7px}
        #view-behavior .bh-kpills{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
        #view-behavior .bh-kpill{display:flex;align-items:center;gap:8px;background:var(--ink-6);border-radius:999px;padding:8px 13px;font-size:12.5px;
          color:var(--ink-62);white-space:nowrap}
        #view-behavior .bh-kpill b{color:var(--ink);font-weight:600;font-size:13.5px}
        #view-behavior .bh-rows{display:flex;flex-direction:column}
        #view-behavior .bh-crow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--ink-6)}
        #view-behavior .bh-rows .bh-crow:first-child{border-top:0;padding-top:2px}
        #view-behavior .bh-crn{flex:2;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-behavior .bh-crv{font-weight:600;font-size:13.5px;line-height:1;white-space:nowrap}
        #view-behavior .bh-trk{flex:1;height:8px;border-radius:999px;background:var(--ink-6);overflow:hidden;min-width:40px}
        #view-behavior .bh-trk i{display:block;height:100%;background:var(--ink)}
        /* рядок, де бар стоїть під парою «підпис + число»: у вузькій картці підпис не ріжеться */
        #view-behavior .bh-crow.bh-rowb{display:block;padding:11px 0}
        #view-behavior .bh-rows .bh-crow.bh-rowb:first-child{padding-top:2px}
        #view-behavior .bh-rowb .bh-rbh{display:flex;align-items:center;gap:9px}
        #view-behavior .bh-rowb .bh-rbh .bh-crn{flex:1;min-width:0}
        #view-behavior .bh-rowb .bh-trk{display:block;width:100%;margin-top:9px;flex:none}
        /* довгий лейбл («ДОСТАВКА + ОПЛАТА») отримує весь рядок, число їде під нього до смуги */
        #view-behavior .bh-crow.bh-rowl{display:block;padding:11px 0}
        #view-behavior .bh-rows .bh-crow.bh-rowl:first-child{padding-top:2px}
        #view-behavior .bh-rowl .bh-rbh{display:flex;align-items:center;gap:8px}
        #view-behavior .bh-rowl .bh-rbh .bh-crn{flex:1;min-width:0}
        #view-behavior .bh-rowl .bh-rfoot{display:flex;align-items:center;gap:10px;margin-top:9px}
        #view-behavior .bh-rowl .bh-trk{flex:1;min-width:40px;margin-top:0}
        #view-behavior .bh-rowl .bh-crv{flex:none}
        #view-behavior .bh-sd{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;background:var(--ink-18)}
        #view-behavior .bh-sd.bh-dn{background:var(--bhdn)}
        #view-behavior .bh-cstage{position:relative;border-radius:16px;overflow:auto;background:var(--bhcard);border:1px solid var(--ink-6);max-height:520px}
        #view-behavior .bh-cstinner{position:relative;width:100%;background-size:100% auto;background-repeat:no-repeat;background-position:top center}
        #view-behavior .bh-cstinner.bh-blank{background-image:repeating-linear-gradient(#fbfbfb,#fbfbfb 44px,#f3f3f4 44px,#f3f3f4 45px)}
        /* Вуаль поверх кадру ПРИБРАНА (18.08). Вона гасила сторінку на 62% і читалась як
           «все в тумані»: власник не бачив ні сайту, ні того, куди тиснуть. Її додавали, щоб
           чорні плями старої щільності читались на темному лендінгу; нова щільність нормується
           і має червоний пік, тому гасити кадр більше не треба. */
        #view-behavior .bh-cstinner canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
        #view-behavior .bh-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--ink-62);align-items:center}
        #view-behavior .bh-legend span{display:inline-flex;align-items:center;gap:7px}
        #view-behavior .bh-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
        /* шкала щільності: без цього селектора її перебивав круглий маркер .bh-legend i і замість смуги виходила крапка */
        #view-behavior .bh-legend i.bh-ramp{width:96px;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(17,17,17,.10),rgba(17,17,17,1))}
        #view-behavior .bh-empty{text-align:center;padding:34px 20px}
        #view-behavior .bh-empty .bh-ei{width:52px;height:52px;border-radius:16px;background:var(--ink-6);display:grid;place-items:center;margin:0 auto 12px;font-size:22px}
        #view-behavior .bh-empty h3{font-weight:600;font-size:15px;line-height:1.3;margin:0 0 6px}
        #view-behavior .bh-empty p{margin:0 auto;font-size:13px;color:var(--ink-62);max-width:420px;line-height:1.55}
        #view-behavior .bh-menu{position:fixed;z-index:900;background:var(--bhcard);border:1px solid var(--bd);border-radius:14px;
          box-shadow:0 12px 34px rgba(0,0,0,.14);padding:6px;min-width:190px;max-width:340px;max-height:60vh;overflow:auto}
        #view-behavior .bh-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
          font-weight:500;font-size:13px;line-height:1.25;font-family:inherit;padding:9px 11px;border-radius:9px;cursor:pointer}
        #view-behavior .bh-menu button:hover{background:var(--ink-6)}
        #view-behavior .bh-menu button .bh-mt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-behavior .bh-menu button .bh-tick{opacity:0;font-size:12px}
        #view-behavior .bh-menu button.bh-sel{font-weight:600}
        #view-behavior .bh-menu button.bh-sel .bh-tick{opacity:1}
        #view-behavior .bh-cmask{position:fixed;inset:0;background:rgba(17,17,17,.42);z-index:800;display:flex;align-items:center;justify-content:center;padding:20px}
        #view-behavior .bh-cmodal{background:var(--bhcard);border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.24);width:min(1000px,100%);max-height:88vh;overflow:auto;padding:6px}
        #view-behavior .bh-cmodal .bh-card{box-shadow:none;position:relative}
        #view-behavior .bh-close{position:absolute;top:15px;right:15px;width:30px;height:30px;border-radius:50%;border:1px solid var(--ink-10);
          background:var(--bhcard);cursor:pointer;font-family:inherit;font-size:14px;line-height:1;color:var(--ink)}
        #view-behavior .bh-close:hover{background:var(--ink);color:#fff}
        #view-behavior .bh-big .bh-cstage{max-height:74vh}

        /* ── вкладка «Ланцюжки» ── */
        /* підписи KPI тут довші за «Ліди/Дохід», тому в цій смузі їм дозволено переносити
           рядок: інакше на 375 нерозривний «Візитів до покупки» розпирає картку на 18px */
        #view-behavior .bh-strip.bh-chkpi .bh-sk{white-space:normal}
        #view-behavior .bh-chsrc{font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
        #view-behavior table.bh-t tr.bh-chr{cursor:pointer}
        #view-behavior table.bh-t tr.bh-chr.bh-on td{background:var(--ink-4)}
        #view-behavior .bh-chexp{width:24px;height:24px;flex:none;border-radius:8px;background:var(--ink-6);color:var(--ink);
          display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1}
        #view-behavior table.bh-t td.bh-chsub{padding:0 7px 14px;background:var(--ink-4);white-space:normal;border-bottom:1px solid var(--ink-4)}
        #view-behavior .bh-chn{display:flex;flex-direction:column}
        #view-behavior .bh-chnr{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--ink-10)}
        #view-behavior .bh-chnr:first-child{border-top:0}
        #view-behavior .bh-chno{width:24px;height:24px;flex:none;border-radius:8px;background:var(--bhcard);color:var(--ink);
          display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600}
        #view-behavior .bh-chno.bh-dark{background:var(--ink);color:#fff}
        #view-behavior .bh-chnm{font-size:13.5px;font-weight:600;color:var(--ink);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-behavior .bh-chnt{font-size:12.5px;color:var(--ink-62);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-behavior .bh-chnd{font-size:12.5px;color:var(--ink-62);white-space:nowrap}
        /* єдиний кольоровий елемент вкладки: крапка на дотику, після якого пішло замовлення */
        #view-behavior .bh-chdot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--bhup);display:inline-block}
        #view-behavior .bh-chnote{margin-top:12px;font-size:13px;color:var(--ink-62);line-height:1.55}
        /* пагінація спільна на всю BI, але всередині картки живе за bh-пластикою */
        #view-behavior .pgr{border-top:1px solid var(--ink-6);padding:12px 0 0;margin-top:14px}
        #view-behavior .pgr button{border-radius:9px}
        /* активна сторінка у палітрі вкладки: чорна, а не акцентна зелена */
        #view-behavior .pgr button.on{background:var(--ink);border-color:var(--ink);color:#fff}

        /* ── адаптив ── */
        @media(max-width:1120px){
          #view-behavior .bh-c3{grid-column:span 6}
          #view-behavior .bh-c4{grid-column:span 6}
          #view-behavior .bh-c6{grid-column:span 12}
        }
        @media(max-width:1080px){
          #view-behavior .bh-heroR{width:250px;padding-left:20px}
        }
        @media(max-width:900px){
          #view-behavior .bh-g4,#view-behavior .bh-g5,#view-behavior .bh-g6,#view-behavior .bh-g7{grid-column:span 12}
          #view-behavior .bh-herotop{flex-direction:column;gap:22px}
          #view-behavior .bh-heroR{width:100%;border-left:0;border-top:1px solid var(--ink-6);padding:16px 0 0}
        }
        @media(max-width:820px){
          /* жоден ряд-перемикач не має права вилізти за картку */
          #view-behavior .bh-recline{flex-direction:column;align-items:stretch}
          #view-behavior .bh-recline .bh-growx{display:none}
          #view-behavior .bh-recline .bh-dd,#view-behavior .bh-recline .bh-cnt{align-self:flex-start;max-width:100%}
          #view-behavior .bh-ddbtn{max-width:100%}
          /* на вузькому екрані кнопка стоїть зліва, тому меню розкриваємо вправо, інакше воно ховається за краєм */
          #view-behavior .bh-ddmenu{left:0;right:auto}
        }
        @media(max-width:760px){
          #view-behavior .bh-c3,#view-behavior .bh-c4,#view-behavior .bh-c6{grid-column:span 12}
          #view-behavior .bh-scene{padding:10px;border-radius:22px}
          #view-behavior .bh-chero{font-size:32px}
          #view-behavior .bh-navplate{border-radius:20px;gap:10px}
          #view-behavior .bh-navplate .bh-cgrow{display:none}
          #view-behavior .bh-seg{width:100%}
          #view-behavior .bh-seg button{flex:1 1 auto;text-align:center;padding:9px 10px}
          #view-behavior .bh-seg.bh-sm button{padding:8px 9px}
          #view-behavior .bh-cpill{width:100%;max-width:100%;justify-content:flex-start}
          #view-behavior .bh-cpill .bh-pv{flex:1;min-width:0}
        }
        @media(max-width:640px){
          #view-behavior .bh-rung{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name delta" "rail share";column-gap:10px;row-gap:6px}
          #view-behavior .bh-rname{grid-area:name}
          #view-behavior .bh-rdelta{grid-area:delta}
          #view-behavior .bh-rail{grid-area:rail;height:22px}
          #view-behavior .bh-rshare{grid-area:share;min-width:40px}
          #view-behavior .bh-hbar{grid-template-columns:minmax(80px,110px) minmax(0,1fr) 64px;gap:9px}
          #view-behavior .bh-hbar.bh-slim{grid-template-columns:minmax(46px,60px) minmax(0,1fr) 86px;gap:9px}
          #view-behavior .bh-mgrid{grid-template-columns:1fr}
        }
        @media(max-width:560px){
          #view-behavior .bh-hero{padding:20px 18px 0}
          #view-behavior .bh-card{padding:18px}
          #view-behavior .bh-tscroll{margin:0 -18px;padding:0 18px}
          #view-behavior .bh-bignum{font-size:46px}
          #view-behavior .bh-strip{grid-template-columns:1fr 1fr;margin:18px -18px 0}
          /* підпис над числом: «808 446 грн» у 20px не влазить у пів картки на 375 */
          #view-behavior .bh-strip .bh-sc{padding:13px 18px;border-bottom:1px solid var(--ink-6);flex-direction:column;align-items:flex-start;gap:3px}
          #view-behavior .bh-strip .bh-sv{font-size:17px}
          #view-behavior .bh-strip .bh-sc:nth-child(2n){border-right:0}
          #view-behavior .bh-strip .bh-sc:nth-child(n+3){border-bottom:0}
          /* фіксовані колонки рядків не влазять у 247px контенту картки на 375 */
          #view-behavior .bh-abar{gap:8px}
          #view-behavior .bh-abar .bh-abn{width:80px}
          #view-behavior .bh-abar .bh-abt{min-width:30px}
          #view-behavior .bh-abar .bh-abv{width:66px}
          #view-behavior .bh-abar .bh-abc{width:38px}
        }
        
/* ---- */

        #view-settings .st-user{border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff}
        #view-settings .st-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
        #view-settings .st-name{font-weight:600}#view-settings .st-email{color:var(--mut);font-size:13px}
        #view-settings .pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
        #view-settings .pill.on{background:#e3f6ee;color:#0c8b6c}#view-settings .pill.off{background:#fdecea;color:#b42318}#view-settings .pill.inv{background:#fff4e5;color:#b25e00}
        #view-settings .tags{margin:8px 0;font-size:12px;color:var(--mut)}#view-settings .tag{display:inline-block;background:#eef2ff;color:#3538cd;border-radius:6px;padding:2px 7px;margin:2px 4px 2px 0}
        #view-settings .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
        #view-settings .ed{border:1px solid var(--bd);border-radius:14px;padding:18px;background:#fff}
        #view-settings .scope{display:flex;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap}
        #view-settings select,#view-settings input.t{padding:9px 11px;border:1px solid var(--bd2,#c9cccf);border-radius:9px;font:inherit;font-size:14px;background:#fff;color:var(--tx)}
        #view-settings .row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--bd)}
        #view-settings .row .lbl{flex:1;display:flex;align-items:center;gap:10px}
        #view-settings .subrow{padding-left:26px;font-size:13px}
        #view-settings .adminbox{background:#f6f9ff;border:1px solid #d9e3ff;border-radius:10px;padding:12px 14px;margin:10px 0}
        #view-settings .key{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#f1f2f3;border-radius:8px;padding:8px 10px;word-break:break-all;user-select:all;margin-top:8px}
        #view-settings .btn.g{background:#0c8b6c;color:#fff}#view-settings .btn.d{background:#b42318;color:#fff}#view-settings .btn.o{background:#fff;color:var(--tx);border:1px solid var(--bd2,#c9cccf)}
        #view-settings .btabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);margin:14px 0 6px}
        #view-settings .btabs button{border:0;background:transparent;color:var(--mut);font:inherit;font-size:14px;font-weight:500;padding:9px 18px;cursor:pointer;border-bottom:2px solid transparent}
        #view-settings .btabs button.on{color:var(--tx);font-weight:600;border-bottom-color:var(--accent)}
        .foot a.on{background:#eef0f2;color:var(--tx);font-weight:600;border-radius:9px}.foot a.on i{color:var(--tx)}
        /* ── s2: редизайн Налаштувань (затверджений manager-bi) ── */
        #view-settings .s2{--ink:#202223;--sub:#6d7175;--faint:#9aa1a9;--line:#eceef1;--line-strong:#e2e5e9;--seg:#f1f2f4;--up:#0f7a4d;--down:#b42318;--amber:#b26a00;--dup:#5b6b8c;--rad:16px}
        #view-settings .s2 .num{font-variant-numeric:tabular-nums}
        #view-settings .s2 button{font:inherit;cursor:pointer;color:inherit}
        #view-settings .s2-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
        #view-settings .s2-rail{position:sticky;top:14px;display:flex;flex-direction:column;gap:3px}
        #view-settings .s2-rlbl{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.05em;padding:2px 10px 8px}
        #view-settings .s2-ritem{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:10px;color:var(--sub);transition:background .15s,color .15s}
        #view-settings .s2-ritem:hover{background:var(--seg);color:var(--ink)}
        #view-settings .s2-ritem.on{background:var(--ink);color:#fff}
        #view-settings .s2-ritem svg{width:19px;height:19px;flex:0 0 auto}
        #view-settings .s2-ritem .rtx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:560}
        #view-settings .s2-ritem.on .rtx{font-weight:620}
        #view-settings .s2-ritem .rcnt{font-size:10.5px;font-weight:700;color:var(--ink);background:var(--seg);border-radius:999px;padding:1px 7px;flex:0 0 auto;font-variant-numeric:tabular-nums}
        #view-settings .s2-ritem.on .rcnt{background:rgba(255,255,255,.20);color:#fff}
        #view-settings .s2-railfoot{margin-top:12px;padding:0 10px;font-size:11.5px;color:var(--faint);font-weight:520;line-height:1.5}
        #view-settings .s2-content{min-width:0}
        #view-settings .s2-sechead{margin-bottom:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
        #view-settings .s2-sechead h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0}
        #view-settings .s2-sechead p{margin:3px 0 0;font-size:12.5px;color:var(--sub);font-weight:520;max-width:640px}
        #view-settings .s2-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap}
        #view-settings .s2-card{background:#fff;border-radius:var(--rad);border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,13,16,.03);overflow:hidden;margin-bottom:16px}
        #view-settings .s2-cardh{padding:14px 18px 12px;box-shadow:inset 0 -1px 0 var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
        #view-settings .s2-cardh .t{font-size:11px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.05em}
        #view-settings .s2-cardh .n{font-size:11.5px;color:var(--faint);font-weight:600}
        #view-settings .s2-r{display:flex;align-items:center;gap:14px;padding:13px 18px;box-shadow:inset 0 -1px 0 var(--line);width:100%;text-align:left;transition:background .12s}
        #view-settings .s2-r:last-child{box-shadow:none}
        #view-settings .s2-r.click{cursor:pointer}
        #view-settings .s2-r.click:hover{background:var(--seg)}
        #view-settings .s2-grip{width:14px;flex:0 0 auto;color:var(--faint);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
        #view-settings .s2-grip:hover{color:var(--sub)}
        #view-settings .s2-r.s2-dragging{opacity:.55;background:#f5f6f8;cursor:grabbing}
        #view-settings .s2-r.s2-dragging .s2-grip{cursor:grabbing}
        #view-settings .s2-rmain{flex:1;min-width:0}
        #view-settings .s2-rname{font-size:14.5px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-settings .s2-rmeta{font-size:11.5px;color:var(--sub);font-weight:500;margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
        #view-settings .s2-rright{flex:0 0 auto;display:flex;align-items:center;gap:12px}
        #view-settings .s2-btag{font-size:10px;font-weight:680;text-transform:uppercase;letter-spacing:.03em;color:var(--faint);background:var(--seg);border-radius:5px;padding:1px 6px;line-height:1.6}
        #view-settings .s2-btag.lock{color:var(--amber)}
        #view-settings .s2-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:560;padding:3px 9px;border-radius:999px;white-space:nowrap}
        #view-settings .s2-pill .pd{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
        #view-settings .s2-pill.neutral{background:var(--seg);color:var(--sub)} #view-settings .s2-pill.neutral .pd{background:var(--faint)}
        #view-settings .s2-pill.ok{background:rgba(15,122,77,.14);color:var(--up)} #view-settings .s2-pill.ok .pd{background:var(--up)}
        #view-settings .s2-pill.warn{background:rgba(178,106,0,.14);color:var(--amber)} #view-settings .s2-pill.warn .pd{background:var(--amber)}
        #view-settings .s2-pill.bad{background:rgba(180,35,24,.13);color:var(--down)} #view-settings .s2-pill.bad .pd{background:var(--down)}
        #view-settings .s2-pill.dup{background:rgba(91,107,140,.15);color:var(--dup)} #view-settings .s2-pill.dup .pd{background:var(--dup)}
        #view-settings .s2-sw{width:34px;height:20px;border-radius:999px;background:var(--line-strong);position:relative;flex:0 0 auto;border:0;transition:background .18s;padding:0;display:inline-block}
        #view-settings .s2-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:left .18s}
        #view-settings .s2-sw.on{background:var(--ink)}
        #view-settings .s2-sw.on::after{left:16px}
        #view-settings .s2-rpill{font-size:11px;font-weight:600;color:var(--sub);background:var(--seg);border-radius:999px;padding:2px 9px;white-space:nowrap;flex:0 0 auto}
        #view-settings .s2-rpill.owner{color:#fff;background:var(--ink)}
        #view-settings .s2-seg{display:inline-flex;background:var(--seg);border-radius:12px;padding:3px;gap:2px;margin-bottom:14px}
        #view-settings .s2-seg button{border:0;background:transparent;color:var(--sub);font-size:13px;font-weight:580;padding:8px 18px;border-radius:9px;transition:color .15s,background .15s}
        #view-settings .s2-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(11,13,16,.10);font-weight:620}
        #view-settings .s2-osum{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--rad);box-shadow:0 1px 2px rgba(11,13,16,.03);overflow:hidden;margin-bottom:16px}
        #view-settings .s2-rnums{display:flex;align-items:center;gap:14px;flex-shrink:0}
        #view-settings .s2-rnum{display:flex;flex-direction:column;align-items:flex-end;min-width:34px}
        #view-settings .s2-rnum .v{font-size:14px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
        #view-settings .s2-rnum .k{font-size:10px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
        #view-settings .s2-rnum.warn .v{color:var(--red,#b42318)}
        #view-settings .s2-ocell{padding:18px 16px;box-shadow:inset -1px 0 0 var(--line)}
        #view-settings .s2-ocell:last-child{box-shadow:none}
        #view-settings .s2-ocell .ov{font-size:28px;font-weight:720;letter-spacing:-.03em}
        #view-settings .s2-ocell .ol{font-size:11px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
        #view-settings .s2-rmx{display:flex;align-items:center;gap:12px;padding:13px 18px;box-shadow:inset 0 -1px 0 var(--line);width:100%;border:0;background:transparent;text-align:left;cursor:pointer;transition:background .12s}
        #view-settings .s2-rmx:last-child{box-shadow:none}
        #view-settings .s2-rmx:hover{background:var(--seg)}
        #view-settings .s2-rmx .rn{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-settings .s2-rmx .rk{font-size:11px;color:var(--faint);font-weight:600;background:var(--seg);border-radius:6px;padding:2px 8px;flex:0 0 auto}
        #view-settings .s2-rmx .rd{font-size:12px;color:var(--sub);font-weight:500;flex:0 0 auto;max-width:52%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-settings .s2-foothint{padding:2px 4px 6px;font-size:12px;color:var(--faint);font-weight:500;line-height:1.55}
        #view-settings .s2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:11px 17px;font-size:13.5px;font-weight:600;white-space:nowrap;border:1px solid var(--line-strong);background:#fff;color:var(--ink);transition:border-color .15s,transform .12s;letter-spacing:-.01em}
        #view-settings .s2-btn:hover{border-color:#c9cccf}
        #view-settings .s2-btn:active{transform:scale(.98)}
        #view-settings .s2-btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
        #view-settings .s2-btn.danger{color:var(--down);border-color:var(--line-strong)}
        #view-settings .s2-btn.sm{padding:9px 13px;font-size:13px}
        #view-settings .s2-empty{padding:26px 18px;text-align:center;color:var(--sub);font-size:13px}
        /* модалка/діалоги (у body, унікальні класи) */
        .s2m-ovl{position:fixed;inset:0;background:rgba(20,22,24,.42);z-index:1200;display:flex;align-items:flex-start;justify-content:center;padding:40px 22px;overflow:auto;opacity:0;pointer-events:none;transition:opacity .2s;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#202223}
        .s2m-ovl.show{opacity:1;pointer-events:auto}
        .s2m-modal{width:100%;max-width:760px;background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(11,13,16,.28);overflow:hidden;transform:translateY(10px) scale(.99);transition:transform .24s cubic-bezier(.23,1,.32,1)}
        .s2m-ovl.show .s2m-modal{transform:none}
        .s2m-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px 16px;box-shadow:inset 0 -1px 0 #eceef1}
        .s2m-h .mt{font-size:18px;font-weight:700;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .s2m-x{width:34px;height:34px;border:1px solid #e2e5e9;background:#fff;border-radius:9px;color:#6d7175;font-size:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;transition:border-color .15s,color .15s}
        .s2m-x:hover{border-color:#c9cccf;color:#202223}
        .s2m-b{padding:18px 24px 6px;max-height:calc(100vh - 220px);overflow-y:auto}
        .s2m-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
        .s2m-foot{display:flex;align-items:center;gap:12px;padding:14px 24px;box-shadow:inset 0 1px 0 #eceef1;position:sticky;bottom:0;background:#fff;flex-wrap:wrap}
        .s2m-foot .sp{flex:1}
        .s2m-side{background:#f6f6f7;border-radius:14px;padding:16px 16px 8px;align-self:start}
        .s2m-side .sh{font-size:10.5px;color:#9aa1a9;font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
        .s2-sublbl{font-size:10.5px;color:#9aa1a9;font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 9px}
        .s2-sublbl.first{margin-top:2px}
        .s2-field{margin-bottom:12px}
        .s2-field label{display:block;font-size:11px;color:#9aa1a9;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
        .s2-inp,.s2-sel{width:100%;border:1px solid #e2e5e9;background:#fff;border-radius:9px;padding:10px 13px;font-size:14px;color:#202223;outline:0;font-family:inherit;transition:border-color .15s}
        .s2-inp:focus,.s2-sel:focus{border-color:#b7bbbf}
        .s2-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
        .s2-togrow{display:flex;align-items:center;gap:12px;padding:12px 0;box-shadow:inset 0 -1px 0 #eceef1}
        .s2-togrow:last-of-type{box-shadow:none}
        .s2-togrow .tt{flex:1;min-width:0}
        .s2-togrow .tt .a{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
        .s2-togrow .tt .b{font-size:11.5px;color:#6d7175;margin-top:2px;line-height:1.45}
        .s2-lockb{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#b26a00;background:rgba(178,106,0,.13);border-radius:5px;padding:1px 6px}
        .s2m-modal .s2-sw{width:34px;height:20px;border-radius:999px;background:#e2e5e9;position:relative;flex:0 0 auto;border:0;transition:background .18s;padding:0;display:inline-block}
        .s2m-modal .s2-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:left .18s}
        .s2m-modal .s2-sw.on{background:#202223}.s2m-modal .s2-sw.on::after{left:16px}
        .s2m-modal .s2-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:560;padding:3px 9px;border-radius:999px;white-space:nowrap}
        .s2m-modal .s2-pill .pd{width:6px;height:6px;border-radius:50%}
        .s2m-modal .s2-pill.stcustom{border:1px solid transparent}
        .sscls{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
        .ssclsw{width:34px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.10);font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:transform .08s,box-shadow .12s}
        .ssclsw:hover{transform:translateY(-1px)}
        .ssclsw.on{outline:2px solid #1a56db;outline-offset:1px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
        .ssclsw.ssclx{background:#fff;color:#6d7175;border-style:dashed}
        .s2m-modal .s2-pill.neutral{background:#f1f2f4;color:#6d7175}.s2m-modal .s2-pill.neutral .pd{background:#9aa1a9}
        .s2m-modal .s2-pill.ok{background:rgba(15,122,77,.14);color:#0f7a4d}.s2m-modal .s2-pill.ok .pd{background:#0f7a4d}
        .s2m-modal .s2-pill.warn{background:rgba(178,106,0,.14);color:#b26a00}.s2m-modal .s2-pill.warn .pd{background:#b26a00}
        .s2m-modal .s2-pill.bad{background:rgba(180,35,24,.13);color:#b42318}.s2m-modal .s2-pill.bad .pd{background:#b42318}
        .s2m-modal .s2-pill.dup{background:rgba(91,107,140,.15);color:#5b6b8c}.s2m-modal .s2-pill.dup .pd{background:#5b6b8c}
        .s2-chips{display:flex;flex-wrap:wrap;gap:8px}
        .s2-chip{border:1px solid #e2e5e9;background:#fff;color:#6d7175;font-size:13px;font-weight:560;padding:8px 14px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:transform .14s,background .15s,color .15s,border-color .15s}
        .s2-chip:active{transform:scale(.96)}
        .s2-chip.on{background:#202223;border-color:#202223;color:#fff}
        .s2-chip .lk{font-size:10px;opacity:.8}
        .s2-vchip{display:inline-flex;align-items:center;gap:7px;background:#f1f2f4;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:560;color:#202223}
        .s2-vchip .x{color:#9aa1a9;font-size:13px;line-height:1;cursor:pointer}
        .s2-vchip.addc{background:#fff;border:1px dashed #e2e5e9;color:#6d7175;cursor:pointer}
        .s2-rd{display:flex;align-items:center;gap:11px;border:1px solid #e2e5e9;border-radius:11px;padding:12px 13px;transition:border-color .15s,background .15s;margin-bottom:8px;cursor:pointer}
        .s2-rd.on{border-color:#202223;background:#f1f2f4}
        .s2-rd .ro{width:17px;height:17px;border-radius:50%;border:1.6px solid #e2e5e9;flex:0 0 auto;position:relative}
        .s2-rd.on .ro{border-color:#202223}
        .s2-rd.on .ro::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#202223}
        .s2-rd .rt{flex:1;min-width:0;font-size:14px;font-weight:560}
        .s2-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;box-shadow:inset 0 -1px 0 #eceef1}
        .s2-kv:last-child{box-shadow:none}
        .s2-kv .kk{font-size:14px;font-weight:560;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .s2-kv .vv{font-size:13px;color:#6d7175;font-weight:560;flex:0 0 auto}
        .s2c-ovl{position:fixed;inset:0;background:rgba(11,13,16,.5);z-index:1300;opacity:0;pointer-events:none;transition:opacity .2s}
        .s2c-ovl.show{opacity:1;pointer-events:auto}
        .s2c-dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);width:calc(100% - 56px);max-width:380px;z-index:1301;opacity:0;pointer-events:none;transition:opacity .22s,transform .26s cubic-bezier(.23,1,.32,1);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#202223}
        .s2c-dlg.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
        .s2c-card{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(11,13,16,.32);padding:20px 22px 18px}
        .s2c-title{font-size:16.5px;font-weight:700;letter-spacing:-.02em;text-align:center}
        .s2c-obj{margin:12px 0 4px;background:#f1f2f4;border-radius:11px;padding:11px 13px;font-size:13.5px;font-weight:560;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .s2c-actions{display:flex;gap:9px;margin-top:16px}
        .s2c-actions .s2c-btn{flex:1}
        .s2c-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:11px 17px;font-size:13.5px;font-weight:600;white-space:nowrap;border:1px solid #e2e5e9;background:#fff;color:#202223;cursor:pointer;font-family:inherit}
        .s2c-btn.pri{background:#202223;color:#fff;border-color:#202223}
        .s2c-btn.danger{background:#b42318;color:#fff;border-color:#b42318}
        .s2c-fields{margin-top:14px;display:flex;flex-direction:column;gap:12px;text-align:left}
        .s2c-fields .s2c-lbl{display:block;font-size:11px;color:#9aa1a9;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
        @media (max-width:1100px){.s2m-cols{grid-template-columns:1fr}}
        @media (max-width:900px){#view-settings .s2-body{grid-template-columns:minmax(0,1fr);gap:14px}#view-settings .s2-rail{position:static;flex-direction:row;overflow-x:auto;gap:6px}#view-settings .s2-rlbl,#view-settings .s2-railfoot{display:none}#view-settings .s2-ritem{flex:0 0 auto;width:auto;padding:9px 13px}#view-settings .s2-osum{grid-template-columns:1fr}}
        @media (max-width:700px){#view-settings .s2-r{flex-wrap:wrap}#view-settings .s2-rmain{flex:1 1 100%}#view-settings .s2-rright{flex:1 1 100%;justify-content:flex-end;margin-top:2px}#view-settings .s2-sechead{align-items:stretch}#view-settings .s2-acts{width:100%}#view-settings .s2-acts .s2-btn{flex:1}}
        /* ── V5 «Компакт-консоль»: вимірена ширина, інлайн-редактори, кастомний дропдаун ── */
        #view-settings .s2-content{max-width:860px}
        #view-settings .s2-sechead{align-items:center}
        #view-settings .s2-btn.xs{padding:7px 11px;font-size:12.5px;border-radius:9px}
        #view-settings .s2-item{box-shadow:inset 0 -1px 0 var(--line)}
        #view-settings .s2-item:last-child{box-shadow:none}
        #view-settings .s2-item>.s2-r{box-shadow:none}
        #view-settings .s2-item.open>.s2-r{background:var(--seg)}
        #view-settings .s2-item.s2-dragging,#view-settings .s2-optrow.s2-dragging{opacity:.55;background:#f5f6f8}
        #view-settings .s2-item.s2-dragging .s2-grip,#view-settings .s2-optrow.s2-dragging .s2-grip{cursor:grabbing}
        #view-settings .s2-chev{width:16px;height:16px;flex:0 0 auto;color:var(--faint);transition:transform .2s}
        #view-settings .s2-item.open .s2-chev{transform:rotate(90deg)}
        #view-settings .s2-edit{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.23,1,.32,1)}
        #view-settings .s2-item.open .s2-edit{grid-template-rows:1fr}
        #view-settings .s2-edit-clip{overflow:hidden;min-height:0}
        #view-settings .s2-edit-in{padding:6px 18px 18px;background:#fcfcfd;box-shadow:inset 0 1px 0 var(--line)}
        #view-settings .s2-eg2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
        #view-settings .s2-elbl{font-size:10.5px;color:#9aa1a9;font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin:14px 0 8px}
        #view-settings .s2-elbl.first{margin-top:2px}
        #view-settings .s2-chiprow{display:flex;flex-wrap:wrap;gap:8px}
        #view-settings .s2-efoot{display:flex;align-items:center;gap:9px}
        #view-settings .s2-sp{flex:1}
        #view-settings .s2-optrow{display:flex;align-items:center;gap:8px;margin-bottom:8px;max-width:440px}
        #view-settings .s2-optrow input{flex:1}
        #view-settings .s2-optdel{width:36px;height:40px;flex:0 0 auto;border:1px solid #e2e5e9;background:#fff;border-radius:9px;color:#9aa1a9;cursor:pointer;font-size:16px;line-height:1}
        #view-settings .s2-optdel:hover{color:var(--down);border-color:#e6c4c0}
        #view-settings .s2-ocpv{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;max-width:360px}
        #view-settings .s2-ocpvh{font-size:11px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
        #view-settings .s2-ocpvl{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
        #view-settings .s2dd{position:relative;max-width:340px}
        #view-settings .s2dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #e2e5e9;background:#fff;border-radius:9px;padding:10px 13px;font:inherit;font-size:14px;color:#202223;cursor:pointer;text-align:left}
        #view-settings .s2dd-btn:hover{border-color:#c9cccf}
        #view-settings .s2dd.open .s2dd-btn{border-color:#b7bbbf}
        #view-settings .s2dd-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-settings .s2dd-ph{color:#9aa1a9}
        #view-settings .s2dd-car{color:#9aa1a9;font-size:11px;flex:0 0 auto;transition:transform .18s}
        #view-settings .s2dd.open .s2dd-car{transform:rotate(180deg)}
        #view-settings .s2dd-panel{position:absolute;left:0;right:0;top:calc(100% + 5px);background:#fff;border:1px solid #e2e5e9;border-radius:11px;box-shadow:0 12px 34px rgba(11,13,16,.14);padding:5px;z-index:40;display:none;max-height:240px;overflow:auto}
        #view-settings .s2dd.open .s2dd-panel{display:block}
        #view-settings .s2dd-o{padding:9px 11px;border-radius:7px;font-size:13.5px;cursor:pointer}
        #view-settings .s2dd-o:hover{background:var(--seg)}
        #view-settings .s2dd-empty{padding:9px 11px;color:#9aa1a9;font-size:13px}
        #view-settings .s2-stbadge{font-size:11px;font-weight:640;padding:2px 9px;border-radius:999px;white-space:nowrap}
        #view-settings .s2-stbadge.ok{background:rgba(15,122,77,.14);color:var(--up)}
        #view-settings .s2-stbadge.off{background:var(--seg);color:var(--sub)}
        #view-settings .s2-stbadge.inv{background:rgba(178,106,0,.13);color:var(--amber)}
        #view-settings .s2-role-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:6px;background:#ece9fd;color:#6c4cd6;white-space:nowrap}
        #view-settings .s2-teamr{align-items:center}
        #view-settings .s2-tnrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
        #view-settings .s2-teamacts{gap:8px;flex-wrap:wrap}
        #view-settings .s2-tglr{cursor:pointer}
        #view-settings .s2-tglr:hover{background:var(--seg)}
        #view-settings .s2-tglr.s2-sub{padding-left:34px}
        #view-settings .s2-sw.s2-sw-dis{opacity:.45}
        #view-settings .s2-edwrap .s2-edhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
        #view-settings .s2-edwrap .s2-edhead b{font-size:16px}
        @media (max-width:600px){#view-settings .s2-eg2{grid-template-columns:1fr}}
        /* ── set-fixes 2026-08-13: B1 текст чіпа-бакета, B3/B4 вложеність+компакт редактора доступу, C замок дефолт-статусу ── */
        /* B1: активний чіп бакета переставав показувати текст, бо #view-settings .s2 button{color:inherit} (1,2,1) перебивав .s2-chip.on{color:#fff}. Повертаємо читабельний текст. */
        #view-settings .s2 button.s2-chip{color:#6d7175}
        #view-settings .s2 button.s2-chip.on{color:#fff}
        /* B3/B4: редактор доступу — виміряна колонка (тумблер не через увесь екран) + вложеність секція→підпункти. */
        #view-settings .s2-treecard{max-width:460px}
        #view-settings .s2-tgmaster{background:var(--seg)}
        #view-settings .s2-tgmaster .s2-rname{font-weight:700}
        #view-settings .s2-tgmaster .s2-rmeta{font-size:11px;color:var(--sub);font-weight:500;margin-top:2px}
        #view-settings .s2-tgparent .s2-rname{font-weight:640}
        #view-settings .s2-tgsubs{margin-left:22px;border-left:2px solid var(--line-strong)}
        #view-settings .s2-tgsubs .s2-tglr.s2-sub{padding-left:15px}
        /* C: дефолтний статус (перший активний за sort — куди приходять нові замовлення) = замок, без видалення/DnD. */
        #view-settings .s2-lock{width:14px;flex:0 0 auto;color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;cursor:default}
        #view-settings .s2-defbadge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--amber);background:rgba(178,106,0,.13);border-radius:5px;padding:1px 6px;margin-left:7px;vertical-align:middle}
        #view-settings .s2-defnote{font-size:12px;color:var(--amber);font-weight:560;display:inline-flex;align-items:center;gap:6px}
        
/* ---- */

/* ===== Картка деталі замовлення (десктоп) — дизайн v08-final.
   Усі класи з префіксом oc + скоуп під .occard, щоб не конфліктувати з рештою DASH_HTML
   (де вже є глобальні .on/.btn/.tag/.num/.ell/.pane/.rail/.sel/.foot/.open). ===== */
.drawer.ocwide{background:rgba(20,22,24,.42);overflow:auto;padding:22px}
.drawer.ocwide.show{display:flex;align-items:flex-start;justify-content:center}
.drawer.ocwide .sheet{position:relative;right:auto;top:auto;left:auto;height:auto;width:100%;max-width:1180px;max-height:none;background:transparent;border-left:0;padding:0;overflow:visible}
.occard{--bg:#f6f6f7;--ink:#202223;--sub:#6d7175;--faint:#9aa1a9;--line:#eceef1;--linestr:#e3e3e3;--up:#0c6b58;--down:#b42318;--panel:#fff;--seg:#f1f2f4;
  width:100%;background:var(--bg);border-radius:20px;box-shadow:0 24px 70px rgba(11,13,16,.28);overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - 44px);color:var(--ink);font-size:14px;line-height:1.5;text-align:left}
.occard *{box-sizing:border-box}
.occard button{font:inherit;cursor:pointer}
.occard input,.occard select{font:inherit}
.occard .ocnum{font-variant-numeric:tabular-nums}
.occard .ocell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.occard .ocmut{color:var(--sub)}
/* Header */
.occard .ochd{background:var(--panel);box-shadow:inset 0 -1px 0 var(--line);padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;transition:background .28s ease}
.occard .ochdid{display:flex;align-items:center;gap:10px;min-width:0}
.occard .ocoid{font-size:20px;font-weight:730;letter-spacing:-.02em}
/* B7-5: шапка веде «Клієнтом», ID+сайт — дрібний мета-рядок */
.occard .ochdcli{display:flex;flex-direction:column;gap:1px;min-width:0}
.occard .ochdclil{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em}
.occard .ochdclinm{font-size:18px;font-weight:730;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
.occard .ochdmeta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--sub);font-weight:560;min-width:0}
.occard .ocsrc{font-size:11.5px;color:var(--sub);font-weight:600;background:var(--seg);border-radius:999px;padding:3px 11px;white-space:nowrap;text-decoration:none;transition:background .15s ease,color .15s ease}
.occard .ocsrc:hover{background:#e7e9ec;color:var(--ink)}
.occard .ochdsep{color:var(--faint);font-size:13px;line-height:1}
.occard .ochtimes{display:flex;gap:18px}
.occard .ochtimes .octt{font-size:11px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.occard .ochtimes .octv{font-size:12.5px;color:var(--sub);font-weight:560;margin-top:2px}
.occard .ocstatwrap{position:relative;margin-left:auto}
.occard .ocstatbtn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600;white-space:nowrap;transition:transform .15s ease}
.occard .ocstatbtn .ocpd{width:7px;height:7px;border-radius:50%;background:#fff}
.occard .ocstatbtn:active{transform:scale(.97)}
.occard .ocstatbtn .occv{color:var(--faint);font-size:11px}
.occard .ocstatpop{display:none;position:absolute;right:0;top:calc(100% + 8px);width:216px;background:var(--panel);border:1px solid var(--linestr);border-radius:12px;box-shadow:0 14px 34px rgba(11,13,16,.14);padding:6px;z-index:20}
.occard .ocstatpop.ocopen{display:block}
.occard .ocso{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:520;color:var(--ink)}
.occard .ocso .ocd{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.occard .ocso.ocon{font-weight:640}
.occard .ocso.ocon .ocd{background:var(--ink)}
.occard .ocso.ocdis{opacity:.55;cursor:default}
.occard .ocxbtn{width:34px;height:34px;border:1px solid var(--linestr);background:var(--panel);border-radius:9px;color:var(--sub);font-size:16px;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease;flex:none}
.occard .ocxbtn:hover{border-color:#c9cccf;color:var(--ink)}
/* Body grid */
.occard .ocbody{display:grid;grid-template-columns:208px minmax(0,1fr) 292px;gap:0;flex:1;min-height:0}
.occard .ocrail{background:var(--panel);box-shadow:inset -1px 0 0 var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.occard .ocrlbl{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px 8px}
.occard .ocritem{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:10px;color:var(--sub);transition:background .15s ease,color .15s ease}
.occard .ocritem:hover{background:var(--seg)}
.occard .ocritem.ocon{background:var(--ink);color:#fff}
.occard .ocritem .ocri{width:19px;height:19px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
.occard .ocritem .ocrtx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:560}
.occard .ocritem .ocrcnt{font-size:10.5px;font-weight:700;color:var(--ink);background:var(--seg);border-radius:999px;padding:1px 7px;flex:none;font-variant-numeric:tabular-nums}
.occard .ocritem.ocon .ocrcnt{background:rgba(255,255,255,.22);color:#fff}
.occard .ocrsep{height:1px;background:var(--line);margin:10px 6px}
/* Work area */
.occard .ocwork{padding:22px 26px 24px;min-width:0;overflow:hidden}
.occard .ocpane{display:none}
.occard .ocpane.ocon{display:block;animation:ocfade .18s ease}
@keyframes ocfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.occard .ocptitle{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.occard .ocptitle h2{margin:0;font-size:17px;font-weight:680;letter-spacing:-.01em}
.occard .ocpsum{margin-left:auto;font-size:19px;font-weight:730;letter-spacing:-.03em;white-space:nowrap}
.occard .ocu{font-size:12px;color:var(--sub);font-weight:560;letter-spacing:0}
.occard .ocprep{margin-left:auto;font-size:11.5px;font-weight:640;color:var(--ink);background:var(--seg);border-radius:999px;padding:3px 11px;white-space:nowrap}
.occard .ocpdesc{font-size:12.5px;color:var(--sub);margin:0 0 18px}
.occard .ocseclbl{font-size:11px;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:20px 0 10px} /* B7-6: заголовки блоків контрастніше */
.occard .ocseclbl.ocfirst{margin-top:2px}
.occard .ocgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.occard .ocfield{min-width:0}
.occard .ocfield label{display:block;font-size:11px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.occard .ocinp,.occard .ocsel{width:100%;border:1px solid var(--linestr);background:var(--panel);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--ink);outline:0;transition:border-color .15s ease}
.occard .ocsel{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236d7175' stroke-width='1.4'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.occard .ocinp:disabled,.occard .ocsel:disabled{background:#fafafb;color:var(--faint);border-color:var(--line);cursor:not-allowed}
.occard .octogrow{display:flex;align-items:center;gap:12px;background:var(--seg);border-radius:11px;padding:11px 14px;margin:6px 0 4px}
.occard .octogt{flex:1;min-width:0}
.occard .octoga{font-size:13px;font-weight:600}
.occard .octogb{font-size:11.5px;color:var(--sub);margin-top:1px}
.occard .ocsw{width:34px;height:20px;border-radius:999px;background:#d6d9dc;position:relative;flex:none;border:0;transition:background .18s ease}
.occard .ocsw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .18s ease}
.occard .ocsw.ocon{background:var(--ink)}
.occard .ocsw.ocon::after{left:16px}
.occard .ocsw:disabled{opacity:.6;cursor:not-allowed}
/* A(batch9): «Допродаж менеджера» = згрупована сірувата панель (var(--seg)), відділена від білих «Товарів» */
/* batch11 C: блок «Товари/Допродаж» помітно світліший (ледь-помітний сірий), щоб не кидався в очі. */
.occard .ocmgrpanel{background:#f8f9fa;border:1px solid #edeef0;border-radius:14px;padding:12px 14px 14px;margin-top:20px}
.occard .ocmgrpanel .ocseclbl{margin-top:2px}
/* Batch-10 Y: внутрішній роздільник між «Товари» і «Допродаж менеджера» в одному сірому блоці */
.occard .ocmgrpanel .ocmgrdiv{height:1px;background:var(--linestr);margin:16px 0 2px}
.occard .ocmgrpanel .ocmgrdiv + .ocseclbl{margin-top:12px}
/* Items */
.occard .ocitems{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.occard .ocups{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.occard .ocupslist{padding:2px 0}
.occard .ocupsrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;box-shadow:inset 0 -1px 0 var(--line)}
.occard .ocupswho{font-size:13px;color:var(--sub);min-width:0}
.occard .ocupsamt{font-size:13px;font-weight:600;color:#157347;white-space:nowrap}
.occard .ocupssum{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:inset 0 -1px 0 var(--line)}
.occard .ocupssum .ocnum{color:#157347}
.occard .ocupsadd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:11px 14px}
.occard .ocupsadd .ocupsamt2{max-width:140px}
.occard .ocupsadd .ocupssel{flex:1;min-width:120px}
.occard .ocitem{display:grid;grid-template-columns:minmax(0,1fr) 62px 92px 30px;gap:12px;align-items:center;padding:12px 14px;box-shadow:inset 0 -1px 0 var(--line);background:#fafbfc;transition:background .12s ease} /* B8-2: рядок позиції видимо-інтерактивний (легкий тон + hover) */
.occard .ocitem:hover{background:var(--seg)}
.occard .ocitem:last-child{box-shadow:none}
.occard .ocinm{min-width:0}
.occard .ocinm .ocit{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ocinm .ocis{font-size:11.5px;color:var(--sub);font-weight:560;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* B7-6: артикул видніше */
.occard .ocqty{display:inline-flex;align-items:center;border:1px solid var(--linestr);border-radius:8px;overflow:hidden}
.occard .ocqty button{width:26px;height:30px;border:0;background:var(--panel);color:var(--sub);font-size:14px}
.occard .ocqty button:disabled{opacity:.5;cursor:not-allowed}
.occard .ocqv{min-width:24px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.occard .ociprice{width:100%;border:1px solid var(--linestr);border-radius:8px;padding:7px 9px;font-size:13px;font-weight:600;text-align:right;color:var(--ink);outline:0;font-variant-numeric:tabular-nums;background:var(--panel)}
.occard .ociprice:disabled{background:#fafafb;color:var(--faint);border-color:var(--line);cursor:not-allowed}
.occard .ocidel{width:30px;height:30px;border:1px solid var(--linestr);background:var(--panel);border-radius:8px;color:var(--faint);font-size:14px;display:flex;align-items:center;justify-content:center;justify-self:end}
.occard .ocidel:disabled{opacity:.5;cursor:not-allowed}
.occard .ocadditem{display:flex;align-items:center;gap:10px;padding:11px 14px;box-shadow:inset 0 1px 0 var(--line);position:relative}
.ocaddres{position:fixed;z-index:3000;background:#fff;border:1px solid #e3e3e3;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.18);max-height:280px;overflow:auto;padding:5px}
.ocaddres[hidden]{display:none}
.ocaddres .ocadri{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:13px;padding:8px 10px;border-radius:7px;cursor:pointer;color:#202223}
.ocaddres .ocadri:hover{background:#f1f2f4}
.ocaddres .ocadri .ocadrt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocaddres .ocadri .ocadrp{color:#6d7175;flex:none}
.ocaddres .ocadrempty{padding:9px 11px;color:#9aa1a9;font-size:12.5px}
.occard .ocsaverow{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.occard .ocbtn.ocprimary{background:var(--ink);color:#fff;border:0;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:560;cursor:pointer}
.occard .ocbtn.ocprimary:disabled{opacity:.6;cursor:default}
.occard .ocsavemsg{font-size:12.5px;color:var(--sub)}.occard .ocsavemsg.ok{color:var(--up)}.occard .ocsavemsg.bad{color:var(--down)}
.occard .ocadditem .ocsic{color:var(--faint);font-size:16px;flex:none}
.occard .ocadditem input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink)}
.occard .ocadditem input::placeholder{color:var(--faint)}
.occard .ocadditem input:disabled{cursor:not-allowed}
/* Pay */
.occard .ocpays{display:flex;flex-direction:column;gap:8px}
.occard .ocpayopt{display:flex;align-items:center;gap:11px;border:1px solid var(--linestr);border-radius:10px;padding:11px 13px}
.occard .ocpayopt.ocon{border-color:var(--ink);background:#fbfbfc}
.occard .ocpayopt .ocrd{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--linestr);flex:none;position:relative}
.occard .ocpayopt.ocon .ocrd{border-color:var(--ink)}
.occard .ocpayopt.ocon .ocrd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.occard .ocpayopt .ocpt{flex:1;min-width:0;font-size:13px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ocpayopt .ocpm{font-size:11px;color:var(--faint);font-weight:560;flex:none}
.occard .ocpaycalc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.occard .ocpcell{background:var(--seg);border-radius:11px;padding:11px 13px;min-width:0}
.occard .ocpcell label{display:block;font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.occard .ocpcell .ocpv{font-size:19px;font-weight:720;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.occard .ocpcell input{width:100%;border:1px solid var(--linestr);background:var(--panel);border-radius:8px;padding:7px 9px;font-size:17px;font-weight:700;color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
.occard .ocpcell input:disabled{background:#fafafb;color:var(--faint);border-color:var(--line);cursor:not-allowed}
/* Tags / utm */
.occard .octags{display:flex;flex-wrap:wrap;gap:7px}
.occard .octag{display:inline-flex;align-items:center;gap:6px;background:var(--seg);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:560;color:var(--ink)}
.occard .octag .octagx{color:var(--faint);font-size:12px}
.occard .octag.ocadddash{background:var(--panel);border:1px dashed var(--linestr);color:var(--sub)}
.occard .oclinkline{display:flex;align-items:center;gap:9px;border:1px solid var(--linestr);border-radius:9px;padding:9px 12px;background:var(--panel)}
.occard .oclinkline .oclt{flex:1;min-width:0;font-size:13px;color:var(--ink);font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .oclinkline a{font-size:12px;color:var(--sub);font-weight:600;text-decoration:none;white-space:nowrap}
.occard .ocutm{display:grid;gap:8px}
.occard .ocutm .ocur{display:flex;align-items:center;gap:12px;font-size:12.5px;box-shadow:inset 0 -1px 0 var(--line);padding-bottom:8px}
.occard .ocutm .ocur:last-child{box-shadow:none;padding-bottom:0}
.occard .ocutm .ocuk{color:var(--faint);font-weight:600;width:104px;flex:none;text-transform:uppercase;font-size:10.5px;letter-spacing:.03em}
.occard .ocutm .ocuv{color:var(--ink);font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Quiz */
.occard .ocqdotwrap{background:var(--seg);border-radius:12px;padding:14px 16px}
.occard .ocqdots{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.occard .ocqdot{width:11px;height:11px;border-radius:50%;background:var(--linestr);flex:none}
.occard .ocqdot.ocon{background:var(--ink)}
.occard .ocqdcap{display:flex;align-items:center;gap:10px;margin-top:12px}
.occard .ocqn{font-size:12px;color:var(--sub);font-weight:560;font-variant-numeric:tabular-nums}
.occard .ocqb{font-size:11px;font-weight:640;color:var(--ink);background:var(--panel);border:1px solid var(--linestr);border-radius:999px;padding:2px 9px}
.occard .ocqres{font-size:13.5px;font-weight:600;margin-top:14px}
.occard .ocqsub{font-size:12px;color:var(--sub);margin-top:2px}
/* Behavior */
.occard .ocbmeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.occard .ocbcell{background:var(--seg);border-radius:11px;padding:12px 14px;min-width:0}
.occard .ocbcell .ocbk{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.03em}
.occard .ocbcell .ocbv{font-size:18px;font-weight:720;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.occard .ocbcell .ocbv.ocbvtx{font-size:15px;font-weight:640;text-transform:capitalize}
.occard .ocvisits{display:flex;flex-direction:column;gap:10px}
.occard .ocvisit{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;min-width:0}
.occard .ocvh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.occard .ocvd{font-size:12.5px;font-weight:640;font-variant-numeric:tabular-nums}
.occard .ocvt{font-size:11.5px;color:var(--faint);font-weight:540}
/* History */
.occard .ochist{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.occard .ochistrow{display:flex;align-items:center;gap:11px;padding:12px 14px;box-shadow:inset 0 -1px 0 var(--line)}
.occard .ochistrow:last-child{box-shadow:none}
.occard .ochn{flex:1;min-width:0}
.occard .ochn .ocht{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ochn .ochm{font-size:11px;color:var(--faint);font-weight:540;margin-top:1px;font-variant-numeric:tabular-nums}
.occard .ochstat{font-size:11px;font-weight:600;color:var(--sub);background:var(--seg);border-radius:999px;padding:3px 10px;flex:none;white-space:nowrap}
.occard .ochstat.ocnow{color:#fff;background:var(--ink)}
.occard .ochp{font-size:13px;color:var(--ink);font-weight:640;font-variant-numeric:tabular-nums;flex:none}
/* Timeline / origin */
.occard .octl{position:relative;padding-left:20px}
.occard .octl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
.occard .octlrow{position:relative;padding:0 0 16px}
.occard .octlrow:last-child{padding-bottom:0}
.occard .octlrow::before{content:"";position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--panel);border:2px solid var(--linestr)}
.occard .octlrow.ocacc::before{border-color:var(--ink);background:var(--ink)}
.occard .octh{font-size:13px;font-weight:600}
.occard .octh .ocwho{color:var(--sub);font-weight:540}
.occard .octm{font-size:11.5px;color:var(--faint);font-weight:540;margin-top:1px;font-variant-numeric:tabular-nums}
.occard .ocorigin{font-size:12.5px;color:var(--sub);line-height:1.5}
.occard .ocorigin b{color:var(--ink);font-weight:640}
.occard .ocfraud{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--panel)}
.occard .ocfraud .ocfh{font-size:11px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
/* Summary panel */
.occard .ocsum{background:var(--panel);box-shadow:inset 1px 0 0 var(--line);padding:20px 18px;align-self:start;position:sticky;top:0;min-width:0}
.occard .ocsumhd{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.occard .ocsumrow{display:flex;align-items:baseline;gap:10px;padding:9px 0;box-shadow:inset 0 -1px 0 var(--line)}
.occard .ocsumrow .ocsn{flex:1;min-width:0;font-size:13px;font-weight:540;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ocsumrow .ocsprice{font-size:12.5px;color:var(--sub);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.occard .ocsumtot{display:flex;align-items:baseline;gap:10px;padding:13px 0 2px}
.occard .ocsumtot .ocstl{flex:1;font-size:11px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em}
.occard .ocsumtot .ocsv{font-size:23px;font-weight:730;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.occard .ocsumsec{margin-top:16px;padding-top:15px;box-shadow:inset 0 1px 0 var(--line)}
.occard .ocsumsec .ocsk{font-size:10.5px;color:var(--faint);font-weight:640;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.occard .ocsumsec .ocsecv{font-size:12.5px;color:var(--ink);font-weight:560;line-height:1.55}
.occard .ocsumsec .ocsecv b{font-weight:660}
/* B7-3: єдина плашка оплати в підсумку */
.occard .ocpaybdg{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:640;line-height:1.35;white-space:nowrap}
.occard .ocpaybdg.pb-paid{background:#e3f1ec;color:#0c6b58}
/* Batch-10 X: передплата = оплачена передплата → зелений, як «оплачено» */
.occard .ocpaybdg.pb-prepaid{background:#e3f1ec;color:#0c6b58}
.occard .ocpaybdg.pb-unpaid{background:#f1f2f4;color:#6d7175}
/* batch12: канал (WFP/ФОП) у картці = бордер-тег поряд зі станом оплати */
.occard .ocpaybm{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:6px;border:1px solid var(--bd2,#c9cccf);background:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;color:#5b616a;vertical-align:middle}
.occard .ocpaybm.pbm-wfp{color:#0c6b58;border-color:#bfe0d5;background:#f2f9f6}
/* Batch-10 X: сегмент «Статус оплати» у картці (три кнопки, як інші сегменти) */
.occard .ocpaystatus{display:inline-flex;flex-wrap:wrap;gap:3px;background:var(--seg);border-radius:10px;padding:3px}
/* batch11 D: toggle «Оплачено» поряд зі способом оплати. off=сірий, on=зелений. */
.occard .ocpaytog{display:inline-flex;align-items:center;gap:9px;margin-top:9px;cursor:pointer;user-select:none;outline:none}
.occard .ocpaytog .ocpaytogl{font-size:13px;font-weight:560;color:var(--sub)}
.occard .ocpaytog.ocon .ocpaytogl{color:var(--up)}
.occard .ocpaytog.ocon .ocsw{background:var(--up)}
.occard .ocpaytog.ocon .ocsw::after{left:16px}
.occard .ocpaytog:focus-visible{box-shadow:0 0 0 2px rgba(12,107,88,.35);border-radius:999px}
.occard .ocpaytog.ocdis{opacity:.42;cursor:not-allowed}
.occard .ocpaytog.ocdis .ocpaytogl{color:var(--sub)}
/* batch11 A: primary-кнопка у guard-попапі (як archive-модалка, але темна дія) */
.ocmodal .ocmbtn.ocmpri{background:#202223;border-color:#202223;color:#fff}
.ocmodal .ocmbtn.ocmpri:hover{background:#000;border-color:#000}
/* Batch-10 Z: кнопка ЛІД-дати у рідному стилі (як періодний пікер) */
.occard .oclidbtn{display:inline-flex;align-items:center;gap:7px;margin-top:2px;border:1px solid var(--linestr);background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;font-weight:560;padding:5px 10px;border-radius:9px;cursor:pointer;line-height:1.2}
.occard .oclidbtn:hover{border-color:var(--ink)}
.occard .oclidbtn i{color:var(--sub);font-size:14px}
.occard .oclidbtn .oclidcar{color:var(--faint);font-size:10px}
/* Batch-10 Z: кастом-календар ЛІД-дати (рендериться в body, тому стилі глобальні) */
.ocdatepop{position:absolute;z-index:1200;width:252px;background:#fff;border:1px solid #e3e3e3;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:10px}
.ocdatepop .ocdphd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ocdatepop .ocdpmon{font-size:13px;font-weight:600;color:#202223;text-transform:capitalize}
.ocdatepop .ocdpnav{border:0;background:transparent;cursor:pointer;color:#6d7175;font-size:17px;line-height:1;padding:2px 8px;border-radius:7px;font-family:inherit}
.ocdatepop .ocdpnav:hover{background:#f0f1f2;color:#202223}
.ocdatepop .ocdpdow,.ocdatepop .ocdpdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ocdatepop .ocdpdow div{text-align:center;font-size:10.5px;color:#9aa1a9;padding:3px 0}
.ocdatepop .ocdpdays button{border:0;background:transparent;padding:6px 0;font-size:12.5px;cursor:pointer;border-radius:7px;font-family:inherit;color:#202223}
.ocdatepop .ocdpdays button:hover{background:#f3f4f6}
.ocdatepop .ocdpdays button.today{box-shadow:inset 0 0 0 1.5px #cbd0d6;font-weight:700}
.ocdatepop .ocdpdays button.sel{background:#202223;color:#fff}
.ocdatepop .ocdpdays .blank{visibility:hidden}
.ocdatepop .ocdptime{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid #eceef1}
.ocdatepop .ocdptl{font-size:11.5px;color:#6d7175;font-weight:560;margin-right:2px}
.ocdatepop .ocdpsel{border:1px solid #e3e3e3;border-radius:7px;background:#fff;font:inherit;font-size:12.5px;padding:4px 5px;color:#202223;cursor:pointer}
.ocdatepop .ocdpcolon{color:#6d7175}
.ocdatepop .ocdpdone{margin-left:auto;border:0;background:#202223;color:#fff;font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer}
.ocdatepop .ocdpdone:hover{filter:brightness(1.12)}
.occard .ocsumchip{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600}
.occard .ocsumchip .ocpd{width:6px;height:6px;border-radius:50%;background:#fff;flex:none}
/* Footer */
.occard .ocfoot{position:sticky;bottom:0;background:var(--panel);box-shadow:inset 0 1px 0 var(--line);padding:13px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;z-index:5}
.occard .ocfoot .ocnote{font-size:11.5px;color:var(--faint);font-weight:540;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ocfoot .ocspacer{flex:1}
.occard .ocbtn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:11px 17px;font-size:13.5px;font-weight:600;white-space:nowrap;border:1px solid var(--linestr);background:var(--panel);color:var(--ink);transition:border-color .15s ease,transform .12s ease}
.occard .ocbtn:hover{border-color:#c9cccf}
.occard .ocbtn.ocpri{background:var(--ink);color:#fff;border-color:var(--ink)}
.occard .ocbtn.ocpri.ocsaved{background:#0c6b58;border-color:#0c6b58;color:#fff}
.occard .ocbtn:disabled{opacity:.5;cursor:not-allowed}
/* A3: акордеон «Інший отримувач» */
.occard .ocrecvacc{margin:8px 0 4px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.occard .ocrecvhd{display:flex;align-items:center;width:100%;gap:10px;background:var(--seg);border:0;padding:12px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.occard .ocrecvhd .ocrecvttl{flex:1}
/* C2: перемикач (toggle) замість дропдауна — поля отримувача видно лише коли увімкнено */
.occard .ocrecvhd .ocsw{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background .18s ease;flex:none}
.occard .ocrecvacc.ocopen .ocrecvhd .ocsw{background:var(--up)}
.occard .ocrecvhd .ocsw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.occard .ocrecvacc.ocopen .ocrecvhd .ocsw::after{transform:translateX(16px)}
.occard .ocrecvbody{padding:12px 14px}
.occard .ocrecvbody[hidden]{display:none}
/* A8: журнал змін у правому підсумку */
.occard .ocsumlog #ocLogBox{max-height:300px;overflow:auto}
.occard .ocbtn:disabled:hover{border-color:var(--linestr)}
/* Adaptive */
@media (max-width:1080px){
  .occard .ocbody{grid-template-columns:200px minmax(0,1fr)}
  .occard .ocsum{grid-column:1/-1;position:static;top:auto;box-shadow:inset 0 1px 0 var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-content:start}
  .occard .ocsum .ocsumhd{grid-column:1/-1}
}
@media (max-width:720px){
  .drawer.ocwide{padding:0}
  .occard{min-height:100vh;border-radius:0;max-width:none}
  .occard .ochd{padding:14px 16px;gap:10px 12px}
  .occard .ochtimes{width:100%;order:5;margin-left:0;gap:24px}
  .occard .ocbody{grid-template-columns:1fr}
  .occard .ocsum{grid-template-columns:1fr;gap:0}
  .occard .ocrail{flex-direction:row;flex-wrap:wrap;gap:6px;box-shadow:inset 0 -1px 0 var(--line);padding:12px 14px;position:sticky;top:0;background:var(--panel);z-index:10}
  .occard .ocrlbl,.occard .ocrsep{display:none}
  .occard .ocritem{width:auto;padding:8px 12px;border:1px solid var(--linestr);border-radius:999px}
  .occard .ocritem .ocrtx{font-size:12.5px}
  .occard .ocritem.ocon{border-color:var(--ink)}
  .occard .ocwork{padding:18px 16px 20px}
  .occard .ocgrid2,.occard .ocpaycalc,.occard .ocbmeta{grid-template-columns:1fr}
  .occard .ocfoot{padding:12px 16px;gap:9px}
  .occard .ocfoot .ocnote{width:100%;order:-1}
  .occard .ocbtn{flex:1 1 auto;justify-content:center}
}
/* ===== Крок 5: редагування (тост, оплата-статус, теги-конструктор, антифрод) ===== */
.octoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:9999;max-width:min(520px,92vw);padding:12px 18px;border-radius:12px;font:14px/1.4 -apple-system,system-ui,sans-serif;font-weight:560;color:#fff;box-shadow:0 14px 40px rgba(11,13,16,.32);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.octoast.show{opacity:1;transform:translate(-50%,0)}
.octoast.ocerr{background:#b42318}
.octoast.ocok{background:#202223}
.occard .ocsopick{cursor:pointer}
.occard .ocsopick:hover{background:var(--seg)}
.occard .ocpayopt{cursor:pointer;width:100%;text-align:left}
.occard .ocpseg{display:inline-flex;gap:6px;background:var(--seg);border-radius:10px;padding:4px}
.occard .ocpsbtn{border:0;background:transparent;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:560;color:var(--sub);cursor:pointer}
.occard .ocpsbtn.ocon{background:var(--ink);color:#fff}
.occard .ocaddsel{flex:1;min-width:0;border:1px solid var(--linestr);background:var(--panel);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);outline:0}
/* B7-6: поле пошуку каталогу видніше (контрастніший плейсхолдер + іконка «+») */
.occard .ocaddsel::placeholder{color:var(--sub);opacity:1}
.occard .ocadditem .ocsic{color:var(--sub)}
.occard .ocaddbtn{padding:8px 14px;flex:none}
.occard .ocaddtag{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.occard .ocaddtag .ocinp{flex:1;min-width:120px}
.occard .ocaddtag .ocbtn{flex:none}
.occard .octagx{border:0;background:transparent;cursor:pointer;padding:0 0 0 2px;line-height:1}
.occard .ocrecvf.ocdisabled{opacity:.55}
.occard .ocfrow{display:flex;align-items:center;gap:12px;padding:9px 0;box-shadow:inset 0 -1px 0 var(--line)}
.occard .ocfrow:last-child{box-shadow:none}
.occard .ocfn{flex:1;min-width:0;font-size:13px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ocfab{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;flex:none}
.occard .ocfar{color:var(--faint)}
.occard .ocftag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:2px 9px;flex:none}
.occard .ocfadd{background:#e7f4ee;color:#0c6b58}
.occard .ocfchg{background:#fef3e6;color:#b54708}
.occard .ocfdel{background:#fde8e8;color:#b42318}
/* ===== Порт картки v01: злитий блок, кастомні дропдауни, тон-хедер, LTV, модалка ===== */
.occard .ocseclbl{display:flex;align-items:center;gap:9px}
.occard .ocseclbl .ocslsum{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
.occard .ocpsum .ocu,.occard .ocpsum.ocnum{white-space:nowrap}
/* Кастомний дропдаун (оплата + доставка) */
.occard .ocdd{position:relative}
.occard .ocddbtn{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--linestr);background:var(--panel);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--ink);text-align:left;transition:border-color .15s ease}
.occard .ocddbtn:hover{border-color:#c9cccf}
.occard .ocdd.ocopen .ocddbtn{border-color:var(--ink)}
.occard .ocddbtn .ocddico{width:22px;height:22px;border-radius:7px;background:var(--seg);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.occard .ocddbtn .ocddt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560}
.occard .ocddbtn .ocddt.ocph{color:var(--faint);font-weight:400}
.occard .ocddbtn .ocddbadge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--sub);background:var(--seg);border-radius:999px;padding:2px 8px;flex:none}
.occard .ocddbtn .ocddcar{color:var(--faint);font-size:11px;flex:none;transition:transform .18s ease}
/* Аналітика: місяць-дропдаун (той самий вигляд, що на картці; без .occard-скоупу падав у дефолт браузера 22px) */
#view-ads .ocddbtn{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--linestr);background:var(--panel);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--ink);text-align:left;line-height:1.2;transition:border-color .15s ease;font-family:inherit;cursor:pointer}
#view-ads .ocddbtn:hover{border-color:#c9cccf}
#view-ads .ocdd.ocopen .ocddbtn,#view-ads .ocdd.open .ocddbtn{border-color:var(--ink)}
#view-ads .ocddbtn .ocddico{width:22px;height:22px;border-radius:7px;background:var(--seg);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
#view-ads .ocddbtn .ocddt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560}
#view-ads .ocddbtn .ocddcar{color:var(--faint);font-size:11px;flex:none;transition:transform .18s ease}
/* Аналітика: ВІДКРИТЕ меню місяця (без цього падало в неостилізований блок) */
#view-ads .ocddmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--linestr);border-radius:12px;box-shadow:0 16px 40px rgba(11,13,16,.16);padding:6px;z-index:45}
#view-ads .ocddo{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13px;color:var(--ink);cursor:pointer;font-weight:560;white-space:nowrap}
#view-ads .ocddo:hover{background:var(--seg)}
.occard .ocdd.ocopen .ocddbtn .ocddcar{transform:rotate(180deg)}
.occard .ocddmenu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--linestr);border-radius:12px;box-shadow:0 16px 40px rgba(11,13,16,.16);padding:6px;z-index:45}
.occard .ocdd.ocopen .ocddmenu{display:block;animation:ocfade .14s ease}
.occard .ocddo{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;font-size:13px;color:var(--ink);cursor:pointer}
.occard .ocddo:hover{background:var(--seg)}
.occard .ocddo.ocon{background:var(--seg)}
.occard .ocddo .ocddoi{width:26px;height:26px;border-radius:8px;background:var(--seg);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;box-shadow:inset 0 0 0 1px var(--line)}
.occard .ocddo.ocon .ocddoi{background:var(--ink);color:#fff;box-shadow:none}
.occard .ocddo .ocddoi.ocddimg,.occard .ocddo.ocon .ocddoi.ocddimg{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:transparent;color:transparent;box-shadow:none}
.occard .ocddbtn .ocddico.ocddimg{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:transparent}
.occard .ocddo .ocddon{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} /* B7-6: імʼя зверху, пошта дрібним сірим під ним (не злипаються) */
.occard .ocddo .ocddott{font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ocddo .ocddos{font-size:11px;color:var(--faint);font-weight:540;margin-top:1px}
.occard .ocddo .ocddob{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--sub);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px 8px;flex:none}
.occard .ocddo.ocon .ocddob{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Підпис у заголовку тогла «Інший отримувач» */
.occard .ocrecvhd .ocrecvsub{font-size:11.5px;color:var(--sub);font-weight:500;margin-right:6px}
/* Допродаж: бейдж + зарахування */
.occard .ocmgrtag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#0c6b58;background:#e7f4ee;border-radius:999px;padding:2px 9px}
.occard .ocmgrassign{display:flex;align-items:center;gap:10px;margin-top:10px;background:var(--seg);border-radius:11px;padding:10px 13px}
.occard .ocmgrassign label{font-size:12px;color:var(--sub);font-weight:560;flex:none}
.occard .ocmgrassign select{flex:1;min-width:0;border:1px solid var(--linestr);background:var(--panel);border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--ink);outline:0}
/* Теги — прихований список вибору (експандер) */
.occard .octagadd{margin-top:12px}
.occard .octagtrig{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px dashed var(--linestr);border-radius:999px;padding:6px 13px;font:inherit;font-size:12px;font-weight:560;color:var(--sub);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.occard .octagtrig:hover{border-color:#c9cccf;color:var(--ink)}
.occard .octagadd.ocopen .octagtrig{border-style:solid;border-color:var(--ink);color:var(--ink)}
.occard .octagtrig .octagcar{font-size:10px;transition:transform .18s ease}
.occard .octagadd.ocopen .octagtrig .octagcar{transform:rotate(180deg)}
.occard .octagpanel{display:none;margin-top:10px;background:var(--seg);border-radius:11px;padding:10px}
.occard .octagadd.ocopen .octagpanel{display:block;animation:ocfade .14s ease}
.occard .octagrow{display:flex;gap:8px;flex-wrap:wrap}
.occard .octagrow .ocsel{flex:1;min-width:150px}
.occard .octagrow .ocinp{flex:1;min-width:120px}
/* A11-v2: тег-секція = поле-на-tag_def (label + кастом-дропдаун/інпут) */
.occard .octags{display:flex;flex-direction:column;gap:12px}
.occard .octagfield{display:flex;flex-direction:column;gap:6px}
.occard .octagflbl{font-size:12px;font-weight:600;color:var(--sub)}
.occard .octagempty{font-size:12.5px;color:var(--faint);padding:2px 0}
/* Промокод у правому підсумку (read-only, акцент) */
.occard .ocsumpromo{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-weight:640;color:var(--accent,#0c8b6c);font-variant-numeric:tabular-nums}
.occard .ocsumpromo .ocpromoic{font-size:13px}
/* Клієнт (LTV) */
.occard .ocltvhead{display:flex;align-items:center;gap:10px;background:#eef7f2;border:1px solid #cfe8dd;border-radius:12px;padding:13px 15px;margin-bottom:12px;flex-wrap:wrap}
.occard .ocltvhead .ocltvbadge{font-size:12px;font-weight:700;color:#fff;background:#0c8b6c;border-radius:999px;padding:4px 11px;flex:none}
.occard .ocltvhead .ocltvt{font-size:12.5px;color:#0c6b58;font-weight:560;line-height:1.35;min-width:0}
.occard .ocltvhead .ocltvt b{font-weight:700}
.occard .ocltvhead .ocltvsum{margin-left:auto;text-align:right;flex:none}
.occard .ocltvhead .ocltvsum .ocltvsl{font-size:10px;color:#5a8b78;font-weight:640;text-transform:uppercase;letter-spacing:.03em}
.occard .ocltvhead .ocltvsum .ocltvsv{font-size:16px;font-weight:730;color:#0c6b58;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.occard .ochistrow .ocht{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ochistrow .ochm{font-size:11px;color:var(--faint);font-weight:540;margin-top:1px;font-variant-numeric:tabular-nums}
.occard .ochistrow .ochn{flex:1;min-width:0}
.occard .ochistrow .ochstat{font-size:11px;font-weight:600;color:var(--sub);background:var(--seg);border-radius:999px;padding:3px 10px;flex:none;white-space:nowrap}
.occard .ochistrow .ochstat.ocnow{color:#fff;background:var(--ink)}
.occard .ochistrow .ochp{font-size:13px;color:var(--ink);font-weight:640;font-variant-numeric:tabular-nums;flex:none}
/* Кнопка запису сесії (поведінка) */
.occard .ocreplay{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--linestr);background:var(--panel);border-radius:11px;padding:10px 14px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none;transition:border-color .15s ease,transform .12s ease;margin-bottom:14px}
.occard .ocreplay:hover{border-color:#c9cccf}
.occard .ocreplay:active{transform:scale(.99)}
.occard .ocreplay.ocdisabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.occard .ocreplay .ocrpi{width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;flex:none}
.occard .ocreplay .ocrps{color:var(--sub);font-weight:520;margin-left:1px}
/* Оригінал заявки — read-only перелік */
.occard .ocorig{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.occard .ocorigr{display:flex;gap:14px;padding:11px 15px;box-shadow:inset 0 -1px 0 var(--line);align-items:center} /* B8-7: лейбл:значення по центру вертикалі */
.occard .ocorigr:last-child{box-shadow:none}
.occard .ocorigk{width:92px;flex:none;color:var(--faint);font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:.03em}
.occard .ocorigv{flex:1;min-width:0;color:var(--ink);font-weight:520;font-size:13.5px;line-height:1.5}
.occard .ocorigv .ocoli{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.occard .ocorigv .ocoln{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occard .ocorigv .ocolp{color:var(--sub);font-variant-numeric:tabular-nums;flex:none}
.occard .ocorignote{font-size:11.5px;color:var(--faint);margin-top:11px}
/* Архівувати — BI-модалка */
.ocmodal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:20px}
.ocmodal.ocon{display:flex}
.ocmodal .ocmback{position:absolute;inset:0;background:rgba(11,13,16,.44);animation:ocfade .16s ease}
.ocmodal .ocmbox{position:relative;width:min(400px,94vw);background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(11,13,16,.34);padding:22px;animation:ocpop .2s ease}
@keyframes ocpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ocmodal .ocmico{width:44px;height:44px;border-radius:12px;background:#fef3e6;color:#b54708;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:15px}
.ocmodal .ocmt{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#202223;margin:0 0 7px}
.ocmodal .ocmd{font-size:13px;color:#6d7175;line-height:1.5;margin:0 0 18px}
.ocmodal .ocmbtns{display:flex;gap:10px;justify-content:flex-end}
.ocmodal .ocmbtn{border-radius:10px;padding:10px 16px;font:inherit;font-size:13.5px;font-weight:600;border:1px solid #e3e3e3;background:#fff;color:#202223;cursor:pointer;transition:border-color .15s ease,background .2s ease}
.ocmodal .ocmbtn:hover{border-color:#c9cccf}
.ocmodal .ocmbtn.ocmarch{background:#b42318;border-color:#b42318;color:#fff}
.ocmodal .ocmbtn.ocmarch:hover{background:#9c1d13;border-color:#9c1d13}

/* ---- */

/* dc-2 «Поповер біля кнопки»: підтвердження архівації = компактний поповер, привʼязаний до іконки, без затемнення сторінки. acov = прозорий ловець кліку-назовні. */
.acov{position:fixed;inset:0;background:transparent;z-index:120;opacity:0;pointer-events:none;}
.acov.show{opacity:1;pointer-events:auto;}
.acdlg{position:fixed;left:0;top:0;width:264px;max-width:calc(100vw - 24px);z-index:121;background:#fff;border:1px solid #e3e3e3;border-radius:12px;box-shadow:0 16px 44px rgba(11,13,16,.20);padding:14px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .14s,transform .14s;}
.acdlg.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.acdlg::before{content:"";position:absolute;top:-7px;left:var(--acarrowx,196px);width:12px;height:12px;background:#fff;border-left:1px solid #e3e3e3;border-top:1px solid #e3e3e3;transform:rotate(45deg);}
.acdlg.acup::before{top:auto;bottom:-7px;border-left:0;border-top:0;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;}
.act-t{font-size:14px;font-weight:600;letter-spacing:-.01em;}
.act-s{font-size:12px;color:#6b7280;margin-top:5px;line-height:1.45;}
.act-o{font-size:12px;font-weight:600;margin-top:9px;padding:7px 10px;background:#f6f7f9;border-radius:9px;}
.act-b{display:flex;gap:8px;margin-top:12px;justify-content:flex-end;}
.act-btn{height:34px;padding:0 13px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid #e2e5e9;background:#fff;color:#0b0d10;}
.act-yes{background:#b42318;color:#fff;border-color:#b42318;}

/* ---- */

.aoov{position:fixed;inset:0;background:rgba(11,13,16,.42);z-index:122;opacity:0;pointer-events:none;transition:opacity .18s;}
.aoov.show{opacity:1;pointer-events:auto;}
.aodlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%) scale(.98);width:520px;max-width:calc(100vw - 40px);max-height:88vh;overflow-y:auto;z-index:123;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(11,13,16,.3);padding:22px 24px 18px;opacity:0;pointer-events:none;transition:opacity .2s,transform .24s cubic-bezier(.23,1,.32,1);}
.aodlg.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.ao-t{font-size:18px;font-weight:700;margin-bottom:2px;}
.ao-s{font-size:12.5px;color:#6b7280;margin-bottom:14px;}
.ao-lab{font-size:12px;color:#6b7280;font-weight:560;display:block;margin:12px 0 5px;}
.ao-in,.ao-se{width:100%;height:40px;border:1px solid #e2e5e9;border-radius:9px;padding:0 11px;font:inherit;font-size:14px;background:#fff;}
.ao-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ao-it{display:grid;grid-template-columns:1fr 60px 100px 30px;gap:7px;align-items:center;margin-bottom:7px;}
.ao-it .ao-in,.ao-it .ao-se{height:36px;font-size:13px;}
.ao-x{height:36px;border:1px solid #e2e5e9;border-radius:8px;background:#fff;color:#8a8a8a;cursor:pointer;}
.ao-add{border:1px dashed #e2e5e9;background:#fff;color:#6b7280;height:36px;border-radius:9px;font:inherit;font-size:13px;width:100%;cursor:pointer;margin-top:2px;}
.ao-tot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:10px;border-top:1px solid #eceef1;}
.ao-tot input{width:150px;height:40px;border:1px solid #e2e5e9;border-radius:9px;text-align:right;font:inherit;font-size:16px;font-weight:700;padding:0 11px;}
.ao-err{color:#b42318;font-size:12.5px;font-weight:560;margin-top:8px;min-height:16px;}
.ao-b{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
.ao-btn{height:42px;padding:0 20px;border-radius:10px;font:inherit;font-size:14px;font-weight:640;cursor:pointer;border:1px solid #e2e5e9;background:#fff;color:#0b0d10;}
.ao-save{background:#0f7a4d;color:#fff;border-color:#0f7a4d;}