/* Тема «В · Светлый премиум»: тёплый светлый фон, белые карточки с тонкой рамкой, чёрные кнопки, синий акцент в графиках.
   Подключается последней: переопределяет цвета из style.css и design.css, раскладку не трогает. */
:root {
  --bg: #f6f4ef; --card: #fff; --text: #15151a; --muted: #6b6b78; --line: #e8e4d9; --soft: #f1ede4;
  --accent: #3b6cf0; --accent-dark: #15151a; --accent-soft: #ebe7dc; --accent-text: #fff;
  --ok: #168a55; --ok-bg: #e3f4ea; --warn: #8f5a00; --warn-bg: #fff1d6; --bad: #c62f3a; --bad-bg: #fdecec;
  --info: #1f5fd6; --info-bg: #e6eeff; --radius: 16px;
  --glass: #fff; --glass-line: #ece8de; --glass-shadow: 0 1px 2px rgba(20,20,30,.04), 0 12px 30px rgba(20,20,30,.05);
}
html, body { background: var(--bg); color: var(--text); }
a { color: #1f5fd6; }
.demo { background: #f6e7a8; }

.side { background: #fbfaf6; border-right: 1px solid var(--line); }
.brand b, .brand > b { background: #15151a; }
.shopcard, .sidesearch { background: #fff; border-color: var(--line); }
.sidesearch { background: #f1ede4; border: 0; }
.shopcard .dot { border-color: #15151a; }
.nav a { border-radius: 12px; } .nav a:hover { background: #f1ede4; } .nav a.on { background: #15151a; color: #fff; font-weight: 600; } .nav a.on svg.i { color: #fff; }
.top.mobile-only { background: #fbfaf6; }
.card, .chart-card, .ttile, .kpi, .kpi2, .table-wrap, .tlist, .fpanel, .perm, .pk, .modal { background: #fff; border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); backdrop-filter: none; }
.tlist { box-shadow: none; border: 0; background: transparent; }
.table-wrap table th { background: #f6f3ea; color: #5a5a66; }
.table-wrap table tr:hover td, .brow:hover, table.ytable tr:hover td { background: #faf8f2; }
.table-wrap { border-radius: 20px; }
input, select, textarea { border-color: #ddd8ca; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: #15151a; box-shadow: 0 0 0 3px rgba(21,21,26,.1); outline: 0; }

.btn { background: #15151a; border-color: #15151a; color: #fff; box-shadow: none; }
.btn:hover { background: #2c2c35; border-color: #2c2c35; }
.btn.light, .btn.outline { background: #fff; color: var(--text); border: 1px solid #ddd8ca; box-shadow: none; }
.btn.light:hover, .btn.outline:hover { background: #f6f3ea; border-color: #c9c3b2; }

.seg { background: #fff; border: 1px solid var(--glass-line); } .seg a.on { background: #15151a; color: #fff; box-shadow: none; }
.segb a.on, .segb label.on { background: #15151a; color: #fff; }
.chips a.on, .chips button.on, .tchip.on, .lchip.on, .jv-pill.on, .jv-tabs a.on { background: #15151a; border-color: #15151a; color: #fff !important; }
.pill.info, .badge.info { background: var(--info-bg); color: var(--info); }

.hero-card, .hero-card.neg { background: #fff; color: var(--text); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.hero-card.neg { background: #fff5f4; }
.hero-card .lbl, .hero-sub { color: var(--muted); }
.hero-card .delta { background: #f1ede4; } .hero-card .delta.up { color: #168a55; } .hero-card .delta.down { color: #c62f3a; }
.hero-pills { border-top-color: var(--line); } .hero-pills .small { color: var(--muted); } .hero-note { color: #8f5a00; }
.hero-card .seg.mini { background: #f1ede4; border: 0; } .hero-card .seg.mini a { color: var(--text); } .hero-card .seg.mini a.on { background: #15151a; color: #fff; }
.hero-num { color: #15151a; font-size: 52px; letter-spacing: -.03em; }
.ttile.main { background: #15151a; color: #fff; border-color: #15151a; }
.ttile.main .tt-sub { color: rgba(255,255,255,.72); } .ttile.main .tt-ic { background: rgba(255,255,255,.14); color: #fff; }
.qbar, .toolbar { background: #15151a; color: #fff; border: 0; box-shadow: 0 12px 30px rgba(20,20,30,.22); }
.qbar .muted, .toolbar .muted, .qbar label, .toolbar label { color: rgba(255,255,255,.75); }
.qbar .btn, .toolbar .btn { background: #fff; color: #15151a; border-color: #fff; } .qbar .btn.light, .toolbar .btn.light { background: rgba(255,255,255,.12); color: #fff; border-color: transparent; }
.bulkbar { background: #15151a; color: #fff; }
.cal-grid .day.a, .cal-grid .day.b { background: #15151a; }
table.cal.heat td.today { box-shadow: inset 0 0 0 2px #15151a; }
.pulse2 th.sigma, .pulse2 table.ytable th.sigma { background: #2c2c35; }
.nc-bar.pos { background: linear-gradient(180deg, #3b6cf0, #8fb0ff); } .nc-bar.neg { background: linear-gradient(180deg, #ee7a7e, #d64045); }
.tbar i, .wfbar i, .mbar i { background: #3b6cf0; }

/* «Гипотезы»: светлая панель, цвета из токенов; чёткие границы, чтобы блоки не сливались */
.jv { --d0: #f1ede4; --d1: #fff; --d2: #f6f3ea; --d3: #ddd8ca;
  --ink: #15151a; --ink-2: #34343f; --ink-3: #6b6b78; --hud: #1f5fd6; --hud-2: #3b6cf0; --good: #168a55; --bad-t: #c62f3a; --warn-t: #8f5a00;
  background: var(--d0); border: 1px solid var(--glass-line); box-shadow: none; backdrop-filter: none; }
.jv-kpi, .jv-card, .jv-chartbox, .jv-what-card, .jv-note, .jv-hint, .jv-side { box-shadow: 0 1px 2px rgba(20,20,30,.04); }
.jv-kpi b { color: #15151a; }
.jv .hc-dot { fill: #fff; stroke: #3b6cf0; } .jv-ba .was { background: #fdecec; } .jv-ba .now { background: #e3f4ea; }
.jv tr.colfilter th { background: #f6f3ea !important; } .jv tr.colfilter input { background: #fff; color: var(--text); }
.jv-warn { background: #fff4de; } .jv-hint.win { background: #e8f7ef; } .jv-hint.lose { background: #fdecef; }
.jv .jv-table, .jv .jv-table tr, .jv .jv-table td { color: var(--ink); } .jv .jv-table tr.main td { color: #1f5fd6; }
.jv-card { border-color: #d6d0c0; } .jv-card h3 { color: #15151a; }
.jv-av .jv-ph { border-color: #fff; }
.perm:has(input:checked) { border-color: #15151a; background: #f6f3ea; }

/* ===== Рабочий стол: плотный, спокойный, как профессиональные кабинеты (тёмное меню, светлая область, один зелёный акцент) ===== */
:root {
  --bg: #f4f6f8; --card: #fff; --text: #1b2430; --muted: #6b7686; --line: #e5e9ef; --soft: #f1f4f7;
  --accent: #10b981; --accent-dark: #0b8f63; --accent-soft: #e3f6ee; --accent-text: #fff;
  --ok: #0f8a5f; --ok-bg: #e3f6ee; --warn: #9a5b00; --warn-bg: #fff4dc; --bad: #c8333f; --bad-bg: #fdeced; --info: #1f5fd6; --info-bg: #e8f0ff;
  --glass: #fff; --glass-line: #e5e9ef; --glass-shadow: none; --radius: 12px; --side: 232px;
  --navy: #0f1a2a;
}
html, body { background: var(--bg); color: var(--text); }
body { font-size: 13.5px; line-height: 1.45; }
a { color: #1d6fd1; }
main { padding: 20px 24px 40px; }
h1 { font-size: 20px; line-height: 28px; letter-spacing: -.01em; margin: 0 0 2px; } h2 { font-size: 16px; line-height: 24px; margin: 20px 0 10px; } h3 { font-size: 14px; line-height: 20px; }
.pagehead { margin-bottom: 14px; } .sub-head { font-size: 13px; color: var(--muted); }

/* меню */
.side { background: var(--navy); border-right: 0; color: #c7d1de; padding: 14px 10px; }
.brand, .brand:visited { color: #fff; font-size: 17px; } .brand b, .brand > b { background: #10b981; border-radius: 8px; width: 28px; height: 28px; } .brand b svg.i { width: 16px; height: 16px; }
.shopcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); box-shadow: none; } .shopcard .sc-txt b { color: #fff; font-size: 14px; } .shopcard .sc-txt span, .shopcard svg.i { color: #8fa0b5; } .shopcard .dot { border-color: #10b981; }
.sidesearch { background: rgba(255,255,255,.07); border: 0; color: #8fa0b5; } .sidesearch input { color: #fff; } .sidesearch input::placeholder { color: #7f91a8; }
.nav-group > summary { color: #6f8198; font-size: 11px; letter-spacing: .08em; } .nav-group > summary .chev { border-color: #6f8198; }
.nav a { color: #c7d1de; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; gap: 10px; } .nav a svg.i { width: 17px; height: 17px; opacity: .85; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; } .nav a.on { background: rgba(16,185,129,.16); color: #34d399; font-weight: 600; box-shadow: inset 2px 0 0 #10b981; } .nav a.on svg.i { color: #34d399; opacity: 1; }
.sidefoot { border-top-color: rgba(255,255,255,.1); } .sidefoot .who b { color: #fff; } .sidefoot .who span { color: #8fa0b5; } .sidefoot .ava { background: #10b981; } .sidefoot .bell { color: #c7d1de; } .sidefoot .bell:hover { background: rgba(255,255,255,.08); }
.top.mobile-only { background: var(--navy); color: #fff; border-bottom: 0; } .top.mobile-only .menu-toggle, .top.mobile-only b, .top.mobile-only .bell { color: #fff; }

/* карточки и таблицы: тонкие линии, без теней */
.card, .chart-card, .ttile, .kpi, .kpi2, .table-wrap, .fpanel, .perm, .pk, .modal, .fq-list, .fq-hero, .sp, .mcard, .cidea-i, .jarvis { border: 1px solid var(--line); box-shadow: none; backdrop-filter: none; }
.card, .chart-card, .kpi, .kpi2, .fpanel { border-radius: 12px; padding: 14px 16px; }
.table-wrap { border-radius: 12px; overflow: hidden; } .table-wrap table th, table.ytable th { background: #f8fafc; color: #6b7686; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border-bottom: 1px solid var(--line); }
table.ytable td, .table-wrap table td { padding: 9px 12px; font-size: 13px; border-bottom: 1px solid #eef1f5; } .table-wrap table tr:last-child td { border-bottom: 0; }
.table-wrap table tr:hover td, table.ytable tr:hover td { background: #f8fafc; }
tr.rowloss td { background: #fff5f5; } tr.rowedge td { background: #fffaf0; }
.pc .photo, .pc.big .photo { border-radius: 8px; } .pc .photo { width: 36px; height: 36px; } .pc.big .photo { width: 44px; height: 44px; } .pc-t b { font-size: 13px; line-height: 18px; } .pc-t small { font-size: 11.5px; }
input, select, textarea { border: 1px solid #d9dfe7; border-radius: 8px; background: #fff; font-size: 13px; min-height: 34px; } input:focus, select:focus, textarea:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }

/* кнопки: компактные, основная — зелёная */
.btn { background: #0f9d6e; border: 1px solid #0f9d6e; color: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; padding: 7px 12px; box-shadow: none; transform: none; }
.btn:hover { background: #0b8a5f; border-color: #0b8a5f; transform: none; } .btn:active { transform: scale(.98); }
.btn.light, .btn.outline { background: #fff; color: var(--text); border: 1px solid #d9dfe7; } .btn.light:hover, .btn.outline:hover { background: #f4f6f8; border-color: #c3ccd7; }
.btn.small { font-size: 12px; padding: 4px 10px; } .btn.big { font-size: 14px; padding: 9px 16px; }
.seg { background: #eceff3; border: 0; border-radius: 8px; padding: 3px; } .seg a { font-size: 13px; padding: 5px 12px; border-radius: 6px; color: #5a6573; } .seg a.on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(20,30,50,.08); font-weight: 600; }
.segb a.on, .segb label.on { background: #0f9d6e; color: #fff; }
.chips a.on, .chips button.on, .tchip.on, .lchip.on, .jv-pill.on, .jv-tabs a.on { background: #0f1a2a; border-color: #0f1a2a; color: #fff !important; }
.pill, .badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; line-height: 18px; }
.pill.ok, .badge.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn, .badge.warn { background: var(--warn-bg); color: var(--warn); } .pill.bad, .badge.bad { background: var(--bad-bg); color: var(--bad); }

/* крупные показатели — компактнее */
.mcards { gap: 10px; } .mcard { border-radius: 12px; padding: 12px 14px; } .mcard b { font-size: 20px; line-height: 26px; } .mcard span { font-size: 12px; } .mcard small { font-size: 11.5px; } .mcard.on { border-color: #0f9d6e; box-shadow: 0 0 0 1px #0f9d6e; }
.mcard.ok { background: #effaf5; } .mcard.warn { background: #fffaf0; } .mcard.bad { background: #fff5f5; }
.kpi2 .v, .kpi .val { font-size: 22px; line-height: 28px; } .hero-num { font-size: 34px; line-height: 40px; } .hero-card, .hero-card.neg { border-radius: 12px; box-shadow: none; padding: 16px 18px; }
.verdict { border-radius: 12px; padding: 12px 16px; font-size: 13px; } .verdict b { font-size: 14px; }
.fq-list, .fq-hero, .sp { border-radius: 12px; } .fq-name b { font-size: 16px; line-height: 24px; } .sp-name { font-size: 15px; line-height: 20px; } .sp { padding: 14px; box-shadow: none; } .sp:hover { transform: none; box-shadow: 0 4px 14px rgba(20,30,50,.08); }
.ttile { border-radius: 12px; padding: 14px 16px; } .ttile:hover { transform: none; box-shadow: 0 4px 14px rgba(20,30,50,.08); border-color: #c9d3df; } .ttile.main { background: #0f1a2a; border-color: #0f1a2a; }
.qbar, .toolbar { background: #0f1a2a; border-radius: 12px; box-shadow: 0 8px 24px rgba(15,26,42,.25); } .qbar .btn, .toolbar .btn { background: #10b981; border-color: #10b981; color: #fff; } .qbar .btn.light, .toolbar .btn.light { background: rgba(255,255,255,.12); color: #fff; }
.nc-bar.pos { background: #10b981; } .nc-bar.neg { background: #e5484d; } .nc-bar.ad, .b i { background: #10b981; } .tbar i, .wfbar i, .mbar i { background: #10b981; }
.effbar { height: 10px; } .e-ok { background: #10b981; }
.cal-grid .day.a, .cal-grid .day.b, .pulse2 th.sigma { background: #0f1a2a; } table.cal.heat td.today { box-shadow: inset 0 0 0 2px #10b981; }
.sp-prog i { background: #0f1a2a; } .sp.booked .sp-prog i { background: #10b981; }
.demo { background: #fff4d6; color: #6b4a00; font-size: 13px; padding: 4px 12px; }

/* панели «Гипотез» и плитки в новом стиле */
.jv { background: #eef1f5; border-radius: 12px; } .jv-card, .jv-kpi, .jv-chartbox, .jv-side { border-radius: 12px; }
.jarvis { border-radius: 12px; background: #fff; border-color: #d6e2ff; } .jr-title { font-size: 16px; line-height: 24px; }
.fq-tile, .fq-all { border-radius: 10px; }
.perm:has(input:checked) { border-color: #10b981; background: #effaf5; }

/* Реклама → «Что добавить в РК» */
.ads-tabs { margin: 0 0 14px; background: #fff; }
.rk-list { display: flex; flex-direction: column; gap: 8px; }
.rk { background: #fff; border: 1px solid var(--line); border-radius: 12px; border-left: 3px solid #cfd6df; }
.rk.t-search, .rk.t-reco, .rk.t-add_reco { border-left-color: #10b981; } .rk.t-cpo { border-left-color: #1f5fd6; } .rk.t-cut, .rk.t-none { border-left-color: #e8a33d; } .rk.t-cut { border-left-color: #e5484d; }
.rk-sum { display: grid; grid-template-columns: 48px minmax(160px, 1.1fr) minmax(220px, 2fr) 150px 16px; gap: 14px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.rk-sum::-webkit-details-marker { display: none; }
.rk-sum:hover { background: #fafbfc; border-radius: 12px; }
.rk-id { display: flex; flex-direction: column; min-width: 0; } .rk-id b { font-size: 13.5px; } .rk-id small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-rec { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rk-rec small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.rk-rec .pill { align-self: flex-start; } .rk-rec em { font-style: normal; font-size: 12.5px; color: #4b5563; line-height: 1.35; }
.rk-fc { display: flex; flex-direction: column; text-align: right; } .rk-fc b { font-size: 15px; color: #0f8a5f; } .rk-fc small { font-size: 11.5px; color: var(--muted); }
.rk-chev { font-style: normal; font-size: 20px; color: #9aa5b3; transition: transform .2s; } .rk[open] .rk-chev { transform: rotate(90deg); }
.rk-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; padding: 4px 16px 16px; border-top: 1px solid #eef1f5; }
.rk-body h4 { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6b7686; }
.rk-cmp td small, .rk-q td small { display: block; color: var(--muted); font-size: 11px; }
.rk-cmp tr.good td:nth-child(2) b { color: #0f8a5f; } .rk-cmp tr.bad td:nth-child(2) b { color: #c8333f; } .rk-cmp tr.bad td { background: #fff8f8; }
.rk-q tr.bad td:nth-child(3) { color: #c8333f; font-weight: 600; } .rk-q tr.good td:nth-child(3) { color: #0f8a5f; font-weight: 600; }
.rk-fcs { margin: 10px 0; } .ac-f { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.ac-f span { font-size: 11px; color: var(--muted); } .ac-f b { font-size: 16px; } .ac-f small { font-size: 11px; color: var(--muted); } .ac-f.good { background: #effaf5; } .ac-f.bad { background: #fff5f5; }
.rk-steps { margin: 0 0 12px; padding-left: 18px; font-size: 13px; } .rk-steps li { margin: 3px 0; }
.rk-rival { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap: 6px; margin-top: 8px; }
.rk-rival input { min-width: 0; }
@media (max-width: 900px) {
  .rk-sum { grid-template-columns: 44px 1fr 16px; } .rk-rec { grid-column: 1 / -1; } .rk-fc { grid-column: 1 / -1; text-align: left; }
  .rk-body { grid-template-columns: 1fr; } .rk-rival { grid-template-columns: 1fr 1fr; }
}

/* Гипотезы → «Советы по всем товарам» */
.pa-list { display: flex; flex-direction: column; gap: 10px; }
.pa { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pa-h { display: flex; gap: 12px; align-items: center; } .pa-h .ac-id { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pa-h .ac-id small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-rk { text-decoration: none; white-space: nowrap; }
.pa-nums { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.pa-n { display: flex; flex-direction: column; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 8px; padding: 5px 9px; min-width: 120px; }
.pa-n small { font-size: 10.5px; color: var(--muted); } .pa-n b { font-size: 14px; } .pa-n i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.pa-n.good { background: #effaf5; border-color: #cdeedd; } .pa-n.good b { color: #0f8a5f; } .pa-n.bad { background: #fff5f5; border-color: #f6d4d6; } .pa-n.bad b { color: #c8333f; }
.pa-adv { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pa-a { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; background: #fafbfc; border-radius: 8px; }
.pa-a b { display: block; font-size: 13px; } .pa-a span { font-size: 12px; color: #5a6573; }
.pa-a .btn.act { white-space: nowrap; }

/* Отзывы */
.rv-set { margin-bottom: 14px; } .rv-mode + .rv-mode { border-top: 1px solid #eef1f5; margin-top: 12px; padding-top: 12px; }
.rv-mode-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rv-mode-b { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rv-seg label { font-size: 13px; padding: 5px 12px; border-radius: 6px; color: #5a6573; cursor: pointer; } .rv-seg label.on { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(20,30,50,.08); }
.rv-seg input { display: none; } .rv-stars { display: inline-flex; gap: 8px; } .rv-stars label { font-size: 13px; display: inline-flex; gap: 3px; align-items: center; }
.rv-sign { min-width: 260px; flex: 1; }
.rv-bulk { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; }
.rv-list { display: flex; flex-direction: column; gap: 10px; }
.rvw { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; border-left: 3px solid #10b981; }
.rvw.mid { border-left-color: #e8a33d; } .rvw.neg { border-left-color: #e5484d; }
.rv-h { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .rv-h .pc { min-width: 180px; }
.rv-rate { color: #f5a524; letter-spacing: 1px; font-size: 14px; } .rv-rate i { color: #d9dfe7; font-style: normal; }
.rv-text { margin: 8px 0; font-size: 13.5px; }
.rv-reply { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.rv-reply small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .rv-reply textarea { width: 100%; resize: vertical; }
.rv-reply.sent { background: #effaf5; border-color: #cdeedd; } .rv-reply p { margin: 0; white-space: pre-line; }
.ads-tabs a { color: #374151; } .ads-tabs a:hover { color: #0f1a2a; }
.rk-rival { grid-template-columns: repeat(4, 1fr) auto; } .rk-rival input[name=rival] { grid-column: 1 / -1; }

/* «Кто заменит локомотивы» и отметка «Нет у поставщика» */
.st-pick ul{margin:8px 0;padding-left:0;list-style:none}.st-pick li{margin:4px 0}.st-pick input[type=checkbox]{width:auto;margin:0 6px 0 0;vertical-align:-2px}.st-pick label{cursor:pointer;display:inline-flex;align-items:center}.st-more{margin:0 0 8px}.st-more summary{cursor:pointer;color:#374151}
.sb-box{margin-bottom:16px}
.sb-row{display:grid;grid-template-columns:minmax(200px,1fr) 24px 2.4fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line,#e5e7eb)}
.sb-loco,.sb-sub{display:flex;gap:10px;align-items:flex-start;min-width:0}
.sb-loco div,.sb-sub div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-loco small,.sb-sub small{color:var(--muted,#6b7280);overflow:hidden;text-overflow:ellipsis}
.sb-arrow{font-size:20px;color:var(--muted,#9ca3af);padding-top:14px;text-align:center}
.sb-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.sb-sub{padding:8px;border:1px solid var(--line,#e5e7eb);border-radius:10px;color:inherit;text-decoration:none}
.sb-sub:hover{border-color:#9ca3af}.sb-sub .pill{align-self:flex-start;margin-top:4px;white-space:normal;max-width:100%}
.bad-t{color:#b42318!important}.good-t{color:#067647}
@media (max-width:760px){.sb-row{grid-template-columns:1fr}.sb-arrow{display:none}}
/* карточка РК: «что сделать → что ожидаем → как проверим» */
.rk-plan{grid-column:1/-1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:6px}
.rk-step{min-width:0;display:flex;gap:10px;padding:12px;border-radius:10px;background:#f3f6f4;border:1px solid #e3ebe6}
.rk-step i{flex:none;width:24px;height:24px;border-radius:50%;background:#111827;color:#fff;font-style:normal;font-size:12px;font-weight:600;display:grid;place-items:center}
.rk-step small{display:block;text-transform:uppercase;letter-spacing:.04em;font-size:11px;color:var(--muted,#6b7280);margin-bottom:4px}
.rk-step p{margin:0;font-size:14px;line-height:1.45}
@media (max-width:900px){.rk-plan{grid-template-columns:1fr}}
.rk-plan{margin-top:14px}
.rk-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.rk-col{min-width:0}.rk-col .ytable{width:100%}
@media (max-width:1180px){.rk-body{grid-template-columns:minmax(0,1fr)}}
/* запуск кампании «Оплата за клик» со страницы РК */
.rl-box{margin-top:14px;border:1px solid #dbe7e0;border-radius:12px;padding:4px 14px 14px;background:#fbfdfc}
.rl-box>summary{cursor:pointer;list-style:none}.rl-box>summary::-webkit-details-marker{display:none}
.rl-box>summary h4{display:inline-block;margin:12px 0 4px;color:#067647}
.rl-form{display:flex;flex-direction:column;gap:12px}
.rl-f{display:flex;flex-direction:column;gap:6px}.rl-f>span{font-size:13px;font-weight:600;color:#374151}
.rl-f input:not([type]),.rl-f input[inputmode],.rl-f select{max-width:320px}
.rl-sub{display:flex;flex-direction:column;gap:4px}.rl-sub small{color:var(--muted,#6b7280)}.rl-sub[hidden]{display:none}
.rl-seg{flex-wrap:wrap}.rl-seg input{position:absolute;opacity:0;pointer-events:none}.rl-seg label{cursor:pointer}
.rl-pl{display:flex;gap:10px;flex-wrap:wrap}.rl-pl label{display:flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;background:#fff}
.rl-pl label:has(input:checked){border-color:#067647;box-shadow:0 0 0 1px #067647}
.rl-pl input,.rl-ok input{width:auto;margin:0}.rl-ok{display:flex;gap:8px;align-items:center}
.rl-hint{font-style:normal;line-height:1.4}
.rl-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rl-list li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px}
.rl-list li small{flex-basis:100%;color:var(--muted,#6b7280)}.rl-list form{margin-left:auto}
.rl-seg{display:inline-flex;gap:0;padding:3px;background:#f1f3f5;border-radius:10px;align-self:flex-start;max-width:100%}
.rl-seg label{position:relative;padding:8px 14px;border-radius:8px;font-size:14px;color:#4b5563;white-space:nowrap}
.rl-seg label.on{background:#fff;color:#111827;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px #067647}

/* ── Окна: стекло и плавность ─────────────────────────────────────────── */
.modal-back{background:rgba(17,24,39,.32);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);animation:mb-in .22s ease-out both}
.modal-back.out{animation:mb-out .2s ease-in both}
.modal-back>.modal{background:rgba(255,255,255,.82);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 70px rgba(15,23,42,.28),0 2px 8px rgba(15,23,42,.08);
  animation:m-in .32s cubic-bezier(.2,.9,.25,1) both}
.modal-back.out>.modal{animation:m-out .2s ease-in both}
@keyframes mb-in{from{opacity:0}to{opacity:1}}
@keyframes mb-out{from{opacity:1}to{opacity:0}}
@keyframes m-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes m-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.99)}}
@media (prefers-reduced-motion:reduce){.modal-back,.modal-back>.modal{animation:none}}
.modal-back .hm-foot-bar{background:rgba(255,255,255,.55);border-top-color:rgba(15,23,42,.08)}
.modal-back .hm-side{background:rgba(241,237,228,.6);border:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.modal-back .hm-info>div,.modal-back .hm-steps li{background:rgba(246,248,250,.7);border-color:rgba(15,23,42,.06)}
.modal-back .hm-exec{background:rgba(236,250,243,.75)}
.modal-back .pk{background:rgba(255,255,255,.6)}
.hm-info>div,.hm-exec,.hm-step,.ip-item,.hm-track i{transition:background .2s,border-color .2s,box-shadow .2s,opacity .2s,transform .2s}
.hm-info:not([hidden]),.hm-exec:not([hidden]),#hy-step3:not([hidden]),.ip-chosen:not([hidden]){animation:sec-in .28s cubic-bezier(.2,.9,.25,1) both}
@keyframes sec-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* выбор гипотезы в окне запуска */
.ip{display:flex;flex-direction:column;gap:8px}.ip[hidden]{display:none}
.ip-groups{display:flex;flex-wrap:wrap;gap:6px}
.ip-groups button{border:1px solid rgba(15,23,42,.1);background:rgba(255,255,255,.7);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;color:#374151}
.ip-groups button.on{background:#15151a;color:#fff;border-color:#15151a}
.ip-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;padding:2px}
.ip-item{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.75);border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit}
.ip-item:hover{border-color:#067647;box-shadow:0 2px 10px rgba(6,118,71,.10);transform:translateY(-1px)}
.ip-item span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.ip-item b{font-size:14px}.ip-item small{color:var(--muted,#6b7280);font-size:12px}
.ip-item[hidden]{display:none}
.ip-auto{font-style:normal;font-size:11px;font-weight:600;color:#3b6cf0;background:rgba(59,108,240,.1);border-radius:999px;padding:3px 8px;white-space:nowrap}
.ip-own{border-style:dashed}
.ip-chosen{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(236,250,243,.8);border:1px solid #bfe6d3}
.ip-chosen[hidden]{display:none}.ip-chosen div{flex:1;display:flex;flex-direction:column;gap:2px}.ip-chosen small{color:#4b5563}
.hm-title[hidden]{display:none}.hm-title{margin-top:8px}
.hm-track{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:12px;color:var(--muted,#6b7280)}
.hm-track span{margin-right:4px}
.hm-track i{font-style:normal;padding:3px 9px;border-radius:999px;background:rgba(15,23,42,.05);color:#4b5563}
.hm-track i.on{background:#15151a;color:#fff}
.pk-search[hidden],.pk-list[hidden]{display:none!important}.pk-chosen .pk-change{margin-left:auto;font-size:13px}
.nx-edit{width:100%;margin-top:4px;font:inherit;font-size:14px;line-height:1.45;border-radius:10px;border:1px solid rgba(6,118,71,.35);background:rgba(255,255,255,.85);padding:8px 10px;resize:vertical}
.nx-keys{margin:6px 0 0;font-size:12px;color:#4b5563}

/* Вход: логин и пароль или QR-код; общий компьютер — кнопка «Завершить сеанс» и предупреждение об автовыходе */
.login-card { max-width: 420px; margin: 40px auto; padding: 24px; }
.login-card h1 { margin-bottom: 14px; }
.login-tabs { display: flex; margin-bottom: 16px; }
.login-tabs button { flex: 1; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font: inherit; cursor: pointer; color: var(--muted); }
.login-tabs button.on { background: var(--card); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(20,30,50,.08); }
.login-pane { display: grid; gap: 12px; }
.login-pane[hidden] { display: none; }
.login-pane > label:not(.login-shared) { display: grid; gap: 4px; font-weight: 600; }
.login-pane input[type=text], .login-pane input[type=password] { width: 100%; }
.login-shared { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); cursor: pointer; }
.login-shared input { margin-top: 3px; }
.login-shared span { display: grid; gap: 2px; } .login-shared small { color: var(--muted); }
.login-pane .btn.big { width: 100%; }
.qr-box { display: grid; place-items: center; min-height: 260px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.qr-box svg { width: 240px; height: 240px; }
.qr-who { margin: 8px 0 12px; padding-left: 18px; color: var(--muted); }
.staff-add { align-items: flex-end; }
.staff-auth { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0; border-top: 1px solid var(--line); margin-top: 10px; }
.staff-auth .row { gap: 6px; } .staff-auth input { width: 180px; }
.staff-sess { margin-top: 10px; display: grid; gap: 6px; }
.sess-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--soft); }
.sess-row form { margin-left: auto; }
.endsess { padding: 10px 12px 14px; }
.endsess .btn { width: 100%; justify-content: center; background: #c8333f; border-color: #c8333f; gap: 6px; white-space: nowrap; font-size: 13px; }
.endsess .btn:hover { background: #a92833; border-color: #a92833; }
.endsess-t { font-variant-numeric: tabular-nums; opacity: .85; }
.idle-warn { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: grid; gap: 4px; max-width: 460px; width: calc(100% - 32px);
  padding: 14px 16px; border-radius: 14px; background: #1b2430; color: #fff; box-shadow: 0 12px 40px rgba(10,20,40,.3); }
.idle-warn[hidden] { display: none; }
.idle-warn span { color: #c7d1de; font-size: 13px; }
form.inline { display: inline; margin: 0; }
button.bell { border: 0; background: transparent; cursor: pointer; font: inherit; }

/* «Мои заказы» на телефоне сборщика: фото, номер заказа крупно, артикул под ним; действия справа */
.my-list { display: grid; gap: 10px; }
.my-batch { margin: 10px 2px 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.my-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.my-row.flag { border-color: #f2c26b; background: #fffbf1; }
label.my-row { cursor: pointer; } label.my-row input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
.my-ph { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 12px; overflow: hidden; border: 0; padding: 0; background: var(--soft); display: grid; place-items: center; cursor: zoom-in; }
.my-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.my-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.my-txt b { font-size: clamp(15px, 4.6vw, 19px); line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-txt > span { font-size: clamp(13px, 3.9vw, 15px); color: var(--muted); overflow-wrap: anywhere; }
.my-flag { justify-self: start; font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); }
.my-flag.stockout { background: var(--bad-bg); color: var(--bad); }
.my-act { flex: 0 0 52px; width: 52px; height: 52px; border: 0; border-radius: 14px; background: #eceae4; display: grid; place-items: center; cursor: pointer; }
.my-act svg.i { width: 24px; height: 24px; stroke-width: 3; }
.my-zoom { position: fixed; inset: 0; z-index: 100; background: rgba(8,12,20,.92); display: grid; place-items: center; padding: 16px; }
.my-zoom[hidden] { display: none; }
.my-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.my-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; cursor: pointer; }
.sheet-back { position: fixed; inset: 0; z-index: 95; background: rgba(10,20,40,.35); }
.sheet-back[hidden], .sheet[hidden], .sheet [hidden] { display: none; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; max-width: 520px; margin: 0 auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--card); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(10,20,40,.2); display: grid; gap: 10px; animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-h { display: grid; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .sheet-h b { font-size: 17px; }
.sheet [data-step] { display: grid; gap: 8px; }
.sheet-btn { display: grid; gap: 2px; text-align: left; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); font: inherit; cursor: pointer; }
.sheet-btn b { font-size: 16px; } .sheet-btn span { font-size: 13px; color: var(--muted); }
.sheet-btn.ghost { background: transparent; border-color: transparent; text-align: center; color: var(--muted); }
.sheet-qty { display: grid; gap: 4px; font-weight: 600; } .sheet-qty input { width: 100%; font-size: 16px; }
.print-all { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.phone-qr { display: flex; align-items: center; gap: 12px; margin-left: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); max-width: 420px; }
.phone-qr svg { width: 96px; height: 96px; flex: 0 0 auto; } .phone-qr div { display: grid; gap: 2px; }
.stockout { margin-bottom: 16px; display: grid; gap: 8px; } .stock-acts { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .phone-qr { display: none; } .stockout .my-row { flex-wrap: wrap; } .stock-acts { width: 100%; } }

/* Простые экраны сотрудников: «Закупка», «Приёмка», «Финансы» закупщика */
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-head small { color: var(--muted); } .sp-head h1 { font-size: 26px; margin: 0; }
.sp-day { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); }
.sp-day select { border: 0; background: transparent; font: inherit; font-weight: 600; padding: 4px; }
.sp-wallet { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.sp-wallet span { color: var(--muted); } .sp-wallet b { font-size: 18px; } .sp-wallet em { font-style: normal; font-size: 12px; color: var(--warn); }
.sp-list { display: grid; gap: 14px; max-width: 860px; }
.sp-card { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.sp-card.done { background: #f1f8f4; border-color: #d3eadc; }
.sp-top { display: flex; gap: 14px; align-items: flex-start; }
.sp-img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-name { flex: 1; min-width: 0; display: grid; gap: 2px; } .sp-name b { font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* длинное название Ozon — не больше трёх строк */ .sp-name small { font-size: 13px; }
.sp-st { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); background: var(--card); }
.sp-st.in_progress { color: var(--warn); background: var(--warn-bg); border-color: transparent; } .sp-st.bought { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.sp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-tiles > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.sp-tiles span { font-size: 12px; color: var(--muted); } .sp-tiles b { font-size: 20px; font-variant-numeric: tabular-nums; } .sp-tiles small { font-size: 11px; }
.sp-tiles .warn { background: #fff4dc; } .sp-tiles .warn span, .sp-tiles .warn b { color: var(--warn); }
.sp-tiles .ok { background: #e3f6ee; } .sp-tiles .ok span, .sp-tiles .ok b { color: var(--ok); }
.sp-tiles .bad { background: var(--bad-bg); } .sp-tiles .bad b { color: var(--bad); }
.sp-tiles.big b { font-size: 24px; } .sp-tiles.big { max-width: 860px; margin-bottom: 8px; }
.sp-bar { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; } .sp-bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.sp-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-price span { font-variant-numeric: tabular-nums; }
.sp-go { min-height: 46px; padding: 0 22px; font-size: 15px; gap: 8px; }
.sp-shops { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--card); }
.sp-shops summary { padding: 12px 0; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; }
.sp-shops div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.sp-batch { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.sp-batch > div { display: grid; gap: 4px; } .sp-batch b { font-variant-numeric: tabular-nums; }
.sp-ph { display: flex; gap: 6px; flex-wrap: wrap; } .sp-ph img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.sp-more summary { list-style: none; cursor: pointer; padding: 2px 8px; color: var(--muted); letter-spacing: 2px; } .sp-more summary::-webkit-details-marker { display: none; }
.sp-more[open] form { margin-top: 6px; }
.sp-modal { width: min(520px, calc(100vw - 24px)); padding: 18px 20px; }
.sp-mh { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .sp-mh > div { flex: 1; } .sp-mh h2 { margin: 0; font-size: 20px; }
.sp-ic { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; font-size: 22px; cursor: pointer; color: var(--muted); }
.sp-ic:hover { background: var(--soft); }
.sp-step { display: grid; gap: 8px; } .sp-step[hidden] { display: none; }
.sp-l { display: grid; gap: 6px; font-weight: 600; } .sp-l input { width: 100%; font-size: 16px; padding: 12px; }
.sp-qty { display: flex; gap: 6px; } .sp-qty input { text-align: center; font-size: 22px; font-weight: 600; }
.sp-qty button { flex: 0 0 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: 22px; cursor: pointer; }
.sp-chip { display: flex; align-items: center; gap: 8px; } .sp-chip span { padding: 2px 10px; border-radius: 99px; background: var(--soft); font-weight: 600; white-space: nowrap; }
.sp-seg { display: flex; } .sp-seg label { flex: 1; text-align: center; padding: 10px; border-radius: 10px; cursor: pointer; } .sp-seg input { display: none; }
.sp-seg label.on { background: var(--card); font-weight: 600; box-shadow: 0 1px 2px rgba(20,30,50,.08); }
.sp-money { display: flex; align-items: center; border: 1px solid #c9d2dc; border-radius: 12px; padding-right: 12px; background: #fff; }
.sp-money:focus-within { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(15,138,95,.15); }
.sp-money input { border: 0 !important; box-shadow: none !important; font-size: 20px; font-variant-numeric: tabular-nums; }
.sp-calc { padding: 12px; border-radius: 12px; background: var(--soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-sum { padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.sp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sp-pick .btn { justify-content: center; min-height: 48px; cursor: pointer; }
.sp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .sp-thumbs div { position: relative; }
.sp-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.sp-thumbs button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #1b2430; color: #fff; cursor: pointer; }
.sp-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sp-foot .btn { min-height: 46px; padding: 0 18px; }
.sp-rows { display: grid; gap: 8px; } .sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.sp-row input { width: 90px; text-align: center; font-size: 18px; font-weight: 600; }
.money-in .row { flex-wrap: wrap; }
@media (max-width: 640px) { .sp-name b { font-size: 15px; } .sp-tiles.big b { font-size: 16px; white-space: nowrap; } .sp-tiles.big > div { padding: 10px; } }
@media (max-width: 560px) { .sp-tiles b { font-size: 17px; } .sp-img { flex-basis: 56px; width: 56px; height: 56px; } .sp-go { width: 100%; justify-content: center; } }
.login-shared.on { cursor: default; border-color: #f2c26b; background: #fffbf1; }

/* «Сотрудники»: крупные карточки, «+» для добавления, окно с доступами и данными для входа */
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sf-card { display: grid; gap: 12px; align-content: start; text-align: left; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card);
  font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sf-card:hover { border-color: #b9c4d0; box-shadow: 0 8px 24px rgba(20,30,50,.08); transform: translateY(-1px); }
.sf-card.off { opacity: .6; }
.sf-add { place-items: center; align-content: center; text-align: center; min-height: 190px; border: 2px dashed #cdd5de; background: transparent; gap: 6px; }
.sf-add small { color: var(--muted); }
.sf-plus { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; line-height: 1; background: var(--accent); color: #fff; }
.sf-top { display: flex; gap: 12px; align-items: center; } .sf-top b { font-size: 18px; display: block; } .sf-top small { color: var(--muted); }
.sf-ava { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; background: var(--soft); }
.sf-ava.admin { background: #1b2430; color: #fff; }
.sf-ava i { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--card); }
.sf-info { display: grid; gap: 6px; margin: 0; } .sf-info div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; }
.sf-info dt { color: var(--muted); font-size: 13px; } .sf-info dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.sf-modal { width: min(760px, calc(100vw - 24px)); }
.sf-form { display: grid; gap: 14px; }
.sf-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .sf-row3 label { display: grid; gap: 4px; font-weight: 600; }
.sf-pw { display: flex; gap: 6px; } .sf-pw input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; }
.sf-sec { display: grid; gap: 8px; margin-top: 4px; } .sf-sec > b { font-size: 14px; }
.sf-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-role { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font: inherit; cursor: pointer; }
.sf-role.on { background: #1b2430; border-color: #1b2430; color: #fff; }
.sf-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.sf-perm { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.sf-perm span { display: grid; } .sf-perm small { color: var(--muted); font-size: 12px; }
.sf-perm:has(input:checked) { border-color: var(--ok); background: #f1f8f4; }
.sf-shops { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sf-auth { display: flex; flex-wrap: wrap; gap: 8px; } .sf-auth .row { gap: 6px; }
.sf-cred { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--soft); margin: 10px 0 14px; }
.sf-cred div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; } .sf-cred span { color: var(--muted); }
.sf-cred b { font-family: ui-monospace, Menlo, monospace; font-size: 15px; overflow-wrap: anywhere; user-select: all; }
.sf-more { margin-top: 8px; } .sf-more summary { cursor: pointer; } .sf-more[open] summary { margin-bottom: 8px; }
@media (max-width: 640px) { .sf-row3 { grid-template-columns: 1fr; } }
.sf-perm input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; } .sf-sec[hidden] { display: none; }

/* «Мой экран» сотрудника: крупные плитки его разделов с цифрами */
.wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; max-width: 1100px; }
.wh-tile { display: grid; gap: 6px; align-content: start; padding: 18px; min-height: 150px; border-radius: 18px; border: 1px solid var(--line); background: var(--card);
  color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.wh-tile:hover { border-color: #b9c4d0; box-shadow: 0 8px 24px rgba(20,30,50,.08); transform: translateY(-1px); }
.wh-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); }
.wh-t { font-size: 17px; } .wh-n { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .wh-n small { font-size: 14px; font-weight: 500; color: var(--muted); }
.wh-s { color: var(--muted); }
.wh-tile.warn { border-color: #f2c26b; } .wh-tile.warn .wh-ic { background: var(--warn-bg); color: var(--warn); } .wh-tile.warn .wh-n { color: var(--warn); }
.wh-tile.ok .wh-ic { background: var(--ok-bg); color: var(--ok); }
.wh-tile.bad { border-color: var(--bad); } .wh-tile.bad .wh-n { color: var(--bad); }
@media (max-width: 560px) { .wh-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .wh-tile { min-height: 130px; padding: 14px; } .wh-n { font-size: 26px; } }

/* Телефон: меню закрывается тапом мимо него, крестиком или «назад»; ничего не перекрывает его; кнопки — под палец */
.side-back, .side-x { display: none; }
@media (max-width: 860px) {
  .side { z-index: 120; width: min(300px, 86vw); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding-top: 52px; }
  .side-x { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 12px;
            font-size: 30px; line-height: 1; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
  #menu:checked ~ .shell .side-back { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(8,14,26,.5); }
  #menu:checked ~ .shell .bulkbar, #menu:checked ~ .shell .idle-warn { display: none !important; }
  body:has(#menu:checked) { overflow: hidden; }
  .side .nav a { min-height: 44px; display: flex; align-items: center; }
  .top.mobile-only { position: sticky; top: 0; z-index: 30; min-height: 52px; }
  .top .menu-toggle { width: 44px; height: 44px; justify-content: center; align-items: center; }
  .top .bell { width: 44px; height: 44px; display: inline-grid; place-items: center; }
  /* панель действий над списком — во всю ширину снизу, не закрывает таблицу */
  .bulkbar { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; }
  .bulkbar .btn { flex: 1 1 100%; justify-content: center; min-height: 46px; }
  main { padding-bottom: 120px; }
  .btn { min-height: 42px; }
  .btn.small { min-height: 36px; }
  input, select, textarea { font-size: 16px; }          /* iPhone не увеличивает страницу при вводе */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
  .countcol .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .countcol .metric { min-width: 0; padding: 8px; } .countcol .metric b, .countcol .metric strong { font-size: 22px; }
  .countcol .metric span, .countcol .metric small { font-size: 11.5px; overflow-wrap: anywhere; }
  .tabs { scrollbar-width: none; } .tabs a { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (max-width: 860px) {
  body:has(#menu:checked) .qbar, body:has(#menu:checked) .toolbar { display: none !important; }    /* открытое меню ничем не перекрыто */
  .qbar, .toolbar { padding: 10px 12px; gap: 8px; border-radius: 14px; }
  .qbar .btn, .toolbar .btn { flex: 1 1 100%; justify-content: center; min-height: 46px; font-size: 15px; }
  .qbar .btn.light, .toolbar .btn.light { flex: 1 1 auto; }
}
@media (max-width: 560px) { main .btn.big { width: 100%; justify-content: center; min-height: 54px; font-size: 17px; } }   /* главная кнопка экрана — во всю ширину, под большой палец */
.my-batch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-from { font-style: normal; font-size: 12px; color: #2563eb; background: #eef4ff; border-radius: 6px; padding: 2px 6px; margin-left: 6px; }
.give-list { display: grid; gap: 8px; margin: 8px 0 12px; max-height: 45vh; overflow-y: auto; }
.give-who { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; }
.give-who:has(input:checked) { border-color: #10b981; background: #effaf5; font-weight: 600; }
.give-who input { width: 20px; height: 20px; }
.scan-help { max-width: 520px; }
.scan-box { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; background: #0b1220; border-radius: 18px; overflow: hidden; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.9); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.scan-link { display: flex; align-items: center; gap: 10px; margin: 0 4px 10px; padding: 0 12px; min-height: 44px; border-radius: 10px; background: #10b981; color: #fff !important; font-weight: 600; text-decoration: none; }
.scan-link svg { width: 20px; height: 20px; }
.wh-scan { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px; border-radius: 16px; background: #0f1a2a; color: #fff; text-decoration: none; max-width: 1100px; }
.wh-scan svg { width: 28px; height: 28px; } .wh-scan b { display: block; font-size: 17px; } .wh-scan small { color: rgba(255,255,255,.7); }
.top-exit { position: fixed; top: 12px; right: 16px; z-index: 60; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 14px; box-shadow: 0 6px 20px rgba(15,26,42,.12); }
.top-exit b { font-size: 14px; } .top-exit small { display: block; font-size: 11.5px; color: var(--muted); }
.top-exit .btn { min-height: 40px; }
@media (max-width: 860px) { .top-exit { display: none; } }
@media (min-width: 861px) { body:has(.top-exit) main { padding-top: 70px; } }
.login-qr-how { font-size: 16px; line-height: 1.45; margin: 4px 0 12px; }
.sh-period { margin: 8px 0 12px; } .sh-now { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.sh-sum td, .sh-sum th { white-space: nowrap; } .sh-user { margin: 10px 0; } .sh-user summary { cursor: pointer; }
.sh-open td { background: #fff5f5; } .sh-edit summary { list-style: none; } .sh-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0; }
.sh-status { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line); max-width: 1100px; }
.sh-status.on { background: #effaf5; border-color: #cdeedd; } .sh-status b { display: block; font-size: 16px; } .sh-status small { color: var(--muted); }
.qr-choice { display: grid; gap: 10px; margin: 14px 0; } .qr-choice .btn { width: 100%; justify-content: center; min-height: 56px; font-size: 17px; }

/* Узкая таблица на телефоне: каждая строка — карточка (первая ячейка сверху, остальные в ряд), заголовок скрыт.
   Вешается классом mcards на .tlist-таблицу, которой на телефоне не нужна прокрутка вбок */
@media (max-width: 640px) {
  table.mcards, table.mcards tbody, table.mcards tr, table.mcards td { display: block; white-space: normal; min-width: 0; }
  table.mcards tr:first-child { display: none; }
  table.mcards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid #eef1f5; }
  table.mcards td { padding: 0; border: 0; }
  table.mcards td:first-child { grid-column: 1 / -1; color: var(--muted); }
}

/* Этикетки товаров ФБО — экран упаковщика */
.fl-search { display: flex; gap: 8px; max-width: 860px; margin-bottom: 14px; }
.fl-search input { flex: 1; min-width: 0; font-size: 18px; padding: 12px 14px; border-radius: 12px; }
.fl-search .btn { min-height: 50px; padding: 0 18px; gap: 6px; }
.fl-hint { max-width: 860px; padding: 14px 16px; border-radius: 14px; background: var(--soft); font-size: 15px; }
.fl-list { display: grid; gap: 8px; max-width: 860px; }
.fl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.fl-row:hover { border-color: #9ca3af; } .fl-row .sp-img { flex-basis: 56px; width: 56px; height: 56px; }
.fl-go { font-size: 26px; color: var(--muted); padding: 0 4px; }
.fl-item { max-width: 860px; } .fl-img { flex-basis: 110px; width: 110px; height: 110px; } .fl-art { font-size: 15px !important; font-weight: 600; }
.fl-form { display: grid; gap: 10px; } .fl-form .sp-qty input { width: 100%; min-height: 54px; }
.fl-code { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); } .fl-code span { color: var(--muted); }
.fl-code b { font-variant-numeric: tabular-nums; word-break: break-all; }
.fl-codes { display: grid; gap: 6px; font-weight: 400; } .fl-codes label { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--soft); word-break: break-all; }
.fl-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .fl-quick .btn { justify-content: center; min-height: 44px; font-size: 16px; }
.fl-print { justify-content: center; min-height: 58px; font-size: 19px; gap: 8px; }
.fl-back { justify-self: start; color: var(--muted); }
.fl-done { display: grid; gap: 8px; max-width: 860px; padding: 16px; margin-bottom: 14px; border-radius: 16px; background: var(--ok-bg); border: 1px solid #d3eadc; }
.fl-done.warn { background: #fff4dc; border-color: #f2c26b; } .fl-done b { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.fl-done .btn { justify-content: center; } .fl-done form .btn { width: 100%; }
.fl-pdf { position: absolute; width: 0; height: 0; border: 0; }
@media (max-width: 560px) { .fl-img { flex-basis: 84px; width: 84px; height: 84px; } .fl-search .btn { padding: 0 14px; } }