/* 👑 Кабінет власника мережі — той самий стиль, що й каса (темна тема, великі заокруглені картки) */
:root {
  color-scheme: only dark;
  --bg: #0b0b0d; --bg2: #151518; --card: #1c1c1f; --card2: #26262a; --line: #ffffff14; --line2: #ffffff22;
  --text: #f5f5f7; --muted: #8e8e93; --accent: #f2c14e; --accent-ink: #1a1400;
  --green: #30d158; --red: #ff453a; --blue: #0a84ff; --orange: #ff9f0a; --purple: #bf5af2;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
html { touch-action: pan-x pan-y; } /* 🤏 без масштабування пальцями: сторінка кабінету не «гуляє» */
input, select { font: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; outline: none; }
input:focus, select:focus { border-color: var(--accent); }
[hidden] { display: none !important; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.center { min-height: 60vh; display: grid; place-items: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 13px; background: var(--card2); font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.red { background: #ff453a26; color: var(--red); }
.btn.ghost { background: transparent; border: 1px solid var(--line2); }
.btn.sm { min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* вхід */
.login { max-width: 400px; margin: 10vh auto; padding: 0 16px; }
.login .logo { width: 72px; height: 72px; border-radius: 18px; display: block; margin: 0 auto 14px; background: #fff; }
.login h1 { text-align: center; margin: 0 0 6px; font-size: 24px; }
.login p { text-align: center; }
.login form { display: grid; gap: 10px; margin-top: 18px; }
.login .gor { text-align: center; color: var(--muted, #888); font-size: 13px; margin: 16px 0 10px; }
.login .gbtn { position: relative; min-height: 44px; }
.login .gfake { width: 100%; pointer-events: none; }
.login .gbtn:hover .gfake { border-color: var(--accent); }
.login .gbtn:active .gfake { transform: scale(.97); }
.login .greal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .01; overflow: hidden; }
.login .greal > div, .login .greal iframe { transform: scaleY(1.15); }
.err { color: var(--red); min-height: 20px; text-align: center; font-size: 14px; }

/* каркас */
.top { padding-top: env(safe-area-inset-top); } /* 📱 відступ під годинник і батарею, як у касі */
.top { position: sticky; top: 0; z-index: 5; background: #0b0b0dcc; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.top .in { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.top img { width: 34px; height: 34px; border-radius: 9px; background: #fff; }
.top .who { margin-left: auto; text-align: right; font-size: 13px; line-height: 1.2; min-width: 0; }
.top .who b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs { max-width: 1200px; margin: 0 auto; padding: 0 16px 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs { background: linear-gradient(to right, var(--bg) 30%, #0000) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--bg) 30%, #0000) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, #0009, #0000) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, #0009, #0000) right center / 12px 100% no-repeat scroll; } /* тінь по краю = вкладки гортаються */
.tabs button { padding: 8px 14px; border-radius: 11px; background: var(--card); color: var(--muted); font-weight: 600; white-space: nowrap; }
.tabs.fr { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tabs.fl { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.tabs.fl.fr { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.vmore > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; list-style: none; }
.vmore > summary::-webkit-details-marker { display: none; }
.vmore[open] > summary { color: var(--text, inherit); }
.vmore > div, .vmore > .kv { margin-top: 6px; font-size: 13px; }
.tabs button.on { background: var(--accent); color: var(--accent-ink); }
main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 60px; }
h2 { font-size: 20px; margin: 22px 0 10px; }
h2:first-child { margin-top: 4px; }
h3.acc-grp { font-size: 15px; margin: 16px 0 8px; } /* 👤 Акаунти: групи «Платформа / Власники / Бухгалтери» */

.card { background: var(--card); border-radius: 18px; padding: 16px; border: 1px solid var(--line); min-width: 0; }
.card h3 { margin: 0 0 10px; font-size: 16px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.kpi span { display: block; color: var(--muted); font-size: 13px; }
.kpi b { display: block; font-size: 24px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi .up { color: var(--green); } .kpi .down { color: var(--red); }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: center; }
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* заклад */
.venue { display: flex; flex-direction: column; gap: 10px; }
.venue .h { display: flex; gap: 10px; align-items: flex-start; }
.venue .h b { font-size: 17px; overflow-wrap: anywhere; }
.venue .h .st { margin-left: auto; font-size: 12px; padding: 3px 8px; border-radius: 8px; background: var(--card2); white-space: nowrap; }
.st.active { color: var(--green); } .st.trial { color: var(--orange); } .st.off { color: var(--red); }
.venue .rev { font-size: 28px; font-weight: 700; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--card2); color: var(--muted); }
.chip.bad { background: #ff453a22; color: var(--red); } .chip.ok { background: #30d15822; color: var(--green); }

/* тривоги */
.alert { display: block; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #ff9f0a14; border: 1px solid #ff9f0a33; margin-bottom: 8px; overflow-wrap: anywhere; }
.alert.red { background: #ff453a14; border-color: #ff453a33; }

/* таблиця */
.tbl { width: 100%; overflow-x: auto; } /* тінь по краю = є ще вбік (375) */
.card.tbl { background: linear-gradient(to right, var(--card) 30%, #0000) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--card) 30%, #0000) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, #0009, #0000) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, #0009, #0000) right center / 12px 100% no-repeat scroll, var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
tr.sum td { font-weight: 700; border-bottom: 0; }

/* графік */
.chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; }
.chart .col { flex: 1; display: flex; flex-direction: column-reverse; min-width: 0; height: 100%; position: relative; }
.chart .seg { width: 100%; border-radius: 4px 4px 0 0; }
.chart .lbl { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; font-size: 13px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.seg2 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.seg2 button { padding: 7px 12px; border-radius: 10px; background: var(--card); color: var(--muted); font-weight: 600; font-size: 14px; }
.seg2 button.on { background: var(--card2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

/* модалка */
.modal-bg { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal { background: var(--bg2); border-radius: 20px; padding: 18px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; border: 1px solid var(--line2); }
.modal h3 { margin: 0 0 12px; }
.modal form { display: grid; gap: 10px; }
.modal label { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.codes { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 15px; }
.codes b { font-variant-numeric: tabular-nums; letter-spacing: 1px; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--card2); padding: 12px 18px; border-radius: 14px; z-index: 30; max-width: calc(100vw - 32px); box-shadow: 0 8px 30px #0008; }
@media (max-width: 600px) { .kpi b { font-size: 20px; } .venue .rev { font-size: 24px; } }
.lnk{display:block;text-align:center;margin-top:10px;font-size:14px;color:var(--muted,#999)}
.tabs .bdg { font-style: normal; background: #ff453a; color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 6px; margin-left: 4px; }
.ib-t { white-space: pre-wrap; word-break: break-word; margin: 8px 0; line-height: 1.4; }
.card.done { opacity: .55; }
.chips button { padding: 7px 12px; border-radius: 99px; background: var(--card2); color: var(--muted); font-size: 13px; } .chips button.on { background: var(--accent); color: #111; font-weight: 700; } h2 + .chips { margin-bottom: 12px; }

/* 🔘 кнопки шапки — як у касі */
.icogrp{display:flex;gap:4px;flex-shrink:0}
.icobtn{width:44px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:20px;border:0;border-radius:13px;background:#ffffff12;cursor:pointer;color:inherit}
.icobtn:hover{background:#ffffff22}
/* 📅 виручка по днях — як у касі */
.cols{display:flex;align-items:flex-end;gap:3px;height:230px;padding-top:6px}
.cols .c{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;border-radius:6px;cursor:pointer}
.cols .c .stk{display:flex;flex-direction:column-reverse;width:100%;max-width:38px;border-radius:6px 6px 2px 2px;overflow:hidden;transition:height .3s}
.cols .c .stk i{display:block;min-height:2px;background:linear-gradient(180deg,var(--accent),#f2c14e88)}
.cols .c.we .stk i:not([style*="background"]){background:linear-gradient(180deg,#ff9f0a,#ff9f0a88)}
.cols .c:hover .stk{filter:brightness(1.4)}
.cols .c small{height:28px;margin-top:4px;font-size:11px;color:var(--text);white-space:nowrap;display:flex;flex-direction:column;align-items:center;line-height:1.15;font-weight:600}
.cols .c small span{font-size:10px;color:var(--muted);font-weight:400}
.cols .c.we small,.cols .c.we small span{color:var(--accent)}
.cols .c .cv{font-size:10px;font-weight:700;color:var(--muted);margin-bottom:3px;white-space:nowrap}
.cols .c.top .cv{color:var(--accent)}
.cols.many .c .cv{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;margin-bottom:4px}
.cols.many .c small{font-size:10px}.cols.many .c small.nl{visibility:hidden}
.cread{font-size:13px;min-height:18px;margin-bottom:4px}
@media (max-width:700px){.cols.many .c .cv{display:none}.cols.many .c small span{display:none}.cols{height:200px;gap:2px}}

/* 🎨 Конструктор сайту (js/owner-site.js) — повноекранний редактор + живий перегляд */
#sb { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; grid-template-rows: auto 1fr; }
.sb-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--bg2); flex-wrap: wrap; }
.sb-top b { font-size: 16px; } .sb-sp { flex: 1; }
#sbPub.dirty { box-shadow: 0 0 0 3px #f2c14e55; }
.sb-body { display: grid; grid-template-columns: 430px minmax(0, 1fr); min-height: 0; min-width: 0; }
.sb-side { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; border-right: 1px solid var(--line); }
.sb-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; border-bottom: 1px solid var(--line); } .sb-tabs::-webkit-scrollbar { display: none; }
.sb-tabs button { flex: none; padding: 8px 12px; border-radius: 99px; background: var(--card2); color: var(--muted); font-size: 13px; white-space: nowrap; } .sb-tabs button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.sb-p { overflow: auto; padding: 12px; display: grid; gap: 12px; align-content: start; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.sb-card { background: var(--card); border-radius: 16px; padding: 14px; display: grid; gap: 10px; min-width: 0; } .sb-card h4 { margin: 0; font-size: 15px; }
.sb-note { color: var(--muted); font-size: 13px; line-height: 1.4; }
.sb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-chips { display: flex; gap: 6px; flex-wrap: wrap; } .sb-chips button { padding: 8px 12px; border-radius: 10px; background: var(--card2); color: var(--text); font-size: 13px; border: 1px solid transparent; } .sb-chips button.on { border-color: var(--accent); background: #f2c14e1f; color: var(--accent); font-weight: 600; }
.sb-f { display: grid; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; } .sb-f b { color: var(--text); font-weight: 600; } .sb-f textarea { font: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; width: 100%; }
.sb-f input[type=range] { padding: 0; background: none; border: 0; accent-color: var(--accent); }
.sb-tr { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; } @media (max-width: 520px) { .sb-tr { grid-template-columns: 1fr; } }
.sb-tg { display: flex; gap: 10px; align-items: center; font-size: 14px; } .sb-tg input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.sb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sb-col { display: flex; gap: 8px; align-items: center; background: var(--card2); border-radius: 12px; padding: 6px 10px 6px 6px; font-size: 13px; } .sb-col input { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; flex: none; }
.sb-pal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sb-pal button { display: flex; height: 38px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); } .sb-pal i { flex: 1; }
.sb-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sb-tpls button { min-height: 64px; border-radius: 14px; border: 2px solid; display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left; font-size: 14px; } .sb-tpls i { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.sb-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sb-fonts button { padding: 10px; border-radius: 10px; background: var(--card2); font-size: 16px; border: 1px solid transparent; text-align: left; } .sb-fonts button.on { border-color: var(--accent); color: var(--accent); }
.sb-img { height: 120px; border-radius: 12px; background: var(--card2) center/cover; display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; padding: 8px; border: 1px dashed var(--line2); }
.sb-lib { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .sb-lib button { aspect-ratio: 1; border-radius: 10px; background: var(--card2) center/cover; border: 1px solid var(--line); }
.sb-list { display: grid; gap: 6px; }
.sb-li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card2); border-radius: 12px; padding: 8px 10px; font-size: 14px; min-width: 0; } .sb-li > span:first-child { min-width: 0; overflow-wrap: anywhere; } .sb-li small { color: var(--muted); }
.sb-li > span:last-child { display: flex; gap: 4px; flex: none; } .sb-li button { width: 32px; height: 32px; border-radius: 8px; background: var(--card); } .sb-li .btn { width: auto; }
.sb-li.off { opacity: .5; }
.sb-it { display: grid; grid-template-columns: 56px 1fr 34px; gap: 6px; } .sb-it input { padding: 9px 10px; } .sb-it button { border-radius: 8px; background: var(--card2); }
.sb-hrs { display: grid; gap: 6px; } .sb-hrs > div { display: grid; grid-template-columns: 30px 1fr 1fr auto; gap: 6px; align-items: center; } .sb-hrs input[type=time] { padding: 8px; }
.sb-subh { display: flex; align-items: center; gap: 10px; }
.sb-qr { background: #fff; padding: 14px; border-radius: 14px; justify-self: start; } .sb-qr img, .sb-qr canvas { display: block; }
.sb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.sb-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; } .sb-kpi div { background: var(--card2); border-radius: 12px; padding: 10px; display: grid; } .sb-kpi b { font-size: 20px; color: var(--accent); } .sb-kpi span { font-size: 12px; color: var(--muted); }
.sb-bars { display: flex; align-items: flex-end; gap: 2px; height: 90px; } .sb-bars i { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-width: 2px; }
.sb-view { display: grid; grid-template-rows: auto 1fr; min-height: 0; background: var(--bg2); }
.sb-dev { display: flex; gap: 6px; justify-content: center; padding: 8px; } .sb-dev button { padding: 6px 14px; border-radius: 99px; background: var(--card2); } .sb-dev button.on { background: var(--accent); color: var(--accent-ink); }
.sb-fw { width: 100%; max-width: 390px; margin: 0 auto 12px; min-height: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 20px 60px #0008; transition: max-width .25s; }
.sb-fw iframe { width: 100%; height: 100%; border: 0; display: block; background: #121212; }
.sb-pvb { display: none; }
@media (max-width: 900px) {
  .sb-body { grid-template-columns: minmax(0, 1fr); } .sb-top { flex-wrap: nowrap; } .sb-top .btn { padding-inline: 10px; } .sb-top .sb-lbl { display: none; } .sb-view { display: none; } .sb-side { border-right: 0; } .sb-pvb { display: inline-flex; }
  #sb.pv .sb-side { display: none; } #sb.pv .sb-view { display: grid; } #sb.pv .sb-dev { display: none; } #sb.pv .sb-view { grid-template-rows: minmax(0, 1fr); } #sb.pv .sb-fw { max-width: none !important; margin: 0; border-radius: 0; border: 0; }
  .sb-top b { display: none; }
}
/* шапка розділу налаштувань: головні дії в один ряд, пошук розтягується */
.vhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .vhead input { flex: 1 1 200px; min-height: 36px; padding: 6px 12px; } .vhead .btn { white-space: nowrap; }
/* 🧾 конструктор чека: перегляд — як термострічка (чорне на білому, Arial) */
#sb.rc .sb-side { grid-template-rows: 1fr; }
.rc-v { overflow: auto; padding: 14px; display: grid; gap: 12px; justify-items: center; align-content: start; min-height: 0; height: 100%; }
.rp { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; line-height: 1.25; padding: 14px 10px 6px; border-radius: 4px; box-shadow: 0 18px 50px #000a; display: flex; flex-direction: column; gap: 2px; }
.rp-c { text-align: center; } .rp-c img { display: block; margin: 0 auto 6px; filter: grayscale(1) contrast(1.4); }
.rp-s { font-size: .78em; } .rp-b { font-weight: 700; }
.rp-inv { background: #000; color: #fff; text-align: center; font-weight: 700; font-size: 1.2em; padding: 3px 0; margin: 2px 0; } .rp-big { font-size: 1.7em; padding: 4px 0; }
.rp-dbl { border-top: 1px solid #000; border-bottom: 1px solid #000; height: 3px; margin: 4px 0; } .rp-hr { border-top: 1px dashed #000; margin: 4px 0; }
.rp-lr { display: flex; justify-content: space-between; gap: 8px; } .rp-i { font-weight: 700; font-size: 1.08em; } .rp-sub { font-size: .78em; padding-left: 8px; }
.rp-k { font-weight: 700; font-size: 1.3em; }
.rp-tot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #000; color: #fff; font-weight: 700; font-size: 1.45em; padding: 4px 6px; margin: 4px 0; }
.rp-qr { width: 100px; height: 100px; margin: 4px auto; background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 14px 14px; outline: 6px solid #fff; }
/* 🔤 шрифти по блоках: --fh заголовки й сума, --fi страви, решта — font-family самого .rp */
.rp-inv, .rp-bg, .rp-big, .rp-tot, .rp-tot2, .rp-ttl { font-family: var(--fh, inherit); } .rp-i, .rp-r4, .rp-r4n { font-family: var(--fi, inherit); }
.rc-fn button { font-size: 14px; }
.rp-cut { text-align: center; color: #999; font-size: 11px; margin-top: 8px; }
/* 🎨 рядки тем чека (розміри — як у програмі друку: 1em = 9 pt) */
.rp-ttl { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 1.444em; text-align: center; padding: 0 2px; } .rp-ttl i { flex: 0 0 14px; border-top: 1.5px solid #000; } .rp-ttl span { min-width: 0; overflow-wrap: anywhere; }
.rp-bg { font-size: 1.78em; line-height: 1.15; overflow-wrap: anywhere; }
.rp-orn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 18px; } .rp-orn i { flex: 0 1 32%; border-top: 1px solid #000; } .rp-orn svg { flex: none; fill: #000; }
.rp-addr { display: flex; align-items: flex-start; justify-content: center; gap: 3px; font-size: .944em; text-align: center; } .rp-addr svg { flex: none; fill: #000; margin-top: 1px; } .rp-addr span { min-width: 0; overflow-wrap: anywhere; }
.rp-two { display: grid; grid-template-columns: 56% 44%; } .rp-two span:last-child { font-size: .889em; text-align: center; overflow-wrap: anywhere; }
.rp-r4 { display: grid; grid-template-columns: minmax(0, 1fr) 40px 50px 62px; font-size: .889em; } .rp-r4 span { overflow-wrap: anywhere; } .rp-r4 span:nth-child(n+3) { text-align: right; }
.rp-r4n { display: flex; justify-content: space-between; gap: 8px; font-size: .889em; } .rp-r4h { font-weight: 700; margin-bottom: 2px; }
.rp-tot2 { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 1.444em; margin: 3px 0; }
.rp-soc { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: .944em; } .rp-soc svg { flex: none; }
/* 🎨 вибір теми: справжній перегляд, зменшений */
.rc-ths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-th { display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 12px; background: var(--card2); border: 2px solid transparent; color: var(--text); font-size: 13px; }
.rc-th.on { border-color: var(--accent); color: var(--accent); }
.rc-thp { width: 100%; height: 150px; overflow: hidden; display: flex; justify-content: center; pointer-events: none; }
.rc-thp .rp { zoom: .42; box-shadow: none; flex: none; }
/* ⚙️ шапка налаштувань закладу: заклад в один рядок, вкладки — рівні плитки на телефоні */
.vtop { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .vtop select { flex: 1; min-width: 0; max-width: 360px; font-weight: 700; min-height: 42px; padding: 8px 12px; } .vtop .btn { min-width: 42px; min-height: 42px; }
.vtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.vtabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: var(--card); color: var(--muted); font-size: 14px; font-weight: 600; border: 1px solid transparent; }
.vtabs button i { font-style: normal; } .vtabs button.on { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 600px) {
  .vtabs { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); gap: 6px; }
  .vtabs button { flex-direction: column; gap: 3px; padding: 9px 2px 8px; border-radius: 14px; font-size: 11px; line-height: 1.15; text-align: center; min-height: 64px; justify-content: center; }
  .vtabs button i { font-size: 21px; } .vtabs button span { overflow-wrap: anywhere; }
}
/* 🚀 Продажі (CRM) */
.crm-ch { margin-top: 12px; }
.crm-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.crm-bars i { flex: 1; min-width: 2px; background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px 3px 0 0; position: relative; }
.crm-bars i b { position: absolute; top: -9px; left: 50%; translate: -50% 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.crm-st { margin: 8px 0; } .crm-st button { font-size: 12px; padding: 5px 9px; }
.crm-ph { user-select: all; }
.st.crm-new { background: #f2c14e33; color: #f2c14e; } .st.crm-won { background: #30d15833; color: #30d158; } .st.crm-lost { background: #ff453a22; color: #ff6b6b; }
/* 🎨 конструктор сайту ATOM */
.as-ths { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.as-th { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid; text-align: left; font-size: 13px; }
.as-sw { display: inline-flex; gap: 3px; vertical-align: middle; } .as-sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px #0004; }
.as-pick { display: grid; justify-items: center; gap: 2px; font-size: 12px; color: var(--muted); } .as-pick input { width: 46px; height: 46px; padding: 0; border: 0; background: none; border-radius: 12px; }
.as-hue { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important; height: 10px; border-radius: 99px; -webkit-appearance: none; appearance: none; }
.as-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .as-cols .sb-col { line-height: 1.25; } .as-hex { color: var(--muted); font-family: ui-monospace, monospace; }
.as-rst { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; background: var(--card); flex: none; }
.as-crs { display: flex; flex-wrap: wrap; gap: 6px; } .as-cr { padding: 6px 10px; border-radius: 99px; font-size: 13px; background: var(--card2); font-variant-numeric: tabular-nums; } .as-cr.ok { color: #4ade80; } .as-cr.bad { color: #ffb020; }
#sb.as .sb-fw iframe { background: #0f0b1a; }
.sb-tpls button { min-height: 76px; transition: transform .15s; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); } .sb-tpls button:hover { transform: translateY(-2px); }
.sb-th { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sb-th > button { width: 100%; } .sb-th .sb-row { gap: 4px; } .sb-th .sb-row .btn { flex: 1; } .sb-th .sb-note { margin: 0; font-size: 11px; overflow-wrap: anywhere; }
.sb-tpls span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sb-tpls b { font-size: 15px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; } .sb-tpls small { font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 🎨 Друк і дизайн (js/owner-design.js): макет у мм, усі розміри — в em сторінки (1em = 1/100 меншої сторони) */
#sb.dz .dz-v { grid-template-rows: auto minmax(0, 1fr); }
.dz-stage { display: grid; place-items: center; overflow: hidden; min-height: 0; padding: 16px; }
.dz-fit { transform-origin: 0 0; } .dz-fit > .dz-pg { box-shadow: 0 10px 40px #0009; }
.dz-pn { align-self: center; font-size: 13px; padding: 0 6px; }
.dz-prods { display: grid; gap: 8px; } .dz-prods button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid transparent; } .dz-prods button.on { border-color: var(--accent); } .dz-prods small { color: var(--muted); font-size: 12px; }
.dz-gh { margin: 6px 2px 0; font-size: 14px; } .dz-gh small { color: var(--muted); font-weight: 400; }
.dz-sty { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dz-sty button { display: grid; gap: 4px; justify-items: center; padding: 6px; border-radius: 12px; background: var(--card2); border: 2px solid transparent; font-size: 12px; min-width: 0; } .dz-sty button.on { border-color: var(--accent); } .dz-sty button.half { border-color: var(--accent); border-style: dashed; }
.dz-sty .dz-pg { zoom: .42; border-radius: 6px; } .dz-sty i { font-style: normal; color: var(--muted); padding: 0 4px; }
.dz-pg { position: relative; overflow: hidden; flex: none; box-sizing: border-box; color: var(--fg); font-family: var(--fb); line-height: 1.25; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dz-pg *, .dz-pg *::before { box-sizing: border-box; }
.dz-in { position: absolute; display: flex; padding: 7em; }

.dz-fr { position: absolute; inset: 3.5em; pointer-events: none; }
.fr-line .dz-fr { border: .3em solid var(--ac); } .fr-double .dz-fr { border: 1em double var(--ac); } .fr-stamp .dz-fr { border: .35em dashed var(--ac); }
.fr-round .dz-fr { border: .4em solid var(--ac); border-radius: 6em; } .fr-thick .dz-fr { inset: 1.8em; border: 1.6em solid var(--fg); }
.fr-glow .dz-fr { border: .35em solid var(--ac); border-radius: 3em; box-shadow: 0 0 2.5em var(--ac), inset 0 0 2.5em var(--ac); }
.fr-band .dz-fr { inset: 0; background: var(--band) left top / auto 5em repeat-x, var(--band) left bottom / auto 5em repeat-x; }
.fr-corners .dz-fr { background: linear-gradient(var(--ac) 0 0) 0 0 / 10em .4em, linear-gradient(var(--ac) 0 0) 0 0 / .4em 10em, linear-gradient(var(--ac) 0 0) 100% 0 / 10em .4em, linear-gradient(var(--ac) 0 0) 100% 0 / .4em 10em, linear-gradient(var(--ac) 0 0) 0 100% / 10em .4em, linear-gradient(var(--ac) 0 0) 0 100% / .4em 10em, linear-gradient(var(--ac) 0 0) 100% 100% / 10em .4em, linear-gradient(var(--ac) 0 0) 100% 100% / .4em 10em; background-repeat: no-repeat; }
.dz-col { display: flex; flex-direction: column; gap: 2.4em; min-width: 0; } .dz-c { align-items: center; justify-content: center; text-align: center; } .dz-r { align-items: flex-end; text-align: right; }
.dz-row { display: flex; align-items: center; gap: 5em; width: 100%; } .dz-sp { flex: 1; }
.dz-logo { object-fit: contain; flex: none; } .dz-mono { container-type: size; display: grid; place-items: center; border-radius: 50%; background: var(--ac); color: var(--bg); font-family: var(--fh); font-weight: 700; } .dz-mono span { font-size: 36cqw; line-height: 1; }
.l14 { width: 14em; height: 14em; } .l16 { width: 16em; height: 16em; } .l18 { width: 18em; height: 18em; } .l20 { width: 20em; height: 20em; } .l22 { width: 22em; height: 22em; } .l34 { width: 34em; height: 34em; } .l60 { width: 60em; height: 60em; } .l70 { width: 70em; height: 70em; }
.dz-name { font-family: var(--fh); text-transform: var(--tt); font-style: var(--fs); font-weight: 700; line-height: 1.05; letter-spacing: .02em; text-wrap: balance; overflow-wrap: anywhere; }
.n7 { font-size: 7em; } .n8 { font-size: 8em; } .n9 { font-size: 9em; } .n10 { font-size: 10em; } .n16 { font-size: 16em; } .n22 { font-size: 22em; }
.dz-h { font-family: var(--fh); color: var(--ac); text-transform: var(--tt); font-style: var(--fs); line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.h5 { font-size: 5em; } .h7 { font-size: 7em; } .h8 { font-size: 8em; } .h9 { font-size: 9em; } .h13 { font-size: 13em; }
.dz-big { font-family: var(--fh); font-weight: 700; font-size: 12em; line-height: 1; text-transform: var(--tt); overflow-wrap: anywhere; } .b9 { font-size: 9em; } .b16 { font-size: 16em; }
.dz-m { color: var(--mu); font-size: 3.6em; } .m3 { font-size: 3em; } .m4 { font-size: 4.4em; } .m5 { font-size: 5em; }
.dz-txt { white-space: pre-line; } .t5 { font-size: 5em; } .t9 { font-size: 9em; }
.dz-rule { width: 16em; height: .5em; background: var(--ac); flex: none; }
.dz-ln { display: flex; gap: .5em; align-items: baseline; font-size: 3.6em; overflow-wrap: anywhere; } .dz-ln i { font-style: normal; color: var(--ac); width: 1.1em; text-align: center; flex: none; }
.dz-cts { display: grid; gap: .8em; min-width: 0; } .dz-cts.big .dz-ln { font-size: 4.4em; }
.dz-qr { display: block; flex: none; } .q14 { width: 14em; height: 14em; } .q26 { width: 26em; height: 26em; } .q30 { width: 30em; height: 30em; } .q32 { width: 32em; height: 32em; } .q60 { width: 60em; height: 60em; }
.dz-chip { border: .1em solid var(--ac); border-radius: 9em; padding: .3em 1em; font-size: 4em; }
.dz-cf { gap: 2em; } .dz-cb { display: flex; align-items: center; justify-content: space-between; gap: 5em; width: 100%; } .dz-cb .dz-cts { flex: 1; } .dz-cb .dz-ln { font-size: 4.2em; }
.dz-tent { gap: 3.6em; } .dz-fly .dz-row { justify-content: center; text-align: left; } .dz-fly .dz-txt { max-width: 80em; }
.dz-hits { display: grid; gap: .5em; width: 85%; font-size: 4.5em; } .dz-hits div { display: flex; justify-content: space-between; gap: 1em; border-bottom: .06em dotted var(--mu); padding-bottom: .2em; } .dz-hits b { color: var(--ac); }
.dz-fac { display: flex; align-items: center; gap: 8em; width: 100%; } .dz-fac > .dz-col:not(.dz-r) { flex: 1; }
.dz-cert { display: flex; align-items: center; gap: 6em; width: 100%; } .dz-cert > .dz-col:first-child { align-self: stretch; width: 46em; flex: none; } .dz-cert > .dz-c { flex: 1; }
.dz-sum { font-family: var(--fh); font-size: 16em; font-weight: 700; color: var(--ac); line-height: 1; } .dz-num { font-size: 3.6em; letter-spacing: .1em; }
.dz-pg:has(.dz-stk) { border-radius: 50%; } .dz-stk { gap: 2em; } .dz-bdg { gap: 1.6em; } .dz-sign { gap: 4em; }
.dz-menu { display: flex; flex-direction: column; gap: 4em; height: 100%; min-height: 0; }
.dz-mh { display: flex; align-items: center; gap: 5em; border-bottom: .3em solid var(--ac); padding-bottom: 3em; } .dz-mh > .dz-col { flex: 1; gap: 1em; }
.dz-mcols { flex: 1; min-height: 0; column-gap: 8em; column-fill: auto; overflow: hidden; font-size: 1.9em; }
.dz-mc { font-family: var(--fh); color: var(--ac); font-size: 1.5em; text-transform: var(--tt); font-style: var(--fs); margin: 1em 0 .4em; break-after: avoid; } .dz-mc:first-child { margin-top: 0; }
.dz-mi { break-inside: avoid; margin-bottom: .6em; } .dz-mr { display: flex; align-items: baseline; gap: .4em; } .dz-mr b:first-child { font-weight: 600; overflow-wrap: anywhere; }
.dz-dots { flex: 1; min-width: 1em; border-bottom: .1em dotted var(--mu); transform: translateY(-.25em); } .dz-pr { color: var(--ac); white-space: nowrap; } .dz-md { color: var(--mu); font-size: .82em; line-height: 1.3; }
.dz-mf { color: var(--mu); font-size: 1.6em; text-align: center; }
.dz-pg:has(.dz-sheet) { background: #fff !important; } .dz-pg:has(.dz-sheet) > .dz-in { padding: 0; } .dz-pg:has(.dz-sheet) > .dz-in > .dz-fr { display: none; }
.dz-sheet { position: absolute; inset: 0; } .dz-sc { position: absolute; } .dz-marks i { position: absolute; background: #000; }
.dz-menu { background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 2.5em; border-radius: 2em; }
.dz-bx { display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; position: relative; z-index: 1; } .dz-bx > * { flex: 1; min-width: 0; }
.h11 { font-size: 11em; } .l40 { width: 40em; height: 40em; } .n18 { font-size: 18em; }
#sb.dz.pv .sb-dev { display: flex; }

/* 📐 автоадаптація кнопок (діагностика: tools/selftest.mjs --design) */
@media (max-width: 600px) {
  .chips button, .seg2 button, .btn.sm { min-height: 40px; }
  .chips button, .seg2 button { flex: 1 1 auto; }
  .crm-st button { min-height: 36px; }
}
.btnrow > .btn { flex: 1 1 auto; }

/* 👤 аватарка власника в шапці: тап — галерея */
.top .who-av { flex: none; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.top .who-av + .who { margin-left: 8px; }
.top .who-av .vvav { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #1a1408; background: linear-gradient(135deg, #f2c14e, #d99a2b); }

/* 🎨 вигляд кабінету — вікно поверх */
.olook { position: fixed; inset: 0; z-index: 90; background: #000a; display: grid; place-items: start center; overflow: auto; padding: 16px; }
.olook-in { width: min(900px, 100%); background: var(--bg2, var(--bg)); color: var(--text); border-radius: 20px; padding: 16px; margin-block: 16px; min-width: 0; }
.olook-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 18px; }

.ib-c{margin:6px 0;padding:7px 10px;border-radius:12px;background:#ffffff0a;border:1px solid var(--line,#ffffff1f);overflow-wrap:anywhere}.ib-c.me{margin-left:14%;background:#f2c14e14}.ib-c small{display:block;font-size:11px}
.ib-say{display:flex;gap:6px;margin:8px 0}.ib-say input{flex:1;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line,#ffffff2a);background:transparent;color:inherit;font:inherit}
.sb-ph { display: grid; gap: 10px; } .sb-ph .sb-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-ph .sb-chips button { text-align: center; min-height: 40px; } .sb-lbl { font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .sb-lib { grid-template-columns: repeat(4, 1fr); } }

/* 📊 Деталі закладу (owner-an.js) */
.an-grid { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.an-grid > .card { overflow: hidden; }
.an-sel { width: auto; max-width: 100%; margin-left: 8px; font-size: 14px; padding: 6px 10px; }
.an-d { font-weight: 600; } .an-d.up { color: #4cd964; } .an-d.dn { color: #ff6b6b; }
.an-bar { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.an-bar .l { overflow-wrap: anywhere; } .an-bar .b { height: 8px; border-radius: 6px; background: var(--card2); overflow: hidden; }
.an-bar .b i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #f2c14e88); border-radius: 6px; }
.an-bar b { white-space: nowrap; font-size: 13px; }
.an-heat { display: grid; gap: 3px; align-items: center; font-size: 10px; }
.an-heat small { color: var(--muted); text-align: center; }
.an-heat i { display: block; aspect-ratio: 1; min-height: 10px; border-radius: 3px; background: var(--accent); }
@media (max-width: 480px) { .an-grid { grid-template-columns: 1fr; } .an-bar { grid-template-columns: 1fr auto; } .an-bar .b { grid-column: 1 / -1; order: 3; } }

/* ✨ Шапка кабінету — стильна: скло, золота лінія, градієнтний заголовок */
.top { background: linear-gradient(180deg, rgba(20,17,10,.92), rgba(11,11,13,.82)) !important; border-bottom: 0 !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #f2c14e 30%, #d99a2b 70%, transparent); opacity: .7; }
.top .in { padding: 12px 18px; gap: 14px; }
.top .in > img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(242,193,78,.45), 0 6px 18px -6px rgba(242,193,78,.55); }
.top .in > b { font-size: 18px; font-weight: 800; letter-spacing: .2px; background: linear-gradient(90deg, #fff 0%, #f6dc95 60%, #f2c14e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.top .who-av .vvav { width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(11,11,13,.9), 0 0 0 3px rgba(242,193,78,.6); }
.top .who span { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #d9b45a !important; }
.top .icogrp { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.top .icogrp .icobtn { border: 0 !important; background: transparent !important; border-radius: 999px !important; width: 34px; height: 34px; transition: background .15s, transform .15s; }
.top .icogrp .icobtn:hover { background: rgba(242,193,78,.14) !important; transform: translateY(-1px); }
@media (max-width: 560px) { .top .in > b { font-size: 15px; } .top .who { display: none; } .top .in > img { width: 34px; height: 34px; } }

/* ⚛️ Вікно входу ATOM */
body:has(.login) { background: radial-gradient(900px 600px at 50% -10%, #2a1a52 0, transparent 60%), radial-gradient(700px 500px at 100% 110%, #3b2a0c55 0, transparent 60%), #0b0814; min-height: 100vh; }
.login { margin: 8vh auto; padding: 32px 22px 26px; max-width: 400px; width: calc(100% - 32px); box-sizing: border-box; background: linear-gradient(180deg, #1b1330e6, #120c22e6); border: 1px solid #2e2350; border-radius: 24px; box-shadow: 0 30px 80px #0008, inset 0 1px 0 #ffffff12; position: relative; }
.login::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 2px; background: linear-gradient(90deg, transparent, #f2c14e, transparent); }
.login .logo { width: 88px; height: 88px; border-radius: 24px; background: none; margin: 0 auto 10px; box-shadow: 0 0 40px #f2c14e40, 0 0 0 1px #f2c14e33; animation: atomGlow 4s ease-in-out infinite; }
@keyframes atomGlow { 50% { box-shadow: 0 0 60px #b794ff55, 0 0 0 1px #b794ff44; } }
@media (prefers-reduced-motion: reduce) { .login .logo { animation: none; } }
.login .brandw { text-align: center; font: 800 13px/1 system-ui, sans-serif; letter-spacing: 6px; color: #f2c14e; margin-bottom: 14px; }
.login h1 { background: linear-gradient(90deg, #ffdf8a, #f3eefc 60%, #b794ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login input { background: #0f0b1acc; border-color: #2e2350; }
.login input:focus { border-color: #f2c14e; outline: none; box-shadow: 0 0 0 3px #f2c14e22; }
.login .btn.primary { background: linear-gradient(135deg, #ffdf8a, #f2c14e); color: #1a1206; border: 0; font-weight: 800; }
.top .in > img { background: none !important; }
/* 🔔 повзунок «Сповіщення CRM» (Продажі) */
.crm-push { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin: 10px 0; }
.osw { flex: none; width: 46px; height: 26px; border-radius: 13px; background: var(--line2); position: relative; transition: background .2s; }
.osw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.osw.on { background: var(--accent); }
.osw.on::after { transform: translateX(20px); }
/* 🏪 картка закладу: дії однаковими клітинками, посилання — без рваних переносів */
.vacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.vacts > .btn { padding-inline: 4px; font-size: 13px; white-space: nowrap; }
.venue .kv small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue .kv > span { min-width: 0; }
/* плитки: рівні висоти, підпис внизу, без «сиріт» */
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { margin-top: 0; }
.kpi small { margin-top: auto; padding-top: 2px; }
@media (max-width: 600px) { .kpis { grid-template-columns: 1fr 1fr; } .kpis > .kpi:first-child:nth-last-child(2n+1) { grid-column: 1 / -1; } }
.digs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.dig { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.dig.wide { grid-column: 1 / -1; }
.dig .vacts { gap: 8px; margin-top: auto; }
.vbtns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: auto; }
.vbtns > .btn { white-space: nowrap; padding-inline: 6px; }
.vbtns > .btn:nth-child(3) { grid-column: 1 / -1; }
.dig .vacts { grid-template-columns: 1fr 1fr; } .dig .vacts > .btn { width: 100%; }
/* ✅ Галочки (A) і перемикачі (C) — один вигляд для всієї каси й кабінету */
input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 24px !important; height: 24px !important; min-width: 0; padding: 0 !important; margin: 0; border: 2px solid #ffffff55; border-radius: 7px; background: #0006; display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; transition: background .15s, border-color .15s; }
input[type=checkbox]::after { content: ''; width: 6px; height: 11px; border: solid var(--accent-ink, #1a1400); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { opacity: 1; }
input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .4; cursor: default; }
input[type=checkbox].sw, .kv > input[type=checkbox], .sb-tg > input[type=checkbox] { width: 52px !important; height: 32px !important; border: 0; border-radius: 99px; background: #3a3a3e; display: inline-block; position: relative; }
input[type=checkbox].sw::after, .kv > input[type=checkbox]::after, .sb-tg > input[type=checkbox]::after { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #0006; transform: none; opacity: 1; transition: left .15s; }
input[type=checkbox].sw:checked, .kv > input[type=checkbox]:checked, .sb-tg > input[type=checkbox]:checked { background: var(--green); }
input[type=checkbox].sw:checked::after, .kv > input[type=checkbox]:checked::after, .sb-tg > input[type=checkbox]:checked::after { left: 23px; }
.switch > input[type=checkbox] { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; z-index: 1; }
.switch:has(> input:checked) { background: var(--green); } .switch:has(> input:checked)::after { left: 23px; }
.switch { width: 52px; height: 32px; border-radius: 99px; background: #39393d; position: relative; transition: .2s; flex: none; display: inline-block; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 2px 4px #0006; }
.switch.on { background: var(--green); } .switch.on::after { left: 23px; }
/* 🗺 План (owner-plan.js) */
.pl-cmp h3 { font-size: 17px; } .pl-bar { flex: 1; min-width: 50px; height: 8px; background: var(--card2); border-radius: 4px; overflow: hidden; } .pl-bar i { display: block; height: 100%; background: #4cd964; }
.pl-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .pl-k button { background: var(--card2); border-radius: 12px; padding: 8px 10px; text-align: left; color: var(--text); } .pl-k b { display: block; font-size: 20px; } .pl-k span { font-size: 12px; color: var(--muted); }
.pl-new { margin-top: 10px; font-size: 13px; color: var(--accent); } .pl-wait { margin-top: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } .pl-ch { margin: 14px 0 10px; } .pl-hint { font-size: 13px; margin-bottom: 8px; }
.pl-r { display: flex; align-items: flex-start; gap: 8px; padding: 9px 4px; border-top: 1px solid var(--line); } .pl-r.sub { padding-left: 34px; } .pl-r.sub .pl-t b { font-weight: 500; font-size: 14px; }
.pl-r.work { box-shadow: inset 3px 0 #5ac8fa; } .pl-r.bug { box-shadow: inset 3px 0 #ff6b6b; } .pl-r.star { box-shadow: inset 3px 0 var(--accent); } .pl-r.done .pl-t b { text-decoration: line-through; color: var(--muted); }
.pl-cb { flex: 0 0 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--line2); background: transparent; color: var(--muted); font-size: 15px; line-height: 1; padding: 0; }
.pl-cb.d.on { background: #4cd964; border-color: #4cd964; color: #062; } .pl-cb.s.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pl-t { flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; } .pl-t .muted { font-size: 13px; margin-top: 2px; }
.pl-bd { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 45%; } .pl-tg { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--card2); color: var(--muted); white-space: nowrap; } .pl-tg.work { color: #5ac8fa; }
.pl-hz { margin-bottom: 14px; } .pl-hz.far { opacity: .6; } .pl-hh { cursor: pointer; padding: 6px 0 8px; } .pl-br { margin-bottom: 8px; padding: 10px 12px; } .pl-bh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pl-sr { display: flex; align-items: center; gap: 6px; } .pl-sr .pl-r { flex: 1; min-width: 0; } .pl-n { color: var(--accent); font-weight: 700; width: 18px; text-align: right; } .pl-mv { display: flex; flex-direction: column; gap: 2px; } .pl-mv button { background: var(--card2); border-radius: 6px; width: 30px; height: 22px; color: var(--text); } .pl-mv button:disabled { opacity: .3; }
.pl-ta { width: 100%; font: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 8px 0; }
.pl-im { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .pl-im img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; } .pl-dr { margin-bottom: 8px; } .pl-dr.done { opacity: .55; }
@media (max-width: 600px) { .pl-r { flex-wrap: wrap; } .pl-bd { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-left: 68px; } .pl-r.sub .pl-bd { padding-left: 68px; } }

/* 📱 сторінка не «гуляє» вбік; шапка вміщається на телефоні; вікна — нижній лист, як у касі (свайп униз — js/sheet.js), фон під вікном не гортається */
html, body { overflow-x: clip; }
.top .in > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top .in > * { flex-shrink: 0; } .top .in > b { flex-shrink: 1; }
@media (max-width: 560px) { .top .in { padding: 10px 12px; gap: 8px; } .top .icogrp .icobtn { width: 32px; height: 32px; } }
@media (max-width: 380px) { .top .in > b { display: none; } }
.modal-bg, .modal { overscroll-behavior: contain; }
html:has(.modal-bg) { overflow: hidden; }
@media (max-width: 600px) {
  .modal-bg { place-items: end stretch; padding: 0; padding-top: calc(40px + env(safe-area-inset-top)); }
  .modal { max-width: none; max-height: calc(100dvh - 40px - env(safe-area-inset-top)); border-radius: 22px 22px 0 0; border-bottom: 0; padding: 26px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheetUp .26s cubic-bezier(.2, .9, .3, 1); position: relative; }
  .modal::before { content: ''; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line2, #ffffff33); }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* ===== 🎛 Студія конструкторів (чек, сайт, меню, друк, сайт ATOM): спокійні панелі, повзунок із цифрою в рядку, компактні перемикачі, сегменти ===== */
#sb .sb-top { min-height: 56px; gap: 10px; }
#sb .sb-top b { font-size: 15px; font-weight: 650; letter-spacing: .01em; }
#sb .sb-side { background: var(--bg2); }
#sb .sb-tabs { gap: 4px; padding: 10px 12px; }
#sb .sb-tabs button { padding: 7px 12px; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 500; transition: background .15s, color .15s; }
#sb .sb-tabs button:hover { color: var(--text); background: var(--card); }
#sb .sb-tabs button.on { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
#sb .sb-p { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
#sb .sb-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; gap: 12px; }
#sb .sb-card h4 { font-size: 13.5px; font-weight: 650; letter-spacing: .01em; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#sb .sb-note { font-size: 12.5px; }
/* поля */
#sb .sb-f { gap: 7px; font-size: 12.5px; }
#sb .sb-f input:not([type=range]):not([type=checkbox]):not([type=color]), #sb .sb-f textarea { padding: 10px 12px; border-radius: 10px; font-size: 14px; background: var(--card2); border: 1px solid var(--line); transition: border-color .15s; }
#sb .sb-f input:focus, #sb .sb-f textarea:focus { border-color: var(--accent); }
/* повзунок: назва ліворуч, значення праворуч у плашці, доріжка на всю ширину */
#sb .sb-f:has(> input[type=range]) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 4px; }
#sb .sb-f:has(> input[type=range]) > b { justify-self: end; min-width: 44px; text-align: center; padding: 2px 8px; border-radius: 7px; background: var(--card2); font-size: 12px; font-variant-numeric: tabular-nums; }
#sb .sb-f > input[type=range] { grid-column: 1 / -1; }
#sb input[type=range]:not(.as-hue) { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; padding: 0; border: 0; cursor: pointer; }
#sb input[type=range]:not(.as-hue)::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--line2); }
#sb input[type=range]:not(.as-hue)::-moz-range-track { height: 4px; border-radius: 99px; background: var(--line2); }
#sb input[type=range]:not(.as-hue)::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); }
#sb input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 2px 6px #0008; transition: transform .12s; }
#sb input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg2); box-shadow: 0 0 0 1px var(--accent); }
#sb input[type=range].as-hue::-webkit-slider-thumb { margin-top: -4px; background: #fff; }
#sb input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
/* перемикач: підпис ліворуч, компактний перемикач праворуч */
#sb .sb-tg { justify-content: space-between; gap: 12px; min-height: 32px; font-size: 14px; }
#sb .sb-tg > span { order: -1; flex: 1; min-width: 0; overflow-wrap: anywhere; }
#sb .sb-tg > input[type=checkbox] { width: 40px !important; height: 24px !important; background: var(--line2); transition: background .15s; }
#sb .sb-tg > input[type=checkbox]::after { top: 3px; left: 3px; width: 18px; height: 18px; }
#sb .sb-tg > input[type=checkbox]:checked { background: var(--accent); }
#sb .sb-tg > input[type=checkbox]:checked::after { left: 19px; }
/* вибір із кількох: сегменти в одній плашці */
#sb .sb-chips { gap: 3px; padding: 3px; border-radius: 11px; background: var(--card2); }
#sb .sb-chips button { padding: 7px 11px; border-radius: 8px; background: transparent; border: 0; color: var(--muted); font-weight: 500; transition: background .15s, color .15s; }
#sb .sb-chips button:hover { color: var(--text); }
#sb .sb-chips button.on { background: var(--card); color: var(--accent); font-weight: 600; border: 0; box-shadow: 0 1px 3px #0007, inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
/* шаблони: дві колонки, що не розпирають панель */
#sb .sb-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#sb .sb-tpls button { border-width: 1px; border-radius: 12px; min-height: 68px; }
#sb .sb-tpls button.on, #sb .sb-tpls button[aria-pressed=true] { outline: 2px solid var(--accent); outline-offset: 2px; }
#sb .sb-col { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; }
/* перегляд — на полотні в крапку */
#sb .sb-view, #sb .rc-v { background: radial-gradient(circle at 1px 1px, #ffffff10 1px, transparent 0) 0 0 / 18px 18px, var(--bg); }
#sb .sb-dev { gap: 3px; padding: 3px; margin: 10px auto; border-radius: 11px; background: var(--card2); width: max-content; }
#sb .sb-dev button { padding: 6px 14px; border-radius: 8px; background: transparent; color: var(--muted); }
#sb .sb-dev button.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px #0007, inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
#sb .sb-fw { border-radius: 26px; border: 1px solid var(--line2); box-shadow: 0 0 0 6px #0006, 0 30px 80px #000c; }
/* теми чека */
#sb .rc-th { position: relative; border: 1px solid var(--line); background: var(--card2); transition: border-color .15s, transform .15s; }
#sb .rc-th:hover { transform: translateY(-1px); }
#sb .rc-th.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#sb .rc-th.on::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--accent); color: var(--accent-ink); }
#sb .rc-v .rp { box-shadow: 0 1px 0 #fff3 inset, 0 24px 60px #000b, 0 2px 6px #0006; border-radius: 3px; }
@media (max-width: 860px) { #sb .sb-p { padding: 10px; } }
/* 📐 розмір логотипа: шахівниця = прозорий фон */
.lf-cv { display: block; width: min(320px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 14px; border: 1px solid var(--line); touch-action: none; cursor: grab;
  background: repeating-conic-gradient(var(--card2) 0 25%, var(--bg2) 0 50%) 0 0 / 24px 24px; }
.lf-z { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.lf-z input { flex: 1; min-width: 0; accent-color: var(--accent); }
.lf-v { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.lf-h { text-align: center; font-size: 13px; margin-top: 6px; }
/* ✨ анкета «Налаштуй все з ATOM» (owner-intake.js) */
.ik-hero { border-color: var(--accent); background: linear-gradient(135deg, #f2c14e14, transparent 60%), var(--card); margin-bottom: 12px; }
.ik-big { width: 100%; padding: 14px; font-size: 16px; }
.ik-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0; }
.ik-steps div { font-size: 12px; text-align: center; padding: 6px 2px; border-radius: 8px; background: var(--card2); color: var(--muted); }
.ik-steps div.on { background: #30d15833; color: var(--text); font-weight: 600; }
.ik-modal { max-width: 640px; } .ik-body { max-height: 66vh; overflow-y: auto; overscroll-behavior: contain; }
.ik-sec { border-top: 1px solid var(--line); padding: 12px 0 4px; } .ik-sec h4 { margin: 0 0 6px; font-size: 15px; } .ik-h { font-size: 13px; margin-bottom: 6px; }
.ik-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .ik-row input { flex: 1 1 140px; min-width: 0; }
.ik-g { display: grid; gap: 6px; margin: 6px 0; } .ik-sec textarea { width: 100%; margin: 6px 0; }
.ik-u { word-break: break-all; font-size: 12px; }
.ik-drop { display: block; border: 2px dashed var(--line2); border-radius: 14px; padding: 16px; text-align: center; cursor: pointer; margin: 6px 0; }
.ik-drop.on { border-color: var(--accent); background: #f2c14e10; }
.ik-chk { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; background: var(--card2); margin: 6px 0; cursor: pointer; } .ik-chk input { width: 20px; height: 20px; flex: none; margin-top: 2px; } .ik-chk span { min-width: 0; overflow-wrap: anywhere; }
.ik-found { margin-top: 8px; } .ik-foot { position: sticky; bottom: 0; }
.ik-lk { margin-top: 12px; } .ik-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 6px; }
.ik-ln { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 7px; border-radius: 14px; background: var(--card2); min-width: 0; }
.ik-ai { flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; border-radius: 11px; background: var(--card); }
.ik-lt { flex: 1; min-width: 0; color: var(--text); text-decoration: none; } .ik-lt b, .ik-lt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ik-lt b { font-size: 14px; } .ik-lt small { font-size: 12px; color: var(--muted); }
.ik-lb { flex: none; display: flex; gap: 4px; } .ik-lb .btn { padding: 0; width: 36px; font-size: 16px; }
/* 📷 галерея страви (як у касі) */
.ph-g { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.ph-t { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--card2); }
.ph-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-t.main { border-color: var(--accent); }
.ph-t.main::after { content: '⭐'; position: absolute; left: 4px; top: 2px; font-size: 13px; }
.ph-x, .ph-m { position: absolute; top: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #000a; color: #fff; font-size: 12px; cursor: pointer; padding: 0; }
.ph-x { right: 4px; } .ph-m { left: 4px; }
/* 📐 «План»: 7 чипів на 375 рвалися на рядки 3+2+2 різної ширини → рівна сітка 2 колонки, останній непарний — на весь рядок */
@media (max-width: 480px) { .pl-ch { display: grid; grid-template-columns: 1fr 1fr; } .pl-ch button:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* 📐 аудит 31.10 (кабінет): цілі дотику ≥44, контраст попереджень і дрібного тексту */
.venue > span.btn.sm { display: flex; align-items: center; justify-content: center; }
.btn.sm, .chips button, .seg2 button { min-height: 44px; }
.pl-cb { position: relative; }
.pl-cb::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
@media (max-width: 560px) { .top .icogrp .icobtn { width: 44px; height: 44px; } .tabs button { min-height: 44px; } }
#forgot { display: inline-block; padding: 12px 0; }
.alert, .alert b { color: var(--text); }
.muted small, small.muted { font-size: 12px; }
@media (min-width: 900px) { .btn.sm, .chips button, .seg2 button { min-height: 34px; } }
.olook-in .w-card { margin-bottom: 12px; }
/* 🧑‍💼 CRM менеджерів: звіт, перевірка закладу, чат */
.crm-tbw { overflow-x: auto; }
.crm-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-tb th { font-weight: 500; color: var(--muted); font-size: 12px; text-align: left; padding: 4px 6px; white-space: nowrap; }
.crm-tb td { padding: 6px; border-top: 1px solid var(--line); white-space: nowrap; }
.crm-q { display: flex; gap: 8px; } .crm-q input { flex: 1; min-width: 0; }
.crm-res { margin-top: 10px; } .crm-v { font-weight: 600; margin-bottom: 8px; } .crm-v.ok { color: var(--accent); } .crm-v.bad { color: var(--text); }
.crm-res .card { margin-top: 10px; }
.crm-msgs { display: grid; gap: 6px; max-height: 50vh; overflow: auto; align-content: start; }
.crm-m { max-width: 85%; justify-self: start; padding: 8px 10px; border-radius: 12px; background: var(--card2); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.crm-m .muted { font-size: 11px; } .crm-m.me { justify-self: end; background: color-mix(in srgb, var(--accent) 22%, transparent); } .crm-m.del { opacity: .55; }
.crm-send { display: grid; gap: 8px; margin-top: 10px; } .crm-send textarea { width: 100%; font: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.crm-tb .btn { min-height: 0; min-width: 0; padding: 2px 5px; font-size: 12px; } .crm-tb td, .crm-tb th { padding-inline: 4px; }
.crm-t { margin-bottom: 8px; }
.card.crm-box { margin-top: 8px; padding: 12px; }
.crm-box > summary { cursor: pointer; list-style: none; } .crm-box > summary::-webkit-details-marker { display: none; } .crm-box[open] > summary { margin-bottom: 10px; }
.crm-sum { font-size: 14px; } .crm-sum::after { content: ' ▾'; color: var(--muted); }
.crm-bar { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--card2); overflow: hidden; } .crm-bar i { display: block; height: 100%; background: var(--accent); }
.crm-sub { font-size: 12px; line-height: 1.4; } .crm-late { color: var(--red); }
.crm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 14px; } .crm-row[data-crm] { cursor: pointer; }
.chips.crm-fil { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; } .chips.crm-fil::-webkit-scrollbar { display: none; }
.chips.crm-fil button { flex: 0 0 auto; min-height: 36px; padding: 5px 11px; white-space: nowrap; }
.crm-l.card { padding: 12px; } .crm-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crm-h > b { min-width: 0; overflow-wrap: anywhere; }
.crm-sel { flex: none; max-width: 46%; min-height: 32px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 99px; background: var(--card2); color: var(--text); font: inherit; font-size: 12px; }
.crm-sel option { background: var(--card2); color: var(--text); }
.crm-ct { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; }
.crm-tx { margin: 6px 0 0; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.crm-act { display: flex; gap: 6px; margin-top: 8px; } .crm-act .btn { flex: 0 0 44px; min-height: 40px; padding: 4px; } .crm-act .btn:first-child:not([aria-label]) { flex: 1 1 auto; } .crm-act .btn:not([aria-label]) { flex: 1 1 auto; }
.crm-qi + .crm-qi { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.crm-menu { display: grid; gap: 8px; }