/* DAGO — стилі кабінету клієнта та адмінки (спільні) */
:root{
  --bg:#F6F5F1; --surface:#FFFFFF; --panel:#EFEEE9; --panel-2:#F7F6F2;
  --ink:#111418; --ink-soft:#2B3036; --muted:#646B74; --line:#E3E1DA;
  --dark:#121519; --dark-2:#1C2026; --dark-line:#2C3139;
  --accent:#DA4A1F; --accent-dark:#B63A14; --accent-soft:#FBE3D8;
  --ok:#2F8F6B; --ok-soft:#D9F0E6; --warn:#B7791F; --warn-soft:#FBEFD5; --bad:#C0392B; --bad-soft:#F9DEDA;
  --mint:#CFEBE0; --lavender:#DCDAF6; --sand:#F3E4C2; --peach:#F3DACB; --sky:#D0E3F0; --rose:#F5D6DB;
  --font-display:'Manrope',sans-serif; --font-body:'Inter',sans-serif;
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --shadow:0 1px 2px rgba(17,20,24,.04),0 12px 32px -12px rgba(17,20,24,.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.15;overflow-wrap:break-word;}
.ic{width:20px;height:20px;flex-shrink:0;display:block;}
.hidden{display:none !important;}
.muted{color:var(--muted);}
.mono{font-variant-numeric:tabular-nums;}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

/* ---------- buttons & inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;
  padding:11px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s,opacity .15s;min-height:42px;}
.btn .ic{width:17px;height:17px;}
.btn:hover{background:var(--accent);border-color:var(--accent);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-accent{background:var(--accent);border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink);color:var(--ink);}
.btn-danger{background:var(--surface);color:var(--bad);border-color:var(--bad-soft);}
.btn-danger:hover{background:var(--bad);border-color:var(--bad);color:#fff;}
.btn-sm{padding:7px 12px;font-size:13px;min-height:34px;}
.btn-icon{width:42px;height:42px;padding:0;border-radius:12px;}
.btn-icon.btn-sm{width:34px;height:34px;border-radius:10px;}
.btn-block{width:100%;}

.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.input,.select,.textarea{width:100%;min-width:0;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);}
.textarea{resize:vertical;min-height:84px;}
.select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23646B74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:18px;}
.search{position:relative;flex:1;min-width:180px;}
.search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px;height:18px;}
.search .input{padding-left:38px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media (max-width:620px){.grid-2,.grid-3{grid-template-columns:minmax(0,1fr);}}
.check{display:inline-flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;}
.check input{width:18px;height:18px;accent-color:var(--accent);}

/* ---------- login ---------- */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px 16px;position:relative;overflow:hidden;}
.login-screen::before{content:"";position:absolute;right:-200px;top:-220px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(218,74,31,.16),rgba(218,74,31,0) 65%);pointer-events:none;}
.login-card{position:relative;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:34px 30px;box-shadow:var(--shadow);}
.login-card h1{font-size:26px;margin:22px 0 6px;}
.login-card p.sub{color:var(--muted);font-size:14.5px;margin-bottom:22px;}
.login-card form{display:flex;flex-direction:column;gap:14px;}
.login-foot{margin-top:18px;font-size:13.5px;color:var(--muted);text-align:center;}
.login-foot a{color:var(--accent);font-weight:600;}
.form-error{font-size:13.5px;color:var(--bad);background:var(--bad-soft);padding:10px 12px;border-radius:10px;}
.form-ok{font-size:13.5px;color:var(--ok);background:var(--ok-soft);padding:10px 12px;border-radius:10px;}
@media (max-width:420px){.login-card{padding:28px 20px;}}

