/* SVPROTUNING — admin. Same palette as the site: graphite side menu, light ground, green for actions. */
:root { --accent: #76BC21; --ink: #17191C; --graphite: #1B1D20; --ground: #F4F4F1; --line: #E3E4DF; --line2: #EDEEEA; --muted: #5F625C; --soft: #3E413B; --ok: #3F6E0C; --wait: #8A5200; --err: #B3261E; --tint: #EEF6E4; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.45 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--ok); }
h1 { font-size: 26px; font-weight: 800; margin: 2px 0 0; line-height: 1.25; }
h2 { font-size: 17px; font-weight: 800; margin: 0 0 10px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-size: 14px; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
.ok { color: var(--ok); font-weight: 600; }
.wait { color: var(--wait); }
.bad { color: var(--err); font-weight: 600; }
.b { font-weight: 700; }

.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side { flex: 1 1 220px; max-width: 100%; background: var(--graphite); color: #fff; padding: 18px 12px; display: flex; flex-direction: column; gap: 16px; }
.brand { padding: 2px 10px; display: flex; flex-direction: column; }
.brand span { font-weight: 800; font-size: 19px; }
.brand b { color: var(--accent); }
.brand small { font-size: 12px; color: #B9BBB4; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #D3D5CE; text-decoration: none; white-space: nowrap; }
.nav a span:first-child { flex: 1; }
.nav a:hover { background: #26292D; color: #fff; }
.nav a.on { background: #30343A; color: #fff; font-weight: 600; }
.cnt { background: #DC5F59; color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
/* computer: brand, sections, then the rate strip with «Сайт», then «Логины и пароли» and «Выйти» at the bottom */
.nav { order: 1; }
.side__foot { order: 2; margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid #2C2F33; padding-top: 10px; }
.side__foot a { display: flex; align-items: center; min-height: 40px; border-radius: 10px; text-decoration: none; font-size: 14px; white-space: nowrap; }
.side__foot .rates { display: flex; align-items: center; min-height: 40px; border-radius: 10px; font-size: 14px; white-space: nowrap; flex: 1 1 auto; gap: 12px; padding: 0 12px; background: rgba(255,255,255,.06); }
.side__foot .rates b { font-weight: 600; color: #F2F3EF; font-variant-numeric: tabular-nums; }
.side__foot a.site { flex: 1 1 auto; justify-content: center; padding: 0 14px; border: 1px solid #3A3E44; color: #E6E7E2; font-weight: 600; }
.side__foot a:hover { color: #fff; border-color: #55595F; }
.acct { order: 3; display: flex; flex-direction: column; }
.acct a { color: #C8CAC3; font-size: 14px; padding: 10px; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.acct a:hover { color: #fff; }
.acct__who { margin-left: .3em; }
.content { flex: 999 1 640px; min-width: 0; padding: 22px 20px 56px; display: flex; flex-direction: column; gap: 16px; }

.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
/* «← …» above a product or an order: a clear button, not small grey text (on the product it leads back to where it was opened from) */
.back { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; margin-bottom: 6px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.back:hover { border-color: #C9CBC4; background: var(--line2); }
.back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the product we came back from, in its list (public/admin.js «←») */
.row--back, .row--back > td { animation: rowback 2.6s ease-out; }
@keyframes rowback { 0%, 35% { background: #e6f2d6; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .row--back, .row--back > td { animation: none; background: #e6f2d6; } }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions--end { justify-content: flex-end; }
.box { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.box--flush { padding: 0; overflow: hidden; }
.box__h { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line2); }
.box__h h2 { margin: 0; }
.box__h a { font-weight: 600; text-decoration: none; }
.pad { padding: 16px; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.col-wide { flex: 999 1 460px; min-width: 0; }
.col-narrow { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.flash { background: var(--tint); color: #2D500A; border-radius: 10px; padding: 10px 14px; font-weight: 600; }
/* the page came back to where it was: the message floats at the bottom for a few seconds instead of standing at the top */
.flash--float { position: fixed; z-index: 60; right: 20px; bottom: 20px; max-width: 520px; border: 1px solid #CFE3B4; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); transition: opacity .3s; }
.flash--gone { opacity: 0; pointer-events: none; }
/* the login form waits a moment while the browser's spare key brings the person back in */
.keeping .auth { visibility: hidden; }
.keeping .content::before { content: 'Входим…'; display: block; margin: 12vh auto 0; color: var(--muted); font-weight: 600; text-align: center; }
.err { background: #FCEDEC; color: #8C1D18; border-radius: 10px; padding: 10px 14px; }
.tag { font-size: 13px; background: #F2F3EF; border-radius: 999px; padding: 2px 10px; font-weight: 600; vertical-align: middle; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn--p { background: var(--accent); color: var(--ink); }
.btn--p:hover { filter: brightness(.94); }
.btn--s { background: #fff; color: var(--ink); border-color: #D3D5CE; font-weight: 500; }
.btn--s:hover { background: #F1F2EE; }
.mini { min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #D3D5CE; background: #fff; font-size: 13px; cursor: pointer; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; }
.mini--del { color: var(--err); }
.mini--off { color: var(--muted); cursor: default; }
.x { width: 40px; height: 40px; border: 0; background: none; font-size: 20px; cursor: pointer; color: #6B6E68; }

label { font-size: 13px; font-weight: 600; color: var(--soft); display: block; margin-bottom: 6px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; display: block; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { width: 100%; min-height: 44px; border: 1px solid #D3D5CE; border-radius: 10px; padding: 10px 12px; background: #fff; font-size: 15px; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: #9AA394; }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-weight: 400; color: var(--ink); font-size: 14px; cursor: pointer; margin: 0; }
.check input { width: 18px; height: 18px; accent-color: var(--ok); flex-shrink: 0; }
.prefix { display: flex; align-items: center; gap: 4px; }
.prefix span { font-size: 12.5px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters > div { flex: 0 1 240px; }
.filters .grow { flex: 1 1 260px; }
.filters .end { flex: 0 0 auto; }
.grow { flex: 1; min-width: 0; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); border: 1px solid #D3D5CE; text-decoration: none; cursor: pointer; }
.pill span { opacity: .7; }
.pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #F2F3EF; color: #2B2E28; white-space: nowrap; }

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1280px) and (min-width: 761px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi__t svg { width: 13px; height: 13px; flex: none; }
.kpi { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
.kpi:hover { border-color: #B9BCB3; }
.kpi__t { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); line-height: 1.2; }
.kpi__v { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kpi b { font-size: 24px; line-height: 1.1; }
.kpi__v span { font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line2); min-height: 56px; text-decoration: none; color: var(--ink); }
.orow:hover { background: #F7F8F5; }
.orow__n { width: 64px; }
.orow__w { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.orow__w small { font-size: 12.5px; color: var(--muted); }
.orow__s { white-space: nowrap; }
.kv { margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: 14px; }
.kv dt { color: var(--soft); }
.reach { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.reach .lab--h3 h3 { margin: 0; font-size: 15px; }
.reach__b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rbtn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border-radius: 10px; border: 1px solid #D3D5CE; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.rbtn:hover { background: #F1F2EE; }
.rbtn--wa { background: #EAF7EE; border-color: #9ED4AE; color: #11743A; }
.rbtn--tg { background: #EAF4FB; border-color: #9CCBEA; color: #1667A3; }
.rbtn--max { background: #F1EEFB; border-color: #C3B6EC; color: #5A3FB5; }
.kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.lowrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 14px; min-height: 44px; align-items: center; text-decoration: none; color: var(--ink); }
.lowrow:hover { background: #F2F3EF; }
.line { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line2); font-size: 14px; }
.line span { display: flex; flex-direction: column; min-width: 0; }
.line small { color: var(--muted); font-size: 12.5px; }
.line--sum { font-size: 15px; border: 0; }

.tablebox { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; min-width: 860px; }
.tbl th { font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line2); font-size: 14px; vertical-align: middle; }
.tbl tr:hover td { background: #F7F8F5; }
.tbl__pi { display: flex; gap: 10px; align-items: center; min-width: 300px; }
/* «Артикул / OEM»: a number with its brand on its own line */
.tbl__oem { line-height: 1.45; }
.oeml { display: block; white-space: nowrap; }
/* «Товары»: the price and the cost change with a double tap (public/admin.js [data-quick]) */
[data-quick], [data-quick-n] { cursor: text; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.qedit { display: inline-flex; align-items: center; gap: 4px; }
.qcell--on, .qedit input { -webkit-user-select: text; user-select: text; cursor: auto; }
.qedit input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 7.5em; min-height: 38px; padding: 4px 8px; text-align: right; font: inherit; font-size: 16px; font-weight: 600; }
.qedit__ok { min-width: 36px; min-height: 36px; border: 0; border-radius: 8px; background: var(--accent); color: #111; font-size: 17px; font-weight: 700; cursor: pointer; }
.qcell--saved { animation: qsaved 1.6s ease-out; }
@keyframes qsaved { 0% { background: #E4F5D0; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .qcell--saved { animation: none; } }
.oeml small { font-family: Onest, system-ui, sans-serif; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tbl__pi > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tbl__p a { font-weight: 600; color: var(--ink); }
.tbl__p small { font-size: 12px; color: var(--muted); }
.tbl__p small b.tbl__model { color: var(--ink); font-weight: 600; }
.thumb { width: 48px; height: 38px; border-radius: 6px; background: #E9EAE5; overflow: hidden; flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.tbl--form { min-width: 720px; }
.tbl--form td { padding: 6px 4px; }
.tbl--form tr:hover td { background: none; }
.tbl--form td:first-child { min-width: 220px; }
.tbl--form input { min-height: 40px; }

.sw { width: 52px; height: 44px; display: flex; align-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.sw span { display: inline-flex; align-items: center; width: 44px; height: 26px; border-radius: 999px; padding: 3px; background: #C9CBC3; justify-content: flex-start; transition: background .15s; }
.sw span::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sw.on span { background: #3F7D12; justify-content: flex-end; }

.photos:empty { display: none; }
.badgef__r { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.badgef__r input[name=badge] { flex: 1 1 200px; min-width: 0; }
.badgef__r .check { white-space: nowrap; }
.badgef__r select { flex: 1 1 200px; min-width: 0; width: auto; }
.packf input[name=pack_n] { flex: 0 0 72px; width: 72px; text-align: center; }
.packf select { flex: 0 1 200px; }
.packf__see { color: var(--muted); font-size: 14px; white-space: nowrap; }
.packf__see b { color: var(--ink); }
.badges summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-height: 28px; }
.badges summary::-webkit-details-marker { display: none; }
.badges summary::after { content: 'изменить ▾'; margin-left: auto; color: var(--ok); font-size: 14px; font-weight: 600; }
.badges[open] summary::after { content: 'свернуть ▴'; }
.badges[open] summary { margin-bottom: 10px; }
.badgerow label:first-child { display: block; margin-bottom: 4px; }
.photos__add { align-self: flex-start; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ph { margin: 0; position: relative; }
.ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #E9EAE5; }
/* on the photo: ★ — the main one (☆ on another — make it main), the bin — delete */
.ph__b { position: absolute; top: 6px; left: 6px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--soft); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; }
.ph__b:hover { color: var(--ink); }
.ph__main { background: var(--accent); color: var(--ink); cursor: default; }
.ph__del { left: auto; right: 6px; color: var(--err); }
.photos__hint { margin: 0; }
.catlist { max-height: 340px; overflow-y: auto; border: 1px solid var(--line2); border-radius: 10px; padding: 4px 8px; }
[hidden] { display: none !important; }
.cat-dragging, .cat-dragging * { cursor: grabbing !important; }
.ico { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #D3D5CE; border-radius: 9px; background: #fff; color: var(--soft); text-decoration: none; cursor: pointer; font-size: 15px; }
.ico:hover { border-color: #9AA394; color: var(--ink); }
.ico--del { color: var(--err); }
.ico--del:hover { color: var(--err); border-color: #E3B4B0; background: #FDF3F2; }
.ico--off { border-style: dashed; color: #A6A9A1; cursor: default; }
.setrow { display: flex; gap: 10px; align-items: flex-start; }
.setrow .grow { display: flex; flex-direction: column; gap: 6px; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--soft); }
.code { background: #F2F3EF; border-radius: 10px; padding: 12px 14px; overflow-wrap: anywhere; }
.auth { max-width: 420px; margin: 8vh auto 0; width: 100%; }
.auth form { margin-top: 10px; }

.currow { border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.currow legend { font-weight: 700; padding: 0 4px; }
.currow .prefix { max-width: 260px; margin-left: 28px; }
.currow .prefix span { font-size: 14px; color: var(--soft); white-space: nowrap; }
.folders { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.folders__path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.folders__path a { color: var(--soft); }
.folders__path span { color: var(--muted); }
.folders__kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.folder { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #D3D5CE; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; }
.folder:hover { border-color: var(--ink); }
.folder small { flex: none; font-size: 12px; color: var(--muted); font-weight: 600; }
/* on the site — white with a green edge; hidden — grey, dashed, «скрыта» with a crossed eye */
.folder:not(.folder--off) { box-shadow: inset 4px 0 0 var(--accent); }
.folder__t { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.folder small { display: inline-flex; align-items: center; gap: 6px; }
.folder small em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #6B6E68; background: #DCDED8; border-radius: 999px; padding: 2px 8px; }
.folder--off { background: #ECEDE8; border-style: dashed; border-color: #B9BCB4; color: #7A7D76; font-weight: 500; }
.folder--off .folder__t svg { flex: none; color: #8A8D86; }
.pw { position: relative; display: block; }
.pw input { padding-right: 92px !important; }
.pw__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: #F2F3EF; color: var(--soft); font-size: 13px; font-weight: 600; cursor: pointer; }
.pw__eye:hover { color: var(--ink); }
.livetoast { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 12px; background: #17191C; color: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.livetoast a { color: #B6E37A; font-weight: 700; }
.livetoast button { background: none; border: 0; color: #9EA29A; font-size: 20px; cursor: pointer; min-width: 32px; min-height: 32px; }
.auth--second { margin-top: 14px; }
.auth__tip { margin: 12px 0 0; }
.auth--second h2 { margin: 0; font-size: 18px; }
.lbl { display: block; font-size: 13px; font-weight: 600; color: var(--soft); margin-bottom: 6px; }
.oems { display: flex; flex-direction: column; gap: 8px; }
.oemrow { display: grid; grid-template-columns: minmax(150px, 3fr) minmax(110px, 2fr) auto 40px; gap: 8px; align-items: center; }
.oemrow .sup { display: flex; gap: 6px; flex-wrap: wrap; }
.oemrow .sup .mini { min-height: 40px; white-space: nowrap; }
.oemrow .sup .mini.done { border-color: var(--ok); color: var(--ok); }
.oems__foot { margin-top: 8px; }
.oemrow__b { display: flex; gap: 6px; min-width: 0; }
.oemrow__b input:not([type=hidden]) { flex: 1 1 auto; min-width: 0; }
/* «Закупка» at a brand (only for the owner): the number and ₸ / ₽ / $ */
.oemrow--buy { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1.2fr) 40px; row-gap: 6px; }
.oemrow--buy .sup { grid-column: 1 / 4; grid-row: 2; }
.oemrow--buy + .oemrow--buy { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line2); }
.oemrow__buy { display: flex; min-width: 0; }
.oemrow__buy input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right; }
.oemrow__buy select { flex: none; width: 52px; padding: 0 4px; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; text-align: center; }
/* 👁 at a brand: green — written in the name on the site, grey crossed — hidden */
.bvis { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; }
.bvis.on { border-color: var(--ok); color: var(--ok); background: #F3F8EC; }
.bvis svg:last-child, .bvis.on svg:first-child { display: inline; }
.bvis svg:first-child, .bvis.on svg:last-child { display: none; }
.brandline { margin: 6px 0 0; overflow-wrap: anywhere; }
.brandline span { color: var(--ink); font-weight: 600; }
.sup2 { grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr); }

@media (max-width: 760px) {
  .oemrow { grid-template-columns: 1.5fr 1fr 40px; }
  .oemrow .sup { grid-column: 1 / 3; grid-row: 2; }
  /* the eye goes to the second line, under ×: the brand keeps the whole half of the first line */
  .oemrow__b { display: contents; }
  .oemrow__b input[name=oem_b] { grid-column: 2; grid-row: 1; }
  .oemrow .bvis { grid-column: 3; grid-row: 2; }
  .oemrow > .x { grid-column: 3; grid-row: 1; }
  /* with «Закупка»: the price on the second line next to the eye, the supplier buttons — on the third */
  .oemrow--buy { grid-template-columns: 1.5fr 1fr 40px; }
  .oemrow--buy .oemrow__buy { grid-column: 1 / 3; grid-row: 2; max-width: 220px; }
  .oemrow--buy .sup { grid-column: 1 / 3; grid-row: 3; }
  .content { padding: 16px 12px 48px; }
  .app { align-content: flex-start; } /* a short page (sign-in): the menu strip does not grow to fill the screen */
  /* 16px: below that iPhone zooms the page in when a field is tapped, and the page then slides sideways */
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px; }
  /* phone: brand on the left, «Логины и пароли» and «Выйти» on the right of it; sections; one strip: rates + «Сайт» */
  .side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; }
  .brand { grid-column: 1; grid-row: 1; padding: 2px 6px; }
  .acct { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; }
  .acct a { min-height: 40px; padding: 4px 8px; font-size: 13.5px; line-height: 1.2; text-align: right; }
  .acct__who { display: none; }
  /* all sections are seen at once — two short rows instead of a strip that hides half of them */
  .nav { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .nav a { min-height: 38px; padding: 0 8px; font-size: 14px; gap: 6px; }
  .nav__x { display: none; }
  .side__foot { grid-column: 1 / -1; flex-wrap: nowrap; margin-top: 0; padding-top: 8px; }
  .side__foot a.site { flex: none; }
  .sup2 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* «Сводка»: two small cards in a row */
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 22px; } /* supplier: name, then the long search address under it */
  /* categories on a phone: still one strip; a smaller step for sub-categories; while the name is being changed,
     the number and ↗ step aside for the 💾 */
  .ico { width: 36px; height: 36px; }

  .flash--float { left: 12px; right: 12px; bottom: 12px; }
}
@media (max-width: 370px) {
  .brand span { font-size: 17px; }
  .brand small { white-space: nowrap; }
  .acct a { padding: 4px 6px; font-size: 13px; }
}


/* the page is never wider than the screen: nothing can make it slide sideways on a phone */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* pull down at the top of the page → reload (public/admin.js); the browser's own pull is off then */
.ptr-on { overscroll-behavior-y: none; }
.ptr { position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; z-index: 80; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--muted); box-shadow: 0 3px 12px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -52px); opacity: 0; pointer-events: none; }
.ptr__i { display: flex; }
.ptr--go { color: var(--ok); }
.ptr--spin svg { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr--spin svg { animation-duration: 2s; } }

/* notifications on this phone («Уведомления») and the hint on «Сводка» */
.push__st { margin: 0; font-weight: 600; }
.push__btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pushtip { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--tint, #EEF6E4); color: #2D500A; text-decoration: none; }
.pushtip span { font-size: 14px; }

/* ---------- phone: every tab ---------- */
.stack > h2 { margin: 0; }
@media (max-width: 760px) {
  /* variants of a product: a card each — the name on its own line, then the numbers three in a row */
  .tbl--form { min-width: 0; }
  .tbl--form thead { display: none; }
  .tbl--form, .tbl--form tbody { display: block; }
  .tbl--form tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
  .tbl--form td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl--form td:first-child { grid-column: 1 / -1; min-width: 0; padding-right: 46px; }
  .tbl--form td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .tbl--form td.tbl__x { position: absolute; top: 30px; right: 0; }
  .tbl--form .x { width: 40px; height: 40px; }

  /* the product list: a card each — photo and name, under them the price, cost, mark-up, stock; the switch at the right */
  .tablebox:has(.tbl--cards) { overflow: visible; }
  .tbl--cards { min-width: 0; display: block; }
  .tbl--cards thead { display: none; }
  .tbl--cards tbody { display: block; }
  .tbl--cards tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 64px 10px 12px; border-bottom: 1px solid var(--line2); }
  .tbl--cards td { display: block; padding: 0; border: 0; font-size: 13px; }
  .tbl--cards tr:hover td { background: none; }
  .tbl--cards td.tbl__p { display: flex; flex: 1 1 100%; min-width: 0; margin-bottom: 4px; }
  .tbl--cards .tbl__pi { flex: 1 1 auto; min-width: 0; }
  .tbl--cards .oeml { display: inline-block; margin-right: 14px; }
  .tbl--cards td.tbl__oem { order: 9; flex: 1 1 100%; font-size: 12px; color: var(--muted); }
  .tbl--cards td.tbl__none { display: none; }
  .tbl--cards td.tbl__price b { font-size: 14px; }
  .tbl--cards td.tbl__price .tbl__fx { display: inline; margin: 0 0 0 6px; }
  .tbl--cards td[data-l]::before { content: attr(data-l) ' '; }
  .tbl--cards td:last-child { position: absolute; top: 10px; right: 8px; }

  /* «Сохранить» of a product and of the settings: always at hand at the bottom of the screen */
  .savebar { position: sticky; bottom: 0; z-index: 5; margin: 0 -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(244, 244, 241, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
  .savebar .btn { width: 100%; }

  .ph2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .grid2:has(.pw) { grid-template-columns: minmax(0, 1fr); }
  .head .actions { width: 100%; }
}

/* hints behind ⓘ: next to a heading or a field name; tap — the text opens right under it (public/admin.js, [data-tip]) */
.lab { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; min-width: 0; }
.lab > label, .lab > .lbl { margin-bottom: 0; }
.lab > h1, .lab > h2 { margin: 0; }
.stack > .lab, .head .lab, .box__h .lab { margin-bottom: 0; }
.tip { position: relative; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: #8A8D86; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tip::before { content: ''; position: absolute; inset: -9px; } /* a bigger place for a finger */
.tip:hover { color: var(--ink); }
.tip[aria-expanded="true"] { color: var(--ink); background: var(--tint); }
.lab--h1 .tip svg { width: 20px; height: 20px; }
.tipbox { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--tint); color: var(--soft); font-size: 13.5px; line-height: 1.45; font-weight: 400; }
.stack > .tipbox { margin: 0; }
.head .tipbox { margin: 8px 0 0; max-width: 640px; }
.badges summary .tip { align-self: center; }
.badges summary + .tipbox { margin-bottom: 12px; }

/* phone like in the cart: the country (flag and code) and the number in one field */
.tel { display: flex; min-width: 0; }
.tel__cc { position: relative; flex: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 24px 0 11px; border: 1px solid #D3D5CE; border-right: 0; border-radius: 10px 0 0 10px; background: #F2F3EF; font-size: 20px; line-height: 1; white-space: nowrap; }
.tel__cc::after { content: ''; position: absolute; right: 9px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.tel__cc:focus-within { outline: 2px solid var(--accent); outline-offset: 0; z-index: 1; }
.tel .tel__cc select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; font-size: 16px; padding: 0; border: 0; }
.tel input[data-phone] { flex: 1 1 auto; min-width: 0; border-radius: 0 10px 10px 0; }
/* «Где брал» */
.src { display: flex; flex-direction: column; gap: 10px; }
.src .grid2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.src__go { display: flex; flex-wrap: wrap; gap: 8px; }

/* «Видео» of a product: tiles like the photos, ▶ in the middle; «Загружаем… 37%» while a file goes */
.vid__a { display: block; position: relative; color: inherit; }
.vid__a img { display: block; }
.vid__none { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: #2A2C2F; }
.vid__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vid__kind { position: absolute; left: 6px; bottom: 6px; background: #E5322D; color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 6px; }
.vid__st { position: absolute; left: 6px; right: 6px; bottom: 6px; background: rgba(255, 255, 255, .94); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.vid--error .vid__st { color: var(--err); }
.vid__size { background: rgba(23, 25, 28, .82); }
.vids__disk { margin: 0; font-size: 13.5px; color: var(--soft); }
.vid--work .vid__play { display: none; }
.vadd { display: flex; gap: 8px; }
.vadd input { flex: 1 1 auto; min-width: 0; }
.upl { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--soft); }
.upl progress { flex: 0 0 34%; height: 8px; accent-color: var(--accent); }
.photos__add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* «Удалить заказ» — at the very bottom of an order, away from the status buttons */
.odel { display: flex; justify-content: flex-end; }
.odel .mini { display: inline-flex; align-items: center; gap: 6px; }
/* «Корзина» of orders: a row with «Вернуть»; on an order page in it — the line on top */
.pill--trash svg { width: 16px; height: 16px; }
.orow--trash { display: flex; align-items: center; gap: 10px; padding-right: 14px; }
.orow--trash .orow__a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.orow--trash form { flex: none; }
.box--flush > .tipbox { margin: 12px 16px 0; }
.otrash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
/* «К курсу Нацбанка ± %» under the National Bank's rate */
.pctrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-left: 28px; }
.pctrow label { margin: 0; font-weight: 500; flex: 1 1 100%; }
.currow .pctrow .prefix { flex: none; margin-left: 0; }
.pctrow .prefix select[data-pct-sign] { width: 62px; flex: none; padding: 10px 8px; text-align: center; }
.pctrow .prefix input[data-pct-val] { width: 84px; flex: none; }
.pctrow__out { font-size: 14px; }
/* an order made in roubles or dollars: green — the currency the buyer saw; the sums by the rates of that day */
.tag--cur { background: var(--tint); color: var(--ok); }
.orow__s { display: inline-flex; flex-direction: column; align-items: flex-end; }
.orow__cur, .line__m .orow__cur { display: block; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.line__m { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.ocur { padding: 4px 14px 12px; border-top: 1px solid var(--line2); }
.ocur__row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; margin: 0 -10px; border-radius: 8px; font-size: 14px; color: var(--soft); }
.ocur__row em { font-style: normal; font-size: 12px; font-weight: 500; margin-left: 6px; opacity: .85; }
.ocur__row span { font-weight: 700; }
.ocur__row--on { background: var(--tint); color: var(--ok); }
.ocur__row--on b { color: var(--ok); }
.ocur__rate { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
/* an order whose prices on the site changed: the new price at the line, «Обновить цены по сайту» under «Итого» */
.line .line__now { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; margin-top: 4px; }
.line__now small { color: var(--wait) !important; font-weight: 700; }
.line__now .mini { min-height: 32px; padding: 0 12px; }
.line__gone { color: var(--err) !important; }
.oprice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 14px; background: #FFF6E5; border-top: 1px solid #F1DFB8; font-size: 14px; color: var(--wait); }
.oprice__done { margin: 0; padding: 4px 14px 10px; font-size: 12.5px; color: var(--muted); }
/* a product just hidden from the list — a bit paler, still in its place */
tr.tr--off .tbl__p { opacity: .55; }
/* «Товары»: «Корзина» next to «+ Добавить товар»; the list of the deleted ones */
.ptrash { display: inline-flex; align-items: center; gap: 6px; }
.ptrash svg { width: 16px; height: 16px; }
.ptrash span { opacity: .7; }
.tgroup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.orow--trash .thumb { flex: none; }
.orow--trash .mini { min-height: 36px; }

/* «Товары»: above the tiles — where we are (↗ — the same on the site) and «+ Новая категория» */
.folders__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.folders__top .folders__path { flex: 1 1 auto; min-width: 0; }
.folders__add { flex: none; }
.folders__site { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; margin-left: 2px; border: 1px solid #D3D5CE; border-radius: 8px; background: #fff; color: var(--ink) !important; text-decoration: none; }
.catadd__f { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid #D3D5CE; }
.catadd__f label { font-weight: 600; }
.catadd__r { display: flex; flex-wrap: wrap; gap: 8px; }
.catadd__r input { flex: 1 1 180px; min-width: 0; font-size: 16px; }

/* «Товары»: a category tile. Swipe left (⋯ on a computer) — «Переименовать», «Скрыть»/«Показать», «Удалить» under it;
   hold and drag — the order; «Переименовать» and «Удалить» take the whole row */
.fwrap { position: relative; min-width: 0; border-radius: 10px; overflow: hidden; }
.fwrap > .folder { position: relative; z-index: 1; height: 100%; box-sizing: border-box; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fwrap__acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; visibility: hidden; }
.fwrap--sw .fwrap__acts, .fwrap--open .fwrap__acts { visibility: visible; }
.fwrap__acts form { display: flex; margin: 0; }
.fwrap__a { width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; border: 0; border-radius: 0; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.15; cursor: pointer; }
.fwrap__a svg { flex: none; width: 19px; height: 19px; }
.fwrap__a--ren { width: 96px; background: #4E524B; }
.fwrap__a--hide { background: #8A8D86; }
.fwrap__a--show { background: var(--ok); }
.fwrap__a--del { background: var(--err); }
.fwrap__a:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.fwrap--sw > .folder, .fwrap--open > .folder { box-shadow: 4px 0 10px rgba(0, 0, 0, .12); }
.fwrap--sw > .folder:not(.folder--off), .fwrap--open > .folder:not(.folder--off) { box-shadow: inset 4px 0 0 var(--accent), 4px 0 10px rgba(0, 0, 0, .12); }
.fwrap__more, .fwrap__ren, .fwrap__p { display: none; }
.fwrap--ren, .fwrap--del { grid-column: 1 / -1; }
.fwrap--ren > :not(.fwrap__ren), .fwrap--del > :not(.fwrap__p) { display: none !important; }
.fwrap--ren .fwrap__ren { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 10px; background: #fff; border: 1.5px solid var(--ink); }
.fwrap__ren input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 8px; border-color: transparent; font-size: 16px; font-weight: 600; }
.fwrap__ren input:focus { border-color: transparent; box-shadow: none; outline: none; }
.fwrap__save { background: var(--ok); border-color: var(--ok); color: #fff; }
.fwrap__save:hover { color: #fff; border-color: #2D500A; }
.fwrap--del .fwrap__p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #FDF3F2; border: 1px solid #F0C9C4; }
.fwrap__p b { flex: 1 1 100%; font-size: 14px; line-height: 1.35; }
.fwrap__p b small { font-weight: 500; color: var(--muted); }
.fwrap__p .mini { min-height: 40px; }
/* held and dragged: lifted a bit; the place it goes is where it is shown */
.fwrap--lift { overflow: visible; z-index: 3; }
.fwrap--lift > .folder { background: #F4F9EC; border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent), 0 8px 22px rgba(0, 0, 0, .18); transform: scale(1.02); }
.cat-dragging, .cat-dragging * { cursor: grabbing !important; }
/* a new one — lit up where it stands */
.fwrap:target > .folder { background: #F4F9EC; border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .folders__kids { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .fwrap > .folder { padding-right: 46px; }
  .fwrap__more { position: absolute; z-index: 2; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; opacity: .5; }
  .fwrap:hover .fwrap__more, .fwrap__more:focus-visible { opacity: 1; }
  .fwrap__more:hover { background: #F2F3EF; color: var(--ink); }
  .fwrap--open .fwrap__more, .fwrap--sw .fwrap__more { display: none; }
}

/* a phone: room at the bottom — the last things on a page are never under the edge of the screen */
@media (max-width: 760px) {
  .content { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px) + var(--cut, 0px)); }
}
@media (max-width: 760px) and (display-mode: standalone) {
  .content { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px) + var(--cut, 0px)); }
}
@media (max-width: 760px) {
  .is-app .content { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px) + var(--cut, 0px)); }
}
@media (max-width: 760px) {
  .catadd__r input { flex-basis: 100%; }
  .catadd__r .btn { flex: 1 1 0; }
}

/* «Фото заказов»: two big buttons on top; cards — a photo, the note, when and who; swipe left — «Изменить», «Удалить» */
.snapadd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.snapadd__b { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; }
.snapadd__b input, .sph--add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.snapadd .upl { flex: 1 1 100%; }
.snaps { display: flex; flex-direction: column; gap: 8px; }
.snaps__empty { margin: 8px 0; }
.snaps__disk { margin: 4px 0 0; }
.srow { position: relative; border-radius: 12px; overflow: hidden; }
.srow__c { position: relative; z-index: 1; display: flex; gap: 12px; align-items: flex-start; padding: 10px; background: #fff; border: 1px solid #D3D5CE; border-radius: 12px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.srow__ph { position: relative; flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: #E9EAE5; cursor: zoom-in; }
.srow__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.srow__ph--none { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); cursor: default; }
.srow__k { position: absolute; right: 4px; bottom: 4px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(23, 25, 28, .82); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.srow__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.srow__note { margin: 0; font-size: 15px; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.srow__note--none { color: var(--muted); font-style: italic; }
.srow__t small { color: var(--muted); font-size: 12.5px; }
.srow--sw .fwrap__acts, .srow--open .fwrap__acts { visibility: visible; }
.srow--sw > .srow__c, .srow--open > .srow__c { box-shadow: 4px 0 10px rgba(0, 0, 0, .12); }
.srow .fwrap__a--ren { width: 84px; }
.srow__ed { display: none; }
.srow--ed { overflow: visible; }
.srow--ed > :not(.srow__ed) { display: none !important; }
.srow--ed .srow__ed { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; border: 1.5px solid var(--ink); }
.srow__ed textarea { font-size: 16px; }
.srow__ed label { font-weight: 600; }
.srow__b { display: flex; flex-wrap: wrap; gap: 8px; }
.sphs { display: flex; flex-wrap: wrap; gap: 8px; }
.sph { position: relative; width: 84px; height: 84px; border-radius: 9px; overflow: hidden; background: #E9EAE5; }
.sph__img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sph__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sph__del { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--err); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.sph__del svg { width: 16px; height: 16px; }
.sph--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; border: 1.5px dashed #B9BCB4; color: var(--soft); font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; }
.sph--add:hover { border-color: var(--ink); color: var(--ink); }
.nav .cnt--soft { background: #5E625B; }
/* a photo big */
.lb-open, .lb-open body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #0C0D0E; }
.lb__bar { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; color: #fff; }
.lb__note { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.35; white-space: pre-line; max-height: 5.4em; overflow: auto; }
.lb__x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; cursor: pointer; }
.lb__in { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb__in img { display: block; width: 100%; max-width: 1100px; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .srow__c { padding-right: 52px; }
  .srow > .fwrap__more { position: absolute; z-index: 2; top: 12px; right: 8px; transform: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; opacity: .5; }
  .srow:hover > .fwrap__more, .srow > .fwrap__more:focus-visible { opacity: 1; }
  .srow--open > .fwrap__more, .srow--sw > .fwrap__more { display: none; }
}

/* «Примечание» with 🎤 «Надиктовать» */
.notef { display: flex; flex-direction: column; gap: 6px; }
.notef__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notef__h label { margin: 0; font-weight: 600; }
.notef textarea { font-size: 16px; }
.voice { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid #D3D5CE; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.voice:hover { border-color: var(--ink); }
.voice--on { border-color: var(--err); background: #FDECEC; color: var(--err); }
.voice--on svg { animation: voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .voice--on svg { animation: none; } }
.snapadd.box { display: flex; flex-direction: column; gap: 10px; }
.snapadd__r { display: flex; flex-wrap: wrap; gap: 10px; }
.srow__t { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: text; }
.srow__ph--none { color: #A6A9A1; }
.srow__ph--none svg { width: 28px; height: 28px; }

.snapadd.box { align-items: stretch; }
.snapadd__r > .snapadd__b { flex: 1 1 140px; justify-content: center; }

/* a line of an order: the label like on the site («BMW E30»), the name, how many — no part numbers */
.line .line__n { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lbadge { flex: none; display: inline-block; padding: 2px 8px; border-radius: 6px; background: #17191C; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.lbadge--r { background: var(--accent); color: #17191C; }
.line__q { color: var(--ink); font-weight: 700; }

.steps .mono { overflow-wrap: anywhere; }

.tbl__fx { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* «Фирмы»: a card per brand — the name, in how many products, the words about it */
.brandbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 14px; }
.brandbar input[type=search] { flex: 1 1 220px; max-width: 360px; }
.brands { border: 0; padding: 0; margin: 0; min-width: 0; }
.bcard { display: grid; gap: 8px; padding: 14px 16px; }
.bcard__h { display: flex; align-items: center; gap: 10px; }
.bcard__h > div { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bcard__h b { font-size: 16px; }
.bcard__h small { color: var(--muted); }
.bcard__h small a { color: inherit; }
.bcard__no { color: #A15C00; font-weight: 600; }
.bcard__h { flex-wrap: wrap; }
.bcard__btns { flex: none; margin-left: auto; display: inline-flex; gap: 8px; }
.bcard__h .mini { flex: none; min-height: 36px; padding: 0 12px; }
.mini--save { font-weight: 600; }
.bcard { scroll-margin-top: 16px; }
/* typed and not saved: the card and its «Сохранить» stand out */
.bcard__dirty { display: none; color: #A15C00; font-weight: 600; }
.bcard--dirty { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bcard--dirty .bcard__dirty { display: inline; }
.bcard__dirty::before { content: ' · '; color: var(--muted); font-weight: 400; white-space: pre; }
.bcard--dirty .mini--save { background: var(--accent); border-color: var(--accent); color: #fff; }
.bcard:target { box-shadow: 0 0 0 2px var(--accent); }
/* a brand with words: read as text, «Редактировать» opens the field */
.bcard__text { display: none; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.bcard--view .bcard__text { display: block; }
.bcard--view textarea, .bcard--view .mini--save, .bcard--view .bcard__cancel, .bcard__edit { display: none; }
.bcard--view .bcard__edit { display: inline-flex; }
/* «Отмена» — only after «Редактировать» or ✎; the name: text with ✎, after ✎ / «Редактировать» — a field */
.bcard__cancel { display: none; }
.bcard--ed .bcard__cancel { display: inline-flex; }
.bcard__nm { display: inline-flex; align-items: center; gap: 4px; }
.bcard__ren { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.bcard__ren:hover { background: var(--line2); color: var(--ink); }
.bcard__ren svg { width: 16px; height: 16px; }
.bcard__name { display: none; width: min(100%, 280px); font-weight: 700; }
.bcard--ren .bcard__nm { display: none; }
.bcard--ren .bcard__name { display: block; }
.mini--del { color: #B42318; }
.bcard textarea { min-height: 64px; }
.bchips { display: flex; flex-wrap: wrap; gap: 6px; }
.bchip { font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.bchip b { font-weight: 700; color: var(--muted); }
.bchip--on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bchip--on b { color: #fff; }
.brand[data-empty] textarea { background: #FFFDF5; }
.brand--new { border-style: dashed; }

/* «Товары в самом разделе»: those with their own rubric — out of the section with one button */
.stray p { margin: 0; }
.stray .btn { white-space: normal; max-width: 100%; }
.stray details summary { cursor: pointer; color: var(--soft); font-weight: 600; }
.stray__l { margin: 8px 0 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--line2); }
.stray__l li { display: flex; flex-direction: column; gap: 1px; padding: 7px 2px; border-bottom: 1px solid var(--line2); font-size: 14.5px; }
.stray__l li a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.stray__l li small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* blocks of the product card and the order — the owner moves them (⠿ at the top right: hold and drag) */
.blk { position: relative; min-width: 0; }
.blk, tbody[data-prows] tr { -webkit-touch-callout: none; } /* held — it lifts, no menu of the phone */
/* no dots on the screen: the button for the keyboard (↑ ↓) shows only when reached with Tab */
.kgrip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; background: none; }
.kgrip:focus-visible { clip: auto; width: 36px; height: 36px; top: 9px; right: 9px; z-index: 2; display: grid; place-items: center; border-radius: 10px; background: #F1F2EE; color: var(--ink); }
td .kgrip:focus-visible { position: static; display: inline-grid; vertical-align: middle; margin-right: 6px; }
.hold-grab, .hold-grab * { cursor: grabbing !important; }
.blocks-drag [data-blocks] { min-height: 56px; outline: 2px dashed #D3D5CE; outline-offset: 6px; border-radius: 14px; }
.blocks-drag .blk { display: flex; align-items: center; min-height: 56px; padding: 0 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-weight: 700; }
.blocks-drag .blk::before { content: attr(data-title); }
.blocks-drag .blk > .box { display: none; }
.blocks-drag .odel { display: none; }
.blk--lift { z-index: 3; border-color: var(--accent) !important; background: var(--tint) !important; box-shadow: 0 10px 28px rgba(23, 25, 28, .16); }
.blocks-drag, .blocks-drag * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* ⠿ at the left of a category tile and of a product in a category — hold and drag */
.prow--lift { position: relative; z-index: 3; background: var(--tint) !important; box-shadow: 0 10px 28px rgba(23, 25, 28, .16); outline: 2px solid var(--accent); outline-offset: -2px; }
.prow--lift td { background: transparent !important; }
.rows-drag, .rows-drag * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* «Заказы»: the chosen tile on top */
.kpi--on { border-color: var(--accent); background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent); }

/* «Заказы»: a row swiped left — «Удалить»; in «Корзина» — «Вернуть», «Навсегда», how many days are left */
.srow--flat { border-radius: 0; }
.srow--flat > .srow__c.orow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: #fff; -webkit-user-select: none; user-select: none; }
.srow--flat > .srow__c.orow--trash { flex-wrap: nowrap; gap: 10px; padding-right: 14px; }
.srow--flat > .srow__c.orow--trash .orow__a { flex-wrap: wrap; gap: 4px 12px; }
.srow--flat > .srow__c.orow--trash .orow__w { flex: 1 1 150px; }
.srow--flat > .srow__c.orow:hover { background: #F7F8F5; }
.oswipes > .srow--flat:last-child > .srow__c { border-bottom: 0; }
.orow__left { color: var(--muted); }
.orow__left--soon { color: var(--err); font-weight: 600; }
.otrash { flex-wrap: wrap; }
.otrash__b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.otrash__b form { margin: 0; }
@media (hover: hover) and (pointer: fine) { .srow--flat > .srow__c.orow { padding-right: 52px; } }

/* the status of an order — compact: small buttons, two rows on a phone */
.ostat { padding-top: 14px; padding-bottom: 14px; }
.ostat > h2 { margin-bottom: 10px; font-size: 16px; }
.ostat__p { gap: 6px; }
.ostat__p .pill { min-height: 34px; padding: 0 11px; gap: 6px; font-size: 13.5px; }
.ostat__p .dot { width: 8px; height: 8px; }
@media (max-width: 370px) { .ostat__p .pill { padding: 0 9px; font-size: 13px; gap: 5px; } }

/* «Заказы»: an order carried onto a tile — its copy under the finger, the tile under it lit */
.oghost { position: fixed; left: 0; top: 0; z-index: 60; display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 9px 14px; border: 2px solid var(--accent); border-radius: 999px; background: #fff; box-shadow: 0 10px 28px rgba(23, 25, 28, .28); pointer-events: none; color: var(--ink); font-size: 14px; white-space: nowrap; }
.oghost span { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.srow--carried > .srow__c { opacity: .35; }
.odrag .kpi { transition: transform .12s ease, box-shadow .12s ease; }
.odrag .kpi { border-style: dashed; }
.kpi--target { border-style: solid !important; border-color: var(--accent); background: var(--tint); box-shadow: 0 0 0 3px rgba(122, 186, 34, .35); transform: scale(1.03); }
.odrag, .odrag * { -webkit-user-select: none; user-select: none; }

/* ---- people: «Кто входит?», the PIN pad (как в программе учёта), «Люди и доступ», settings folders ---- */
.acct__me { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 1px; color: #F2F3EF !important; font-weight: 700; }
.acct__me.on { color: var(--accent) !important; }
.acct__role { font-size: 11.5px; font-weight: 500; color: #9EA29A; }
.login h1 { margin-bottom: 2px; }
.people { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.person { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; }
.person:hover { border-color: var(--ink); }
.person__a { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--graphite); color: var(--accent); font-weight: 800; font-size: 19px; }
.person__t { display: flex; flex-direction: column; min-width: 0; }
.person__t b { font-size: 17px; line-height: 1.25; }
.person__t small { color: var(--muted); font-size: 13px; }
.login__back { color: var(--muted); font-size: 14px; text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.pinbox { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.pinbox__who { display: flex; align-items: center; gap: 12px; text-align: left; align-self: stretch; }
.pinbox__q { margin: 6px 0 0; font-weight: 700; font-size: 16px; }
.pinbox .err { align-self: stretch; text-align: left; }
.pinbox__f { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin: 0 !important; }
.pinbox__pass { align-self: stretch; text-align: left; }
.pinbox__dots { display: none; gap: 16px; justify-content: center; min-height: 18px; }
.pinbox__dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9EA29A; transition: background .1s, border-color .1s; }
.pinbox__dots i.on { background: var(--ink); border-color: var(--ink); }
.pinbox__raw { display: grid; gap: 10px; align-self: stretch; text-align: left; }
.pinpad { display: none; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; }
.pinpad__k { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 26px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pinpad__k:active { background: var(--tint); border-color: var(--accent); }
.pinpad__k--x { font-size: 14px; font-weight: 600; color: var(--soft); border-color: transparent; background: none; }
/* with JavaScript: the dots and the pad instead of the plain fields */
.pinbox--js .pinbox__dots { display: flex; }
.pinbox--js .pinpad { display: grid; }
.pinbox--js .pinbox__raw { display: none; }
.pinbox--bad .pinbox__dots { animation: pinshake .35s; }
.pinbox--bad .pinbox__dots i { border-color: var(--err); }
.pinbox--wait .pinpad { opacity: .45; pointer-events: none; }
@keyframes pinshake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .pinbox--bad .pinbox__dots { animation: none; } }
@media (max-width: 360px) { .pinpad { grid-template-columns: repeat(3, 64px); gap: 10px; } .pinpad__k { width: 64px; height: 64px; } }
.mepin .pinbox__who { margin-bottom: 4px; }
/* «Люди и доступ» */
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-top: 1px solid var(--line2); }
.prow:first-of-type { border-top: 0; }
.prow__f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex: 1 1 420px; min-width: 0; }
.prow__n { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prow__n small { color: var(--muted); font-size: 12.5px; }
.prow__f select { width: auto; min-width: 120px; }
.prow__b { display: flex; gap: 6px; flex-wrap: wrap; }
.prow__b form { margin: 0; }
/* «Настройки» — folder tiles */
.setf { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.setf__t { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 40px 16px 16px; min-height: 84px; color: var(--ink); text-decoration: none; box-shadow: inset 4px 0 0 var(--accent); }
.setf__t:hover { outline: 1px solid var(--ink); }
.setf__t b { font-size: 16px; }
.setf__t small { color: var(--muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.setf__go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--muted); line-height: 1; }
.setsec { max-width: 760px; }
/* looking only (a seller without the right to change products) */
fieldset.ro { border: 0; padding: 0; margin: 0; min-width: 0; }
.ro .photos__add, .ro [data-add-row], .ro [data-add-oem], .ro .tbl__x, .ro .ph__b:not(.ph__main) { display: none !important; }
.note-ro { margin: 0; padding: 10px 14px; border-radius: 10px; background: #F2F3EF; color: var(--soft); font-size: 14px; }
.sw--ro { cursor: default; }
.fwrap--ro .folder { width: 100%; }
@media (max-width: 760px) {
  .acct__me { max-width: 120px; }
  .acct__me, .acct__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .setf { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .setf__t { min-height: 70px; padding: 12px 40px 12px 14px; }
  .prow { padding: 12px; }
  .prow__f select { flex: 1 1 120px; }
}

/* «Уведомления» — a bell on top (not in the menu): on a phone next to the name, on a computer at the right of the brand */
.side__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.side__top .brand { min-width: 0; }
.bell { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #C8CAC3; text-decoration: none; }
.bell:hover { color: #fff; background: #26292D; }
.bell.on { color: var(--accent); background: #26292D; }
.bell__dot { display: none; position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #E5534B; box-shadow: 0 0 0 2px var(--graphite); }
.bell--dot .bell__dot { display: block; }
@media (min-width: 761px) { .side__top .brand { padding-right: 0; } .side__top .brand span { font-size: 18px; } }
@media (max-width: 760px) {
  .side { grid-template-columns: minmax(0, 1fr) auto auto; }
  .side__top { display: contents; }
  .bell { grid-column: 2; grid-row: 1; }
  .acct { grid-column: 3; }
}

/* the iPhone status bar (the clock, the battery) over the page: a dark strip under it, the page starts below it */
body { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 95; height: env(safe-area-inset-top, 0px); background: var(--graphite); pointer-events: none; }

/* «Настройки» → «Контакты на сайте»: a phone and its ticks */
.cphr { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); }
.cphr:last-of-type { border-bottom: 0; padding-bottom: 0; }
.cphr__f { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* «Настройки» → «О компании» */
.about__text { min-height: 320px; line-height: 1.5; }
.about__on { font-weight: 600; }

/* «Продавцу» in the card of a product: 10% · 50% · its own % · a sum ₸ (shareSection), and the lines under it (earnBox) */
.share { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share__o { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid #D3D5CE; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.share__o > input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.share__o.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.share__o:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.share__o--in { padding-right: 10px; }
.share__o--in input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 64px; min-height: 32px; padding: 4px 8px; border-radius: 8px; text-align: right; font-weight: 600; color: var(--ink); }
.share__o--sum input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 92px; }
.share__o i { font-style: normal; }
.share[disabled] .share__o { cursor: default; opacity: .85; }
.earn { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 14px; }
.earn__v { display: grid; gap: 4px; }
.earn__vt { font-size: 14px; }
.earn__r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.earn__r span { color: var(--soft); }
.earn__r b { font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.earn__r--none b { color: var(--wait); font-size: 15px; }
.earn__r--me span { color: var(--ink); font-weight: 600; }
.earn__r--me b { font-size: 22px; color: var(--ok); }
.earn__r--neg span, .earn__r--neg b { color: var(--err); }
.earn small { color: var(--muted); font-size: 13px; }
.earn__none { margin: 0; color: var(--muted); font-size: 14px; }

/* «Ваш заработок»: the strip on top of the seller's «Заказы» and the page /earn */
.estrip { display: grid; gap: 10px; padding: 14px 16px; background: var(--tint); border-color: #CFE3B5; }
.estrip__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.estrip__h h2 { margin: 0; }
.estrip__h a { font-size: 14px; font-weight: 600; white-space: nowrap; }
.estrip__n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.estrip__c { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #DCEAC8; color: var(--ink); text-decoration: none; min-width: 0; }
.estrip__c span { font-size: 13px; color: var(--muted); }
.estrip__c b { font-size: 20px; line-height: 1.15; font-weight: 800; overflow-wrap: anywhere; }
.estrip__c small { font-size: 12.5px; color: var(--soft); }
.estrip__u { margin: 0; font-size: 13.5px; color: var(--wait); }
.rk--one { grid-template-columns: minmax(0, 1fr); }
.rk--one .rk__t--hero { grid-row: auto; align-items: flex-start; }
.earnd h2 { display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.earnd h2 span { font-variant-numeric: tabular-nums; }
.rep__unset { margin: 0; font-size: 14px; color: var(--soft); }

/* «Отчёт» */
.rep__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.rep__dates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rep__dates label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--soft); }
.rep__dates input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: auto; min-height: 40px; padding: 6px 10px; }
.rep__dates .btn { min-height: 40px; }
.rep__per { margin: 0; font-size: 15px; }
.rep__per span { color: var(--muted); }
.rep__empty { margin: 0; color: var(--soft); }
.rk { display: grid; grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); gap: 10px; }
.rk__t { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; }
.rk__l { font-size: 13px; color: var(--muted); }
.rk__t b { font-size: 24px; line-height: 1.15; font-weight: 800; overflow-wrap: anywhere; }
.rk__t small { font-size: 13px; color: var(--soft); }
.rk__t--wide { grid-column: span 2; }
.rk__t--hero { grid-row: span 2; justify-content: center; background: var(--tint); border-color: #CFE3B5; }
.rk__t--hero .rk__l { font-size: 15px; font-weight: 600; color: var(--soft); }
.rk__t--hero b { font-size: clamp(34px, 4vw, 52px); }
.rk__d { font-weight: 600; }
.rk__d--up { color: var(--ok); }
.rk__d--down { color: var(--err); }
.rep__warn { border: 1px solid #EBD3A0; background: #FFF8E6; color: #4D3300; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.rep__warn ul { margin: 6px 0 0; padding-left: 18px; }
.rep__warn a { color: #4D3300; }
.rep__ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rep__ch h2 { margin: 0; }
.seg { display: inline-flex; background: #EFF0EC; border-radius: 999px; padding: 3px; }
.seg__b { border: 0; background: transparent; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--soft); cursor: pointer; }
.seg__b.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
/* the columns: one series at a time (Выручка / Прибыль), one scale, hairline grid, 2px of air between columns */
.bars { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 190px auto; column-gap: 8px; margin-top: 4px; }
.bars__y { grid-column: 1; grid-row: 1; position: relative; min-width: 46px; }
.bars__y span { position: absolute; right: 0; transform: translateY(50%); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__y i { font-style: normal; }
.bars[data-m="r"] .vp, .bars[data-m="p"] .vr { display: none; }
.bars__plot { grid-column: 2; grid-row: 1; position: relative; display: flex; align-items: flex-end; }
.bars__g { position: absolute; left: 0; right: 0; height: 1px; background: var(--line2); }
.bars__g--0 { background: #D3D5CE; }
.bars__c { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; position: relative; z-index: 1; outline: none; }
.bars__c i { display: block; width: min(24px, 100%); height: var(--r); background: #5E9E19; border-radius: 4px 4px 0 0; }
.bars[data-m="p"] .bars__c i { height: var(--p); }
.bars__c:hover i, .bars__c.on i { background: #487E10; }
.bars__c:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 4px; }
.bars__x { grid-column: 2; grid-row: 2; display: flex; padding-top: 6px; }
.bars__x span { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars__tip { position: absolute; top: -6px; z-index: 3; background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.35; display: flex; flex-direction: column; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.bars__tip[hidden] { display: none; }
.rep__tbl summary, .rep__more summary { cursor: pointer; color: var(--ok); font-weight: 600; font-size: 14px; min-height: 36px; display: flex; align-items: center; }
.rtbl { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.rtbl th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.rtbl td { padding: 6px 4px; border-bottom: 1px solid var(--line2); }
.rtbl .r { text-align: right; white-space: nowrap; }
.rtbl tfoot td { font-weight: 700; border-bottom: 0; }
.rep__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rlist { list-style: none; margin: 0; padding: 0; }
.rrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.rrow:last-child { border-bottom: 0; }
.rrow__n { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.rrow__n a { color: var(--ink); text-decoration: none; }
.rrow__n a:hover { text-decoration: underline; }
.rrow small { font-size: 12.5px; color: var(--muted); }
.rrow__m { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rrow__bar { grid-column: 1 / -1; height: 4px; background: #E4EFD6; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.rrow__bar i { display: block; height: 100%; background: #5E9E19; border-radius: 999px; }
@media (max-width: 1100px) {
  .rk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk__t--hero { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 900px) { .rep__cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rk__t { padding: 10px 12px; }
  .rk__t b { font-size: 20px; }
  .rk__t--hero b { font-size: clamp(32px, 11vw, 48px); }
  .estrip { padding: 12px; }
  /* phone: three rows — the month and the sales on the left, the money on the right */
  .estrip__n { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .estrip__c { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l b" "s b"; align-items: center; column-gap: 10px; padding: 8px 12px; }
  .estrip__c span { grid-area: l; font-size: 14px; color: var(--ink); font-weight: 600; }
  .estrip__c small { grid-area: s; }
  .estrip__c b { grid-area: b; font-size: 19px; white-space: nowrap; overflow-wrap: normal; }
  .bars { grid-template-rows: 160px auto; column-gap: 6px; }
  .bars__y { min-width: 40px; }
  .rep__dates { width: 100%; }
  .rep__dates label { flex: 1 1 130px; }
  .rep__dates input:not([type=checkbox]):not([type=radio]):not([type=file]) { flex: 1; min-width: 0; }
}
/* «Фирмы» opened from a product: «← К товару» on the left of the bar at the bottom */
.savebar__back { margin-right: auto; }
@media (max-width: 760px) {
  .savebar:has(.savebar__back) { flex-wrap: nowrap; gap: 8px; }
  .savebar:has(.savebar__back) .btn { width: auto; flex: 1 1 0; min-width: 0; margin: 0; }
}