.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;min-width:0;}
.logo-mark{width:36px;height:36px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;flex-shrink:0;}
.logo-mark .ic{width:20px;height:20px;}
.logo small{color:var(--accent);font-weight:700;}
.logo-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.demo-banner{background:var(--warn-soft);color:#6B4A10;font-size:13px;text-align:center;padding:8px 16px;border-bottom:1px solid #F0DFB5;}
.demo-banner b{font-weight:700;}

/* ---------- app header ---------- */
.app-header{position:sticky;top:0;z-index:50;background:rgba(246,245,241,.92);border-bottom:1px solid var(--line);}
.app-header::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.app-header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;}
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;margin-right:6px;min-width:0;}
.who b{font-size:14px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.who span{font-size:12px;color:var(--muted);}
@media (max-width:640px){.who{display:none;}}

.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0 12px;-webkit-overflow-scrolling:touch;}
.tabs::-webkit-scrollbar{display:none;}
.tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-soft);
  background:transparent;border:1px solid transparent;cursor:pointer;white-space:nowrap;}
.tab .ic{width:17px;height:17px;}
.tab:hover{background:var(--panel);}
.tab.active{background:var(--ink);color:#fff;}
.tab .count{font-size:11.5px;background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px;}

main.app-main{padding:24px 0 64px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.page-head h2{font-size:clamp(22px,3vw,28px);}
.page-head p{color:var(--muted);font-size:14.5px;margin-top:4px;}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}

/* ---------- cards / kpi ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;}
.card h3{font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;}
.card-head h3{margin-bottom:0;}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;position:relative;cursor:default;}
.kpi.clickable{cursor:pointer;transition:border-color .15s, transform .15s;}
.kpi.clickable:hover{border-color:var(--ink);transform:translateY(-2px);}
.kpi-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;}
.kpi-ico .ic{width:19px;height:19px;}
.kpi b{display:block;font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.kpi span{display:block;font-size:13px;color:var(--muted);margin-top:6px;}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:380px){.kpi{padding:14px;}.kpi b{font-size:25px;}}
.dash-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;}
@media (max-width:960px){.dash-grid{grid-template-columns:minmax(0,1fr);}}
.bg-mint{background:var(--mint);}.bg-lavender{background:var(--lavender);}.bg-sand{background:var(--sand);}
.bg-peach{background:var(--peach);}.bg-sky{background:var(--sky);}.bg-rose{background:var(--rose);}.bg-panel{background:var(--panel);}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.st-new{background:var(--panel);color:#4B525B;}
.st-picking{background:var(--sand);color:#7A5510;}
.st-packed{background:var(--lavender);color:#473FA0;}
.st-shipped{background:var(--sky);color:#1F5C85;}
.st-in_transit{background:#D6E4FA;color:#2150A6;}
.st-arrived{background:var(--mint);color:#1D6B50;}
.st-delivered{background:var(--ok-soft);color:#1E6B4E;}
.st-returning{background:var(--peach);color:#A2461C;}
.st-returned{background:var(--rose);color:#9B2D42;}
.st-cancelled{background:var(--panel);color:#7A8089;text-decoration:line-through;}
.stock-ok{background:var(--ok-soft);color:#1E6B4E;}
.stock-low{background:var(--warn-soft);color:#8A5A10;}
.stock-out{background:var(--bad-soft);color:#9B2B20;}

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:14px;}
.chips::-webkit-scrollbar{display:none;}
.chip-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap;}
.chip-btn .n{font-size:11.5px;color:var(--muted);font-weight:600;}
.chip-btn.active{background:var(--ink);border-color:var(--ink);color:#fff;}
.chip-btn.active .n{color:#C9CDD2;}

/* ---------- lists / tables ---------- */
.list{display:flex;flex-direction:column;gap:10px;}
.o-card{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;cursor:pointer;transition:border-color .15s, box-shadow .15s;text-align:left;width:100%;}
.o-card:hover{border-color:var(--ink);box-shadow:var(--shadow);}
.o-num{font-family:var(--font-display);font-weight:800;font-size:15.5px;}
.o-meta{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.o-mid{min-width:0;}
.o-mid b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.o-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.o-ttn{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
@media (max-width:480px){
  .tab{padding:8px 8px;font-size:13.5px;gap:5px;}
  .tabs{gap:2px;}
  .tab .ic{display:none;}
  .tab .t-long{display:none;}
}
.tab .t-short{display:none;}
@media (max-width:480px){ .tab .t-short{display:inline;} }
@media (max-width:640px){
  .o-card{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;}
  .o-mid{grid-column:1 / 2;grid-row:2;}
  .o-right{grid-row:1 / 3;grid-column:2;}
}

.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel-2);}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr.row-click{cursor:pointer;}
.tbl tr.row-click:hover td{background:var(--panel-2);}
.tbl tr.selected td{background:#FFF6F2;}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tbl .nowrap{white-space:nowrap;}
.tbl .cell-strong{font-weight:600;}
.tbl input.cell-input{width:90px;padding:6px 8px;border:1.5px solid transparent;border-radius:8px;background:transparent;font:inherit;font-size:14px;text-align:right;}
.tbl input.cell-input:hover{border-color:var(--line);}
.tbl input.cell-input:focus{outline:none;border-color:var(--accent);background:#fff;}
.tbl select.cell-select{padding:5px 28px 5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid transparent;background-position:right 6px center;background-size:15px;min-height:30px;}

/* stock mobile cards */
.s-cards{display:none;}
@media (max-width:640px){
  .s-table{display:none;}
  .s-cards{display:flex;flex-direction:column;gap:8px;}
}
.s-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;}
.s-card .l{min-width:0;}
.s-card .l b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.s-card .l span{font-size:12.5px;color:var(--muted);}
.s-card .r{text-align:right;flex-shrink:0;}
.s-card .r b{display:block;font-family:var(--font-display);font-size:20px;font-weight:800;}

.empty{text-align:center;padding:48px 20px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);}
.empty .ic{width:36px;height:36px;margin:0 auto 12px;color:#B5B9BE;}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px;}

/* ---------- timeline (шлях замовлення) ---------- */
.timeline{display:flex;flex-direction:column;}
.tl-row{display:flex;gap:14px;position:relative;padding-bottom:18px;}
.tl-row:last-child{padding-bottom:0;}
.tl-row:not(:last-child)::after{content:"";position:absolute;left:19px;top:42px;bottom:2px;width:2px;background:var(--line);}
.tl-row.done:not(:last-child)::after{background:var(--accent);}
.tl-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--panel);color:#9BA0A6;}
.tl-ico .ic{width:19px;height:19px;}
.tl-row.done .tl-ico{background:var(--accent-soft);color:var(--accent);}
.tl-row.current .tl-ico{background:var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(17,20,24,.08);}
.tl-row.bad .tl-ico{background:var(--peach);color:#A2461C;}
.tl-txt{padding-top:2px;min-width:0;}
.tl-txt b{display:block;font-size:14.5px;font-weight:600;}
.tl-row.todo .tl-txt b{color:#9BA0A6;font-weight:500;}
.tl-txt span{font-size:12.5px;color:var(--muted);}

/* ---------- drawer / modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(17,20,24,.42);z-index:200;opacity:0;visibility:hidden;transition:opacity .2s, visibility .2s;}
.overlay.open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--bg);z-index:210;transform:translateX(100%);
  transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:-20px 0 60px -20px rgba(17,20,24,.3);}
.drawer.open{transform:none;}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--surface);}
.drawer-head h3{font-size:19px;}
.drawer-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch;}
.drawer-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--surface);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px 14px;font-size:14px;}
.kv dt{color:var(--muted);}
.kv dd{font-weight:500;overflow-wrap:anywhere;}
@media (max-width:420px){.kv{grid-template-columns:minmax(0,1fr);gap:2px;}.kv dd{margin-bottom:8px;}}
.items-tbl{width:100%;border-collapse:collapse;font-size:14px;}
.items-tbl td{padding:9px 0;border-bottom:1px solid var(--line);}
.items-tbl tr:last-child td{border-bottom:none;}
.items-tbl td.q{text-align:right;font-weight:600;white-space:nowrap;padding-left:12px;}
.items-tbl .sku{display:block;font-size:12px;color:var(--muted);}

.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);width:min(640px,calc(100% - 24px));max-height:calc(100vh - 32px);
  background:var(--surface);border-radius:24px;z-index:220;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .2s, transform .2s, visibility .2s;box-shadow:0 30px 80px -20px rgba(17,20,24,.45);}
.modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
.modal .drawer-head{border-radius:24px 24px 0 0;}
.modal .drawer-foot{border-radius:0 0 24px 24px;}
@media (max-width:560px){
  .modal{top:auto;bottom:0;left:0;right:0;width:100%;transform:translateY(20px);border-radius:22px 22px 0 0;max-height:92vh;}
  .modal.open{transform:none;}
  .modal .drawer-head{border-radius:22px 22px 0 0;}
  .modal .drawer-foot{border-radius:0;padding-bottom:calc(14px + env(safe-area-inset-bottom));}
}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;
  font-size:14px;font-weight:500;z-index:300;opacity:0;visibility:hidden;transition:.25s;max-width:calc(100% - 32px);box-shadow:var(--shadow);}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast.err{background:var(--bad);}

.spinner{width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto;}
@keyframes spin{to{transform:rotate(360deg);}}
.sk{background:linear-gradient(90deg,var(--panel) 0%,#F6F5F1 50%,var(--panel) 100%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px;}
@keyframes sk{to{background-position:-200% 0;}}

.small-list{display:flex;flex-direction:column;}
.small-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;}
.small-row:last-child{border-bottom:none;}
.small-row .l{min-width:0;}
.small-row .l b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.small-row .l span{font-size:12.5px;color:var(--muted);}
.small-row.click{cursor:pointer;}
.small-row.click:hover .l b{color:var(--accent);}
.delta-plus{color:var(--ok);font-weight:700;}
.delta-minus{color:var(--bad);font-weight:700;}
.link{color:var(--accent);font-weight:600;cursor:pointer;background:none;border:none;padding:0;}
.link:hover{text-decoration:underline;}
.note{font-size:13px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;}}

/* ---------- Інтеграція SalesDrive ---------- */
.integ-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start;}
@media (max-width:900px){.integ-grid{grid-template-columns:minmax(0,1fr);}}
.sd-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;background:#E6EEFB;color:#2A5BB8;vertical-align:middle;margin-left:4px;}
.sd-log{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--line);}
.sd-row{padding:10px 2px;border-bottom:1px solid var(--line);font-size:13.5px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.sd-row.bad{background:var(--bad-soft);padding-left:10px;padding-right:10px;border-radius:8px;border-bottom-color:transparent;margin:3px 0;}
.sd-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
.sd-dir{font-weight:700;color:var(--ink-soft);}
.sd-row details summary{cursor:pointer;font-size:12px;color:var(--muted);}
.sd-row pre{font-size:11.5px;background:var(--bg,#F6F5F1);padding:10px;border-radius:8px;overflow:auto;max-height:280px;white-space:pre-wrap;word-break:break-word;}

/* ---------- Нова пошта в замовленні ---------- */
.np-box{border:1.5px dashed var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;margin:4px 0;}
.np-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.np-head .muted{font-size:13px;}

/* ---------- Rozetka Delivery (демо) ---------- */
.rz-demo{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:#FFF1D6;color:#9A5B00;vertical-align:middle;margin-left:4px;}
.rz-info{font-size:13px;background:#FFF8EA;border:1px solid #F3DDB0;color:#6B4A00;border-radius:10px;padding:10px 12px;}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:3px;gap:3px;margin-left:auto;flex-wrap:wrap;}
.seg button{font:inherit;font-size:13px;font-weight:600;border:0;background:transparent;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--ink-soft);}
.seg button.on{background:var(--ink,#111418);color:#fff;}
.seg button.on .rz-demo{background:#fff;}
.rz-how{margin-top:14px;font-size:13.5px;}
.rz-how summary{cursor:pointer;font-weight:600;}
.rz-how ol{margin:8px 0 0 18px;padding:0;display:flex;flex-direction:column;gap:4px;color:var(--ink-soft);}

@media (max-width:640px){
  .kpis.compact-m{grid-template-columns:minmax(0,1fr) !important;gap:10px;}
  .kpis.compact-m .kpi{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;padding:14px 16px;}
  .kpis.compact-m .kpi-ico{grid-row:span 2;margin:0;}
  .kpis.compact-m .kpi b{font-size:22px !important;}
  .kpis.compact-m .kpi span{margin-top:2px;}
}