@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexSans-Regular-Cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexSans-Regular-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexSans-Medium-Cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexSans-Medium-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexSans-SemiBold-Cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexSans-SemiBold-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/IBMPlexSans-Bold-Cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/IBMPlexSans-Bold-Latin1.woff2') format('woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/IBMPlexSans-Bold-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexMono-Medium-Cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexMono-Medium-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexMono-SemiBold-Cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexMono-SemiBold-Latin1.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexMono-SemiBold-Latin2.woff2') format('woff2'); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
/* TeamHub — slate rail, amber hex-nut mark, chat on a parts-pattern wallpaper */
:root {
  --rail: #1B2A3A;
  --rail-ink: #93A4B6;
  --rail-hover: rgba(255,255,255,.06);
  --amber: #F2A900;
  --amber-ink: #3A2A00;
  --bg: #EEF1F4;
  --panel: #FFFFFF;
  --panel-2: #F6F8FA;
  --field: #EFF2F5;
  --ink: #17212B;
  --ink-2: #3D4B59;
  --muted: #6E7D8C;
  --line: #DFE5EA;
  --blue: #2A6FD1;
  --blue-ink: #FFFFFF;
  --blue-soft: rgba(42,111,209,.12);
  --sel: #1B2A3A;
  --sel-ink: #FFFFFF;
  --sel-muted: #A9B8C8;
  --green: #1C8B57;
  --green-soft: rgba(28,139,87,.12);
  --red: #C73A2F;
  --red-soft: rgba(199,58,47,.1);
  --wall-bg: #D5DEE5;
  --bubble: #FFFFFF;
  --bubble-own: #DDEBFF;
  --bubble-shadow: 0 1px 1px rgba(20,40,60,.13);
  --meta: #7A8896;
  --meta-own: #5A7EA8;
  --tick-read: #2A6FD1;
  --pill: rgba(27,42,58,.42);
  --shadow-lg: 0 18px 50px rgba(15,30,45,.22);
  --radius: 12px;
  --font: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --rail: #0E1823;
  --rail-ink: #7F91A4;
  --bg: #121C26;
  --panel: #18232E;
  --panel-2: #1D2935;
  --field: #22303D;
  --ink: #E5ECF2;
  --ink-2: #C3CFDA;
  --muted: #8899AA;
  --line: #2A3A48;
  --blue: #4C8FE6;
  --blue-soft: rgba(76,143,230,.16);
  --sel: #2B4A6B;
  --sel-muted: #B4C6D9;
  --green: #3CB37B;
  --green-soft: rgba(60,179,123,.15);
  --red: #E26357;
  --red-soft: rgba(226,99,87,.14);
  --wall-bg: #0F1A24;
  --bubble: #1F2D3A;
  --bubble-own: #2B5278;
  --bubble-shadow: 0 1px 1px rgba(0,0,0,.25);
  --meta: #8597A8;
  --meta-own: #A6C3E2;
  --tick-read: #8CC4FF;
  --pill: rgba(0,0,0,.4);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.4; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ico { display: inline-flex; flex: none; }
.ico svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.grow { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- auth screens ---------- */
.auth {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: var(--rail) var(--wall-dark) repeat;
}
.auth-card {
  width: min(400px, 100%); background: var(--panel); border-radius: 18px; padding: 28px 28px 24px;
  box-shadow: var(--shadow-lg);
}
.auth-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-mark .logo { color: var(--amber); }
.auth-mark .logo svg { --hole: var(--panel); }
.auth-mark b { font-size: 19px; letter-spacing: -.01em; }
.auth h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.02em; }
.auth p { margin: 0 0 18px; color: var(--muted); }
.auth form { display: grid; gap: 12px; }
.auth .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth .btn { height: 44px; margin-top: 6px; }
.form-error { color: var(--red); font-size: 14px; min-height: 0; }
.form-error:empty { display: none; }

/* ---------- fields & buttons ---------- */
.field { display: grid; gap: 5px; }
.field > span { font-size: 13px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px;
  background: var(--panel); outline: none; transition: border-color .12s, box-shadow .12s;
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.select { appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 10px; font-weight: 600; white-space: nowrap; transition: background .12s, opacity .12s;
}
.btn.primary { background: var(--blue); color: var(--blue-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.soft { background: var(--field); }
.btn.soft:hover { background: var(--line); }
.btn.ghost:hover { background: var(--field); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: var(--red-soft); }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--muted); flex: none;
}
.icon-btn:hover { background: var(--field); color: var(--ink); }
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch { position: relative; width: 40px; height: 24px; flex: none; }
.switch input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 12px; background: var(--line); transition: background .15s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + i { background: var(--blue); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- shell ---------- */
#app { display: grid; grid-template-columns: 76px 1fr; height: 100dvh; }
.rail {
  background: var(--rail); display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 12px; gap: 4px; z-index: 5;
}
.rail .logo { color: var(--amber); margin-bottom: 14px; }
.rail .logo svg { --hole: var(--rail); }
.nav-btn {
  position: relative; width: 62px; padding: 8px 0 6px; border-radius: 12px; color: var(--rail-ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 500;
}
.nav-btn:hover { background: var(--rail-hover); color: var(--rail-fg, #DCE5EE); }
.nav-btn.active { color: var(--rail-fg, #fff); background: var(--rail-active, rgba(255,255,255,.09)); }
.nav-btn.active::before {
  content: ""; position: absolute; left: -7px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber);
}
.nav-badge {
  position: absolute; top: 3px; right: 9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--amber); color: var(--amber-ink); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.rail .spacer { flex: 1; }
.me-btn { border-radius: 50%; padding: 2px; }
.me-btn:hover { box-shadow: 0 0 0 2px var(--rail-ink); }
#main { min-width: 0; min-height: 0; display: flex; position: relative; }
.conn-banner {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 90; background: var(--rail); color: var(--rail-fg, #fff);
  padding: 7px 14px; border-radius: 18px; font-size: 13px; box-shadow: var(--shadow-lg);
}

/* ---------- avatars ---------- */
.avatar {
  position: relative; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  color: #fff; font-weight: 600; letter-spacing: .01em; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar .dot {
  position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 10px; min-height: 10px; border-radius: 50%;
  background: #34C06F; box-shadow: 0 0 0 2px var(--dot-ring, var(--panel));
}
.avatar .dot.away { background: #E0A526; }
.perm-row.by-dept input { opacity: .6; }
.perm-from { margin-left: auto; padding: 1px 8px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dept-perms { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
/* presence line: online / away · 12 min / last seen at 14:32 (2.4.6) */
.bc-pres { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.bc-pres i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.bc-pres.online { color: #1F9D57; font-weight: 600; }
.bc-pres.online i { background: #34C06F; box-shadow: 0 0 0 3px rgba(52,192,111,.18); }
.bc-pres.away { color: #A87300; }
.bc-pres.away i { background: #E0A526; }
:root[data-theme="dark"] .bc-pres.online { color: #5AD08F; }
:root[data-theme="dark"] .bc-pres.away { color: #E3B44A; }
.badge-card .bc-pres { display: flex; }
.avatar.group-mark { background: var(--rail) !important; color: var(--amber); }
.avatar.group-mark svg { --hole: var(--rail); }

/* ---------- chat ---------- */
.chat-view { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; flex: 1; min-width: 0; min-height: 0; }
.chat-list-pane { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.pane-head { height: 60px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.search { position: relative; flex: 1; }
.search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 40px; border-radius: 20px; border: 1px solid transparent; background: var(--field);
  padding: 0 14px 0 38px; outline: none;
}
.search input:focus { border-color: var(--blue); background: var(--panel); }
.chat-items { flex: 1; overflow-y: auto; padding: 2px 6px 10px; }
.list-label { font-size: 13px; color: var(--muted); padding: 10px 12px 4px; }
.chat-item {
  width: 100%; display: grid; grid-template-columns: 52px 1fr; column-gap: 10px; align-items: center;
  padding: 7px 8px; border-radius: 12px; text-align: left; --dot-ring: var(--panel);
}
.chat-item:hover { background: var(--panel-2); }
.chat-item.active { background: var(--sel); color: var(--sel-ink); --dot-ring: var(--sel); }
.chat-item .ci-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chat-item .ci-name { font-weight: 600; flex: 1; min-width: 0; }
.chat-item .ci-time { font-size: 12px; color: var(--muted); flex: none; }
.chat-item .ci-bottom { display: flex; align-items: center; gap: 8px; margin-top: 1px; min-width: 0; }
.chat-item .ci-prev { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; }
.chat-item .ci-prev b { font-weight: 500; color: var(--ink-2); }
.chat-item .ci-prev .typing { color: var(--blue); }
.chat-item.active .ci-time, .chat-item.active .ci-prev, .chat-item.active .ci-prev b { color: var(--sel-muted); }
.chat-item.active .ci-prev .typing { color: #fff; }
.chat-item .ci-main { min-width: 0; }
.unread {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 600; display: inline-grid; place-items: center;
}
.chat-item.active .unread { background: #fff; color: var(--sel); }
.tick { color: var(--blue); display: inline-flex; }
.chat-item.active .tick { color: #fff; }
.empty-note { padding: 28px 18px; color: var(--muted); text-align: center; }

.conv, .lp-wall, .thread-body {
  background-color: var(--wall-bg); background-image: var(--wall-img, var(--wall-light)); background-size: var(--wall-size, auto);
  background-repeat: var(--wall-repeat, repeat); background-position: center;
}
.conv { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.conv-empty { margin: auto; background: var(--pill); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 14px; }
.conv-head {
  height: 60px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); z-index: 2;
}
.conv-head .back { display: none; }
.conv-head .who { min-width: 0; flex: 1; cursor: pointer; }
.conv-head .who b { display: block; font-weight: 600; }
.conv-head .who small { display: block; font-size: 13px; color: var(--muted); }
.conv-head .who small.on { color: var(--blue); }
.msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 6px; overscroll-behavior: contain; }
.msgs-inner { max-width: 780px; margin: 0 auto; padding: 0 14px; display: flex; flex-direction: column; }
.day-sep, .sys-msg, .unread-sep {
  align-self: center; margin: 10px 0 8px; padding: 3px 11px; border-radius: 13px; background: var(--pill); color: #fff;
  font-size: 13px; font-weight: 500; position: sticky; top: 4px; z-index: 1;
}
.sys-msg { position: static; font-weight: 400; }
.unread-sep { position: static; align-self: stretch; text-align: center; border-radius: 0; background: rgba(255,255,255,.55); color: var(--ink-2); margin: 8px -14px; }
:root[data-theme="dark"] .unread-sep { background: rgba(0,0,0,.25); color: var(--ink-2); }
.msg-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.msg-row.first { margin-top: 7px; }
.msg-row.own { justify-content: flex-end; }
.msg-row .av-slot { width: 36px; flex: none; align-self: flex-end; }
.bubble {
  position: relative; max-width: min(560px, 82%); background: var(--bubble); border-radius: 16px; padding: 6px 10px 6px 11px;
  box-shadow: var(--bubble-shadow); overflow-wrap: anywhere; min-width: 64px;
}
.own .bubble { background: var(--bubble-own); }
.msg-row.last:not(.own) .bubble { border-bottom-left-radius: 5px; }
.msg-row.last.own .bubble { border-bottom-right-radius: 5px; }
.bubble.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--amber); } 100% { box-shadow: var(--bubble-shadow); } }
.sender { font-size: 13px; font-weight: 600; margin-bottom: 1px; }
.btext { white-space: pre-wrap; }
.btext a { word-break: break-all; }
.meta {
  float: right; position: relative; top: 7px; margin: -4px -2px 0 10px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; color: var(--meta); line-height: 1; height: 16px; user-select: none;
}
.own .meta { color: var(--meta-own); }
.meta .tick { color: var(--meta-own); }
.meta .tick.read { color: var(--tick-read); }
.meta.on-media { position: absolute; top: auto; right: 8px; bottom: 8px; margin: 0; padding: 3px 7px; height: auto; border-radius: 10px; background: rgba(0,0,0,.45); color: #fff; float: none; }
.meta.on-media .tick, .meta.on-media .tick.read { color: #fff; }
/* group chats: how many have read each message */
.seen-n { display: inline-flex; align-items: center; gap: 2px; margin-left: 3px; font-variant-numeric: tabular-nums; }
.seen-n b { font-weight: 600; font-size: 12px; }
.seen-n.none { opacity: .7; }
.seen-n.all { color: var(--tick-read); }
.own .seen-n.all { color: var(--tick-read); }
.meta.on-media .seen-n, .meta.on-media .seen-n.all { color: #fff; }
.meta.clickable:hover .seen-n b { text-decoration: underline; }
.bubble.media-only { padding: 3px; }
.bubble.media-only .sender { padding: 3px 7px 2px; }
.media-grid { display: grid; gap: 3px; margin: 2px -6px 4px -7px; border-radius: 12px; overflow: hidden; }
.bubble.media-only .media-grid { margin: 0; }
.media-grid.n2, .media-grid.n3, .media-grid.n4 { grid-template-columns: 1fr 1fr; }
.media-grid.many { grid-template-columns: repeat(6, 1fr); }
.media-grid img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; cursor: zoom-in; background: var(--field); }
.media-grid.n2 img, .media-grid.n3 img, .media-grid.n4 img { height: 170px; }
.media-grid.n3 img:first-child { grid-column: 1 / -1; height: 230px; }
.media-grid.many img { height: 128px; }
.mention { color: var(--blue); font-weight: 600; cursor: pointer; }
.mention.me { background: rgba(242,169,0,.25); color: inherit; border-radius: 4px; padding: 0 3px; }
.mention-pop {
  position: absolute; left: 0; right: 56px; bottom: calc(100% + 6px); z-index: 12; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 300px; overflow-y: auto;
}
.mention-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; text-align: left; min-width: 0; }
.mention-item.on, .mention-item:hover { background: var(--field); }
.mention-item small { margin-left: auto; color: var(--muted); font-size: 12px; max-width: 45%; }
.composer-inner, .comment-input { position: relative; }
.comment-input .mention-pop { right: 50px; }
.unread.at { padding: 0; width: 22px; font-weight: 600; }
.file-att { display: flex; align-items: center; gap: 10px; padding: 3px 0 4px; text-decoration: none; color: inherit; min-width: 0; }
.file-att .fi { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.file-att .fn { font-weight: 500; }
.file-att small { color: var(--meta); font-size: 13px; }
.own .file-att small { color: var(--meta-own); }
.reply-quote {
  display: block; width: 100%; text-align: left; border-left: 3px solid var(--qc, var(--blue)); background: var(--qbg, var(--blue-soft));
  border-radius: 6px; padding: 3px 8px 4px; margin: 2px 0 5px; font-size: 13px; line-height: 1.3; min-width: 0;
}
.reply-quote b { display: block; color: var(--qc, var(--blue)); font-weight: 600; }
.reply-quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.msg-tools {
  align-self: center; opacity: 0; display: flex; gap: 2px; transition: opacity .1s;
}
.msg-row:hover .msg-tools { opacity: 1; }
.msg-tools .icon-btn { width: 30px; height: 30px; background: var(--panel); box-shadow: var(--bubble-shadow); color: var(--muted); }
.typing-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .2s; }
.typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.composer { flex: none; padding: 6px 14px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.composer-inner { max-width: 780px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; }
.input-box { flex: 1; min-width: 0; background: var(--panel); border-radius: 22px; box-shadow: var(--bubble-shadow); display: flex; flex-direction: column; overflow: hidden; }
.compose-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 0 14px; color: var(--blue); }
.compose-bar .grow { border-left: 2px solid var(--blue); padding-left: 9px; font-size: 13px; line-height: 1.3; }
.compose-bar .grow b { display: block; }
.compose-bar .grow span { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-bar .icon-btn { width: 30px; height: 30px; }
.att-chips { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 8px 10px 0; max-height: 170px; overflow-y: auto; }
.att-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--field); flex: none; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-thumb .icon-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,.55); color: #fff; }
.att-thumb .bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.45); overflow: hidden; }
.att-thumb .bar i { display: block; height: 100%; background: #fff; transition: width .15s; }
.att-thumb.err { outline: 2px solid var(--red); outline-offset: -2px; }
/* 2.10.10: a picture that did not go: «Повторить» over it; the send button waits for the files and then sends */
.att-retry { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; font-weight: 500; }
.send-btn.waiting { opacity: .7; }
.send-btn.waiting svg { animation: sendWait 1.2s linear infinite; }
@keyframes sendWait { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .send-btn.waiting svg { animation: none; } }
.att-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; background: var(--field); border-radius: 14px; padding: 4px 4px 4px 10px; font-size: 13px; }
.att-chip .icon-btn { width: 22px; height: 22px; }
.att-chip progress { width: 44px; height: 4px; }
.att-chip.err { color: var(--red); }
.input-row { display: flex; align-items: flex-end; }
.input-row .icon-btn { margin: 4px; }
.input-row textarea {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: transparent; padding: 12px 4px 12px 2px;
  max-height: 200px; line-height: 1.4; font-size: 15px;
}
.send-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--bubble-shadow); }
.send-btn:disabled { opacity: .6; }
.fab-down {
  position: absolute; right: 22px; bottom: 86px; width: 46px; height: 46px; border-radius: 50%; background: var(--panel);
  color: var(--muted); box-shadow: 0 2px 6px rgba(0,0,0,.18); display: grid; place-items: center; z-index: 3;
}
.fab-down .unread { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); }
.drop-zone {
  position: absolute; inset: 70px 18px 18px; border: 2px dashed var(--blue); border-radius: 18px; background: rgba(255,255,255,.75);
  display: grid; place-items: center; font-size: 17px; font-weight: 600; color: var(--blue); z-index: 6; pointer-events: none;
}
:root[data-theme="dark"] .drop-zone { background: rgba(14,24,35,.8); }

/* ---------- menus, modals, drawers, toasts ---------- */
.menu {
  position: fixed; z-index: 80; min-width: 190px; background: var(--panel); border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.menu button, .menu .menu-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; text-align: left; }
.menu button:hover { background: var(--field); }
.menu button.danger { color: var(--red); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.menu .menu-head { padding: 8px 12px 10px; display: flex; gap: 10px; align-items: center; }
.menu .menu-head small { display: block; color: var(--muted); }
.modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(8,16,24,.45); display: grid; place-items: center; padding: 16px; }
.modal {
  width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel); border-radius: 18px;
  padding: 20px; box-shadow: var(--shadow-lg);
}
.modal.wide { width: min(620px, 100%); }
.modal h2 { margin: 0 0 14px; font-size: 19px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.modal h2 .grow { flex: 1; }
.modal .body { display: grid; gap: 12px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pick-list { max-height: 340px; overflow: auto; margin: 0 -8px; }
.pick-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; text-align: left; }
.pick-item:hover { background: var(--panel-2); }
.pick-item input { width: 18px; height: 18px; accent-color: var(--blue); }
.pick-item small { display: block; color: var(--muted); font-size: 13px; }
.drawer-back { position: fixed; inset: 0; z-index: 40; background: rgba(8,16,24,.3); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(540px, 100vw); background: var(--panel);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slidein .16s ease-out;
}
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.toast-wrap { position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 95; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--rail); color: var(--rail-fg, #fff); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; max-width: 90vw; pointer-events: auto; }
.toast.err { background: var(--red); }
.lightbox { position: fixed; inset: 0; z-index: 99; background: rgba(5,10,15,.9); display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: 6px; }
.lightbox .lb-bar { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.lightbox .icon-btn { color: #fff; background: rgba(255,255,255,.1); }
.lightbox .lb-prev, .lightbox .lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.lightbox .lb-prev { left: 16px; }
.lightbox .lb-next { right: 16px; }
.lightbox .lb-count { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0,0,0,.45); padding: 3px 11px; border-radius: 12px; }
.lightbox .lb-count:empty { display: none; }

/* ---------- page header (tasks, team) ---------- */
.page { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.page-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 18px 24px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0 8px 0 0; font-size: 22px; letter-spacing: -.02em; }
.page-head .search { flex: 0 1 280px; }
.page-head .push { margin-left: auto; display: flex; gap: 8px; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--field); border-radius: 10px; padding: 3px; }
.seg button { height: 32px; padding: 0 12px; border-radius: 8px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.page-body { flex: 1; overflow: auto; padding: 18px 24px 40px; }

/* ---------- tasks ---------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 16px; align-items: start; min-width: 820px; }
.col { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px; min-height: 160px; }
:root[data-theme="dark"] .col { background: #15202A; }
.col.drag-over { border-color: var(--blue); background: var(--blue-soft); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; font-weight: 600; min-height: 46px; }
.col-head .count { color: var(--muted); font-weight: 500; }
.col-head .bar { width: 10px; height: 10px; border-radius: 3px; }
.col-head .icon-btn { margin-left: auto; width: 30px; height: 30px; }
.tcard {
  display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; cursor: grab;
}
.tcard:hover { border-color: #B9C5D0; }
:root[data-theme="dark"] .tcard:hover { border-color: #3B4C5C; }
.tcard.dragging { opacity: .5; }
.tcard .tc-title { display: flex; gap: 8px; font-weight: 500; }
.prio { display: inline-flex; flex: none; margin-top: 1px; }
.prio.urgent { color: var(--red); }
.prio.high { color: #D99500; }
.tr-title .prio { margin-right: 6px; vertical-align: -3px; }
/* traffic-light priority: red urgent, yellow important, green normal */
:root { --p-urgent: #D63B2F; --p-high: #F2A900; --p-normal: #2FA36B; }
.pdot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.pdot.urgent { background: var(--p-urgent); }
.pdot.high { background: var(--p-high); }
.pdot.normal { background: var(--p-normal); }
.seg button .pdot { width: 10px; height: 10px; }
.ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) auto; gap: 10px; margin-bottom: 16px; align-items: stretch; }
.ptile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-left-width: 5px; min-width: 0;
}
.ptile.urgent { border-left-color: var(--p-urgent); }
.ptile.high { border-left-color: var(--p-high); }
.ptile.normal { border-left-color: var(--p-normal); }
.ptile:hover { border-color: #B9C5D0; }
.ptile.urgent:hover { border-left-color: var(--p-urgent); }
.ptile.high:hover { border-left-color: var(--p-high); }
.ptile.normal:hover { border-left-color: var(--p-normal); }
.ptile .pdot { width: 16px; height: 16px; }
.ptile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ptile-label { font-weight: 600; }
.ptile small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptile b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.ptile.on { color: #fff; border-color: transparent; }
.ptile.on small { color: rgba(255,255,255,.85); }
.ptile.on .pdot { background: #fff; }
.ptile.urgent.on { background: var(--p-urgent); }
.ptile.normal.on { background: var(--p-normal); }
.ptile.high.on { background: var(--p-high); color: #3A2A00; }
.ptile.high.on small { color: rgba(58,42,0,.75); }
.ptile.high.on .pdot { background: #3A2A00; }
.ptiles-all { align-self: center; justify-self: start; }
.ptile small.over { color: var(--red); font-weight: 600; }
.ptile.on small.over { color: #fff; }
.ptile.high.on small.over { color: #3A2A00; }
.tc-meta .avatar, .trow .avatar { display: inline-grid; }
.tcard, .trow { border-left-width: 4px; }
.tcard.p-urgent, .trow.p-urgent { border-left-color: var(--p-urgent); }
.tcard.p-high, .trow.p-high { border-left-color: var(--p-high); }
.tcard.p-normal, .trow.p-normal { border-left-color: var(--p-normal); }
.tcard.done, .trow.done { border-left-color: var(--line); }
.watcher { display: inline-flex; align-items: center; gap: 6px; background: var(--field); border-radius: 15px; padding: 2px 10px 2px 2px; font-size: 13px; max-width: 170px; }
.tcard.done .tc-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.tc-meta { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 13px; color: var(--muted); }
.tc-meta .grow { flex: 1; }
.tc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.due { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 8px; background: var(--field); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.due.over { background: var(--red-soft); color: var(--red); }
.due.today { background: rgba(242,169,0,.18); color: #8A5A00; }
:root[data-theme="dark"] .due.today { color: #F5C451; }
.due.ok { background: var(--green-soft); color: var(--green); }
.tlist { max-width: 900px; }
.tgroup h3 { font-size: 14px; margin: 18px 0 6px; color: var(--muted); font-weight: 600; display: flex; gap: 8px; }
.tgroup h3.over { color: var(--red); }
.trow {
  display: grid; grid-template-columns: 28px 1fr auto auto 32px; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; cursor: pointer;
}
.trow:hover { border-color: #B9C5D0; }
.trow.done .tr-title { color: var(--muted); text-decoration: line-through; }
.round-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #A8B5C1; display: grid; place-items: center; color: transparent; flex: none;
}
.round-check:hover { border-color: var(--green); color: var(--green); }
.round-check.on { background: var(--green); border-color: var(--green); color: #fff; }
.task-title-input { width: 100%; border: 0; outline: none; background: transparent; font-size: 21px; font-weight: 600; letter-spacing: -.01em; padding: 4px 0; border-radius: 6px; }
.task-title-input:focus { box-shadow: 0 0 0 3px var(--blue-soft); }
.task-doneby { margin: -4px 0 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.props { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; align-items: center; margin: 14px 0 20px; }
.props > span { color: var(--muted); font-size: 14px; }
.props .inline { display: flex; gap: 8px; align-items: center; }
.status-pill { width: auto; height: 32px; border-radius: 16px; padding: 0 30px 0 14px; font-weight: 600; border: 0; }
.status-pill.todo { background: var(--field); }
.status-pill.doing { background: rgba(42,111,209,.14); color: var(--blue); }
.status-pill.done { background: var(--green-soft); color: var(--green); }
.section-title { font-size: 15px; font-weight: 600; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-title small { color: var(--muted); font-weight: 400; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; }
.check-item:hover { background: var(--panel-2); }
.check-item.done span { color: var(--muted); text-decoration: line-through; }
.check-item .icon-btn { width: 28px; height: 28px; opacity: 0; }
.check-item:hover .icon-btn { opacity: 1; }
.progress { height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; margin-bottom: 8px; }
.progress i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.comment { display: flex; gap: 10px; margin-bottom: 14px; }
.comment .c-body { background: var(--panel-2); border-radius: 4px 14px 14px 14px; padding: 7px 12px; min-width: 0; }
.comment .c-body b { font-size: 13px; }
.comment .c-body small { color: var(--muted); margin-left: 6px; font-size: 12px; }
.comment .c-body div { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-input { display: flex; gap: 8px; align-items: flex-end; }
.comment-input textarea { min-height: 42px; height: 42px; }
.files-list { display: grid; gap: 6px; }
.task-foot { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.task-foot .btn { margin-left: auto; }

/* ---------- team ---------- */
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.stat {
  display: inline-flex; align-items: baseline; gap: 8px; height: 38px; padding: 0 14px; border-radius: 19px;
  background: var(--panel); border: 1px solid var(--line); font-weight: 500;
}
.stat b { font-size: 17px; font-variant-numeric: tabular-nums; }
.stat.on { background: var(--sel); border-color: var(--sel); color: #fff; }
.stat.warn b { color: #B87A00; }
.stat.on.warn b { color: var(--amber); }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.badge-card {
  position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 0 14px; text-align: left; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 0; overflow: hidden;
}
.badge-card:hover { border-color: #B9C5D0; }
:root[data-theme="dark"] .badge-card:hover { border-color: #3B4C5C; }
.badge-card.off { opacity: .62; }
.badge-card .avatar { border-radius: 14px; }
.badge-card .avatar img { border-radius: 14px; }
.badge-card .bc-name { font-weight: 600; font-size: 16px; line-height: 1.25; padding-right: 34px; }
.badge-card .bc-pos { color: var(--muted); font-size: 13px; margin-top: 2px; }
.status-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; font-weight: 600; }
.status-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-tag.active { color: var(--green); }
.role-chip { display: inline-block; margin: 7px 0 0 10px; padding: 1px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--blue-soft); color: var(--blue); vertical-align: 1px; }
.role-chip.owner { background: rgba(242,169,0,.18); color: #8A5A00; }
:root[data-theme="dark"] .role-chip.owner { color: #F5C451; }
.status-tag.terminated { color: var(--red); }
.badge-card .bc-sched { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.badge-card .bc-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 12px -14px 0; padding: 9px 14px;
  background: var(--panel-2); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.badge-card .bc-foot span { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.badge-card .bc-foot .docs-ok { color: var(--green); }
.badge-card .bc-foot .docs-miss { color: #B87A00; }
:root[data-theme="dark"] .badge-card .bc-foot .docs-miss { color: #F5C451; }
.badge-card .write { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; color: var(--blue); }
.profile-top { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.profile-top .avatar { border-radius: 20px; }
.profile-top .avatar img { border-radius: 20px; }
.profile-top h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.profile-top .muted { margin-top: 2px; }
.photo-btn { position: relative; border-radius: 20px; }
.photo-btn .cam { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--panel); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.private-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); background: var(--panel-2); border-radius: 10px; padding: 8px 12px; margin: 6px 0 4px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
.doc-row .grow small { display: block; color: var(--muted); font-size: 12px; }
.doc-row .state { font-size: 13px; font-weight: 600; }
.doc-row .state.ok { color: var(--green); }
.doc-row .state.ext { color: var(--blue); }
.doc-row .state.miss { color: #B87A00; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.hist-row { display: grid; grid-template-columns: 130px 110px 1fr 32px; gap: 8px; margin-bottom: 6px; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rail {
    order: 2; flex-direction: row; justify-content: space-around; padding: 4px 8px; padding-bottom: max(4px, env(safe-area-inset-bottom));
    gap: 0; border-top: 1px solid rgba(255,255,255,.06);
  }
  .rail .logo, .rail .spacer { display: none; }
  .nav-btn { width: auto; flex: 1; max-width: 96px; }
  .nav-btn.active::before { left: 30%; right: 30%; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .me-btn { margin: 0 8px; }
  .chat-view { grid-template-columns: 1fr; }
  .chat-view .conv { display: none; }
  .chat-view.show-conv .chat-list-pane { display: none; }
  .chat-view.show-conv .conv { display: flex; }
  #app.in-conv { grid-template-rows: 1fr 0; }
  #app.in-conv .rail { display: none; }
  .conv-head .back { display: inline-grid; }
  .conv-head { padding-left: 4px; padding-top: env(safe-area-inset-top); height: calc(60px + env(safe-area-inset-top)); }
  .pane-head, .page-head { padding-top: max(10px, env(safe-area-inset-top)); }
  .pane-head { height: auto; min-height: 60px; }
  .msg-tools { display: none; }
  .bubble { max-width: 86%; }
  .page-head { padding: 12px 14px 10px; }
  .page-head h1 { font-size: 20px; }
  .page-head .search { flex: 1 1 100%; order: 5; }
  .page-head .push { margin-left: auto; }
  .page-head .push .btn span.lbl { display: none; }
  .page-body { padding: 14px 14px 30px; }
  .board { min-width: 0; grid-template-columns: repeat(3, 84vw); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px; }
  .col { scroll-snap-align: center; }
  .trow { grid-template-columns: 28px 1fr auto; }
  .ptiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ptile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border-left-width: 1px; border-top-width: 5px; }
  .ptile.urgent { border-top-color: var(--p-urgent); } .ptile.high { border-top-color: var(--p-high); } .ptile.normal { border-top-color: var(--p-normal); }
  .ptile.urgent, .ptile.high, .ptile.normal, .ptile.urgent:hover, .ptile.high:hover, .ptile.normal:hover { border-left-color: var(--line); }
  .ptile .pdot { display: none; }
  .ptile b { font-size: 22px; order: -1; }
  .ptile small { display: none; }
  .ptiles-all { grid-column: 1 / -1; justify-self: start; }
  .trow .tr-who, .trow .tr-more { display: none; }
  .drawer { width: 100vw; }
  .drawer-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .props { grid-template-columns: 100px 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .hist-row { grid-template-columns: 1fr 1fr 32px; }
  .hist-row .h-note { grid-column: 1 / 3; }
  .fab-down { bottom: 80px; right: 14px; }
  .composer { padding: 6px 8px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* ---------- 2.0: companies, chat extras, files, departments, disposal ---------- */
.rail .logo { position: relative; border-radius: 12px; padding: 4px; }
.rail .logo:hover { background: var(--rail-hover); }
.logo-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--rail); }
.company-switch { display: flex; align-items: center; gap: 6px; padding: 12px 16px 0; font-size: 16px; text-align: left; min-width: 0; color: var(--ink); }
.company-switch b { min-width: 0; }
.company-switch:disabled { cursor: default; }
.company-switch:not(:disabled):hover { color: var(--blue); }
.menu-label { padding: 6px 12px 4px; font-size: 12px; color: var(--muted); }
.menu .company-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; text-align: left; }
.menu .company-item:hover { background: var(--field); }
.menu .company-item.on { font-weight: 600; }
.menu .company-item .ico { color: var(--blue); }

.react-bar { display: flex; gap: 2px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .react-bar button.react-pick { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 20px; border-radius: 50%; }
.menu .react-bar button.react-pick:hover { background: var(--field); transform: scale(1.15); }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; clear: both; }
.reaction { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--blue-soft); font-size: 14px; }
.reaction b { font-size: 12px; color: var(--blue); }
.reaction.mine { background: var(--blue); }
.reaction.mine b { color: #fff; }
.own .reaction { background: rgba(42,111,209,.16); }
.own .reaction.mine { background: var(--blue); }

.emoji-btn { margin-left: 0 !important; }
.emoji-pop {
  position: absolute; right: 56px; bottom: calc(100% + 6px); z-index: 12; width: min(360px, calc(100vw - 24px)); background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.emoji-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.emoji-tab { width: 36px; height: 32px; border-radius: 8px; font-size: 18px; display: grid; place-items: center; color: var(--muted); }
.emoji-tab.on { background: var(--field); color: var(--ink); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; max-height: 250px; overflow-y: auto; }
.emoji { height: 38px; border-radius: 8px; font-size: 23px; line-height: 1; }
.emoji:hover { background: var(--field); }

.task-bubble { width: min(440px, 86%); max-width: min(440px, 86%); }
.tk-who { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.task-card { border-left: 4px solid var(--p-normal); background: var(--panel-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
:root[data-theme="dark"] .task-card { background: rgba(0,0,0,.18); }
.own .task-card { background: rgba(255,255,255,.55); }
:root[data-theme="dark"] .own .task-card { background: rgba(0,0,0,.18); }
.task-card.p-urgent { border-left-color: var(--p-urgent); }
.task-card.p-high { border-left-color: var(--p-high); }
.task-card:hover .tk-head b { text-decoration: underline; }
.tk-head { display: flex; gap: 8px; align-items: flex-start; color: var(--blue); margin-bottom: 6px; }
.tk-head b { color: var(--ink); }
.tk-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.tk-grid dt { color: var(--muted); }
.tk-grid dd { margin: 0; min-width: 0; }
.tk-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-status { font-weight: 600; }
.tk-status.doing { color: var(--blue); }
.tk-status.done { color: var(--green); }
.head-task { height: 34px; padding: 0 12px; }

.file-att-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.file-att-row .file-att { flex: 1; min-width: 0; }
.save-drive { width: 32px; height: 32px; opacity: .55; }
.file-att-row:hover .save-drive { opacity: 1; }
.fi { border-radius: 10px !important; flex: none; display: grid; place-items: center; color: #fff; background: #7A8896; }
.fi b { font-size: 11px; letter-spacing: .02em; }
.fi.kind-pdf { background: #D9483B; }
.fi.kind-xls { background: #1E8E4E; }
.fi.kind-doc { background: #2F65C8; }
.fi.kind-ppt { background: #D2692D; }
.fi.kind-zip { background: #8A6A3D; }
.fi.kind-img { background: #8D5FD3; }
.fi.kind-vid { background: #C7417A; }
.fi.kind-aud { background: #2A9A9C; }
.fi.kind-txt { background: #6E7D8C; }
.pick-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.photo-btn.round, .photo-btn.round .avatar, .photo-btn.round img { border-radius: 50% !important; }
.pick-item.on { background: var(--blue-soft); color: var(--blue); }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.crumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.crumb:hover { background: var(--field); }
.crumb:last-child { color: var(--ink); font-weight: 600; }
.crumb-sep { color: var(--muted); }
.modal .crumbs { margin-bottom: 4px; }

.dept-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.dept-chip-wrap { display: inline-flex; align-items: center; }
.dept-chip { --dc: var(--muted); display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--panel); border: 1px solid var(--line); font-weight: 500; }
.dept-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dc); }
.dept-chip small { color: var(--muted); }
.dept-chip.on { border-color: var(--dc); box-shadow: inset 0 0 0 1px var(--dc); }
.dept-chip.on:first-child { background: var(--sel); color: #fff; border-color: var(--sel); box-shadow: none; }
.dept-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.dept-tag { --dc: var(--muted); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; color: var(--dc); background: color-mix(in srgb, var(--dc) 13%, transparent); }
.color-row { display: flex; gap: 8px; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; }
.color-dot.on { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--ink); }
.dept-select { width: auto; height: 38px; }
.emp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.restore { color: var(--green); }
.role-chip.chief { background: rgba(141,116,214,.16); color: #6B4FC4; }
:root[data-theme="dark"] .role-chip.chief { color: #B9A6F0; }

.crumbs-bar { flex: none; padding: 8px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.upload-progress { flex: none; height: 4px; background: var(--field); }
.upload-progress i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.page.dropping .page-body { outline: 2px dashed var(--blue); outline-offset: -10px; background: var(--blue-soft); }
.drive-list { max-width: 980px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.drive-row { display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.drive-row:last-child { border-bottom: 0; }
.drive-row:hover { background: var(--panel-2); }
.drive-row small { color: var(--muted); font-size: 13px; }
.drive-ico.folder { width: 40px; height: 40px; display: grid; place-items: center; color: #D99A1E; flex: none; }
.drive-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--field); }
.drive-name { font-weight: 500; }
.drive-date { white-space: nowrap; }
.drive-empty { max-width: 520px; margin: 40px auto; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: 18px; padding: 36px 20px; }
.drive-empty .ico { color: var(--line); }

.disp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; max-width: 980px; }
.disp-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.disp-stat small { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; }
.disp-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.disp-stat em { font-style: normal; font-size: 12px; color: #B87A00; }
.disp-stat.cost { border-color: rgba(141,116,214,.45); }
.month-input { height: 32px; padding: 0 8px; }
.disp-list { display: grid; gap: 8px; max-width: 980px; }
.disp-card { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--p-high); border-radius: 12px; cursor: pointer; }
.disp-card.disposed { border-left-color: var(--p-normal); }
.disp-card:hover { border-color: #B9C5D0; }
.disp-card.pending:hover { border-left-color: var(--p-high); }
.disp-card.disposed:hover { border-left-color: var(--p-normal); }
.disp-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--field); }
.disp-thumb.empty { display: grid; place-items: center; color: var(--muted); }
.disp-part { font-weight: 600; font-size: 16px; letter-spacing: .01em; }
.disp-part small { font-weight: 400; color: var(--muted); font-size: 13px; }
.disp-desc { color: var(--ink-2); font-size: 14px; }
.disp-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.disp-status { display: inline-flex; align-items: center; gap: 4px; color: #B87A00; font-weight: 500; }
.disp-status.done { color: var(--green); }
.disp-quick { flex: none; }
.disp-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(242,169,0,.14); color: #8A5A00; margin-bottom: 14px; }
.disp-head.disposed { background: var(--green-soft); color: var(--green); }
.disp-head small { display: block; color: var(--ink-2); }
:root[data-theme="dark"] .disp-head { color: #F5C451; }
.disp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.disp-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--field); }
.disp-photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.disp-photo .icon-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(0,0,0,.55); color: #fff; }
.disp-photo.add { display: grid; place-items: center; color: var(--blue); border: 2px dashed var(--line); background: transparent; }
.disp-loss { margin-top: 16px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; font-size: 14px; }

@media (max-width: 760px) {
  .nav-btn { font-size: 10px; padding: 7px 0 5px; }
  .nav-btn .ico svg { width: 22px; height: 22px; }
  .head-task .lbl, .disp-quick .lbl { display: none; }
  .head-task { width: 38px; padding: 0; }
  .emp-actions .lbl { display: none; }
  .drive-date { display: none; }
  .disp-thumb { width: 52px; height: 52px; }
  .emoji-pop { right: 0; }
  .company-switch { padding-top: max(12px, env(safe-area-inset-top)); }
}

/* ---------- company logo ---------- */
.cmark { display: inline-grid; place-items: center; flex: none; border-radius: 24%; overflow: hidden; background: transparent;
  box-shadow: 0 0 0 1px rgba(16,32,48,.1); }
.cmark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rail .logo.has-logo { margin-bottom: 12px; padding: 2px; border-radius: 14px; }
.rail .logo.has-logo .cmark { box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.company-switch .cmark, .company-switch .avatar { margin-right: 2px; }
.company-item .cmark { box-shadow: 0 0 0 1px var(--line); }

/* ---------- sign-in languages ---------- */
.lang-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.lang-chip { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; color: var(--muted); border: 1px solid var(--line); }
.lang-chip:hover { color: var(--ink); border-color: var(--muted); }
.lang-chip.on { color: var(--ink); background: var(--field); border-color: transparent; font-weight: 600; }

/* ---------- time zones ---------- */
.tz-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.tz-bar > .ico { color: var(--blue); }
.tzb-note { font-weight: 500; }
.tzb-clock { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 9px; background: var(--field); white-space: nowrap; }
.tzb-clock > span { color: var(--muted); }
.tzb-clock b { font-variant-numeric: tabular-nums; color: var(--ink); }
.tzb-clock small { color: var(--muted); font-size: 12px; }
.dz { display: grid; gap: 2px; font-size: 13px; }
.dz-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dz-main .ico { color: var(--blue); }
.dz-zone { font-size: 12px; padding: 1px 7px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.dz-second { color: var(--muted); padding-left: 21px; }
.dz-edit { display: grid; gap: 8px; }
.dz-inputs { display: flex; gap: 8px; flex-wrap: wrap; }
.dz-inputs .input { width: auto; flex: 1 1 150px; max-width: 200px; }
.dz-inputs .dz-time { flex: 0 1 130px; }
.dz-preview { min-height: 20px; font-size: 13px; }
.dz-preview .muted { font-size: 12px; line-height: 1.35; }
.dz-cell { display: grid; gap: 6px; justify-items: start; }
.dz-clear { height: 28px; padding: 0 10px; }

/* ---------- company settings ---------- */
.modal.cs-modal { width: min(780px, 100%); }
.modal.le-modal { width: min(720px, 100%); }
.cs-tabs { margin-bottom: 14px; align-self: flex-start; }
.cs-body { display: grid; gap: 12px; }
.cs-section { font-weight: 600; font-size: 14px; margin-top: 8px; }
.cs-section.first { margin-top: 0; }
.cs-note { margin: -6px 0 0; font-size: 13px; }
.cs-logo-row { display: flex; gap: 16px; align-items: flex-start; }
.cs-logo { width: 96px; height: 96px; flex: none; border-radius: 24%; overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(16,32,48,.12); background: var(--panel); }
.cs-logo.empty { background: var(--field); color: var(--muted); box-shadow: none; border: 1.5px dashed var(--line); }
.cs-logo img { width: 100%; height: 100%; object-fit: contain; }
/* a row of controls with even gaps */
.inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inline.wrap { flex-wrap: wrap; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; width: 34px; height: 34px; border-radius: 50%; padding: 3px; border: 2px solid transparent; cursor: pointer; display: inline-block; }
.swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch.on { border-color: var(--ink); }
.swatch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.wall-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.wall-tile { aspect-ratio: 3 / 4; border-radius: 10px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); cursor: pointer; }
.wall-tile.on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--panel); }
.wall-tile.upload { display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; font-size: 11px; line-height: 1.15;
  color: var(--muted); background: var(--field); box-shadow: none; border: 1.5px dashed var(--line); padding: 4px; }
.wall-tile.upload:hover { color: var(--ink); border-color: var(--muted); }
.cs-look { display: grid; grid-template-columns: 1fr 220px; gap: 22px; align-items: start; }
.cs-look-controls { display: grid; gap: 12px; min-width: 0; }
.cs-look-preview { position: sticky; top: 0; display: grid; gap: 8px; }
.le-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.look-preview { display: grid; grid-template-columns: 46px 1fr; height: 250px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 8px 22px rgba(16,32,48,.12); }
.lp-rail { background: var(--rail); display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 10px; }
.lp-nut { color: var(--amber); --hole: var(--rail); }
.lp-rail i { width: 22px; height: 6px; border-radius: 3px; background: var(--rail-ink); opacity: .55; }
.lp-rail i.on { background: var(--rail-fg, #fff); opacity: 1; box-shadow: -11px 0 0 -1px var(--amber); }
.lp-rail .cmark { box-shadow: none; }
.lp-wall { padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.lp-msg { align-self: flex-start; max-width: 85%; background: var(--bubble); color: var(--ink); padding: 6px 10px; border-radius: 12px 12px 12px 4px; font-size: 12px; box-shadow: var(--bubble-shadow); }
.lp-msg.own { align-self: flex-end; background: var(--bubble-own); border-radius: 12px 12px 4px 12px; }
.lp-btn { margin-top: auto; align-self: center; background: var(--blue); color: var(--blue-ink); padding: 6px 14px; border-radius: 9px; font-size: 12px; font-weight: 600; }

/* ---------- logo editor ---------- */
.le { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.le-big { width: 260px; height: 260px; border-radius: 24%; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(16,32,48,.16); background: var(--panel); }
.le-big.checker { background: repeating-conic-gradient(#E6EAEE 0 25%, #FFFFFF 0 50%) 0 0 / 20px 20px; }
.le-img { width: 100%; height: 100%; display: block; }
.le-side { display: grid; gap: 12px; min-width: 0; }
.le-mocks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.le-rail { background: var(--rail); padding: 10px; border-radius: 12px; }
.le-rail .cmark { box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.le-list { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); max-width: 220px; font-size: 14px; }
.le-fav { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px 8px 0 0; background: var(--field); font-size: 12px; max-width: 170px; color: var(--ink-2); }
.le-fav .cmark { border-radius: 4px; box-shadow: none; }
.le-side .seg { flex-wrap: wrap; }
.le-side input[type=range] { width: 100%; accent-color: var(--blue); }

@media (max-width: 720px) {
  .cs-look { grid-template-columns: 1fr; }
  .cs-look-preview { position: static; order: -1; }
  .look-preview { height: 170px; }
  .le { grid-template-columns: 1fr; justify-items: center; }
  .le-big { width: 200px; height: 200px; }
  .le-side { width: 100%; }
  .tz-bar { font-size: 12px; gap: 6px; padding: 8px 10px; }
  .tz-bar > .ico, .tz-bar .grow, .tzb-clock small { display: none; }
  .tzb-note { flex: 1 1 100%; }
  .tzb-clock { padding: 3px 8px; }
}

/* ---------- threads ---------- */
.chat-view { position: relative; }
.chat-view.show-thread { grid-template-columns: minmax(260px, 320px) 1fr minmax(340px, 400px); }
.thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--panel); z-index: 3; }
.thread-head { height: 60px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.thread-head .grow { min-width: 0; }
.thread-head b { display: block; font-weight: 600; }
.thread-head small { display: block; font-size: 13px; color: var(--muted); }
.thread-head .back { display: none; }
.thread-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 0 6px; overscroll-behavior: contain; }
.thread-body .msgs-inner { padding: 0 10px; }
.thread-body .bubble { max-width: 88%; }
.thread-sep { display: flex; align-items: center; gap: 10px; margin: 10px 4px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.thread-sep::before, .thread-sep::after { content: ""; flex: 1; height: 1px; background: rgba(23,33,43,.14); }
:root[data-theme="dark"] .thread-sep::before, :root[data-theme="dark"] .thread-sep::after { background: rgba(255,255,255,.14); }
.thread-sep { color: var(--ink-2); text-shadow: 0 0 6px var(--wall-bg); }
.thread-composer { background: transparent; }
.also-chat { display: flex; align-items: center; gap: 7px; max-width: 780px; margin: 6px auto 0; padding-left: 4px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.also-chat input { accent-color: var(--blue); width: 15px; height: 15px; }
.thread-sum { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 6px 6px 2px 0; border-top: 1px solid rgba(23,33,43,.08);
  color: var(--blue); font-size: 13px; text-align: left; }
.msg-row.own .thread-sum { border-top-color: rgba(23,33,43,.1); }
:root[data-theme="dark"] .thread-sum { border-top-color: rgba(255,255,255,.1); }
.thread-sum:hover b { text-decoration: underline; }
.thread-sum .ts-avs { display: inline-flex; }
.thread-sum .ts-avs .avatar { font-size: 9px !important; box-shadow: 0 0 0 2px var(--bubble); }
.msg-row.own .thread-sum .ts-avs .avatar { box-shadow: 0 0 0 2px var(--bubble-own); }
.thread-sum .ts-avs .avatar + .avatar { margin-left: -6px; }
.thread-sum b { font-weight: 600; white-space: nowrap; }
.thread-sum .ts-when { color: var(--meta); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-sum.new .ts-when { color: var(--blue); font-weight: 600; }
.thread-sum.new .ts-when::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 5px; vertical-align: 1px; }
.thread-sum > .ico { color: var(--meta); }
.task-bubble .thread-sum { margin-top: 8px; }
.thread-ref { display: flex; align-items: center; gap: 5px; max-width: 100%; margin: 0 0 4px; font-size: 12px; color: var(--meta); }
.thread-ref:hover { color: var(--blue); }
@media (max-width: 1100px) {
  .chat-view.show-thread { grid-template-columns: minmax(280px, 340px) 1fr; }
  .thread-pane { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); box-shadow: var(--shadow-lg); }
}
@media (max-width: 760px) {
  .thread-pane { position: fixed; inset: 0; width: 100%; border-left: 0; z-index: 30; }
  .thread-head { padding: env(safe-area-inset-top) 8px 0 4px; height: calc(60px + env(safe-area-inset-top)); }
  .thread-head .back { display: inline-grid; }
  .thread-head .th-close { display: none; }
  .thread-body .bubble { max-width: 86%; }
}

/* the second clock is only for reference: quieter than the US one */
.tzb-clock.ref { background: transparent; padding-left: 4px; font-size: 12px; }
.tzb-clock.ref b { color: var(--muted); font-weight: 600; }
.dz-second { font-size: 12px; }

/* ---------- orders ---------- */
.orders-body { padding-top: 16px; }
.page.viewing-order > .page-head { display: none; }
.olist { display: grid; gap: 8px; max-width: 1100px; margin: 0 auto; }
.orow { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.orow:hover { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.orow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.orow.cancelled { opacity: .62; }
.othumb { width: 56px; height: 56px; border-radius: 10px; background: var(--field); display: grid; place-items: center; overflow: hidden; color: var(--muted); flex: none; }
.othumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.omain { min-width: 0; display: grid; gap: 2px; }
.otop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.otop b { font-size: 15px; font-variant-numeric: tabular-nums; }
.otitle { font-size: 14px; color: var(--ink-2); }
.osub { font-size: 13px; color: var(--muted); }
.oside { display: grid; justify-items: end; gap: 3px; text-align: right; }
.ototal { font-size: 15px; font-variant-numeric: tabular-nums; }
.opills { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.opill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.opill.ok { background: var(--green-soft); color: var(--green); }
.opill.warn { background: rgba(214,155,20,.16); color: #9A6A00; }
:root[data-theme="dark"] .opill.warn { color: #E3B44A; }
.opill.bad { background: var(--red-soft); color: var(--red); }
.opill.info { background: var(--blue-soft); color: var(--blue); }
.opill.muted { background: var(--field); color: var(--muted); }
.ochip { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--field); color: var(--ink-2); }
.ochip.ebay { background: #FFF4CC; color: #6B4E00; }
:root[data-theme="dark"] .ochip.ebay { background: #4A3C10; color: #FFE08A; }
.ochip.web { background: var(--blue-soft); color: var(--blue); }
.ochip.loc { font-weight: 500; }
.orisk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.orisk i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.orisk.low { color: var(--green); } .orisk.medium { color: #C98A00; } .orisk.high { color: var(--red); }
.oshield { color: var(--green); display: inline-flex; }
.ophotos { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.olist-more { display: flex; justify-content: center; padding: 14px; }

.order-page { max-width: 1240px; margin: 0 auto; }
.ohead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.ohead-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ohead-title h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ohead .osmall { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ohead-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ogrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ocol { display: grid; gap: 14px; min-width: 0; }
.ocard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ocard > h3, .ocard-head h3, .otimeline > h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ocard-head { display: flex; align-items: center; gap: 8px; }
.ostate { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.ostate.ok { background: var(--green-soft); color: var(--green); }
.ostate.warn { background: rgba(214,155,20,.18); color: #9A6A00; }
.ostate.bad { background: var(--red-soft); color: var(--red); }
.ofo-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.ofo-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ofo-lines { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.ofo-lines > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ofo-lines .ico { color: var(--muted); }
.oitem { display: flex; gap: 12px; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--line); }
.oitem:first-of-type { border-top: 0; }
.oitem .othumb { width: 52px; height: 52px; }
.oi-title { font-weight: 500; line-height: 1.3; }
.oi-price { display: grid; justify-items: end; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; }
.osmall { font-size: 12px; }
.osmall.cost { display: inline-flex; align-items: center; gap: 4px; color: #8A5A00; margin-top: 2px; }
.icon-btn.mini { width: 24px; height: 24px; }
.btn.mini-btn { height: 30px; padding: 0 10px; font-size: 13px; }
.pay-row { display: flex; gap: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pay-row > span:first-child { min-width: 110px; }
.pay-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-row > span:last-child { white-space: nowrap; }
.pay-row.strong { font-weight: 600; }
.ocard hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.addr { display: grid; gap: 1px; font-size: 14px; }
.otags { display: flex; gap: 6px; flex-wrap: wrap; }
.pre { white-space: pre-wrap; font-size: 14px; }
.risk-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.risk-bar i { height: 6px; border-radius: 3px; background: var(--field); }
.risk-bar.low i.on { background: var(--green); }
.risk-bar.medium i.on { background: #E0A100; }
.risk-bar.high i.on { background: var(--red); }
.risk-labels { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 12px; color: var(--muted); margin-top: -4px; }
.risk-labels .on { color: var(--ink); font-weight: 600; }
.risk-text { margin: 0; font-size: 13px; }
.risk-facts { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; }
.risk-facts .negative { color: var(--red); } .risk-facts .positive { color: var(--green); }
.verdict { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.3; }
.verdict .ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.verdict.ok .ico { background: var(--green); color: #fff; }
.verdict.bad .ico { background: var(--red); color: #fff; }
.verdict.warn .ico { background: #E0A100; color: #fff; }
.verdict.na .ico { background: var(--field); color: var(--muted); }
.verdict .ico svg { width: 13px; height: 13px; stroke-width: 2.6; }
.verdict.bad { color: var(--red); font-weight: 600; }

.otimeline { display: grid; gap: 8px; }
.ocomment { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: visible; }
.ocomment-row { display: flex; gap: 10px; padding: 12px 12px 6px; align-items: flex-start; }
.ocomment-input { width: 100%; border: 0; outline: 0; resize: vertical; min-height: 42px; background: transparent; font: inherit; padding: 6px 0; }
.ocomment-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; }
.ocomment-files .att-thumb.doc { background: var(--field); display: grid; place-items: center; }
.ocomment-tools { display: flex; align-items: center; gap: 2px; padding: 6px 8px 8px; background: var(--panel-2); border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
.tool-glyph { font-size: 16px; font-weight: 600; color: var(--muted); line-height: 1; }
.ocomment progress { width: calc(100% - 24px); margin: 0 12px 10px; }
.ocomment-note { text-align: right; margin-top: -4px; }
.otl { display: grid; gap: 8px; padding-left: 14px; border-left: 2px solid var(--line); margin-left: 16px; }
.otl-day { font-size: 12px; color: var(--muted); font-weight: 600; margin: 8px 0 0 6px; }
.otl-event { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 2px 6px; position: relative; }
.otl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 3px var(--bg); position: absolute; left: -21px; top: 6px; }
.otl-note { display: flex; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-left: -6px; }
.otl-note.shipped { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.otl-note.store { background: var(--panel-2); }
.otl-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.otl-text { white-space: pre-wrap; font-size: 14px; margin-top: 3px; overflow-wrap: anywhere; }
.otl-ship { display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; margin-top: 3px; }
.otl-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 8px; }
.otl-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: zoom-in; background: var(--field); }
.oref { color: var(--blue); font-weight: 600; }
.oref:hover { text-decoration: underline; }
.shop-ok { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-weight: 600; }
.ship-items { display: grid; gap: 2px; }

/* ---------- camera: shoot in a row ---------- */
.cam { position: fixed; inset: 0; z-index: 200; background: #000; color: #fff; display: flex; flex-direction: column; }
.cam-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.cam-top .icon-btn, .cam-bar .icon-btn { color: #fff; }
.cam-view { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.cam-view video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.on { animation: camflash .25s ease-out; }
@keyframes camflash { from { opacity: .85; } to { opacity: 0; } }
.cam-note { position: absolute; left: 20px; right: 20px; text-align: center; font-size: 15px; color: #ddd; }
.cam-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; min-height: 76px; }
.cam-shot { position: relative; flex: none; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: #222; }
.cam-shot img { width: 100%; height: 100%; object-fit: cover; }
.cam-shot .icon-btn { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; }
.cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 18px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.cam-gal { justify-self: start; width: 48px; height: 48px; }
.cam-shutter { width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #000, 0 0 0 7px #fff; }
.cam-shutter:active { transform: scale(.94); }
.cam-done { justify-self: end; }

/* delivery method the customer picked; next-day and 2-3 day stand out */
.oship { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.oship > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oship .ico { flex: none; color: var(--muted); }
.oship.quick, .oship.fast { height: 22px; padding: 0 8px; border-radius: 11px; }
.oship.quick { background: rgba(214,155,20,.16); color: #9A6A00; }
.oship.quick .ico { color: currentColor; }
.oship.fast { background: var(--red-soft); color: var(--red); }
.oship.fast .ico { color: currentColor; }
:root[data-theme="dark"] .oship.quick { color: #E3B44A; }
.oship-line { display: flex; min-width: 0; margin-top: 2px; }
.ofo-meta .oship { font-size: 13px; }

/* order header: buttons that look like buttons, and up/down between orders */
.ohead-actions { align-items: center; }
.ohead-actions .btn.omore, .onav-btn { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.ohead-actions .btn.omore:hover, .onav-btn:hover:not(:disabled) { background: var(--field); }
.ohead-actions .btn.ophoto-btn { box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.onav { display: inline-flex; gap: 4px; }
.onav-btn { width: 38px; padding: 0; }

/* invoice / packing slip: only on paper */
.print-doc { display: none; }
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body.printing > *:not(.print-doc) { display: none !important; }
  body.printing > .print-doc { display: block !important; }

}
.print-doc { color: #111; font: 12px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.pd-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: 2px solid #111; }
.pd-from { display: flex; gap: 12px; align-items: flex-start; }
.pd-logo { width: 52px; height: 52px; object-fit: contain; }
.pd-store { font-size: 16px; font-weight: 700; }
.pd-title { text-align: right; }
.pd-kind { font-size: 22px; font-weight: 800; letter-spacing: .04em; margin-bottom: 4px; }
.pd-addrs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 14px 0 10px; }
.pd-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #555; margin-bottom: 3px; }
.pd-method { margin-bottom: 12px; font-size: 13px; }
.pd-method .pd-label { display: inline; }
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #555; border-bottom: 1px solid #999; padding: 6px 4px; }
.pd-table td { border-bottom: 1px solid #ddd; padding: 8px 4px; vertical-align: top; }
.pd-table .num { text-align: right; white-space: nowrap; }
.pd-table tr { page-break-inside: avoid; }
.pd-item-in { display: flex; gap: 10px; align-items: flex-start; }
.pd-img { flex: none; width: 64px; height: 64px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.pd-name { font-weight: 600; font-size: 13px; }
.pd-sub { color: #555; font-size: 11.5px; }
.pd-qty { font-size: 16px; font-weight: 700; }
.pd-totals { margin: 10px 0 0 auto; border-collapse: collapse; min-width: 280px; }
.pd-totals td { padding: 3px 4px; }
.pd-totals .num { text-align: right; white-space: nowrap; }
.pd-totals tr.strong td { font-weight: 700; border-top: 1px solid #999; padding-top: 6px; }
.pd-count { margin-top: 10px; text-align: right; font-weight: 700; font-size: 13px; }
.pd-foot { margin-top: 24px; padding-top: 10px; border-top: 1px solid #ddd; text-align: center; color: #555; }

/* label: printing again, void */
.olabel-btns { gap: 6px; }
.olabel-btns a.btn, .ofo-lines + .olabel-btns a { text-decoration: none; }
.void-btn { color: var(--red); }

/* label window: choosing the service */
.svc-chosen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.svc-list { display: grid; gap: 6px; }
.svc { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.svc:hover { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.svc.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.svc:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.svc .grow { display: grid; gap: 1px; min-width: 0; }
.svc-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.svc-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); }
.svc.on .svc-dot { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 4px, transparent 5px); }
.svc-badge { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--blue-soft); color: var(--blue); }
.svc-badge.fast { background: var(--red-soft); color: var(--red); }
/* label prices from Shippo (2.4.6) */
.svc-badge.cheap { background: var(--green-soft); color: var(--green); }
.lbl-est { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 10px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.lbl-est:hover { background: var(--panel-2); }
.lbl-est .est-low { color: var(--green); font-weight: 600; }
/* pinned messages bar (2.4.6) */
.pinbar { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 16px; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 50px; }
.pinbar[hidden] { display: none; }
.pin-ticks { display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; }
.pin-ticks i { width: 3px; flex: 1; max-height: 16px; border-radius: 2px; background: var(--line); }
.pin-ticks i.on { background: var(--blue); }
.pin-main { flex: 1; min-width: 0; display: grid; text-align: left; background: none; border: 0; padding: 2px 0; color: var(--ink); font: inherit; cursor: pointer; }
.pin-main b { color: var(--blue); font-size: 13px; }
.pin-main span { font-size: 13px; color: var(--ink-2); }
/* 2.9.2: a pinned photo's thumbnail; the list of all pinned messages */
.pin-thumb { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; flex: none; background: var(--panel-2); }
.pin-list { display: grid; margin: 0 -4px; }
.pin-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.pin-row:last-child { border-bottom: 0; }
.pin-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 4px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 7px; }
.pin-row-main:hover { background: var(--panel-2); }
.pin-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pin-row-text b { font-size: 14px; font-weight: 600; }
.pin-row-text b .muted { font-weight: 400; font-size: 13px; }
.pin-row-text .ellipsis { font-size: 14px; color: var(--ink-2); }
.pin-row-text .ico { display: inline-block; vertical-align: -2px; margin-right: 4px; opacity: .8; }
.sys-msg.clickable { cursor: pointer; }
.sys-msg.clickable:hover { text-decoration: underline; }
/* search in a chat */
.conv-head.finding { gap: 6px; }
.find-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 20px; background: var(--field); color: var(--muted); }
.find-wrap .find-in { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: none; box-shadow: none; }
.find-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.found-list { max-height: min(55vh, 460px); overflow: auto; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.08); position: relative; z-index: 3; }
.found-list[hidden] { display: none; }
.found { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; cursor: pointer; }
.found:hover, .found.on { background: var(--panel-2); }
.found .grow { display: grid; gap: 2px; min-width: 0; }
.found-top { display: flex; justify-content: space-between; gap: 8px; }
.found-text { font-size: 13px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.found mark, mark.hit { background: #FFE27A; color: #1A1A1A; border-radius: 3px; padding: 0 1px; }
.found-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600; }
@media (max-width: 760px) { .find-count { display: none; } }
/* pinned chats */
.ci-pin { display: inline-flex; color: var(--muted); margin-left: auto; transform: rotate(35deg); }
.chat-item.active .ci-pin { color: #fff; }
.chat-item.pinned:not(.active) { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.pin-btn.on { color: var(--blue); }
.pin-btn svg { transform: rotate(35deg); }
.svc-price { margin-left: auto; padding-left: 10px; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-price.loading { color: var(--muted); font-weight: 500; }
.svc.no-rate .svc-price { color: var(--muted); font-weight: 500; }
.rates-note { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.rates-note:empty { display: none; }
.shippo-box { display: grid; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.customs { display: grid; gap: 8px; }
.customs-row { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }

@media (max-width: 900px) {
  .ogrid { grid-template-columns: 1fr; }
  .ocol.side { order: -1; }
}
@media (max-width: 760px) {
  .orow { grid-template-columns: 48px 1fr; gap: 10px; }
  .orow .othumb { width: 48px; height: 48px; }
  .oside { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; text-align: left; }
  .oside small, .orisk, .opill { white-space: nowrap; }
  .oside .opills { justify-content: flex-start; }
  .ohead { flex-wrap: wrap; }
  .ohead-actions { width: 100%; justify-content: stretch; }
  .ohead-actions .btn { flex: 1; }
  .ohead-actions .onav-btn { flex: none; }
  /* one row on a phone: photos (wide), ⋮, ↑, ↓ */
  .ohead-actions { flex-wrap: nowrap; }
  .ohead-actions .ophoto-btn { flex: 1 1 auto; min-width: 0; }
  .ohead-actions .ophoto-btn .lbl { overflow: hidden; text-overflow: ellipsis; }
  .ohead-actions .btn.omore { flex: none; width: 42px; padding: 0; }
  .ohead-actions .btn.omore .lbl { display: none !important; }
  .ohead-actions .btn .lbl { display: inline !important; }
  /* phone: one column, cards in the order the warehouse needs them —
     items and delivery method, then who and where to, then the rest; the timeline last */
  .ogrid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .ogrid > .ocol { display: contents; }
  .ogrid .o-payagain { order: 0; } .ogrid .o-items { order: 1; } .ogrid .o-pickup { order: 1; } .ogrid .o-cust { order: 2; } .ogrid .o-ship { order: 3; } .ogrid .o-note { order: 4; }
  .ogrid .o-pay { order: 5; } .ogrid .o-chan { order: 6; } .ogrid .o-bill { order: 7; } .ogrid .o-risk { order: 8; }
  .ogrid .o-tags { order: 9; } .ogrid .o-tl { order: 10; }
  .otl { margin-left: 6px; }
  .pay-row > span:first-child { min-width: 84px; }
}
.nav-btn { width: 70px; }
.nav-btn > .nav-lbl { letter-spacing: -.01em; max-width: 68px; text-align: center; overflow-wrap: anywhere; line-height: 1.15; }
@media (max-width: 760px) { .nav-btn { width: auto; } }

/* ----- 2.2: group members ----- */
.member-row { padding: 4px 8px; }
.member-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; padding: 3px 0; }
.member-open .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.sys-members .bubble, .sys-line { color: var(--muted); }

/* ----- 2.2: access checkboxes on the employee card ----- */
.perms { display: grid; gap: 6px; }
.perm-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 14px; cursor: pointer; }
.perm-row input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.perm-row.sub { padding-left: 28px; font-size: 14px; }
.perm-row.off { color: var(--muted); cursor: default; }

/* ----- 2.2: order actions ----- */
.ocard-title { display: flex; align-items: center; gap: 6px; }
.ocard-title h3 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.ocard-head .inline { display: inline-flex; gap: 8px; }
.qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 2px; flex: none; }
.qty .icon-btn.mini { width: 30px; height: 30px; }
.qty .icon-btn:disabled { opacity: .35; }
.qty-val { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.eitems { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); } /* 2.12.3: a long part name never pushes the dialog sideways on a phone */
.eitem { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.eitem:first-child { border-top: 0; }
.eitem .grow { min-width: 0; }
.eitem.gone .ellipsis { text-decoration: line-through; color: var(--muted); }
.eitem.new { background: color-mix(in srgb, var(--blue) 6%, transparent); border-radius: 10px; padding: 9px 8px; margin: 2px 0; border-top: 0; }
.echange { color: var(--blue); font-weight: 500; }
.othumb.sm { width: 40px; height: 40px; border-radius: 8px; }
.ppick { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.ppick-list { display: grid; max-height: 300px; overflow: auto; }
.ppick-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; text-align: left; width: 100%; }
.ppick-row:hover, .ppick-row:focus-visible { background: var(--panel); }
.ppick-row .grow { min-width: 0; }
.ppick-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.citem { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.dims { display: flex; align-items: center; gap: 8px; }
.dims .input { min-width: 0; }
.form-grid.three { grid-template-columns: 2fr 1fr 1fr; }
.refund-sum { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.otl-note.sys .otl-ship { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 14px; }
.otl-note.sys.label { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.otl-note.sys.refund { border-color: color-mix(in srgb, var(--orange, #E8A33D) 45%, var(--line)); }
.otl-note.sys.cancelled { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.otl-note.sys.edited { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.orow.draft .othumb { width: 44px; height: 44px; }
.draft-addr { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 760px) {
  .form-grid.three { grid-template-columns: 1fr 1fr; }
  .form-grid.three > :first-child { grid-column: 1 / -1; }
  .ocard-head { flex-wrap: wrap; }
  .ocard-head .inline { width: 100%; }
  .ocard-head .inline .btn { flex: 1; }
}

/* ----- 2.2: security ----- */
.linkish { color: var(--blue); font-weight: 500; padding: 0; background: none; text-decoration: underline; text-underline-offset: 2px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.auth-card.wide { width: min(560px, 100%); }
.code-in { font-size: 22px; letter-spacing: .18em; font-variant-numeric: tabular-nums; height: 48px; text-align: center; max-width: 240px; }
.tfa-box { display: grid; gap: 12px; }
.tfa-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.tfa-grid { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tfa-qr { width: 196px; height: 196px; flex: none; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tfa-qr svg { width: 100%; height: 100%; display: block; }
.tfa-secret { display: block; font-size: 15px; letter-spacing: .06em; word-spacing: .2em; padding: 8px 10px; margin: 6px 0; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); word-break: normal; overflow-wrap: normal; }
.tfa-grid > .grow { flex: 1 1 220px; min-width: 0; }
.recovery { display: grid; gap: 10px; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); }
.recovery-codes code { font-size: 15px; letter-spacing: .08em; }
.sec-body { display: grid; gap: 12px; }
.sec-card { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.sec-head { display: flex; align-items: center; gap: 10px; }
.sec-head b { font-size: 15px; }
.sec-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.sec-card .inline .input { flex: 1; min-width: 0; }
@media (max-width: 760px) { .tfa-qr { width: 168px; height: 168px; } }
.cs-mail { display: grid; gap: 12px; }

/* tasks: co-assignees */
.task-avs { display: inline-flex; align-items: center; }
.task-avs .avatar { box-shadow: 0 0 0 2px var(--panel); }
.task-avs .avatar + .avatar { margin-left: -8px; }
.task-avs-more { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.pchip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 32px; padding: 0 4px 0 4px; border-radius: 16px; background: var(--field); font-size: 13px; }
.pchip .ellipsis { min-width: 0; }
.pchips-add { width: auto; min-width: 0; max-width: 240px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; background-position: calc(100% - 17px) 13px, calc(100% - 12px) 13px; }

/* language in your own profile */
.lang-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-opt { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line); background: var(--panel); font-size: 14px; font-weight: 600; }
.lang-opt:hover { background: var(--field); }
.lang-opt.on { background: var(--blue); border-color: var(--blue); color: var(--blue-ink); }

/* barcode scanner setup */
.scan-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.scan-test { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px; border: 2px dashed var(--line); border-radius: 14px; font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.scan-test .ico { color: var(--green); flex: none; }
.scan-test .muted { font-size: 14px; }

/* activity in the program */
.badge-card .bc-act { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; margin: 0 -14px; padding: 7px 14px; border-top: 1px solid var(--line);
  background: var(--panel-2); font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-card .bc-act.muted { color: var(--muted); }
.bc-act .ico { color: var(--muted); }
.act-sum { display: flex; gap: 10px; margin-bottom: 10px; }
.act-sum > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 180px; }
.act-sum b { font-size: 18px; }
.act-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.act-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.act-table td { padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.act-table .num { text-align: right; }
/* two-step sign-in reminder and badge */
.nag-2fa { position: fixed; right: 16px; bottom: 16px; z-index: 35; display: flex; align-items: center; gap: 10px; max-width: 460px;
  padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line));
  box-shadow: var(--shadow-lg); }
.nag-2fa > .ico { color: var(--red); }
.nag-2fa .grow { min-width: 0; }
.no2fa-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; margin-left: 4px; height: 21px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; background: var(--red-soft); color: var(--red); }
@media (max-width: 760px) {
  .nag-2fa { left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; }
  .act-table th:nth-child(3), .act-table td:nth-child(3) { display: none; }
}
.order-toast { display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; border: 0; font: inherit; color: inherit; }
/* reminders (notifications, two-step sign-in) stacked at the bottom corner */
.nag-stack { position: fixed; right: 16px; bottom: 16px; z-index: 35; /* under drawers, windows and menus */ display: grid; gap: 8px; width: min(460px, calc(100vw - 32px)); }
.nag-stack:empty { display: none; }
.nag-stack > .nag-2fa, .nag-stack > .push-nag { position: static; max-width: none; }
.push-nag { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 14px; }
@media (max-width: 760px) { .nag-stack { left: 10px; right: 10px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom)); } }
.push-nag > .ico { color: var(--blue); }
.emp-hist { display: grid; gap: 10px; }
.eh-row { display: flex; gap: 10px; align-items: flex-start; }
.eh-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--green); }
.eh-row.terminated .eh-dot { background: var(--red); }
/* sound sets */
.sound-sets { display: grid; gap: 8px; }
.sound-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.cash-row { gap: 8px; align-items: center; margin-top: 4px; }
.cash-row .check-row { margin: 0; }
.sound-set.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.sound-set.on .svc-dot { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 4px, transparent 5px); }
.sound-set b.grow { flex: 1 1 calc(100% - 40px); }
.sound-set .btn { padding: 0 8px; }

/* ----- 2.4: packing slip on one 4×6 inch label ----- */
.print-doc.measure { display: block !important; position: fixed; left: -10000px; top: 0; }
.slip46 { width: 4in; box-sizing: border-box; padding: .14in .16in; font: 10px/1.3 Arial, "Helvetica Neue", sans-serif; color: #000; }
.s46-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid #000; }
.s46-from { display: flex; gap: 6px; align-items: center; min-width: 0; }
.s46-logo { width: .42in; height: .42in; object-fit: contain; }
.s46-store { font-weight: 700; font-size: 12px; line-height: 1.15; }
.s46-kind { font-weight: 800; font-size: 13px; letter-spacing: .05em; margin-top: 2px; }
.s46-qr { text-align: center; font-weight: 700; font-size: 10px; flex: none; }
.s46-qr img { width: .95in; height: .95in; display: block; image-rendering: pixelated; }
.s46-meta { display: flex; gap: 10px; justify-content: space-between; margin: 5px 0; font-size: 10.5px; }
.s46-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #333; }
.s46-to { font-size: 11px; line-height: 1.25; margin-bottom: 4px; }
.s46-method { font-size: 10px; margin-bottom: 5px; }
.s46-items { border-top: 1px solid #000; }
.s46-item { display: grid; grid-template-columns: .5in 1fr auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid #999; break-inside: avoid; }
.s46-img { width: .5in; height: .5in; object-fit: contain; border: 1px solid #ccc; border-radius: 3px; display: block; }
.s46-title { font-weight: 700; font-size: 10px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s46-sub { font-size: 8.5px; color: #333; }
.s46-qty { font-size: 15px; font-weight: 800; }
.s46-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9.5px; font-weight: 700; }
.ret-slip-line { display: flex; align-items: center; gap: 4px; }


/* =====================================================================
   2.4 — the TeamHub look: graphite side menu, orange parcel mark, calm
   panels; the chat stays Telegram-like. Brand lives in the details:
   selection, scrollbars, focus, numerals.
   ===================================================================== */
:root {
  --rail: #1D2027; --rail-ink: #9AA4B0; --rail-fg: #F1F4F7; --rail-hover: rgba(255,255,255,.06); --rail-active: rgba(255,122,26,.15);
  --amber: #FF7A1A; --amber-ink: #2B1200; --brand: #FF7A1A; --brand-2: #6CC200; --brand-soft: rgba(255,122,26,.12);
  --warn: #9A5B00; --warn-soft: rgba(230,150,20,.15); --rail-w: 236px; --ease: cubic-bezier(.22,.8,.24,1);
}
:root[data-theme="dark"] { --rail: #121418; --rail-ink: #8D97A3; --warn: #F2B544; --warn-soft: rgba(242,181,68,.14); --brand-soft: rgba(255,122,26,.16); }
::selection { background: rgba(255,122,26,.26); }
input, textarea { caret-color: var(--blue); }
html { scrollbar-width: thin; scrollbar-color: rgba(110,125,140,.45) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(110,125,140,.42); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(110,125,140,.65); }
::-webkit-scrollbar-track { background: transparent; }
.num, .ototal, .pay-row > span:last-child, .rate-score b, .pod-score, .dfolder-sub { font-variant-numeric: tabular-nums; }
.app-mark { display: block; object-fit: contain; flex: none; }
.btn { transition: background .15s var(--ease), filter .15s, transform .12s var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { box-shadow: 0 1px 2px rgba(20,40,70,.18), inset 0 1px 0 rgba(255,255,255,.12); }

/* ----- side menu ----- */
.rail-co, .rail-nav, .rail-me { display: contents; }
.rail-co-name, .rail-me-name, .rail-fold { display: none; }
.rail .logo { position: relative; color: var(--brand); transform: perspective(420px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease), filter .35s var(--ease); will-change: transform; }
.rail .logo .cmark { position: relative; }
.rail .logo .cmark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.65), rgba(255,255,255,0) 58%); mix-blend-mode: soft-light; }
.rail .logo.tilting { transition: transform .09s linear, filter .2s; transform: perspective(420px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.08);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); }
.rail .logo.tilting .cmark::after { opacity: 1; }
.rail .logo.spin { animation: logo-spin .9s var(--ease); }
@keyframes logo-spin { 0% { transform: perspective(420px) rotateY(0) scale(1); } 40% { transform: perspective(420px) rotateY(190deg) scale(.9); } 100% { transform: perspective(420px) rotateY(360deg) scale(1); } }
.rail .logo:hover { background: transparent; }
@media (min-width: 761px) {
  #app { grid-template-columns: var(--rail-w) 1fr; }
  #app.rail-slim { --rail-w: 78px; }
  .rail { align-items: stretch; padding: 14px 12px 12px; gap: 0; overflow: hidden auto; border-right: 1px solid rgba(255,255,255,.04); }
  .rail-co { display: flex; align-items: center; gap: 8px; padding: 0 2px 14px; margin: 0 -2px 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .rail .logo { margin: 0; padding: 2px; border-radius: 14px; }
  .rail-co-name { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; padding: 7px 8px; border-radius: 9px; color: var(--rail-fg); font-weight: 600; font-size: 15px; line-height: 1.2; text-align: left; }
  .rail-co-name:hover { background: var(--rail-hover); }
  .rail-co-name .ico { color: var(--rail-ink); }
  .rail-nav { display: grid; gap: 2px; }
  .rail .nav-btn { width: auto; flex-direction: row; justify-content: flex-start; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
  .rail .nav-btn > .nav-lbl { max-width: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
  .rail .nav-btn.active { background: var(--rail-active); color: var(--rail-fg); }
  .rail .nav-btn.active .ico { color: var(--brand); }
  .rail .nav-btn.active::before { left: -12px; top: 10px; bottom: 10px; background: var(--brand); }
  .rail .nav-badge { position: static; margin-left: auto; }
  .nav-more { display: none !important; }
  .rail-me { display: flex; align-items: center; gap: 10px; padding: 12px 2px 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
  .rail-me-name { display: grid; flex: 1; min-width: 0; text-align: left; color: var(--rail-fg); padding: 2px 4px; border-radius: 8px; }
  .rail-me-name:hover { background: var(--rail-hover); }
  .rail-me-name b { font-size: 14px; font-weight: 600; }
  .rail-me-name small { color: var(--rail-ink); font-size: 12px; }
  .rail-fold { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--rail-ink); flex: none; }
  .rail-fold:hover { background: var(--rail-hover); color: var(--rail-fg); }
  .rail-fold .ico { transition: transform .25s var(--ease); }
  /* folded to icons */
  #app.rail-slim .rail { padding: 14px 8px 12px; }
  #app.rail-slim .rail-co { justify-content: center; border: 0; padding-bottom: 8px; }
  #app.rail-slim .rail-co-name, #app.rail-slim .rail-me-name { display: none; }
  #app.rail-slim .rail .nav-btn { flex-direction: column; justify-content: center; height: auto; padding: 8px 0 6px; gap: 3px; font-size: 11px; }
  #app.rail-slim .rail .nav-btn > .nav-lbl { max-width: 60px; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  #app.rail-slim .rail .nav-badge { position: absolute; top: 3px; right: 8px; margin: 0; }
  #app.rail-slim .rail .nav-btn.active::before { left: -8px; }
  #app.rail-slim .rail-me { flex-direction: column; border: 0; gap: 6px; }
  #app.rail-slim .rail-fold .ico { transform: rotate(180deg); }
}
@media (max-width: 760px) {
  .rail .nav-extra { display: none; }
  .rail .nav-btn.active .ico { color: var(--brand); }
  .rail .nav-btn.active::before { background: var(--brand); }
  .nav-more.active { color: var(--rail-fg); }
}

/* ----- auth screens ----- */
.auth-mark .app-mark { filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.auth-request { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: 14px; }
.auth-done { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 14px; }
.auth textarea.input { height: auto; min-height: 64px; padding: 9px 12px; resize: vertical; }

/* ----- company menu ----- */
.company-item-row { display: flex; align-items: center; gap: 2px; }
.company-item-row .company-item { flex: 1; min-width: 0; }
.co-tab { color: var(--muted); }

/* ----- orders: how it was paid, capture-by, discounts ----- */
.paym { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--field); font-size: 13px; color: var(--ink-2); max-width: 100%; }
.paym b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.paym .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paym-paypal .ico { color: #1B5FC1; }
.paym-shop .ico, .paym-shop-protect .ico { color: #5A31F4; }
.paym-shop-protect { background: rgba(90,49,244,.1); }
.paym-apple .ico, .paym-google .ico, .paym-card .ico { color: var(--ink-2); }
.paym-ebay .ico { color: #C79100; }
.pay-method { align-items: center; }
.auth-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.auth-note.ok { background: var(--green-soft); color: var(--green); }
.auth-note.warn { background: var(--warn-soft); color: var(--warn); }
.auth-note.bad { background: var(--red-soft); color: var(--red); }
.auth-chip { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; justify-self: end; }
.auth-chip.ok { background: var(--field); color: var(--muted); }
.auth-chip.warn { background: var(--warn-soft); color: var(--warn); }
.auth-chip.bad { background: var(--red-soft); color: var(--red); }
.disc-codes { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ochip.code { gap: 3px; letter-spacing: .03em; text-transform: uppercase; background: var(--green-soft); color: var(--green); }
.pay-row .disc { color: var(--green); }
/* thumbnails: a soft shimmer until the picture arrives */
.othumb:not(.ld) { background: linear-gradient(100deg, var(--field) 30%, var(--panel-2) 50%, var(--field) 70%) 0 0 / 300% 100%; animation: shimmer 1.3s linear infinite; }
.othumb:not(.ld) img { opacity: 0; }
.othumb img { transition: opacity .25s; }
.othumb:has(> .ico) { animation: none; background: var(--field); }
@keyframes shimmer { to { background-position: -150% 0; } }
/* swiping between orders on the phone */
.order-page { transition: transform .22s var(--ease), opacity .22s; touch-action: pan-y; }
.order-page.swipe-left { animation: swipe-l .26s var(--ease); }
.order-page.swipe-right { animation: swipe-r .26s var(--ease); }
@keyframes swipe-l { from { transform: translateX(-24px); opacity: .6; } }
@keyframes swipe-r { from { transform: translateX(24px); opacity: .6; } }

/* ----- camera: the phone's own camera ----- */
.cam-last { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-sys .cam-note { bottom: 22px; font-size: 14px; color: #cfd6dd; background: rgba(0,0,0,.45); padding: 10px 14px; border-radius: 12px; }
.cam-shutter-wrap { display: grid; justify-items: center; gap: 6px; }
.cam-shutter.sys { display: grid; place-items: center; background: #fff; }
.cam-shutter.sys::after { content: ""; width: 30px; height: 24px; border-radius: 6px; border: 3px solid #111; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 9px #111; }
.cam-shutter.sys.more::after { width: 26px; height: 26px; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(#111, #111) center / 26px 4px no-repeat, linear-gradient(#111, #111) center / 4px 26px no-repeat; }
.cam-shutter-lbl { font-size: 12px; color: #e8ecef; font-weight: 600; min-height: 1em; }
.cam-mode { color: #fff; height: 34px; padding: 0 12px; background: rgba(255,255,255,.12); }
.cam-mode:hover { background: rgba(255,255,255,.2); }

/* ----- chats: who has read what ----- */
.read-marks { display: flex; align-items: center; gap: 6px; margin: -2px 0 6px; padding: 0 14px 0 58px; min-height: 20px; width: 100%; cursor: pointer; }
.read-marks.own { justify-content: flex-end; padding: 0 14px; }
.chat-view .read-marks:hover .rm-faces .avatar { transform: translateY(-1px); }
.rm-faces { display: inline-flex; flex-direction: row-reverse; }
.rm-faces .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--wall-bg); transition: transform .15s var(--ease); font-size: 8px !important; }
.rm-faces .avatar:last-child { margin-left: 0; }
.rm-more { font-size: 11px; font-weight: 600; color: var(--meta); background: var(--pill); color: #fff; padding: 1px 6px; border-radius: 9px; }
.rm-text { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #fff; background: var(--pill); padding: 2px 8px 2px 6px; border-radius: 10px; }
.meta.clickable { cursor: pointer; }
.reader { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.reader > .ico { color: var(--tick-read); }
.reader.not { opacity: .8; }
.readers-msg { padding: 10px 12px; background: var(--panel-2); border-radius: 10px; font-size: 14px; }
.ellipsis2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; }

/* ----- profile photo ----- */
.photo-nag .avatar { flex: none; }
.photo-ask { display: grid; gap: 12px; justify-items: center; text-align: center; }
.photo-ask p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.photo-ask-faces { display: flex; align-items: center; gap: 14px; }
.photo-ask-arrow { color: var(--muted); }
.photo-ask-ok { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--brand); }
.photo-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; font-size: 14px; }
.photo-tips li { display: flex; gap: 8px; align-items: baseline; }
.photo-tips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); flex: none; transform: translateY(-2px); }
.bc-face { position: relative; display: inline-block; }
.bc-nophoto { position: absolute; left: 0; bottom: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); box-shadow: 0 0 0 3px var(--panel); backdrop-filter: blur(2px); }
.bc-online { color: var(--green); }

/* ----- time zones ----- */
.tz-abbr { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: var(--field); color: var(--muted); }
.table-scroll { overflow-x: auto; margin: 0 -2px; padding: 0 2px; }

/* ----- rating ----- */
.rating-body { max-width: 980px; }
.rate-period { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; margin-bottom: 18px; }
.pod { position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); min-width: 0; text-align: center;
  box-shadow: 0 1px 2px rgba(15,30,45,.05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pod:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(15,30,45,.35); }
.pod b { font-size: 15px; max-width: 100%; }
.pod small { max-width: 100%; }
.pod-1 { order: 2; padding-top: 26px; background: linear-gradient(180deg, var(--brand-soft), var(--panel) 70%); border-color: rgba(255,122,26,.35); }
.pod-2 { order: 1; } .pod-3 { order: 3; }
.pod-medal { position: absolute; top: -13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #3A2A00;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); }
.pod-medal.m1 { background: linear-gradient(160deg, #FFE08A, #F2B01E); }
.pod-medal.m2 { background: linear-gradient(160deg, #F1F4F7, #B9C3CD); color: #2D3742; }
.pod-medal.m3 { background: linear-gradient(160deg, #F6C9A0, #C9803F); color: #3B1F06; }
.pod-score { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.pod-1 .pod-score { color: var(--brand); font-size: 32px; }
.rate-list { display: grid; gap: 8px; }
.rate-row { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s; }
.rate-row.me { border-color: rgba(42,111,209,.4); }
.rate-row.open { box-shadow: 0 10px 28px -18px rgba(15,30,45,.4); }
.rate-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; }
.rate-main:hover { background: var(--panel-2); }
.rate-pos { width: 22px; text-align: center; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.rate-name { font-weight: 600; }
.rate-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 2px; }
.rate-lbl { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 9px; }
.rate-lbl.top { background: var(--green-soft); color: var(--green); }
.rate-lbl.good { background: var(--blue-soft); color: var(--blue); }
.rate-lbl.mid { background: var(--warn-soft); color: var(--warn); }
.rate-lbl.low { background: var(--red-soft); color: var(--red); }
.rate-trend { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 600; flex: none; }
.rate-trend.up { color: var(--green); } .rate-trend.down { color: var(--red); }
.rate-score { display: flex; align-items: baseline; gap: 1px; flex: none; min-width: 66px; justify-content: flex-end; }
.rate-score b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.rate-score small { color: var(--muted); font-size: 12px; }
.rate-score.top b { color: var(--green); } .rate-score.low b { color: var(--red); }
.rate-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; padding: 4px 16px 16px 50px; }
.rate-parts { display: grid; gap: 8px; align-content: start; }
.rp { display: grid; grid-template-columns: 130px 1fr 30px; gap: 10px; align-items: center; font-size: 13px; }
.rp > span { color: var(--ink-2); }
.rp > b { text-align: right; font-variant-numeric: tabular-nums; }
.rp-bar { height: 7px; border-radius: 4px; background: var(--field); overflow: hidden; }
.rp-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), #FFA14F); transition: width .5s var(--ease); }
.rate-facts { display: grid; gap: 6px; align-content: start; }
.rate-fact { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.rate-fact > .ico { color: var(--muted); }
.rate-fact > span { color: var(--ink-2); }
.rate-fact > b { font-weight: 600; text-align: right; }
.rate-fact.bad > b, .rate-fact.bad > .ico { color: var(--red); }
.rate-note { margin-top: 16px; }
.rate-help { display: grid; gap: 12px; padding-left: 18px; }
.rate-skeleton { display: grid; gap: 8px; }
.skel { height: 64px; border-radius: 14px; background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%) 0 0 / 300% 100%; animation: shimmer 1.3s linear infinite; border: 1px solid var(--line); }

/* ----- Disposal: year → month folders ----- */
.dyears { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.dyear-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dyear { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 16px; background: var(--panel); border: 1px solid var(--line); }
.dyear.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.dyear.small { height: 30px; font-size: 14px; padding: 0 11px; }
.dyear-past { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dyear-past > .muted { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; }
.dyear-dl { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.dfolders { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.dfolder { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); text-align: left; min-width: 0; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.dfolder > .ico { grid-row: span 2; color: #E8A33B; }
.dfolder:hover { border-color: #B9C5D0; transform: translateY(-1px); }
.dfolder.on { background: var(--brand-soft); border-color: rgba(255,122,26,.5); }
.dfolder.on > .ico { color: var(--brand); }
.dfolder.empty .dfolder-sub { color: var(--muted); }
.dfolder.future { opacity: .55; }
.dfolder-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfolder-sub { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmonth-head { display: grid; gap: 10px; margin-bottom: 12px; }
.dmonth-title { display: flex; align-items: center; gap: 8px; color: var(--brand); }
.dmonth-title h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.dmonth-head .disp-summary { margin: 0; }
.dmonth-dl { gap: 6px; }
.disp-card { border-left-width: 1px; border-left-color: var(--line); position: relative; }
.disp-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--p-high); }
.disp-card.disposed::before { background: var(--green); }
.disp-card:hover, .disp-card.pending:hover, .disp-card.disposed:hover { border-left-color: #B9C5D0; }
.disp-reason { font-size: 13px; color: var(--ink-2); }
.disp-meta { flex-wrap: wrap; row-gap: 2px; }
.disp-amt b { font-variant-numeric: tabular-nums; }
.disp-who { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.disp-pdf { color: var(--muted); }
.disp-who-box { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.disp-who-box > div { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--panel-2); flex: 1; min-width: 200px; }
.disp-who-box > div > div { display: grid; line-height: 1.25; }

/* ----- server: new companies ----- */
.cs-requests { display: grid; gap: 12px; }
.creq { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.creq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.creq .inline { margin-top: 6px; }

/* ----- company settings: moving from Bitrix24 ----- */
.cs-bitrix { display: grid; gap: 12px; }
.bx-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bx-how li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; }
.bx-num { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: var(--blue-ink); display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.bx-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bx-scopes .opill { background: var(--field); color: var(--ink-2); font-weight: 500; }
.bx-opt { align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.bx-opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.bx-opt > span { display: grid; gap: 2px; }
.bx-opt.locked { cursor: default; }
/* 2.12.9: who is who before a Bitrix24 import */
.bx-who-list { display: grid; gap: 8px; }
.bx-who > span { min-width: 0; }
.bx-who-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.bx-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.bx-head { display: grid; gap: 2px; }
.bx-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-step { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: 14px; background: var(--field); color: var(--muted); font-size: 13px; font-weight: 600; }
.bx-step.on { background: var(--blue-soft); color: var(--blue); }
.bx-step.done { background: var(--green-soft); color: var(--green); }
.bx-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: bx-spin .8s linear infinite; }
@keyframes bx-spin { to { transform: rotate(360deg); } }
.bx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bx-stat { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.bx-stat b { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bx-stat span { font-size: 12px; color: var(--muted); }
.bx-errs summary { cursor: pointer; color: var(--amber-ink); font-size: 13px; font-weight: 600; }
.bx-errs .pre { max-height: 180px; overflow: auto; margin-top: 6px; color: var(--muted); }
@media (max-width: 760px) { .bx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bx-spin { animation: none; } }

/* ----- phone ----- */
@media (max-width: 760px) {
  /* reminders: one slim strip at a time, never half the screen */
  .nag-stack { gap: 6px; }
  .nag-stack > * + * { display: none !important; }
  .nag-stack > * { padding: 8px 8px 8px 12px !important; border-radius: 12px; }
  .nag-stack .osmall, .nag-stack .nag-more { display: none; }
  .nag-stack b { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nag-stack .btn { height: 32px; padding: 0 10px; font-size: 13px; }
  .nag-stack > * > .grow, .nag-stack > * > span.grow { min-width: 0; overflow: hidden; }
  .nag-stack .push-nag > span.grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  /* task drawer: the label sits right above its field */
  .props { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .props > span { font-size: 12px; margin-top: 10px; }
  .props > span:first-child { margin-top: 0; }
  /* Disposal: the months scroll sideways */
  .dfolders { display: flex; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px 16px; padding: 0 16px 4px; }
  .dfolder { flex: 0 0 132px; scroll-snap-align: center; }
  .dyear-dl { margin-left: 0; }
  .podium { gap: 8px; }
  .pod { padding: 16px 6px 10px; }
  .pod .avatar { width: 48px !important; height: 48px !important; }
  .pod-1 .avatar { width: 58px !important; height: 58px !important; }
  .pod-score { font-size: 22px; } .pod-1 .pod-score { font-size: 26px; }
  .rate-detail { grid-template-columns: 1fr; padding: 4px 14px 14px; }
  .rp { grid-template-columns: 110px 1fr 28px; }
  .rate-main { padding: 10px 12px; gap: 10px; }
  .read-marks { padding-left: 52px; }
  .act-sum { flex-wrap: wrap; }
  .act-sum > div { min-width: 0; flex: 1; }
}

a.btn { text-decoration: none; }
a.btn.soft { color: var(--ink); }
a.btn.ghost { color: var(--ink-2); }
/* reminders: one at a time, slim, kept clear of the message box */
.nag-stack > * + * { display: none !important; }
@media (min-width: 761px) {
  .nag-stack { right: auto; left: calc(var(--rail-w) + 12px); bottom: 12px; width: min(400px, calc(100vw - var(--rail-w) - 24px)); }
  .nag-stack > * { padding: 9px 10px 9px 12px !important; box-shadow: 0 12px 30px -12px rgba(15,30,45,.35); }
  .nag-stack .osmall { font-size: 12px; }
}
@media (max-width: 760px) {
  .dmonth-head .disp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmonth-head .disp-stat.cost { grid-column: 1 / -1; }
  .dmonth-head .disp-stat b { font-size: 19px; }
}
/* 2.4.1: a long reminder never pushes the strip off the screen; the text wraps to two lines */
.nag-stack { grid-template-columns: minmax(0, 1fr); }
.nag-stack > * { min-width: 0; }
@media (max-width: 760px) {
  .nag-stack .push-nag > span.grow { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .nag-stack .btn { flex: none; }
  /* the installed app on iPhone: the top gap was counted twice (company line + search line) */
  .company-switch + .pane-head { padding-top: 8px; min-height: 0; }
}
/* 2.4.2: the installed app on iPhone draws under the status bar and the camera cut-out —
   every top bar keeps clear of it */
@media (max-width: 760px) {
  .page-head { padding-top: max(12px, calc(env(safe-area-inset-top) + 6px)); }
  .page.viewing-order > .page-body { padding-top: max(12px, calc(env(safe-area-inset-top) + 6px)); }
  .company-switch { padding-top: max(12px, calc(env(safe-area-inset-top) + 6px)); }
}
.modal-back { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.lightbox .lb-bar { top: max(12px, calc(env(safe-area-inset-top) + 6px)); }
.conn-banner { top: max(10px, calc(env(safe-area-inset-top) + 6px)); }
.menu { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); overflow-y: auto; }
/* 2.4.2: the condition a part is sold in, and the product card */
.cond { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; margin: 3px 0 2px; }
.cond.sm { height: 18px; padding: 0 7px; font-size: 11px; margin: 0 6px 0 0; vertical-align: 1px; }
.cond-new { background: var(--green-soft); color: var(--green); }
.cond-reman { background: var(--blue-soft); color: var(--blue); }
.cond-used, .cond-open_box { background: var(--warn-soft); color: var(--warn); }
.cond-parts, .cond-other { background: var(--field); color: var(--ink-2); }
.oi-open { border: 0; padding: 0; cursor: zoom-in; }
.oi-open:disabled { cursor: default; }
.linkish-plain { display: block; text-align: left; font: inherit; color: inherit; padding: 0; }
.oi-title.linkish-plain:not(:disabled) { cursor: pointer; }
.oi-title.linkish-plain:not(:disabled):hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.s46-cond { font-size: 9px; font-weight: 800; letter-spacing: .08em; margin-top: 1px; }
.modal.pcard-modal { width: min(920px, 100%); }
.pcard { display: grid; gap: 16px; }
.pc-skel { display: grid; gap: 10px; }
.pc-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pc-stage { position: relative; aspect-ratio: 1; border-radius: 14px; background: #fff; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; color: var(--muted); }
.pc-main-img { width: 100%; height: 100%; object-fit: contain; }
.pc-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.88); color: #1b2a3a; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.pc-nav.prev { left: 8px; } .pc-nav.next { right: 8px; }
.pc-count { position: absolute; bottom: 8px; right: 10px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 10px; }
.pc-thumbs { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; }
.pc-th { flex: none; width: 58px; height: 58px; border-radius: 9px; overflow: hidden; border: 2px solid transparent; background: #fff; }
.pc-th.on { border-color: var(--brand); }
.pc-th img { width: 100%; height: 100%; object-fit: contain; }
.pc-info { display: grid; gap: 10px; align-content: start; }
.pc-title { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.pc-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-badges .cond { height: 26px; font-size: 13px; padding: 0 12px; border-radius: 13px; }
.pc-price { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; gap: 10px; align-items: baseline; }
.pc-price s { font-size: 15px; font-weight: 500; }
.pc-facts { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.pc-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pc-fact span { color: var(--muted); }
.pc-fact b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pc-summary { margin: 0; color: var(--ink-2); }
.pc-desc { font-size: 14px; line-height: 1.55; color: var(--ink); border-top: 1px solid var(--line); padding-top: 14px; overflow-x: auto; }
.pc-desc p { margin: 0 0 10px; }
.pc-desc h4 { margin: 14px 0 6px; font-size: 15px; }
.pc-desc ul, .pc-desc ol { margin: 0 0 10px; padding-left: 20px; }
.pc-desc li p { margin: 0; }
.pc-desc table { border-collapse: collapse; width: 100%; margin: 6px 0 12px; font-size: 13px; }
.pc-desc th, .pc-desc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.pc-desc th { background: var(--panel-2); font-weight: 600; }
.pc-desc td > p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .pc-top { grid-template-columns: 1fr; }
  .pc-desc table { display: block; overflow-x: auto; }
}

/* ----- 2.5.0: Purchases ----- */
.sup-tabs { flex: none; display: flex; gap: 6px; padding: 10px 24px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sup-tabs::-webkit-scrollbar { display: none; }
.sup-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 17px; font-weight: 500; color: var(--ink-2); background: var(--field); white-space: nowrap; }
.sup-tab:hover { background: var(--line); }
.sup-tab.on { background: var(--sel); color: var(--sel-ink); }
.sup-n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; background: rgba(127,140,155,.18); font-variant-numeric: tabular-nums; }
.sup-tab.on .sup-n { background: rgba(255,255,255,.18); }
.sup-n.red, .sup-tab.on .sup-n.red { background: var(--red); color: #fff; }
.sup-body { padding-top: 16px; }
.sup-list { max-width: 1100px; }
.sup-row .otop { align-items: center; gap: 8px; }
.sup-part { font-size: 17px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.sup-part.big { font-size: 26px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.sup-part.none { color: var(--muted); font-weight: 600; font-style: italic; font-size: 15px; }
.sup-part.none.big { font-size: 20px; }
.sup-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 600; font-style: normal; }
.sup-qty { font-weight: 600; color: var(--blue); font-size: 13px; }
.sup-qty.big { font-size: 14px; padding: 2px 9px; border-radius: 10px; background: var(--blue-soft); }
.sup-track { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.sup-row .oside { align-items: flex-end; display: flex; flex-direction: column; gap: 4px; }
.sup-row .opill .ico, .sup-table .opill .ico { margin-right: 3px; }
.othumb.sm { width: 40px; height: 40px; border-radius: 8px; }
.sup-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 18px; color: var(--ink-2); max-width: 520px; margin: 0 auto; }
.sup-empty .ico { color: var(--muted); }
.sup-empty p { margin: 0 0 6px; }
/* the table: what was bought, what has come */
.sup-table-wrap { max-width: 1400px; margin: 0 auto; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.sup-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sup-table th { position: sticky; top: 0; background: var(--panel-2); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sup-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sup-table tbody tr { cursor: pointer; }
.sup-table tbody tr:hover { background: var(--panel-2); }
.sup-table tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.sup-table tr:last-child td { border-bottom: 0; }
.sup-table tr.cancelled { opacity: .55; }
.sup-table .ph { width: 52px; padding-right: 0; }
.sup-table .nowrap { white-space: nowrap; }
.sup-table .mono, .sup-kv .mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sup-table .num { text-align: center; }
.sup-table .ttl { min-width: 200px; max-width: 360px; color: var(--ink-2); }
.sup-table .sup-part { font-size: 15px; }
.ellipsis2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the card */
.sup-photos { padding: 10px; }
.sup-photos.empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 160px; color: var(--muted); }
.sup-photo-main { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; }
.sup-photo-main img { width: 100%; height: 100%; object-fit: contain; }
.sup-zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: rgba(20,30,40,.55); color: #fff; }
.sup-strip { display: flex; gap: 6px; overflow-x: auto; padding-top: 2px; }
.sup-strip button { flex: none; width: 76px; height: 76px; border-radius: 9px; overflow: hidden; background: #fff; border: 1px solid var(--line); cursor: zoom-in; }
.sup-strip img { width: 100%; height: 100%; object-fit: contain; }
.sup-part-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-brand { font-weight: 600; color: var(--ink-2); padding: 2px 9px; border-radius: 10px; background: var(--field); font-size: 13px; }
.sup-warn { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 500; }
.sup-extra { overflow-wrap: anywhere; }
.sup-cond-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cond.big { height: 32px; padding: 0 16px; border-radius: 16px; font-size: 15px; }
.sup-kv { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sup-kv > span:first-child { min-width: 104px; font-size: 13px; }
.sup-kv > b, .sup-kv > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.sup-ship-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-urgent { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--red-soft); color: var(--red); font-weight: 600; font-size: 13px; flex-wrap: wrap; }
.sup-accept.ready { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); box-shadow: 0 0 0 3px var(--green-soft); }
.sup-accept.bad { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.sup-accept-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sup-accept-btns .btn { height: 48px; font-size: 15px; font-weight: 600; justify-content: center; }
.btn.sup-ok { background: var(--green); color: #fff; }
.btn.sup-bad { background: var(--red-soft); color: var(--red); }
.btn.sup-bad:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
.sup-done { display: flex; align-items: center; gap: 10px; color: var(--green); }
.sup-done b { color: var(--ink); }
.sup-done.bad { color: var(--red); }
.sup-note { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); white-space: pre-wrap; }
.sup-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sup-compare .otl-photos { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); margin-top: 4px; }
.sup-same-list { display: grid; gap: 6px; }
.sup-same-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; text-align: left; }
.sup-same-item:hover { background: var(--field); }
.bad-txt { color: var(--red); font-weight: 600; }
.sup-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.sup-details summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
.sup-details[open] summary::before { transform: rotate(90deg); }
.sup-dtitle { font-weight: 600; }
.sup-specs { border-collapse: collapse; font-size: 13px; width: 100%; }
.sup-specs th { text-align: left; font-weight: 500; color: var(--muted); padding: 5px 12px 5px 0; vertical-align: top; width: 40%; }
.sup-specs td { padding: 5px 0; overflow-wrap: anywhere; }
.sup-specs tr + tr th, .sup-specs tr + tr td { border-top: 1px solid var(--line); }
.sup-desc { font-size: 13px; color: var(--ink-2); display: grid; gap: 6px; overflow-wrap: anywhere; }
.sup-desc p { margin: 0; }
.sup-dtable { border-collapse: collapse; width: 100%; }
.sup-dtable td { border: 1px solid var(--line); padding: 4px 8px; }
/* "Problem" and the purchase form */
.sup-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-reason { height: 38px; padding: 0 14px; border-radius: 19px; background: var(--field); font-weight: 500; }
.sup-reason.on { background: var(--red); color: #fff; }
.sup-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-shot-add { width: 84px; height: 84px; border-radius: 12px; border: 2px dashed var(--line); color: var(--muted); display: grid; place-items: center; align-content: center; gap: 2px; font-size: 12px; }
.sup-shot-add:hover { border-color: var(--blue); color: var(--blue); }
.sup-shots .att-thumb { width: 84px; height: 84px; }
/* the connection screen */
.sup-admin { display: grid; gap: 12px; }
.sup-off { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--field); color: var(--ink-2); font-weight: 600; }
.sup-switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.sup-switch-row > span:last-child { display: grid; gap: 2px; }
.sup-access { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sup-acc-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-width: 0; }
.sup-acc-row + .sup-acc-row { border-top: 1px solid var(--line); }
.sup-acc-row.head { background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.sup-acc-row.auto { color: var(--muted); }
.sup-acc-row .inline { min-width: 0; }
.sup-acc-col { flex: none; width: 84px; display: grid; place-items: center; text-align: center; }
.sup-acc-col:last-child { width: 32px; }
.sup-acc-col input { width: 18px; height: 18px; }
.sup-jbox summary { cursor: pointer; color: var(--blue); font-weight: 500; font-size: 14px; }
.sup-journal { display: grid; gap: 4px; margin-top: 8px; max-height: 240px; overflow: auto; }
.sup-perms { margin-top: 10px; }
/* the photo viewer zooms in */
.lightbox img { transition: transform .08s linear; transform-origin: center; touch-action: none; user-select: none; -webkit-user-drag: none; }
.lightbox { touch-action: none; }
.lightbox.zoomed { cursor: grab; }
.lightbox.zoomed .lb-prev, .lightbox.zoomed .lb-next { opacity: .35; }
@media (max-width: 900px) {
  .sup-page .ogrid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .sup-page .ogrid > .ocol { display: contents; }
  .sup-page .s-ph { order: 1; } .sup-page .s-part { order: 2; } .sup-page .s-acc { order: 3; } .sup-page .s-ship { order: 4; }
  .sup-page .s-info { order: 5; } .sup-page .s-same { order: 6; } .sup-page .s-det { order: 7; } .sup-page .s-tl { order: 8; }
  .sup-page .s-ret { order: 0; } .sup-page .s-for { order: 2; } .sup-page .s-auth { order: 3; }
}
@media (max-width: 760px) {
  .sup-tabs { padding: 8px 12px; }
  .sup-row .oside { flex-direction: row; align-items: center; }
  .sup-part.big { font-size: 22px; }
  .sup-acc-col { width: 62px; font-size: 11px; }
  .sup-acc-row .ellipsis { max-width: 110px; }
  .sup-compare { grid-template-columns: 1fr; }
  .sup-head .lbl { display: none; }
}
.page.viewing-order > .sup-tabs { display: none; }
.sup-head .sup-search { flex: 1 1 260px; max-width: 420px; }
.sup-accept-btns { grid-template-columns: 1fr; }
.sup-accept-btns .btn.sup-ok { height: 52px; font-size: 16px; }
.sup-accept-btns .btn.sup-bad { height: 44px; }
.sup-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.sup-kv > span:first-child { min-width: 0; }
.sup-kv .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-table .ttl { min-width: 170px; max-width: 280px; }
.sup-table td, .sup-table th { padding-left: 8px; padding-right: 8px; }
.sup-kv .mono { white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: 14px; }
/* 2.5.1: ‹ 12 of 797 › next to the part number */
.sup-nav-host:empty { display: none; }
.sup-nav { align-items: center; gap: 4px; margin: 0 4px; }
.sup-nav .onav-btn { height: 32px; width: 34px; border-radius: 9px; }
.sup-nav .onav-btn:disabled { opacity: .4; cursor: default; }
.sup-nav-count { min-width: 74px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sup-page { touch-action: pan-y; }
/* 2.5.1: which store permissions are missing */
.scope-missing { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.45; }
.scope-missing .ico { margin-top: 2px; }

/* 2.5.2: purchase photos — room taken, room left */
.sup-store { display: grid; gap: 10px; }
.sup-store-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.sup-store-sizes > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--field); }
.sup-store-sizes b { font-size: 17px; }
.sup-disk { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--field); }
.sup-disk-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.sup-disk-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sup-disk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.sup-disk.full { background: var(--red-soft); }
.sup-disk.full .sup-disk-bar i { background: var(--red); }
.sup-disk.full b, .sup-disk-warn { color: var(--red); }
.sup-disk-warn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.sup-trimmed { margin: 6px 0 0; }

/* 2.5.3: payment expired — a new invoice */
.payagain { display: grid; gap: 8px; margin: 4px 0 6px; padding: 12px; border-radius: 12px; background: var(--red-soft); color: var(--ink); }
.payagain-head { display: flex; align-items: center; gap: 8px; color: var(--red); font-size: 15px; }
.payagain-sent { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: var(--panel); }
.payagain-sent svg { flex: none; margin-top: 2px; color: var(--blue); }
.auth-chip.paid { background: var(--green-soft); color: var(--green); }
.payagain.ok { display: flex; align-items: center; gap: 8px; background: var(--green-soft); color: var(--green); font-size: 14px; }
.payagain.ok b { font-weight: 600; }
.otl-ship.paid-again { color: var(--green); font-weight: 600; }
.modal textarea.input[lang=en] { font-size: 14px; line-height: 1.45; resize: vertical; min-height: 200px; }
.ocard.payagain-card { padding: 0; overflow: hidden; }
.ocard.payagain-card .payagain { margin: 0; border-radius: 0; padding: 14px 16px; }

/* 2.5.4: virus protection */
.file-att.warn { border-color: var(--amber); }
.file-att.blocked { opacity: .75; cursor: not-allowed; background: var(--red-soft); }
.scan-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--red-soft); color: var(--red); flex: none; }
.scan-ico.big { width: 40px; height: 40px; }
.scan-bad { color: var(--red); font-weight: 600; }
.scan-warn { color: var(--amber-ink); font-weight: 600; }
.drive-row.blocked .drive-name { color: var(--muted); text-decoration: line-through; }
.scan-box { display: grid; gap: 8px; }
.scan-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scan-list { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.scan-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--field); }
.scan-row:not(.bad) .scan-ico { background: var(--panel); color: var(--amber-ink); }
.scan-row small { display: inline; }
/* 2.5.5: sessions, link guard, outdated browser */
.sess-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.sess-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--field); }
.sess-row > .ico { color: var(--muted); flex: none; }
.sess-row.current > .ico { color: var(--green); }
.sess-row .grow { min-width: 0; }
.sess-row b { font-size: 14px; margin-right: 6px; }
.sess-row .muted { overflow-wrap: anywhere; }
.emp-sess { display: grid; gap: 6px; }
.link-blocked { color: var(--red) !important; text-decoration: line-through; }
/* 2.12.9: an address the link rule has not allowed is drawn without an address of its own (app.js: guardedLink) — it looks like the link it stands for */
.link-held { cursor: pointer; }
.link-held:not(.btn):not(.tag):not(.file-att) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.btext .link-held { word-break: break-all; }
.link-held.link-blocked { text-decoration: line-through; }
div.file-att.warn { cursor: pointer; }
.sret-ours .link-held.tag, .sret-track .link-held.tag { text-decoration: none; color: inherit; }
.nag-2fa.old-browser > .ico { color: var(--amber-ink); }
.scan-box textarea.input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.scan-box textarea.input { min-height: 112px; height: auto; resize: vertical; }
/* 2.5.6: an order card the store gives only partly */
.olimited { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--field); color: var(--muted); font-size: 13px; }
.olimited .ico { flex: none; }
/* 2.5.7: what a purchase is for */
.sup-for .sup-for-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-for-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
a.sup-for-chip:hover { filter: brightness(.96); }
.sup-for-chip.stock { background: var(--field); color: var(--ink); }
.sup-for-note { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--field); }
.sup-for-note .pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.sup-for.empty h3 { color: var(--muted); }
.sup-for-short { color: var(--blue-ink); font-weight: 600; }
.o-purchases { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.o-purchase > .opill { flex: none; }
.o-purchase { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; color: inherit; text-decoration: none; }
.o-purchase:hover { background: var(--field); }
.o-purchase .grow { min-width: 0; }
/* 2.6.0: label signature and insurance */
.lbl-extras { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.lbl-extras .seg { flex-wrap: wrap; }
.lbl-extras-note { display: grid; gap: 6px; }
.lbl-extras-note:empty { display: none; }
.ins-amt[hidden] { display: none; }
/* 2.6.0: labels bought through Shippo, on the order */
.slabel { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.ocard h3 + .slabel, .ocard-head + .slabel { border-top: 0; padding-top: 4px; }
.slabel-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.slabel-top > b:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slabel-top .grow { flex: 1; }
.slabel-top > b:last-child { font-variant-numeric: tabular-nums; }
.slabel.voided .slabel-top > b { color: var(--muted); }
.slabel.voided .slabel-top > b:last-child { text-decoration: line-through; }
.slabel .inline.wrap { gap: 8px; }

/* ===== 2.6.0: purchases — the order a part is for, check-in, returns to suppliers, the authenticity reference ===== */
.sup-for-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sup-for-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.sup-for-pill:hover { filter: brightness(1.08); }
.sup-for-pill.stock { background: var(--field); color: var(--ink-2); }
.sup-for-pills.sm .sup-for-pill { height: 20px; font-size: 12px; padding: 0 7px; }
.sup-for-pills.big .sup-for-pill { height: 28px; font-size: 14px; padding: 0 11px; border-radius: 8px; }
.otop .sup-for-pills, .otop > .sup-for-pill { margin-left: 2px; }

.sup-alert { border: 2px solid var(--red); background: var(--red-soft); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 12px; animation: supAlertIn .25s ease-out; }
.sup-alert-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--red); }
.sup-alert-head b { font-size: 15px; letter-spacing: .01em; }
.sup-alert-head .muted { font-size: 13px; color: var(--ink-2); }
.sup-alert-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel); text-align: left; min-width: 0; }
.sup-alert-row:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 40%, transparent); }
.sup-alert-row .grow { display: grid; min-width: 0; }
.sup-alert-due { font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--ink); }
.sup-alert-due.hot { color: var(--red); }
@keyframes supAlertIn { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }

.sup-table.sup-accepted td { vertical-align: middle; }
.sup-diff { background: var(--warn-soft); }
.sup-diff-mark { color: var(--warn); font-weight: 600; margin-left: 4px; }
.sup-cond-got { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sup-cond-got .cond.sm { margin: 0; }
.sup-cond-got.diff { padding: 6px 8px; border-radius: 8px; background: var(--warn-soft); }

.sup-got-q { display: grid; gap: 8px; }
.sup-got-q > b { font-size: 14px; }
.sup-got { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sup-got-btn { min-height: 44px; padding: 6px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); font-weight: 600; display: grid; place-items: center; align-content: center; gap: 1px; line-height: 1.15; }
.sup-got-btn small { font-size: 11px; font-weight: 600; color: var(--muted); }
.sup-got-btn:hover { border-color: var(--ink-2); }
.sup-got-btn.on.cond-new { background: var(--green); border-color: var(--green); color: #fff; }
.sup-got-btn.on.cond-reman { background: var(--blue); border-color: var(--blue); color: #fff; }
.sup-got-btn.on.cond-used { background: var(--warn); border-color: var(--warn); color: #fff; }
.sup-got-btn.on small { color: rgba(255,255,255,.85); }
.sup-in-photos { display: grid; gap: 6px; }
.sup-shot-add.sm { width: 64px; height: 64px; font-size: 11px; }
.sup-accept .btn.sup-ok:disabled { opacity: .45; }

.sup-auth .ostate { color: var(--blue); }
.sup-auth-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.sup-ref-group { display: grid; gap: 6px; }
.sup-ref-group > small { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.sup-ref-group.genuine > small { color: var(--green); }
.sup-ref-group.fake > small { color: var(--red); }
.sup-ref-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.sup-ref { position: relative; margin: 0; display: grid; gap: 3px; }
.sup-ref img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 2px solid transparent; }
.sup-ref-group.genuine .sup-ref img { border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.sup-ref-group.fake .sup-ref img { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.sup-ref figcaption { font-size: 12px; color: var(--muted); line-height: 1.25; }
.sup-ref-del { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; width: 22px; height: 22px; }
.sup-auth-steps summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.sup-auth-steps ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.sup-ref-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.sup-ref-opt { padding: 0; border-radius: 10px; border: 2px solid transparent; overflow: hidden; aspect-ratio: 1; display: block; }
.sup-ref-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sup-ref-opt.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.sup-ret .ostate { color: var(--ink-2); }
.sup-ret.decide { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.sup-ret.alert { border: 2px solid var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.sup-ret.done { opacity: .92; }
.sup-ret-alarm { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--red); color: #fff; animation: supPulse 1.6s ease-in-out infinite; }
.sup-ret-alarm b { font-size: 14px; }
@keyframes supPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .sup-ret-alarm, .sup-alert { animation: none; } }
.sup-label-big { height: 48px; font-size: 15px; justify-content: center; }
.ret-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ret-step { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; position: relative; color: var(--muted); }
.ret-step:not(:last-child)::after { content: ""; position: absolute; left: 8.5px; top: 26px; bottom: -6px; width: 2px; background: var(--line); }
.ret-step.done { color: var(--ink); }
.ret-step.done:not(:last-child)::after { background: var(--green); }
.ret-dot { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); display: grid; place-items: center; margin-top: 1px; }
.ret-step.done .ret-dot { background: var(--green); border-color: var(--green); color: #fff; }
.ret-step.closed .ret-dot { background: var(--muted); border-color: var(--muted); }
.ret-step .mono { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-2); }
.ok-txt { color: var(--green); }
.sup-ret-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-ret-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 720px) {
  .sup-alert-row .opill { display: none; }
  .sup-got-btn { min-height: 50px; font-size: 15px; }
}

/* ===== 2.6.0: product requests, suppliers, customer returns ===== */
.req-page { --k-restock: var(--green); --k-price: var(--blue); --k-price_up: var(--warn); --k-listing: #7B5BD6; --k-other: var(--muted); }
:root[data-theme="dark"] .req-page, :root[data-theme="dark"] .modal { --k-listing: #A38BF0; }
.req-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.req-main { display: grid; gap: 10px; min-width: 0; }
.req-list { display: grid; gap: 8px; }
.req-card { --k: var(--muted); display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px 12px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); position: relative; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.req-card::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--k); }
.req-card:hover { border-color: color-mix(in srgb, var(--k) 45%, var(--line)); box-shadow: 0 4px 16px rgba(15,30,45,.07); }
.req-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.req-card.urgent { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.kind-restock { --k: var(--k-restock, var(--green)); } .kind-price { --k: var(--k-price, var(--blue)); } .kind-price_up { --k: var(--k-price_up, var(--warn)); }
.kind-listing { --k: var(--k-listing, #7B5BD6); } .kind-other { --k: var(--k-other, var(--muted)); }
.req-thumb { width: 52px; height: 52px; border-radius: 10px; background: color-mix(in srgb, var(--k, var(--muted)) 12%, var(--panel-2)); color: var(--k, var(--muted)); display: grid; place-items: center; overflow: hidden; flex: none; }
.req-thumb img { width: 100%; height: 100%; object-fit: cover; }
.req-thumb.sm { width: 30px; height: 30px; border-radius: 7px; }
.req-thumb.big { width: 72px; height: 72px; border-radius: 12px; }
.req-mid { min-width: 0; display: grid; gap: 3px; }
.req-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.req-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--k, var(--ink-2)); text-transform: uppercase; letter-spacing: .03em; }
.req-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--field); border-radius: 6px; padding: 1px 7px; }
.req-date.today { background: var(--blue-soft); color: var(--blue); }
.req-date.late { background: var(--red-soft); color: var(--red); }
.req-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.req-end { display: grid; justify-items: end; gap: 6px; text-align: right; }
.req-price { font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap; }
.req-price s { color: var(--muted); font-size: 13px; }
.req-end .opill { display: inline-flex; align-items: center; gap: 5px; }
.req-side { position: sticky; top: 12px; display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; max-height: calc(100vh - 120px); overflow: auto; }
.req-side > h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.req-side .seg { width: 100%; }
.req-side .seg button { flex: 1; justify-content: center; }
.req-arch { display: grid; gap: 2px; }
.req-arch-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; text-align: left; min-width: 0; }
.req-arch-row:hover { background: var(--panel-2); }
.req-arch-row .grow { display: grid; min-width: 0; }
.req-arch-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.req-arch-ico.ok { background: var(--green-soft); color: var(--green); }
.req-arch-ico.off { background: var(--field); color: var(--muted); }
.req-detail { display: grid; gap: 12px; }
.req-d-head { display: flex; gap: 12px; align-items: flex-start; }
.req-d-head .grow { display: grid; gap: 4px; min-width: 0; }
.req-d-title { font-size: 17px; line-height: 1.3; }
.req-d-what { font-size: 17px; }
.req-confirmed { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--green-soft); color: var(--ink); }
.req-confirmed > svg { color: var(--green); flex: none; }
.req-comment { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.req-oath { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel-2); font-weight: 600; line-height: 1.4; cursor: pointer; }
.req-oath input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--green); }
.req-oath:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.req-done-what { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.req-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.req-kind-btn { min-height: 64px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink-2); display: grid; place-items: center; align-content: center; gap: 4px; font-size: 12px; font-weight: 600; text-align: center; padding: 6px 4px; line-height: 1.15; }
.req-kind-btn svg { color: var(--k); }
.req-kind-btn:hover { border-color: var(--k); }
.req-kind-btn.on { border-color: var(--k); background: color-mix(in srgb, var(--k) 12%, var(--panel)); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 16%, transparent); }
.req-found { display: grid; gap: 2px; }
.req-found:empty { display: none; }
.req-found-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-align: left; min-width: 0; }
.req-found-row:hover { background: var(--panel-2); }
.req-picked:empty { display: none; }
.req-picked { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--blue); background: var(--blue-soft); }
.req-picked .grow { display: grid; min-width: 0; }
.req-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.req-acc { display: grid; }
.req-acc-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.req-acc-row.head { font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 0; }
.req-acc-row .grow { min-width: 0; gap: 8px; }
.req-acc-col { width: 120px; text-align: center; flex: none; display: grid; place-items: center; }
.req-acc-col input { width: 18px; height: 18px; }

.vault { display: grid; gap: 10px; }
.vault-list { display: grid; gap: 8px; }
.vault-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.vault-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vault-top .grow { display: grid; min-width: 0; }
.vault-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--ink-2); font-size: 17px; }
.vault-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.vault-creds { display: flex; flex-wrap: wrap; gap: 6px; }
.vault-cred { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--field); font-size: 13px; font-weight: 600; min-width: 0; }
button.vault-cred:hover { background: var(--blue-soft); color: var(--blue); }
.vault-cred.pw { padding-right: 4px; }
.vault-secret { font-variant-numeric: tabular-nums; letter-spacing: .02em; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-admin { display: flex; gap: 4px; justify-content: flex-end; }
.calc { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); }
.calc-head { display: flex; align-items: center; gap: 6px; }
.calc-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.calc-out > .muted { grid-column: 1 / -1; }
.calc-opt { display: grid; gap: 1px; padding: 6px 4px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.calc-opt small { color: var(--muted); font-weight: 600; font-size: 11px; }
.calc-opt b { font-variant-numeric: tabular-nums; font-size: 14px; }
.calc-opt:hover { border-color: var(--green); }

.rma-table td { vertical-align: middle; }
.rma-insp { display: flex; flex-wrap: wrap; gap: 6px; }
.rma-decision { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); display: grid; gap: 2px; }
.rma-steps.denied { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.rma-decs { display: flex; flex-wrap: wrap; gap: 6px; }
.rma-sum { font-size: 16px; font-weight: 600; }
.rma-lines { display: grid; gap: 6px; }
.rma-lines .oitem { display: flex; align-items: center; gap: 10px; }
.rma-qty { width: 76px; text-align: center; }
.rma-found { display: grid; gap: 2px; }
a.rma-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sup-reason.rma-in-ok.on { background: var(--green); }
.oitem .grow { min-width: 0; }

@media (max-width: 1100px) { .req-grid { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 860px) {
  .req-grid { grid-template-columns: 1fr; }
  .req-side { position: static; max-height: none; }
  .req-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .req-card { grid-template-columns: 44px minmax(0, 1fr); }
  .req-card .req-thumb { width: 44px; height: 44px; }
  .req-end { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; }
  .req-acc-col { width: 76px; font-size: 11px; }
  .calc-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   2.6.0 — the parts-counter look. Graphite and concrete, safety orange
   only where the brand or attention belongs, IBM Plex for an engineered
   voice, and every identifier — part number, order, return, tracking —
   set in Plex Mono on a steel tag, because those are what people read
   most and must never misread (0/O, 1/I). Everything else stays quiet:
   hairlines over shadows, one radius for controls, one for panels.
   ===================================================================== */
:root {
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --bg: #EDEEEB; --panel: #FFFFFF; --panel-2: #F6F6F4; --field: #F0F1EE;
  --ink: #1C2024; --ink-2: #3F474D; --muted: #697177; --line: #DFE2DE; --line-2: #CDD1CC;
  --blue: #1E5DBA; --blue-ink: #FFFFFF; --blue-soft: rgba(30,93,186,.10);
  --green: #19794B; --green-soft: rgba(25,121,75,.11);
  --red: #C0352A; --red-soft: rgba(192,53,42,.09);
  --warn: #965600; --warn-soft: rgba(214,140,20,.15);
  --brand: #F06A1C; --amber: #F06A1C; --brand-soft: rgba(240,106,28,.12);
  --act: #1F2428; --act-ink: #FFFFFF; --act-hover: #343B41;
  --sel: #1F2428; --sel-ink: #FFFFFF;
  --plate: #E7E9E5; --plate-edge: #CDD2CB; --plate-ink: #1C2024;
  --rail: #191C1F; --rail-ink: #A0A7AD; --rail-fg: #F2F4F5; --rail-hover: rgba(255,255,255,.05); --rail-active: rgba(255,255,255,.08);
  --radius: 10px; --r-ctl: 7px;
  --shadow-lg: 0 24px 64px rgba(16,20,24,.24), 0 0 0 1px rgba(16,20,24,.06);
}
:root[data-theme="dark"] {
  --bg: #141619; --panel: #1B1E21; --panel-2: #212528; --field: #262A2E;
  --ink: #E6E8E9; --ink-2: #C3C8CB; --muted: #8E959A; --line: #2D3135; --line-2: #3B4045;
  --blue: #6EA6F2; --blue-soft: rgba(110,166,242,.14);
  --green: #46B97F; --green-soft: rgba(70,185,127,.14);
  --red: #EA6A5E; --red-soft: rgba(234,106,94,.14);
  --warn: #EDB04A; --warn-soft: rgba(237,176,74,.14);
  --act: #E8EAEB; --act-ink: #15181B; --act-hover: #FFFFFF;
  --sel: #E8EAEB; --sel-ink: #15181B;
  --plate: #262B2F; --plate-edge: #3A4045; --plate-ink: #EEF0F1;
  --rail: #0F1113; --rail-ink: #8C949A;
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
body { font-size: 14px; line-height: 1.45; font-feature-settings: "ss02" 0; }
::selection { background: rgba(240,106,28,.24); }
a { color: var(--blue); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* type */
.page-head h1 { font-size: 21px; font-weight: 600; letter-spacing: -.012em; }
.modal h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ocard > h3, .ocard-head h3, .otimeline > h3, .ocard-title h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.field > span { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.muted.osmall, .osmall.muted { color: var(--muted); }

/* identifiers on steel tags — the one loud thing */
.mono, .sup-table .mono, .sup-kv .mono, .ret-step .mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0; font-variant-numeric: normal; }
.sup-part, .otop > b, .ohead-title h2, .vault-secret { font-family: var(--mono); letter-spacing: .01em; }
.sup-part:not(.none), .otop > b { display: inline-flex; align-items: center; gap: 6px; padding: 0 7px; height: 24px; border-radius: 4px; font-size: 14px; font-weight: 600;
  background: var(--plate); color: var(--plate-ink); box-shadow: inset 0 0 0 1px var(--plate-edge), inset 0 1px 0 rgba(255,255,255,.5); }
:root[data-theme="dark"] .sup-part:not(.none), :root[data-theme="dark"] .otop > b { box-shadow: inset 0 0 0 1px var(--plate-edge); }
.sup-part.big:not(.none) { height: auto; padding: 4px 12px; font-size: 24px; border-radius: 6px; letter-spacing: 0; }
.ohead-title h2 { font-size: 22px; font-weight: 600; padding: 2px 11px; border-radius: 6px; background: var(--plate); color: var(--plate-ink); box-shadow: inset 0 0 0 1px var(--plate-edge); }
.sup-part.none { font-family: var(--font); font-size: 13px; color: var(--muted); }
.sup-for-pill { font-family: var(--mono); font-weight: 600; letter-spacing: 0; border-radius: 4px; }

/* controls */
.btn { height: 36px; border-radius: var(--r-ctl); font-weight: 600; font-size: 14px; padding: 0 14px; letter-spacing: .005em; }
.btn.mini-btn { height: 30px; font-size: 13px; padding: 0 10px; }
.btn.primary { background: var(--act); color: var(--act-ink); box-shadow: none; }
.btn.primary:hover:not(:disabled) { background: var(--act-hover); filter: none; }
.btn.soft { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.soft:hover:not(:disabled) { background: var(--panel-2); }
.btn.ghost:hover:not(:disabled) { background: var(--field); }
.btn.danger, .btn.ghost.danger { color: var(--red); }
.input, .select, .textarea { border-radius: var(--r-ctl); border-color: var(--line-2); height: 38px; }
.textarea { height: auto; }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--line-2) 60%, var(--ink-2)); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.search input { border-radius: var(--r-ctl); background: var(--panel); border: 1px solid var(--line-2); }
.search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.seg { background: var(--field); border-radius: 8px; padding: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 32px; border-radius: 6px; color: var(--ink-2); font-weight: 500; }
.seg button.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(16,20,24,.06); }
:root[data-theme="dark"] .seg button.on { background: var(--field); box-shadow: 0 0 0 1px var(--line-2); }

/* status: small stamps, not candy pills */
.opill { border-radius: 4px; height: 21px; padding: 0 7px; font-size: 12px; font-weight: 600; letter-spacing: .005em; }
.opill.warn { background: var(--warn-soft); color: var(--warn); }
.ochip { border-radius: 4px; }
.cond { border-radius: 4px; }
.sup-n { border-radius: 4px; }

/* pages */
.page-head { padding: 14px 24px 12px; gap: 10px 12px; }
.page-body { padding: 16px 24px 40px; }
.olist { gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.olist > .orow { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
.olist > .orow:last-child { border-bottom: 0; }
.olist > .orow:hover { background: var(--panel-2); border-color: var(--line); }
.olist > .orow:focus-visible { outline-offset: -2px; }
.olist > :not(.orow) { border-bottom: 1px solid var(--line); }
.othumb { border-radius: 8px; }
.ocard { border-radius: var(--radius); padding: 14px 16px; }
.sup-tabs { background: var(--panel); gap: 2px; padding: 0 20px; }
.sup-tab { height: 42px; border-radius: 0; background: none; padding: 0 12px; color: var(--ink-2); font-weight: 500; box-shadow: inset 0 -2px 0 transparent; }
.sup-tab:hover { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--line-2); }
.sup-tab.on { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); }
.sup-tab .sup-n { background: var(--field); color: var(--ink-2); }
.sup-tab.on .sup-n { background: var(--act); color: var(--act-ink); }
.sup-tab.hot { color: var(--red); }
.req-main > .sup-tabs { background: none; padding: 0; border-bottom: 1px solid var(--line); }
.sup-table th { font-weight: 600; font-size: 12px; color: var(--muted); }
.modal { border-radius: 12px; }
.toast { border-radius: 8px; background: var(--act); color: var(--act-ink); }
.toast.err { background: var(--red); color: #fff; }
.empty-note { color: var(--muted); }

/* the side menu: graphite, the section you're in marked in orange */
.nav-btn.active { background: var(--rail-active); color: var(--rail-fg); }
.nav-btn.active .ico { color: var(--brand); }
.nav-btn:hover { background: var(--rail-hover); }

/* 2.6.0 parts that were too loud */
.req-kind { text-transform: none; letter-spacing: 0; font-size: 12px; }
.sup-ref-group > small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.req-card { border-radius: var(--radius); }
.req-card::before { top: 12px; bottom: 12px; width: 3px; }
.req-card:hover { box-shadow: none; }
.sup-alert { border-radius: var(--radius); }

/* what actually came: three clear rows, each with its colour, easy to hit on a phone */
.sup-got { grid-template-columns: 1fr; gap: 6px; }
.sup-got-btn { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; text-align: left; border-radius: var(--r-ctl); font-size: 14px; }
.sup-got-btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .9; }
.sup-got-btn.cond-new { color: var(--green); } .sup-got-btn.cond-reman { color: var(--blue); } .sup-got-btn.cond-used { color: var(--warn); }
.sup-got-btn small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.sup-got-btn.on { color: #fff; }
.sup-got-btn.on::before { background: #fff; }
@media (max-width: 720px) { .sup-got-btn { min-height: 48px; } }
.sup-kv > a.sup-for-pill, .sup-kv > .sup-for-pill { justify-self: start; }
.rma-page .ohead-title h2 { font-size: 20px; }

/* 2.6.2: "not a photo of the part" — the viewer's button, the confirmation, the list in settings */
.lightbox .lb-act { height: 38px; padding: 0 12px; gap: 6px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font-weight: 600; }
.lightbox .lb-act:hover { background: rgba(255,255,255,.2); }
.notpart-prev { display: block; max-width: 100%; max-height: 220px; margin: 0 auto 10px; border-radius: 7px; border: 1px solid var(--line); object-fit: contain; background: var(--panel-2); }
.notpart-hint { margin: 0; }
.sup-ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px; }
.sup-ad-meta { min-width: 0; line-height: 1.35; }
.sup-ad-meta > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-ad { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); min-width: 0; }
.sup-ad-img { width: 72px; height: 54px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); cursor: zoom-in; }
.sup-ad-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .lightbox .lb-act .lb-act-label { display: none; } .lightbox .lb-act { width: 38px; padding: 0; justify-content: center; } }

/* =====================================================================
   2.6.3 — Geologica and soft grouped forms, the way the team's phones
   already look: white rounded groups on a quiet grey, capsule buttons in
   the parcel orange, segmented switches, inset separators. Statuses are a
   word with a small dot; colour only where someone has to act. The one
   detail of our own: every number people read — part, order, return —
   sits on a tag with one tight corner, the corner of a chat bubble, the
   same as in the TeamHub icon (a parcel that is also a message).
   ===================================================================== */
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/Geologica-Cyrillic.woff') format('woff'); unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/Geologica-Latin.woff') format('woff'); unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --font: "Geologica", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--font);
  --code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --bg: #F2F2F5; --panel: #FFFFFF; --panel-2: #F7F7F9; --field: #EDEDF1;
  --ink: #1C1C1E; --ink-2: #48484E; --muted: #6C6C72; --line: #E4E4E9; --line-2: #D1D1D6;
  --blue: #2563C9; --blue-soft: rgba(37,99,201,.12);
  --green: #248A3D; --green-soft: rgba(36,138,61,.12);
  --red: #D1302A; --red-soft: rgba(209,48,42,.10);
  --warn: #A65300; --warn-soft: rgba(214,120,20,.14);
  --brand: #F06A1C; --brand-soft: rgba(240,106,28,.12);
  --act: #C94F0A; --act-ink: #FFFFFF; --act-hover: #B54608;
  --sel: #1C1C1E; --sel-ink: #FFFFFF; --sel-muted: rgba(255,255,255,.72);
  --tag: #EDEDF1; --tag-ink: #1C1C1E;
  --rail: #18181B; --rail-ink: #9D9DA5; --rail-fg: #F4F4F6; --rail-hover: rgba(255,255,255,.05); --rail-active: rgba(255,255,255,.09);
  --radius: 14px; --r-ctl: 10px; --r-group: 14px;
  --seg-on: #FFFFFF; --seg-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.04);
  --float: 0 10px 30px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
}
:root[data-theme="dark"] {
  --bg: #0E0E10; --panel: #1C1C1E; --panel-2: #222225; --field: #2C2C2F;
  --ink: #F2F2F7; --ink-2: #C7C7CC; --muted: #8E8E93; --line: #2C2C2F; --line-2: #3A3A3D;
  --blue: #6EA2F5; --blue-soft: rgba(110,162,245,.16);
  --green: #4CC38A; --green-soft: rgba(76,195,138,.14);
  --red: #F2665E; --red-soft: rgba(242,102,94,.14);
  --warn: #F0A33C; --warn-soft: rgba(240,163,60,.14);
  --act: #E2611A; --act-ink: #FFFFFF; --act-hover: #EE6E26;
  --sel: #F2F2F7; --sel-ink: #1C1C1E; --sel-muted: rgba(28,28,30,.7);
  --tag: #2C2C2F; --tag-ink: #F2F2F7;
  --rail: #0A0A0B; --rail-ink: #8E8E95;
  --seg-on: #5A5A5F; --seg-shadow: none;
  --float: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
body { font-size: 14px; line-height: 1.43; font-feature-settings: normal; letter-spacing: 0; }
.vault-secret, .scan-box textarea.input, pre, code { font-family: var(--code); }
.mono, .sup-table .mono, .sup-kv .mono, .ret-step .mono { font-family: var(--font); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ototal, .ptile b, .stat b, .sup-nav-count, .ci-time, .meta, .num, .sup-n { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: rgba(240,106,28,.22); }

/* type: size makes the hierarchy, three weights */
.page-head h1 { font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.modal h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.ocard > h3, .ocard-head h3, .otimeline > h3, .ocard-title h3 { font-size: 15px; font-weight: 600; }
.field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* the page sits on the grey; headers have no bar of their own */
.page-head { background: var(--bg); border-bottom: 0; padding: 16px 24px 12px; gap: 10px 12px; }
.page-body { padding: 4px 24px 40px; }

/* controls: capsules and filled fields */
.btn { height: 36px; border-radius: 999px; font-weight: 500; font-size: 14px; padding: 0 16px; letter-spacing: 0; gap: 6px; box-shadow: none; transition: background-color .15s var(--ease), color .15s var(--ease), opacity .15s, transform .12s var(--ease); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.mini-btn { height: 30px; font-size: 13px; padding: 0 12px; }
.btn.primary { background: var(--act); color: var(--act-ink); box-shadow: none; }
.btn.primary:hover:not(:disabled) { background: var(--act-hover); filter: none; }
.btn.soft { background: var(--field); color: var(--ink); box-shadow: none; }
.btn.soft:hover:not(:disabled) { background: color-mix(in srgb, var(--field) 80%, var(--ink) 8%); }
.page-head .btn.soft, .page-head .icon-btn { background: var(--panel); box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05); }
:root[data-theme="dark"] .page-head .btn.soft, :root[data-theme="dark"] .page-head .icon-btn { background: var(--field); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--field); }
.btn:disabled { opacity: .42; }
.btn.danger, .btn.ghost.danger { color: var(--red); }
.icon-btn { border-radius: 999px; }
.input, .select, .textarea { border-radius: var(--r-ctl); border: 1px solid transparent; background: var(--field); height: 38px; }
.textarea { height: auto; }
.input:hover, .select:hover, .textarea:hover { border-color: transparent; background: color-mix(in srgb, var(--field) 85%, var(--ink) 6%); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); background: var(--panel); box-shadow: 0 0 0 3px var(--brand-soft); }
.search input { height: 36px; border-radius: var(--r-ctl); background: var(--field); border: 1px solid transparent; }
.page-head .search input { background: color-mix(in srgb, var(--field) 70%, var(--line-2)); }
:root[data-theme="dark"] .page-head .search input { background: var(--field); }
.search input:focus { border-color: var(--brand); background: var(--panel); box-shadow: 0 0 0 3px var(--brand-soft); }

/* segmented switches, like iOS */
.seg { background: color-mix(in srgb, var(--field) 70%, var(--line-2)); border-radius: 10px; padding: 2px; box-shadow: none; gap: 0; }
:root[data-theme="dark"] .seg { background: var(--field); }
.seg button { height: 30px; border-radius: 8px; color: var(--ink); font-weight: 400; padding: 0 12px; }
.seg button.on { background: var(--seg-on); color: var(--ink); font-weight: 500; box-shadow: var(--seg-shadow); }
.sup-tabs, .req-main > .sup-tabs { background: none; border: 0; padding: 4px 24px 12px; gap: 6px; }
.sup-tab { height: 32px; border-radius: 999px; padding: 0 12px; background: var(--panel); color: var(--ink-2); font-weight: 400; box-shadow: 0 0 0 .5px rgba(0,0,0,.06); }
:root[data-theme="dark"] .sup-tab { background: var(--field); box-shadow: none; }
.sup-tab:hover { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.sup-tab.on, .sup-tab.on:hover { background: var(--sel); color: var(--sel-ink); font-weight: 500; box-shadow: none; }
.sup-tab .sup-n, .sup-tab.on .sup-n { background: none; color: inherit; opacity: .6; padding: 0; min-width: 0; font-weight: 400; }
.sup-tab.hot { color: var(--red); }
.sup-tab.hot.on { color: var(--sel-ink); }
.req-main > .sup-tabs { padding: 0 0 12px; }

/* grouped lists: one white group, separators start after the picture */
.olist { gap: 0; background: var(--panel); border: 0; border-radius: var(--r-group); overflow: hidden; }
.olist > .orow { position: relative; border: 0; border-radius: 0; background: transparent; padding: 12px 16px; gap: 14px; }
.olist > .orow + .orow::after, .olist > :not(.orow) + .orow::after { content: ""; position: absolute; top: 0; right: 0; left: 86px; border-top: 1px solid var(--line); pointer-events: none; }
.olist > .orow:hover { background: var(--panel-2); }
.olist > .orow:focus-visible { outline-offset: -2px; border-radius: var(--r-group); }
.olist > :not(.orow) { border-bottom: 1px solid var(--line); }
.othumb { border-radius: 10px; background: var(--field); }
.otitle { color: var(--ink); }
.osub, .sup-track { color: var(--muted); }
.ocard { border: 0; border-radius: var(--r-group); padding: 16px; box-shadow: none; }
.citem { border: 0; border-radius: 12px; background: var(--panel-2); }

/* numbers people read: a tag with one tight corner, like a chat bubble */
.sup-part:not(.none), .otop > b, .ohead-title h2:not(.none), .sup-for-pill {
  font-family: var(--font); font-weight: 600; letter-spacing: .005em; font-variant-numeric: tabular-nums;
  background: var(--tag); color: var(--tag-ink); box-shadow: none; border-radius: 9px 9px 9px 3px; }
.sup-part:not(.none), .otop > b { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; font-size: 14px; }
.sup-part.big:not(.none) { height: auto; padding: 4px 12px; font-size: 22px; border-radius: 12px 12px 12px 4px; }
.ohead-title h2:not(.none) { font-size: 21px; padding: 3px 12px; border-radius: 12px 12px 12px 4px; }
.ohead-title h2.none { font-family: var(--font); font-size: 19px; font-weight: 500; color: var(--muted); background: none; padding: 0; box-shadow: none; }
.sup-part.none { font-family: var(--font); font-style: normal; font-weight: 400; font-size: 14px; color: var(--muted); }
.sup-part.none.big { font-size: 19px; }
.sup-check { background: var(--panel); color: var(--warn); border-radius: 999px; }
.sup-for-pill { padding: 1px 8px; }

/* statuses: a word and a dot; colour only where someone has to act */
.opill, .cond, .ochip { background: none; box-shadow: none; border: 0; padding: 0; height: auto; border-radius: 0;
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; white-space: nowrap; }
.opill::before, .cond::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }
.opill.ok, .opill.warn, .opill.bad, .opill.info, .opill.muted, .ochip.web, .ochip.ebay, .ochip.code, .ochip.loc,
.cond.cond-new, .cond.cond-reman, .cond.cond-used, .cond.cond-open_box, .cond.cond-parts, .cond.cond-other, .cond.sm, .cond.big {
  background: none; box-shadow: none; height: auto; padding: 0; border-radius: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.cond.sm { margin: 0; vertical-align: baseline; }
.cond.big { font-size: 15px; }
.ochip.web, .ochip.ebay, .ochip.code, .ochip.loc { color: var(--muted); }
.opill.ok::before { background: var(--green); }
.opill.info::before { background: var(--ink-2); opacity: .55; }
.opill.warn::before { background: var(--brand); }
.opill.warn { color: var(--ink); }
.opill.bad { color: var(--red); }
.opill.bad::before { background: var(--red); }
.opill.bad .ico { display: none; }
.opill.muted { color: var(--muted); }
.ochip { color: var(--muted); }
.cond-new::before { background: var(--green); } .cond-reman::before { background: var(--blue); } .cond-used::before { background: var(--warn); }
.opills { gap: 4px 14px; }
.otop { gap: 6px 12px; }

/* side menu: rounded rows, the section you're in filled, its icon orange */
@media (min-width: 761px) {
  .rail .nav-btn { height: 40px; border-radius: 10px; font-size: 14px; font-weight: 400; gap: 12px; }
  .rail .nav-btn.active { background: var(--rail-active); font-weight: 500; }
  .rail .nav-btn.active::before { display: none; }
  .rail-co-name { font-weight: 600; }
}
.nav-badge, .unread { font-variant-numeric: tabular-nums; font-weight: 500; }
@media (max-width: 760px) {
  .rail { background: var(--panel); border-top: 1px solid var(--line); }
  .rail .nav-btn { color: var(--muted); }
  .rail .nav-btn.active { color: var(--brand); background: none; }
  .rail .nav-btn.active::before { display: none; }
  .rail .nav-btn:hover { background: none; }
  .nav-more.active { color: var(--brand); }
  .page-head h1 { font-size: 24px; }
  .page-head { padding: 12px 16px 10px; padding-top: max(12px, env(safe-area-inset-top)); }
  .page-body { padding: 4px 12px 32px; }
  .sup-tabs { padding: 4px 12px 10px; }
  .olist > .orow { padding: 12px; }
  .olist > .orow + .orow::after, .olist > :not(.orow) + .orow::after { left: 80px; }
}

/* chat: Telegram-like as before, the open chat marked in the parcel orange */
.chat-item { border-radius: 12px; }
.chat-item .ci-name { font-weight: 500; }
.chat-item.active { background: var(--act); color: #fff; --dot-ring: var(--act); }
.chat-item.active .ci-time, .chat-item.active .ci-prev, .chat-item.active .ci-prev b { color: rgba(255,255,255,.8); }
.chat-item.active .unread { background: #fff; color: var(--act); }
.bubble { border-radius: 18px; }
.msg-row.last:not(.own) .bubble { border-bottom-left-radius: 6px; }
.msg-row.last.own .bubble { border-bottom-right-radius: 6px; }

/* tasks: three counts in white groups, the priority as a dot */
.ptile { border: 0 !important; border-radius: var(--r-group); background: var(--panel); box-shadow: none; padding: 12px 16px; }
.ptile:hover { box-shadow: 0 0 0 1px var(--line-2); }
.ptile .pdot { width: 10px; height: 10px; }
.ptile-label { font-weight: 500; }
.ptile b { font-size: 26px; font-weight: 500; }
.ptile.on, .ptile.urgent.on, .ptile.high.on, .ptile.normal.on { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.ptile.on small, .ptile.high.on small { color: var(--muted); }
.ptile.on .pdot.urgent { background: var(--p-urgent); } .ptile.on .pdot.high { background: var(--p-high); } .ptile.on .pdot.normal { background: var(--p-normal); }
.ptile.on small.over, .ptile.high.on small.over { color: var(--red); }
.tcard, .trow { border: 0; border-left-width: 0; border-radius: 12px; box-shadow: 0 0 0 .5px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04); }
.tcard.p-urgent, .trow.p-urgent { box-shadow: inset 3px 0 0 var(--p-urgent), 0 0 0 .5px rgba(0,0,0,.05); }
.tcard.p-high, .trow.p-high { box-shadow: inset 3px 0 0 var(--p-high), 0 0 0 .5px rgba(0,0,0,.05); }

/* people */
.badge-card { border: 0; border-radius: 16px; box-shadow: none; }
.badge-card:hover { box-shadow: 0 0 0 1px var(--line-2); }
.badge-card .avatar, .badge-card .avatar img { border-radius: 50%; }
.badge-card .bc-name { font-weight: 500; }
.stat, .dept-chip { border: 0; border-radius: 999px; background: var(--panel); box-shadow: 0 0 0 .5px rgba(0,0,0,.06); font-weight: 400; }
:root[data-theme="dark"] .stat, :root[data-theme="dark"] .dept-chip { background: var(--field); box-shadow: none; }
.stat b { font-weight: 500; }
.stat.on, .dept-chip.on, .dept-chip.on:first-child, .dyear.on { background: var(--sel); color: var(--sel-ink); box-shadow: none; }
.stat.warn b { color: var(--warn); }

/* the purchase check-in: plain choices, one orange action, a quiet "problem" */
.sup-accept { border: 0; border-radius: var(--r-group); }
.sup-accept.ready { box-shadow: inset 0 0 0 2px var(--green); }
.sup-got-btn { border: 0; border-radius: 12px; background: var(--field); color: var(--ink) !important; font-weight: 400; min-height: 44px; }
.sup-got-btn::before { width: 8px; height: 8px; }
.sup-got-btn.cond-new::before { background: var(--green); } .sup-got-btn.cond-reman::before { background: var(--blue); } .sup-got-btn.cond-used::before { background: var(--warn); }
.sup-got-btn.on { background: var(--sel); color: var(--sel-ink) !important; }
.sup-got-btn.on::before { background: currentColor; }
.sup-accept-btns .btn { height: 46px; font-size: 15px; font-weight: 500; border-radius: 999px; }
.btn.sup-ok { background: var(--act); color: #fff; }
.btn.sup-bad { background: var(--field); color: var(--red); }
.btn.sup-bad:hover { background: var(--red-soft); }
.sup-ret-alarm { animation: none; border-radius: var(--r-group); }
.sup-alert, .req-card { border-radius: var(--r-group); }

/* floating things: sheets, toasts, reminders */
.modal { border-radius: 20px; border: 0; box-shadow: var(--float); }
.toast { border-radius: 999px; background: var(--sel); color: var(--sel-ink); box-shadow: var(--float); }
.toast.err { background: var(--red); color: #fff; }
.nag-2fa, .push-nag { border: 0 !important; border-radius: 16px; background: var(--panel); box-shadow: var(--float); }
.nag-2fa > .ico { color: var(--brand); }
.empty-note { color: var(--muted); }

/* the rating: flat medals, one colour bar */
.pod-1 { background: var(--panel); border-color: transparent; box-shadow: inset 0 0 0 2px var(--brand); }
.pod-medal.m1 { background: #E9B23A; } .pod-medal.m2 { background: #C9CED4; } .pod-medal.m3 { background: #D08A4E; }
.rp-bar > i { background: var(--brand); }

:root[data-theme="dark"] .sup-tab.on, :root[data-theme="dark"] .sup-tab.on:hover { background: var(--sel); color: var(--sel-ink); }
/* team cards: the role, the department and the missing sign-in step as quiet words */
.role-chip, .role-chip.owner, .role-chip.chief, .no2fa-chip, .status-tag { background: none; padding: 0; height: auto; border-radius: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.role-chip.owner { color: var(--ink); font-weight: 500; }
.no2fa-chip { color: var(--red); gap: 4px; }
.dept-tag { --dc: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; padding: 3px 10px; border-radius: 999px; color: var(--ink-2); background: var(--field); }
.dept-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dc); }
.send-btn { background: var(--act); box-shadow: none; }
.status-tag.active { color: var(--ink-2); } .status-tag.active::before { background: var(--green); }
.status-tag.terminated { color: var(--red); }
.ci-prev .ico, .pin-main .ico, .found-text .ico, .reply-quote .ico, .compose-bar .grow .ico { display: inline-block; vertical-align: -2px; margin-right: 4px; color: inherit; opacity: .8; }
/* dark leftovers from the older palette */
:root[data-theme="dark"] .col { background: var(--panel); }
.col { border: 0; border-radius: 16px; background: var(--panel-2); }
:root[data-theme="dark"] .tcard:hover, :root[data-theme="dark"] .badge-card:hover { border-color: transparent; }
:root[data-theme="dark"] .opill.warn { color: var(--ink); }
:root[data-theme="dark"] .role-chip.owner { color: var(--ink); }
:root[data-theme="dark"] .role-chip.chief { color: var(--ink-2); }
:root[data-theme="dark"] .ochip.ebay { background: none; color: var(--muted); }
/* rating levels: a word and a dot, like every other status */
.rate-lbl, .rate-lbl.top, .rate-lbl.good, .rate-lbl.mid, .rate-lbl.low { background: none; padding: 0; height: auto; border-radius: 0; font-size: 12px; font-weight: 400; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.rate-lbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.rate-lbl.top::before { background: var(--green); } .rate-lbl.good::before { background: var(--blue); } .rate-lbl.mid::before { background: var(--warn); } .rate-lbl.low::before { background: var(--red); }

/* =====================================================================
   2.8.0 — papers stuck on a returned part, and the shelf label
   ===================================================================== */
/* the shelf label: Brother QL-800 (62 × 100 mm, 29 × 90 mm) or a 4×6 label */
.shl { box-sizing: border-box; overflow: hidden; color: #000; background: #fff; font-family: "Geologica", "IBM Plex Sans", Arial, sans-serif; flex-direction: column; }
@media print {
  body.printing > .print-doc.shl { display: flex !important; }
  body.printing > .print-doc.shl-11x35 { display: grid !important; }
}
.print-doc.shl.measure { display: flex !important; }
.print-doc.shl-11x35.measure { display: grid !important; }
.shl-24x39 { width: 62mm; height: 100mm; padding: 2.6mm 3mm 2.2mm; gap: 1.3mm; }
.shl-4x6 { width: 4in; height: 6in; padding: .2in .22in .18in; gap: .07in; }
.shl-29x39 { width: 2.9in; height: 3.9in; padding: 2.6mm 3.2mm 2.2mm; gap: 1.4mm; }
.shl-29x39 .shl-no { font-size: 22pt; }
.shl-29x39 .shl-brand { font-size: 12pt; }
.shl-29x39 .shl-title { font-size: 10pt; }
.shl-29x39.shl-order .shl-no { font-size: 28pt; }
/* 2.10.5: copies — the same label once per page */
.shl-batch .shl { display: flex; break-after: page; page-break-after: always; }
.shl-batch .shl:last-child { break-after: auto; page-break-after: auto; }
.shl-batch .shl-11x35 { display: grid; }
.shl-top { display: flex; justify-content: space-between; align-items: center; gap: 2mm; min-height: 4mm; }
.shl-brand { font-weight: 700; font-size: 10.5pt; line-height: 1.1; }
.shl-shelf { font: 600 9pt/1 "IBM Plex Mono", Consolas, monospace; border: 1.2px solid #000; border-radius: 1.4mm; padding: .7mm 1.4mm; white-space: nowrap; }
.shl-no { font: 600 19pt/1.05 "IBM Plex Mono", Consolas, monospace; white-space: nowrap; overflow: hidden; letter-spacing: -.01em; flex: none; }
/* 2.12.3: the photo takes only the room left — it never squeezes the number or pushes the barcode off */
.shl-img { flex: 1 1 0; min-height: 0; position: relative; }
.shl-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.shl-preview .shl-img img { filter: grayscale(1) contrast(1.1); } /* the label printer prints in black only */
.shl-title { font-weight: 600; font-size: 9pt; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.shl-desc, .shl-fits { font-size: 7.3pt; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.shl-bar { text-align: center; flex: none; margin-top: auto; }
.shl-bar .bc128 { display: block; width: 100%; height: 12mm; }
.shl-bar span { font: 600 9pt/1.25 "IBM Plex Mono", Consolas, monospace; letter-spacing: .12em; }
.shl.noimg .shl-title { -webkit-line-clamp: 5; font-size: 11pt; }
.shl-4x6 .shl-brand { font-size: 15pt; }
.shl-4x6 .shl-shelf { font-size: 13pt; padding: .04in .08in; }
.shl-4x6 .shl-no { font-size: 30pt; }
.shl-4x6 .shl-title { font-size: 13pt; }
.shl-4x6 .shl-desc, .shl-4x6 .shl-fits { font-size: 10pt; -webkit-line-clamp: 3; }
.shl-4x6 .shl-bar .bc128 { height: .85in; }
.shl-4x6 .shl-bar span { font-size: 13pt; }
.shl-11x35 { width: 90mm; height: 29mm; padding: 1.6mm 2.2mm; grid-template-columns: 24mm 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 2.4mm; row-gap: .3mm; }
.shl-11x35 .shl-img { grid-column: 1; grid-row: 1 / -1; }
.shl-11x35 > :not(.shl-img) { grid-column: 2; min-width: 0; }
.shl-11x35.noimg { grid-template-columns: 1fr; }
.shl-11x35.noimg > * { grid-column: 1; }
.shl-11x35 .shl-top { min-height: 0; }
.shl-11x35 .shl-brand { font-size: 7pt; }
.shl-11x35 .shl-shelf { font-size: 6.5pt; padding: .3mm .8mm; border-width: 1px; }
.shl-11x35 .shl-no { font-size: 11pt; }
.shl-11x35 .shl-title { font-size: 6.5pt; display: block; white-space: nowrap; text-overflow: ellipsis; }
.shl-11x35 .shl-bar .bc128 { height: 6.5mm; }
.shl-11x35 .shl-bar span { font-size: 6.5pt; letter-spacing: .06em; }
/* 2.8.1: the sticker for a part bought for an order — it goes to packing, not to the shelf */
.shl-kind { font-weight: 800; font-size: 9pt; letter-spacing: .06em; }
.shl-order .shl-no { font-size: 24pt; }
.shl-order .shl-bar .bc128 { height: 13mm; }
.shl-place { font-weight: 400; }
.shl-part { display: grid; grid-template-columns: auto 1fr; gap: 2mm; align-items: center; font-size: 8pt; line-height: 1.25; border-top: 1.2px solid #000; padding-top: 1.6mm; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.shl-part img { width: 16mm; height: 16mm; object-fit: contain; }
.shl-part b { font: 600 10pt/1.15 "IBM Plex Mono", Consolas, monospace; }
.shl-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shl-foot { font-size: 7.5pt; font-weight: 700; border-top: 1.2px solid #000; padding-top: 1.2mm; flex: none; }
.shl-4x6.shl-order .shl-no { font-size: 38pt; }
.shl-4x6 .shl-kind, .shl-4x6 .shl-foot { font-size: 12pt; }
.shl-4x6 .shl-part { font-size: 11pt; }
.shl-4x6 .shl-part img { width: 1in; height: 1in; }
.shl-4x6 .shl-part b { font-size: 14pt; }
.shl-11x35.shl-order { grid-template-columns: 1fr; }
.shl-11x35.shl-order > * { grid-column: 1; }
.shl-11x35.shl-order .shl-no { font-size: 13pt; }
.shl-11x35.shl-order .shl-part, .shl-11x35.shl-order .shl-foot { display: none; }
/* the preview in the offer window */
.shl-prev-wrap { display: flex; justify-content: center; padding: 14px; border-radius: 14px; background: var(--field); overflow: hidden; }
.shl.shl-preview { display: flex; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08); border-radius: 3px; }
.shl-11x35.shl-preview { display: grid; zoom: 1.15; }
.shl-4x6.shl-preview { zoom: .62; }
.shl-29x39.shl-preview { zoom: .9; }
.shl-swap { justify-self: start; }

/* =====================================================================
   2.8.1 — every paper in one look: a warehouse form, like a carrier's label.
   A black band says what the paper is; cells ruled in black; small plain labels
   over large values; numbers in Plex Mono. Pure black on white: thermal printers
   turn greys into dots, so nothing here is grey.
   ===================================================================== */
.pp { box-sizing: border-box; color: #000; background: #fff; font: 400 10pt/1.28 'IBM Plex Sans', Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp-46 { width: 4in; padding: .1in; }
.pp-sheet { display: flex; flex-direction: column; min-height: calc(6in - .24in); border: 2px solid #000; }
.pp-band { border-top: .34in solid #000; height: 0; position: relative; flex: none; }
.pp-band-in { position: absolute; left: 0; right: 0; top: -.34in; height: .34in; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 .1in; color: #fff; }
.pp-kind { font: 700 13.5pt/1 'IBM Plex Sans', Arial, sans-serif; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-when { font: 500 10pt/1 'IBM Plex Mono', Consolas, monospace; white-space: nowrap; }
.pp-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 2px solid #000; flex: none; }
.pp-cell { padding: .06in .1in .075in; min-width: 0; }
.pp-cell + .pp-cell { border-left: 1.5px solid #000; }
.pp-k { font: 500 8pt/1.2 'IBM Plex Sans', Arial, sans-serif; margin-bottom: 2px; }
.pp-v { font-weight: 600; font-size: 11pt; line-height: 1.22; }
.pp-v.mono { font: 600 11pt/1.2 'IBM Plex Mono', Consolas, monospace; }
.pp-id { font: 600 19pt/1.04 'IBM Plex Mono', Consolas, monospace; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pp-id.long { font-size: 14.5pt; letter-spacing: -.02em; }
.pp-items + .pp-row { border-top: 2px solid #000; }
.pp-big { font: 700 18pt/1.12 'IBM Plex Sans', Arial, sans-serif; }
.pp-note { font-size: 10pt; line-height: 1.3; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pp-addr { font-size: 10.5pt; line-height: 1.28; }
.pp-head { grid-auto-columns: auto; grid-template-columns: 1fr auto; }
.pp-from { display: flex; flex-direction: column; gap: .05in; }
.pp-co { display: flex; align-items: center; gap: 6px; font: 600 10.5pt/1.15 'IBM Plex Sans', Arial, sans-serif; }
.pp-logo { width: .34in; height: .34in; object-fit: contain; flex: none; }
.pp-qr { display: flex; align-items: center; justify-content: center; padding: .06in; }
.pp-qr img { width: 1.08in; height: 1.08in; display: block; image-rendering: pixelated; }
.pp-two { grid-template-columns: 1.15fr 1fr; grid-auto-columns: auto; }
.pp-two > .pp-cell:only-child { grid-column: 1 / -1; }
.pp-barrow .pp-bar { text-align: center; padding: .07in .14in .05in; }
.pp-bar .bc128 { display: block; width: 100%; height: .5in; }
.pp-bar span { display: block; font: 600 10pt/1.3 'IBM Plex Mono', Consolas, monospace; letter-spacing: .08em; margin-top: 2px; }
/* the items take the room left, so the sheet always closes on one rule above the footer */
.pp-items { flex: 1 0 auto; }
.pp-item { display: grid; grid-template-columns: .74in 1fr auto; gap: .09in; align-items: center; padding: .07in .1in; border-bottom: 1px solid #000; break-inside: avoid; }
.pp-items .pp-item:last-child { border-bottom: 0; }
.pp-img { width: .74in; height: .74in; object-fit: contain; display: block; border: 1px solid #000; background: #fff; }
.pp-title { font-weight: 600; font-size: 10.5pt; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pp-sub { font: 500 8.5pt/1.3 'IBM Plex Mono', Consolas, monospace; margin-top: 1px; overflow-wrap: anywhere; }
.pp-cond { display: inline-block; font: 700 7.5pt/1 'IBM Plex Sans', Arial, sans-serif; letter-spacing: .06em; border: 1.5px solid #000; padding: 2px 4px 1px; margin-bottom: 3px; }
.pp-qty { text-align: center; border: 2px solid #000; min-width: .5in; padding: 2px 4px 3px; }
.pp-qty .pp-k { font-size: 7pt; margin: 0; }
.pp-qty b { display: block; font: 600 17pt/1 'IBM Plex Mono', Consolas, monospace; }
.pp-foot { display: flex; justify-content: space-between; gap: 8px; padding: .06in .1in; border-top: 2px solid #000; font-weight: 500; font-size: 9.5pt; }
.pp-foot span:last-child:not(:first-child) { text-align: right; }
.rs-blank { display: block; height: .3in; border-bottom: 1.5px solid #000; min-width: 1.4in; }
/* the box going back to the supplier: read from a shelf away */
.rslip .pp-qr img { width: 1.25in; height: 1.25in; }
.rslip .pp-item { grid-template-columns: 1in 1fr auto; }
.rslip .pp-img { width: 1in; height: 1in; }
.rslip .pp-title { font-size: 12.5pt; -webkit-line-clamp: 4; }
.rslip .pp-sub { font-size: 9.5pt; }
.rslip .pp-big { font-size: 17pt; }
.rslip .pp-foot { font-size: 10.5pt; }
.slip-batch .pp-46 { break-after: page; }

/* the full-page invoice and packing slip: the same voice on letter paper */
.print-doc:not(.pp):not(.shl) { font: 400 10.5pt/1.4 'IBM Plex Sans', Arial, sans-serif; color: #000; }
.pd-head { border-bottom: 3px solid #000; }
.pd-store { font-weight: 600; font-size: 14pt; }
.pd-kind { font: 700 22pt/1.1 'IBM Plex Sans', Arial, sans-serif; letter-spacing: .01em; }
.pd-title b, .pd-name + .pd-sub { font-family: 'IBM Plex Mono', Consolas, monospace; }
.pd-label { font: 500 9pt/1.3 'IBM Plex Sans', Arial, sans-serif; text-transform: none; letter-spacing: 0; color: #000; }
.pd-table th { font: 600 9pt/1.3 'IBM Plex Sans', Arial, sans-serif; text-transform: none; letter-spacing: 0; color: #000; border-bottom: 2px solid #000; }
.pd-table td { border-bottom: 1px solid #000; }
.pd-img { border: 1px solid #000; border-radius: 0; }
.pd-sub { color: #000; }
.pd-qty, .pd-table td.num, .pd-totals .num { font-family: 'IBM Plex Mono', Consolas, monospace; }
.pd-totals tr.strong td { border-top: 2px solid #000; }
.pd-foot { border-top: 2px solid #000; color: #000; }

/* the shelf label and the order sticker: the same type, square plates */
.shl { font-family: 'IBM Plex Sans', Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.shl-brand { font-weight: 700; }
.shl-shelf { border-radius: 0; border-width: 1.5px; }
.shl-title { font-weight: 600; }
/* 2.10.5: the order sticker's black band is one row: the word on the left, the way it ships on the right —
   the right side shrinks, then is cut short, never written over the left. A border, not a background, so it
   prints black even with "background graphics" off. */
.shl-band { position: relative; flex: none; border-top: 7mm solid #000; height: 0; margin: -2.6mm -3mm 0; }
.shl-band-in { position: absolute; left: 0; right: 0; top: -7mm; height: 7mm; display: flex; align-items: center; gap: 2.5mm; padding: 0 3mm; color: #fff; }
.shl-band .shl-kind { flex: none; font-weight: 800; font-size: 11pt; letter-spacing: .03em; white-space: nowrap; }
.shl-band-ship { flex: 1 1 auto; min-width: 0; text-align: right; font-weight: 600; font-size: 8.5pt; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shl-4x6 .shl-band { border-top-width: .4in; margin: -.2in -.22in 0; }
.shl-4x6 .shl-band-in { top: -.4in; height: .4in; padding: 0 .22in; gap: .14in; }
.shl-4x6 .shl-band .shl-kind { font-size: 17pt; }
.shl-4x6 .shl-band-ship { font-size: 12pt; }
.shl-29x39 .shl-band { margin: -2.6mm -3.2mm 0; }
.shl-29x39 .shl-band-in { padding: 0 3.2mm; }
.shl-11x35 .shl-band { margin: 0; border-top-width: 5mm; }
.shl-11x35 .shl-band-in { top: -5mm; height: 5mm; padding: 0 1.5mm; gap: 1.5mm; }
.shl-11x35 .shl-band .shl-kind { font-size: 7.5pt; }
.shl-11x35 .shl-band-ship { font-size: 6.5pt; }
.shl-part img { border: 1px solid #000; }
.shl-foot { font-weight: 600; border-top-width: 1.5px; }
.shl-order .shl-part { flex: 0 1 auto; align-items: start; }
.shl-order .shl-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 2mm; }
.shl-cust .shl-place { font-weight: 400; }
.shl-order .shl-bar { margin-top: 1mm; }

/* 2.8.3: the order for a new return / warranty — any order by its number; cancelled and unshipped ones listed, not pickable */
.rma-found:empty { display: none; }
.rma-pick { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border-radius: 8px; color: var(--ink); }
.rma-pick .sup-part { flex: none; font-size: 13px; height: 22px; }
.rma-pick .nowrap { white-space: nowrap; flex: none; }
.rma-pick .opill { flex: none; }
.rma-pick.off, .rma-pick.off:hover { background: none; cursor: not-allowed; color: var(--ink-2); }
.rma-pick.off .sup-part { opacity: .7; }
@media (max-width: 560px) { .rma-pick { flex-wrap: wrap; row-gap: 4px; } .rma-pick .grow { flex-basis: calc(100% - 140px); } .rma-pick small.nowrap { display: none; } }

/* 2.8.3: reference photos that come with TeamHub — a genuine/fake pair in the card, the full comparison in a window */
.ref-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ref-pair-item { display: grid; gap: 4px; padding: 0; text-align: left; border-radius: 8px; cursor: zoom-in; }
.ref-pair-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); background: var(--panel-2); }
.ref-pair-item.genuine img { border-color: color-mix(in srgb, var(--green) 60%, transparent); }
.ref-pair-item.fake img { border-color: color-mix(in srgb, var(--red) 60%, transparent); }
.ref-pair-item small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.ref-pair-item.genuine small { color: var(--green); }
.ref-pair-item.fake small { color: var(--red); }
.ref-pair-btn { grid-column: 1 / -1; justify-self: start; }
.modal.wide.ref-cmp-modal { width: min(1080px, 100%); }
.ref-checks { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--panel-2); }
.ref-checks summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ref-checks ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.ref-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ref-col { display: grid; gap: 14px; }
.ref-col h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.ref-col h4 small { margin-left: auto; font-weight: 500; font-size: 13px; }
.ref-col.genuine h4 { color: var(--green); border-bottom-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ref-col.fake h4 { color: var(--red); border-bottom-color: color-mix(in srgb, var(--red) 45%, transparent); }
.ref-fig { margin: 0; display: grid; gap: 8px; }
.ref-img { padding: 0; border-radius: 8px; cursor: zoom-in; display: block; }
.ref-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--panel-2); border-radius: 8px; border: 2px solid var(--line); }
.ref-col.genuine .ref-img img { border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.ref-col.fake .ref-img img { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.ref-fig figcaption { display: grid; gap: 4px; justify-items: start; font-size: 13px; line-height: 1.4; color: var(--ink); }
.ref-fig figcaption .sup-part { font-size: 13px; height: 22px; }
@media (max-width: 720px) { .ref-cmp { grid-template-columns: 1fr; } }
.lightbox .lb-cap { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 40px); width: min(760px, calc(100vw - 32px));
  display: grid; gap: 2px; color: #fff; font-size: 14px; line-height: 1.4; background: rgba(0,0,0,.62); padding: 8px 12px; border-radius: 8px; }
.lightbox .lb-cap:empty { display: none; }
.lightbox.zoomed .lb-cap { display: none; }

/* 2.9.0: voice messages */
.mic-btn.busy { opacity: .6; pointer-events: none; }
.composer-inner [hidden] { display: none !important; }
.rec-bar { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 6px; background: var(--panel); border-radius: 24px; box-shadow: var(--bubble-shadow); }
.rec-bar .rec-del { color: var(--red); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; animation: recBlink 1.2s ease-in-out infinite; }
@keyframes recBlink { 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; }
.rec-live { flex: 1; min-width: 40px; height: 26px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.rec-live i { flex: 1; max-width: 4px; min-height: 3px; height: 10%; border-radius: 2px; background: var(--blue); transition: height 90ms linear; }
.rec-hint { font-size: 12px; white-space: nowrap; }
@media (max-width: 560px) { .rec-hint { display: none; } }
.voice { display: flex; align-items: center; gap: 10px; min-width: min(280px, 62vw); padding: 2px 0; }
.vp-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.vp-btn .ico { margin-left: 2px; }
.voice.playing .vp-btn .ico { margin-left: 0; }
.vmid { flex: 1; min-width: 0; display: grid; gap: 3px; }
.vw { height: 26px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.vw i { flex: 1; max-width: 3px; min-height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--blue) 35%, transparent); }
.vw i.on { background: var(--blue); }
.vt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vr { flex: none; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.bubble.voice-only { min-width: min(300px, 70vw); }
.rec-wait { display: none; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 2.9.1: the bar is up while the browser asks for the microphone; the bars move on their own until the
   level reading starts (or on a device that gives none) */
.rec-bar.wait .rec-dot { background: var(--muted); }
.rec-bar.wait .rec-time, .rec-bar.wait .rec-hint { display: none; }
.rec-bar.wait .rec-wait { display: block; flex: none; max-width: 52%; }
.rec-bar.wait .rec-live i, .rec-bar.idle .rec-live i { animation: recIdle 1.1s ease-in-out infinite; }
.rec-bar.wait .rec-live i { background: var(--muted); }
@keyframes recIdle { 0%, 100% { height: 14%; } 50% { height: 62%; } }
.mic-modal .mic-why { margin: 0 0 10px; }
.mic-steps { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.45; }
.mic-code { margin: 0; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } .rec-live i { transition: none; } .rec-bar.wait .rec-live i, .rec-bar.idle .rec-live i { animation: none; height: 30%; } }

/* 2.9.0: calls — the line in the chat, and the call window */
.call-line { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 7px 0 2px 44px; padding: 8px 10px 8px 12px; background: var(--bubble); border-radius: 14px; box-shadow: var(--bubble-shadow); font-size: 14px; max-width: min(420px, 86%); }
.call-line.out { align-self: flex-end; margin-left: 0; background: var(--bubble-own); }
.call-line .cl-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); flex: none; }
.call-line.miss .cl-ic { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.call-line .cl-txt { font-weight: 500; white-space: nowrap; }
.call-line .cl-dur { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.call-line .cl-time { font-size: 12px; color: var(--muted); margin-left: auto; }
.call-line .cl-back { height: 28px; }
.call-ov { position: fixed; right: 20px; top: 76px; z-index: 120; width: 340px; max-width: calc(100vw - 32px); } /* above the chat, clear of the message box */
.call-card { position: relative; background: #17212B; color: #fff; border-radius: 18px; padding: 22px 18px 18px; box-shadow: 0 18px 48px rgba(0,0,0,.35); display: grid; gap: 18px; justify-items: center; text-align: center; }
.call-card .call-min { position: absolute; top: 8px; right: 8px; color: rgba(255,255,255,.75); }
.call-who { display: grid; gap: 10px; justify-items: center; min-width: 0; max-width: 100%; }
.call-txt { display: grid; gap: 3px; min-width: 0; max-width: 100%; }
.call-txt b { font-size: 18px; font-weight: 600; }
.call-status { font-size: 14px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.call-btns { display: flex; gap: 28px; justify-content: center; }
.call-round { display: grid; justify-items: center; gap: 6px; color: #fff; background: none; }
.call-round > .ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; }
.call-round small { font-size: 12px; color: rgba(255,255,255,.8); }
.call-round.green > .ico { background: #1FA855; }
.call-round.red > .ico { background: #E5484D; }
.call-round.soft > .ico { background: rgba(255,255,255,.14); }
.call-round.soft.on > .ico { background: #fff; color: #17212B; }
.call-round:hover > .ico { filter: brightness(1.08); }
.call-round:focus-visible > .ico { outline: 2px solid var(--brand); outline-offset: 3px; }
.call-ov.incoming .call-card { box-shadow: 0 0 0 3px rgba(31,168,85,.55), 0 18px 48px rgba(0,0,0,.35); }
.call-ov.ended .call-card { opacity: .92; }
.call-ov.mini { width: auto; }
.call-ov.mini .call-card { grid-auto-flow: column; align-items: center; gap: 12px; padding: 8px 44px 8px 10px; border-radius: 30px; text-align: left; justify-items: start; }
.call-ov.mini .call-who { grid-auto-flow: column; align-items: center; gap: 10px; }
.call-ov.mini .call-txt b { font-size: 14px; }
.call-ov.mini .call-status { font-size: 12px; }
.call-ov.mini .call-btns { gap: 8px; }
.call-ov.mini .call-round > .ico { width: 40px; height: 40px; }
.call-ov.mini .call-round small { display: none; }
.call-ov.mini .call-min { top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .call-ov:not(.mini) { inset: 0; width: auto; max-width: none; }
  .call-ov:not(.mini) .call-card { height: 100%; border-radius: 0; align-content: space-between; padding: calc(64px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom)); }
  .call-ov:not(.mini) .call-txt b { font-size: 22px; }
  .call-ov.mini { left: 12px; right: 12px; top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
  .call-ov.mini .call-card { width: 100%; }
}

/* 2.9.2: protection — the virus line in a chat, the shield list, the password window */
.sys-msg.virus-line { background: var(--red); color: #fff; display: inline-flex; align-items: center; gap: 6px; max-width: 92%; text-align: left; line-height: 1.35; padding: 6px 12px; border-radius: 10px; }
.sys-msg.virus-line .ico { flex: none; }
.sec-shield { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.sec-shield li { display: flex; gap: 8px; align-items: flex-start; }
.sec-shield li .ico { color: var(--green); flex: none; margin-top: 2px; }
.sec-shield b { color: var(--ink); font-weight: 600; }
.reauth-modal .field { margin-top: 12px; }

/* 2.9.2: what's new — one new thing per page, with a small live copy to try */
.wn-modal { width: min(560px, calc(100vw - 32px)); }
.wn { display: grid; gap: 14px; }
.wn-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wn-kicker { font-size: 13px; font-weight: 600; color: var(--brand); }
.wn-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wn-stage { grid-template-columns: minmax(0, 1fr); position: relative; border-radius: 10px; border: 1px solid var(--line); min-height: 236px; padding: 22px 18px; display: grid; align-content: center; justify-items: center; gap: 16px; overflow: hidden; }
.wn-stage.wall { background-color: var(--wall-bg); background-image: var(--wall-img, var(--wall-light)); background-size: var(--wall-size, auto); }
.wn-stage-plain { background: var(--panel-2); justify-items: stretch; }
.wn-row { display: flex; align-items: flex-end; gap: 8px; justify-self: start; width: 100%; min-width: 0; }
.wn-stage .bubble.voice-only { min-width: 0; flex: 0 1 330px; }
.wn-stage .voice { min-width: 0; }
.wn-bubble { max-width: min(360px, 100%); min-width: 0; }
.wn-from { font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.wn-composer { justify-self: stretch; display: flex; align-items: center; gap: 10px; }
.wn-field { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 44px; border-radius: 22px; background: var(--panel); color: var(--muted); display: flex; align-items: center; padding: 0 16px; font-size: 14px; box-shadow: var(--bubble-shadow); }
.wn-mic { width: 48px; height: 48px; border-radius: 50%; background: var(--act); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--act) 22%, transparent); }
.wn-call { width: min(300px, 100%); box-shadow: none; }
.wn-call.ringing { box-shadow: 0 0 0 3px rgba(31,168,85,.55); }
.wn-call .wn-again { background: rgba(255,255,255,.14); color: #fff; }
.wn-order { display: grid; gap: 16px; justify-items: center; }
.wn-toast { display: flex; align-items: center; gap: 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-weight: 500; box-shadow: var(--bubble-shadow); }
.wn-shield { margin: 0 auto; font-size: 16px; gap: 14px; }
.wn-shield li { align-items: center; }
.wn-menu { position: static; display: grid; gap: 2px; padding: 6px; min-width: 220px; justify-self: end; box-shadow: 0 10px 28px rgba(0,0,0,.16); pointer-events: none; }
.wn-menu .wn-hl { background: color-mix(in srgb, var(--red) 10%, transparent); }
.modal .wn-title { margin: 2px 0 -6px; font-size: 20px; font-weight: 600; line-height: 1.25; display: block; }
.wn-text { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.wn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.wn-dots { display: flex; gap: 6px; }
.wn-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.wn-dots i.on { background: var(--brand); }
.wn-btns { display: flex; gap: 8px; }
@media (max-width: 560px) {
  .wn-stage { min-height: 210px; padding: 18px 12px; }
  .wn-foot { flex-direction: column-reverse; align-items: stretch; }
  .wn-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .wn-dots { justify-content: center; }
}

/* 2.9.4: asking the supplier for the tracking number */
.sup-asked { display: grid; gap: 2px; font-size: 13px; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--panel-2); }
.sup-asked.late { background: var(--red-soft); color: var(--red); }
.sup-asked .icon { vertical-align: -2px; }
.sup-urgent-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sup-urgent > .grow { flex: 1 1 150px; min-width: 0; }
.sup-urgent > .btn, .sup-urgent > .sup-urgent-acts { margin-left: auto; }
.sup-urgent > .muted { font-weight: 500; color: var(--ink-2); flex: 1 1 100%; padding-left: 24px; }
.sup-ask-ready { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.sup-ask-preview { margin: 0; padding: 10px 12px; border-left: 3px solid var(--line-2); background: var(--panel-2); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; color: var(--ink); line-height: 1.45; font-size: 14px; }
.sup-ask-send { justify-self: start; }
@media (max-width: 640px) { .sup-ask-send { justify-self: stretch; } }

/* ---------- 2.9.6: the glass sign-in — gold waves, a glass card with two cut corners ---------- */
.auth.gl {
  --gl-bg: url('/static/auth/gold.jpg'); --gl-bg-s: url('/static/auth/gold-s.jpg'); --gl-base: #08080a;
  --gl-dim: rgba(255,255,255,.68); --gl-mute: rgba(255,255,255,.46);
  --ink: #fff; --ink-2: rgba(255,255,255,.84); --muted: rgba(255,255,255,.64); --line: rgba(255,255,255,.16);
  color-scheme: dark; color: #fff; position: relative; overflow-x: hidden; padding: 40px 16px;
  background: radial-gradient(circle at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.75) 100%) fixed,
    var(--gl-base) var(--gl-bg) center / cover no-repeat fixed;
}
@media (max-width: 700px) {
  .auth.gl { padding: 28px 14px; background: radial-gradient(circle at center, rgba(0,0,0,.3) 0%, rgba(0,0,0,.78) 100%), var(--gl-base) var(--gl-bg-s) center / cover no-repeat; }
}
.gl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gl-stage { position: relative; width: min(440px, 100%); margin: auto; animation: glIn .5s cubic-bezier(.16,1,.3,1) both; }
.gl-stage.wide { width: min(580px, 100%); }
@keyframes glIn { from { transform: translateY(12px) scale(.95); } to { transform: none; } }
.gl-card > :not(.gl-glow), .gl-chip-float > * { animation: glFade .45s ease both; }
@keyframes glFade { from { opacity: 0; } }
.gl-card { position: relative; }
.gl-glow { position: absolute; inset: -22%; background: radial-gradient(circle, rgba(34,197,94,.26) 0%, rgba(18,18,18,0) 62%); opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.auth.gl.ok .gl-glow { opacity: 1; }
.gl-shadow { position: absolute; inset: 0; filter: blur(28px); transform: translateY(26px); pointer-events: none; }
.gl-shadow i { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.gl-blur { position: absolute; inset: 0; backdrop-filter: blur(36px) saturate(185%) brightness(1.04); -webkit-backdrop-filter: blur(36px) saturate(185%) brightness(1.04); }
.gl-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(22,22,28,.52) 35%, rgba(10,10,14,.76) 100%),
    radial-gradient(ellipse at 85% 70%, rgba(var(--gl-tint-rgb),.16) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 15%, rgba(255,255,255,.12) 0%, transparent 50%); }
.gl-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gl-content { position: relative; padding: 34px 38px 40px; }
.gl-chip { position: absolute; width: 70px; height: 70px; z-index: 3; pointer-events: none; }
.gl-chip.tl { top: -2px; left: -2px; }
.gl-chip.br { bottom: -2px; right: -2px; }
.gl-chip-float { position: relative; width: 100%; height: 100%; animation: glFloatTL 6s ease-in-out infinite alternate; }
.gl-chip.br .gl-chip-float { animation: glFloatBR 6s ease-in-out 1.2s infinite alternate; }
@keyframes glFloatTL { to { transform: translate(-3px, -3px); } }
@keyframes glFloatBR { to { transform: translate(3px, 3px); } }
.gl-chip-shadow { position: absolute; inset: 0; filter: blur(14px); transform: translateY(12px); }
.gl-chip-shadow i { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.gl-chip-glass { position: absolute; inset: 0; backdrop-filter: blur(30px) saturate(180%) brightness(1.05); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.05);
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(32,32,40,.5) 50%, rgba(16,16,22,.66) 100%); }
.gl-chip.br .gl-chip-glass { background: linear-gradient(315deg, rgba(255,255,255,.2) 0%, rgba(32,32,40,.5) 50%, rgba(16,16,22,.66) 100%); }
.gl-chip-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* what is on the card */
.auth.gl .auth-mark { flex-direction: column; gap: 9px; margin-bottom: 14px; text-align: center; }
.auth.gl .auth-mark .logo { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--gl-acc);
  background: rgba(var(--gl-acc-rgb),.08); border: 1px solid rgba(var(--gl-acc-rgb),.3); box-shadow: 0 0 20px rgba(var(--gl-acc-rgb),.22), inset 0 1px 1px rgba(255,255,255,.3);
  transition: background .4s, border-color .4s, box-shadow .4s, color .4s; }
.auth.gl .auth-mark .logo .app-mark { width: 36px; height: 36px; }
.auth.gl .auth-mark b { font-size: 14px; font-weight: 500; color: var(--gl-dim); }
.auth.gl .auth-mark.ok .logo { color: #22c55e; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.5); box-shadow: 0 0 26px rgba(34,197,94,.4); }
.auth.gl h1 { text-align: center; font-size: 27px; font-weight: 700; line-height: 1.15; color: #fff; margin: 0 0 8px; }
.auth.gl.ok h1 { color: #22c55e; text-shadow: 0 0 28px rgba(34,197,94,.5); }
.auth.gl .gl-content > p { text-align: center; color: var(--gl-dim); font-size: 14px; line-height: 1.45; max-width: 340px; margin: 0 auto 20px; }
.gl-swap { animation: glSwap .35s ease both; }
@keyframes glSwap { from { opacity: 0; transform: translateY(8px); } }
.auth.gl .field > span { color: var(--gl-dim); }
.auth.gl .input, .auth.gl textarea.input { background: rgba(10,10,14,.55); border: 1px solid rgba(255,255,255,.17); color: #fff; box-shadow: inset 0 2px 6px rgba(0,0,0,.35); }
.auth.gl .input::placeholder { color: var(--gl-mute); }
.auth.gl .input:focus { border-color: var(--gl-acc); box-shadow: 0 0 0 3px rgba(var(--gl-acc-rgb),.2); }
.auth.gl .input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #15151b inset; caret-color: #fff; }
.auth.gl .btn.primary { height: 48px; border-radius: 14px; gap: 9px; font-weight: 700; color: var(--gl-acc-ink);
  background: linear-gradient(180deg, var(--gl-acc-hi) 0%, var(--gl-acc) 100%);
  box-shadow: 0 8px 24px rgba(var(--gl-acc-rgb),.36), inset 0 1px 1px rgba(255,255,255,.5); transition: transform .14s, box-shadow .2s, filter .14s; }
.auth.gl .btn.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 30px rgba(var(--gl-acc-rgb),.5); }
.auth.gl .btn.primary:active:not(:disabled) { transform: translateY(1px); }
.auth.gl .btn.primary:disabled { opacity: .72; cursor: default; }
.auth.gl .btn.primary.ok { opacity: 1; color: #fff; background: linear-gradient(180deg, #34d399 0%, #10b981 100%); box-shadow: 0 8px 24px rgba(16,185,129,.45); }
.auth.gl .btn.ghost { color: #fff; }
.gl-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); border-top-color: var(--gl-acc-ink); animation: glSpin .7s linear infinite; }
@keyframes glSpin { to { transform: rotate(360deg); } }
.auth.gl .linkish { color: var(--gl-acc); }
.auth.gl .linkish:disabled { color: var(--gl-mute); text-decoration: none; cursor: default; }
.auth.gl .form-error { color: #ff7b7b; text-align: center; }
.auth.gl .form-error:empty { display: none; }
.auth.gl .check-row { color: var(--gl-dim); font-size: 14px; justify-content: center; }
.auth.gl .switch i { background: rgba(255,255,255,.22); }
.auth.gl .switch input:checked + i { background: var(--gl-acc-2); }
.auth.gl .muted { color: var(--gl-dim); }
.auth.gl .gl-note { text-align: center; }
.auth.gl .gl-note:empty { display: none; }
.auth.gl .auth-request { border-top-color: rgba(255,255,255,.14); }
.auth.gl .lang-chip { color: var(--gl-dim); border-color: rgba(255,255,255,.18); }
.auth.gl .lang-chip:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.auth.gl .lang-chip.on { color: var(--gl-acc-ink); background: var(--gl-acc); border-color: transparent; }
.auth.gl .auth-done { background: rgba(var(--gl-acc-rgb),.12); color: var(--gl-acc); margin: 0 auto 14px; }

/* the code in six boxes */
.otp-row { --box: 50px; --gap: 9px; --orbit: 58px; position: relative; display: grid; place-items: center; min-height: 168px; margin: -10px 0 -8px; }
.otp-orbit { position: relative; z-index: 2; display: flex; gap: var(--gap); }
.otp-box { position: relative; width: var(--box); height: var(--box); flex: none; border-radius: 14px; overflow: hidden; background: #1a1a24;
  border: 1.5px solid rgba(255,255,255,.17); box-shadow: inset 0 2px 6px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s; }
.otp-digit { position: absolute; inset: 2.5px; z-index: 1; display: grid; place-items: center; border-radius: 11.5px; background: #14141c;
  color: #fff; font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; transition: color .2s; }
.otp-box.is-filled { border-color: rgba(var(--gl-acc-rgb),.45); }
.otp-box.is-filled .otp-digit { background: #17160f; }
.otp-box.is-active { border-color: var(--gl-acc); transform: scale(1.08); box-shadow: 0 8px 24px rgba(var(--gl-acc-rgb),.35); z-index: 3; }
.otp-box.is-active .otp-digit:empty::after { content: ""; width: 2px; height: 24px; border-radius: 1px; background: var(--gl-acc); animation: otpCaret 1s steps(1) infinite; }
@keyframes otpCaret { 50% { opacity: 0; } }
.otp-real { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: .01; border: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: text; }
.otp-real::selection { background: transparent; }
.otp-row.is-busy .otp-box { border-color: rgba(var(--gl-acc-rgb),.6); }
.otp-row.has-error .otp-box { border-color: #ff4d4f; box-shadow: 0 0 18px rgba(255,77,79,.45); animation: otpShake .45s cubic-bezier(.36,.07,.19,.97) both; }
.otp-row.has-error .otp-digit { color: #ff6b6b; }
@keyframes otpShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.otp-row.is-win .otp-box { transition: none; transform: none; }
.otp-row.is-win .otp-box::before { content: ""; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0%, transparent 55%, rgba(var(--gl-spin-rgb),.15) 70%, rgb(var(--gl-spin-rgb)) 92%, var(--gl-spin-hi) 100%); animation: glSpin 1.2s linear infinite; }
.otp-row.is-done .otp-box::before { background: conic-gradient(from 0deg, #22c55e 0%, #16a34a 50%, #22c55e 100%); }
.otp-row.is-merged .otp-digit { color: transparent; }
.otp-row.is-done .otp-box:first-child { border-color: #22c55e; animation: otpGlow 1.5s .4s ease-in-out infinite alternate; }
@keyframes otpGlow { from { box-shadow: 0 0 8px rgba(34,197,94,.4); } to { box-shadow: 0 0 28px rgba(34,197,94,.95); } }
.otp-tick { position: absolute; left: 50%; top: 50%; z-index: 4; width: 28px; height: 28px; opacity: 0; transform: translate(-50%, -50%) scale(.5);
  transition: opacity .3s, transform .5s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.otp-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s ease-out .2s; }
.otp-row.is-done .otp-tick { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.otp-row.is-done .otp-tick path { stroke-dashoffset: 0; }
.otp-ring { position: absolute; left: 50%; top: 50%; z-index: 0; width: 138px; height: 138px; opacity: 0; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.otp-ripple { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1.5px solid #22c55e; box-shadow: 0 0 16px rgba(34,197,94,.45); opacity: 0; pointer-events: none; }
.otp-sparks { position: absolute; inset: 0; pointer-events: none; }
.otp-sparks i { position: absolute; left: 50%; top: 50%; z-index: 3; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px 1px #22c55e; opacity: 0; pointer-events: none; }
@media (max-width: 480px) {
  .gl-content { padding: 28px 20px 34px; }
  .auth.gl h1 { font-size: 23px; }
  .otp-row { --box: 42px; --gap: 7px; --orbit: 50px; min-height: 146px; }
  .otp-digit { font-size: 21px; border-radius: 10px; }
  .otp-box { border-radius: 12px; }
}
@media (max-width: 350px) { .otp-row { --box: 38px; --gap: 5px; --orbit: 46px; min-height: 134px; } }
.auth.gl .input:focus-visible { outline: none; }
.auth.gl .auth-links { justify-content: center; gap: 8px 22px; text-align: center; }

/* 2.9.6: the looks the administrators choose — backgrounds, and the colours that go with them */
.auth.gl[data-bg="graphite"] { --gl-bg: url('/static/auth/graphite.jpg'); --gl-bg-s: url('/static/auth/graphite-s.jpg'); --gl-base: #121317; }
.auth.gl[data-bg="highway"] { --gl-bg: url('/static/auth/highway.jpg'); --gl-bg-s: url('/static/auth/highway-s.jpg'); --gl-base: #05080f; }
.auth.gl[data-bg="blueprint"] { --gl-bg: url('/static/auth/blueprint.jpg'); --gl-bg-s: url('/static/auth/blueprint-s.jpg'); --gl-base: #0f4a7c; }
.auth.gl[data-bg="steel"] { --gl-bg: url('/static/auth/steel.jpg'); --gl-bg-s: url('/static/auth/steel-s.jpg'); --gl-base: #2a2e33; }
.auth.gl[data-bg="aurora"] { --gl-bg: url('/static/auth/aurora.jpg'); --gl-bg-s: url('/static/auth/aurora-s.jpg'); --gl-base: #02050d; }
.auth.gl[data-bg="own"] { --gl-base: #0b0c10; }
[data-look="gold"] { --gl-acc: #ffd600; --gl-acc-hi: #fff04d; --gl-acc-rgb: 255,214,0; --gl-acc-ink: #0c0d10; --gl-acc-2: #e0b400; --gl-tint-rgb: 230,175,75; --gl-rim-a: #f3d790; --gl-rim-b: #e5b850; --gl-spin-rgb: 240,81,51; --gl-spin-hi: #ffb4a2; }
[data-look="graphite"] { --gl-acc: #ff8a2a; --gl-acc-hi: #ffb46b; --gl-acc-rgb: 255,138,42; --gl-acc-ink: #1a0b00; --gl-acc-2: #e8731a; --gl-tint-rgb: 255,140,60; --gl-rim-a: #ffc48f; --gl-rim-b: #ff9a4a; --gl-spin-rgb: 255,122,26; --gl-spin-hi: #ffd0a8; }
[data-look="highway"] { --gl-acc: #ffb547; --gl-acc-hi: #ffd690; --gl-acc-rgb: 255,181,71; --gl-acc-ink: #1a1000; --gl-acc-2: #e89a2a; --gl-tint-rgb: 255,120,80; --gl-rim-a: #ffd0a0; --gl-rim-b: #ff7a5a; --gl-spin-rgb: 255,70,50; --gl-spin-hi: #ffc0a8; }
[data-look="blueprint"] { --gl-acc: #6cd3ff; --gl-acc-hi: #b8eeff; --gl-acc-rgb: 108,211,255; --gl-acc-ink: #04182b; --gl-acc-2: #3fb5e8; --gl-tint-rgb: 120,190,255; --gl-rim-a: #cdeeff; --gl-rim-b: #7cc8ff; --gl-spin-rgb: 76,195,255; --gl-spin-hi: #d6f3ff; }
[data-look="steel"] { --gl-acc: #e3ebf3; --gl-acc-hi: #ffffff; --gl-acc-rgb: 227,235,243; --gl-acc-ink: #11161c; --gl-acc-2: #9fb4c8; --gl-tint-rgb: 200,215,230; --gl-rim-a: #ffffff; --gl-rim-b: #b8c7d6; --gl-spin-rgb: 220,232,245; --gl-spin-hi: #ffffff; }
[data-look="aurora"] { --gl-acc: #43e8a6; --gl-acc-hi: #98f7cf; --gl-acc-rgb: 67,232,166; --gl-acc-ink: #03140d; --gl-acc-2: #22c08a; --gl-tint-rgb: 70,220,170; --gl-rim-a: #c8ffe8; --gl-rim-b: #5fe0b0; --gl-spin-rgb: 67,232,166; --gl-spin-hi: #c8ffe8; }

/* the choice in the company settings */
.sl-wrap { display: grid; gap: 10px; }
.sl-wrap .cs-section.first { margin-top: 4px; }
.sl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
.sl-tile { display: grid; gap: 7px; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.sl-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--radius); background: #111 center / cover no-repeat; border: 1px solid var(--line); overflow: hidden; transition: transform .2s ease; }
.sl-tile:hover .sl-art { transform: translateY(-1px); transition-duration: .14s; }
.sl-tile:active .sl-art { transform: translateY(1px); transition-duration: .09s; }
.sl-tile.on .sl-art, .sl-tile:focus-visible .sl-art { outline: 2px solid var(--brand); outline-offset: 2px; }
.sl-tile:focus-visible { outline: none; }
.sl-mini { display: grid; align-content: center; gap: 4px; width: 32%; aspect-ratio: 3 / 4; padding: 0 9%; border-radius: 6px; background: rgba(14,14,18,.6); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.sl-mini b { height: 5px; border-radius: 2px; background: rgba(255,255,255,.24); }
.sl-mini em { height: 7px; margin-top: 2px; border-radius: 3px; background: var(--gl-acc); }
.sl-on { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; }
.sl-name { font-size: 13px; font-weight: 500; }
.sl-accents { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-acc { width: 40px; height: 40px; padding: 4px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; }
.sl-acc i { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(180deg, var(--gl-acc-hi), var(--gl-acc)); }
.sl-acc.on, .sl-acc:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sl-actions { margin-top: 6px; }
.gl-preview { position: fixed; inset: 0; z-index: 3000; overflow: auto; overscroll-behavior: contain; }
.gl-preview > .auth.gl { min-height: 100%; }
.gl-preview-bar { position: fixed; left: 50%; bottom: 18px; z-index: 3001; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px);
  padding: 8px 8px 8px 16px; border-radius: 12px; background: rgba(12,12,16,.86); color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
@media (max-width: 480px) { .gl-preview-bar { flex-direction: column; align-items: stretch; text-align: center; padding: 10px; bottom: 12px; } }

/* ---------- 2.9.7: orders the customer collects (pickup) ---------- */
.opick { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; max-width: 100%;
  background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600; white-space: nowrap; }
.opick > span { overflow: hidden; text-overflow: ellipsis; }
.opick .ico { flex: none; }
.pk-card .ocard-head .seg { margin-left: auto; }
.pk-done { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 500; font-size: 14px; }
.pk-how { margin: 0; }
.pk-files { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-id { width: 172px; aspect-ratio: 85.6 / 54; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2);
  display: grid; place-items: center; }
.pk-id.empty { border-style: dashed; color: var(--muted); font-size: 12px; text-align: center; padding: 8px; gap: 4px; align-content: center; }
.pk-id-img, .pk-doc { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; height: 100%; }
.pk-id-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-doc { width: 82px; height: 108px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.pk-doc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-acts { margin-top: 2px; }
.pk-steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.pk-steps > li { padding-left: 4px; }
.pk-steps > li::marker { font-weight: 600; color: var(--ink-2); }
.pk-step-t { font-weight: 600; margin-bottom: 6px; }
.pk-steps p { margin: 6px 0 0; }
.pk-check { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.pk-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--act); }
.pk-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk-chosen .ochip { display: inline-flex; align-items: center; gap: 5px; }
.rbig.pick .stop:last-child b { color: inherit; }

/* the pickup invoice: Letter or A4, the license frame in the very corner of the sheet */
.print-doc.pkv { position: relative; box-sizing: border-box; width: 8.5in; min-height: 11in; padding: 10mm 12mm 12mm;
  font: 400 9.5pt/1.35 'IBM Plex Sans', Arial, sans-serif; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-doc.pkv.pkv-a4 { width: 210mm; min-height: 297mm; }
.pkv-id { position: absolute; left: 0; top: 0; width: 90mm; height: 58mm; box-sizing: border-box; }
.pkv-id::before { content: ""; position: absolute; left: 4mm; top: 4mm; right: 0; bottom: 0; border: 1.4pt dashed #000; border-radius: 3.5mm; }
.pkv-id-in { position: absolute; left: 9mm; top: 9mm; right: 6mm; bottom: 6mm; display: flex; flex-direction: column; justify-content: center; gap: 2.5mm;
  text-align: center; color: #333; font-size: 8pt; line-height: 1.3; }
.pkv-id-in b { font-size: 10pt; color: #000; letter-spacing: .02em; }
.pkv-id-img { position: absolute; left: 5mm; top: 5mm; width: 84mm; height: 52mm; object-fit: cover; border-radius: 3mm; }
.pkv-head { margin-left: 84mm; min-height: 50mm; display: grid; grid-template-columns: 1fr auto; gap: 2mm 6mm; align-content: start; }
.pkv-stamp { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 4mm; border: 2.2pt solid #c8102e; color: #c8102e; border-radius: 2mm; padding: 1.2mm 4mm; }
.pkv-stamp b { font-size: 26pt; line-height: 1; font-weight: 700; letter-spacing: .06em; }
.pkv-stamp span { font-size: 8.5pt; font-weight: 600; letter-spacing: .04em; }
.pkv-title { display: flex; flex-direction: column; }
.pkv-title span { font-size: 9pt; font-weight: 600; letter-spacing: .08em; }
.pkv-no { font: 600 17pt/1.1 'IBM Plex Mono', monospace; }
.pkv-meta { font-size: 8.5pt; text-align: right; }
.pkv-bar { grid-column: 1 / -1; height: 9mm; }
.pkv-bar svg, .pkv-bar img { height: 100%; width: auto; max-width: 100%; }
.pkv-store { grid-column: 1 / -1; display: flex; gap: 3mm; font-size: 8.5pt; line-height: 1.3; }
.pkv-store b { font-size: 10pt; }
.pkv-logo { width: 12mm; height: 12mm; object-fit: contain; }
.pkv-row { display: grid; gap: 0; border: 1pt solid #000; border-top-width: 2.2pt; margin-top: 4mm; }
.pkv-row.three { grid-template-columns: 1fr 1fr 1.15fr; }
.pkv-row.four { grid-template-columns: repeat(4, 1fr); }
.pkv-cell { padding: 1.8mm 2.5mm; border-left: 1pt solid #000; min-width: 0; overflow-wrap: anywhere; }
.pkv-cell:first-child { border-left: 0; }
.pkv-k { font-size: 7.5pt; font-weight: 600; color: #333; margin-bottom: .8mm; }
.pkv-v { font-weight: 600; }
.pkv-blank { height: 5.5mm; border-bottom: .8pt solid #000; margin-top: 1mm; }
.pkv-small { font-size: 7.5pt; color: #333; }
.pkv-items { width: 100%; border-collapse: collapse; margin-top: 4mm; }
.pkv-items th { text-align: left; font-size: 7.5pt; font-weight: 600; border-top: 2.2pt solid #000; border-bottom: 1pt solid #000; padding: 1.4mm 2mm; }
.pkv-items td { padding: 1.6mm 2mm; border-bottom: .6pt solid #999; vertical-align: top; }
.pkv-items .num { text-align: right; white-space: nowrap; }
.pkv-items .mono { font-family: 'IBM Plex Mono', monospace; font-size: 8.5pt; }
.pkv-name { font-weight: 600; }
.pkv-totals { margin: 2mm 0 0 auto; border-collapse: collapse; min-width: 62mm; }
.pkv-totals td { padding: .8mm 2mm; }
.pkv-totals .num { text-align: right; white-space: nowrap; }
.pkv-totals tr.strong td { font-weight: 700; border-top: 1pt solid #000; }
.pkv-sign { margin-top: 5mm; border: 1pt solid #000; border-top-width: 2.2pt; padding: 2.5mm 3mm 3mm; break-inside: avoid; }
.pkv-ack { font-size: 8.5pt; line-height: 1.4; }
.pkv-row.sigs, .pkv-row.staff { border: 0; margin-top: 7mm; display: flex; align-items: flex-end; gap: 6mm; }
.pkv-row.staff { margin-top: 5mm; gap: 2mm; font-size: 8.5pt; align-items: center; flex-wrap: wrap; }
.pkv-sig { flex: 1 1 0; min-width: 30mm; display: flex; flex-direction: column; gap: 1mm; font-size: 7.5pt; color: #333; }
.pkv-sig.wide { flex: 2 1 0; }
.pkv-sig.sm { flex: .7 1 0; }
.pkv-line { border-bottom: 1pt solid #000; min-height: 8mm; font-size: 10pt; color: #000; display: flex; align-items: flex-end; padding: 0 1mm .6mm; }
.pkv-row.staff .pkv-sig { margin-left: 4mm; }
.pkv-row.staff .pkv-line { min-height: 6mm; }
.pkv-box { width: 3.6mm; height: 3.6mm; border: 1pt solid #000; flex: none; }
.pkv-box + span { margin-right: 4mm; }
.pkv-foot { display: flex; justify-content: space-between; gap: 6mm; margin-top: 4mm; font-size: 7.5pt; color: #333; }
.print-doc.pkv.measure { display: block !important; }
.pkv-stamp span { white-space: nowrap; }
.pkv-a4 .pkv-stamp { gap: 3mm; padding: 1.2mm 3mm; }
.pkv-a4 .pkv-stamp b { font-size: 23pt; }
.pkv-a4 .pkv-stamp span { font-size: 7.5pt; }

/* 2.9.8: the order's route has five stops — after the handover the carrier's word: on the way, delivered */
.rbig.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rbig .stop.ok i { background: var(--green); }
.ostage-main.ok { color: var(--green); font-weight: 500; }
.sup-ask-preview { white-space: pre-line; }
.sup-own { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.sup-own-chip { font-size: 12px; }
.op-flow .rbig.five { max-width: 760px; }

/* 2.10.0: copying in the chat — only the words get selected (not the name, the time or the quote);
   an email or a phone number copies with one tap; on a phone the menu's «Select text» opens the text
   to pick any part of it, and a swipe to the left replies */
.bubble .sender, .bubble .reply-quote, .bubble .thread-ref, .bubble .thread-sum, .bubble .reactions, .msg-tools, .msg-row .av-slot, .day-sep { -webkit-user-select: none; user-select: none; }
.copyable { cursor: copy; border-radius: 4px; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.copyable:hover { background: color-mix(in srgb, var(--blue) 12%, transparent); }
.copyable:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* 2.10.9: an order, part or tracking number in a message — in the identifiers' type, so 0/O and 1/I never mix up */
.copyable.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .94em; font-weight: 500; letter-spacing: 0; }
@media (pointer: coarse) {
  .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .bubble.swiping { transition: none; }
  .bubble { transition: transform .18s ease; }
  .bubble.swipe-ready::after { content: ""; position: absolute; right: -34px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
    background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center / 16px no-repeat; }
}
/* 2.10.9: «Выделить текст» works right in the message: its text takes the phone's own selection,
   a bar at the bottom copies it; a double tap on a message copies all of it (no zoom on a double tap) */
.bubble.selecting { outline: 2px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 2px; }
.bubble.selecting .btext { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; cursor: text; }
.sel-bar { position: fixed; z-index: 85; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(460px, calc(100vw - 32px));
  display: grid; gap: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.sel-bar-hint { font-size: 13px; color: var(--muted); }
.sel-bar-btns { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) {
  .sel-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 0; border-width: 1px 0 0; box-shadow: none;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .sel-bar-btns .btn { flex: 1; justify-content: center; min-height: 44px; }
}
@media (pointer: coarse) { .msgs, .thread-body { touch-action: manipulation; } }

/* 2.10.0: a deleted message keeps its place */
.msg-row.tomb .bubble.tomb { display: inline-flex; align-items: center; gap: 6px; background: transparent; box-shadow: none; border: 1px dashed var(--line-2, var(--line));
  color: var(--muted); font-size: 13px; font-style: normal; padding: 5px 10px; min-width: 0; }
.msg-row.tomb .bubble.tomb .meta { float: none; top: 0; margin: 0 0 0 6px; }

/* 2.10.0: «Replies and mentions» — on top of the chat list, and its own page */
.chat-item.inbox-item { border-bottom: 1px solid var(--line); }
.inbox-ic { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.inbox-head .inbox-ic { width: 42px; height: 42px; }
.inbox-scroll { padding: 8px 0 24px; }
.inbox-list { max-width: 760px; margin: 0 auto; padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.inbox-day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.inbox-entry { position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 34px 12px 14px; background: transparent; color: var(--ink); transition: background-color 140ms; }
.inbox-entry + .inbox-entry { border-top: 1px solid var(--line); }
.inbox-entry:hover { background: var(--panel-2); }
.inbox-entry:not(.is-new) .ie-text { color: var(--ink-2); }
.ie-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ie-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ie-top b { font-weight: 600; min-width: 0; }
.ie-kind { flex: none; font-size: 12px; color: var(--muted); }
.ie-kind.mention { color: var(--brand); }
.ie-time { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); }
.ie-where { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.ie-quote { font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--line-2, var(--line)); padding-left: 8px; }
.ie-text { font-size: 14px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ie-dot { position: absolute; right: 14px; top: 50%; margin-top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }

/* 2.10.0: voice like Telegram — hold the microphone to record, let go to send, slide up to keep it going
   hands-free, slide left to throw it away */
.mic-wrap { position: relative; flex: none; display: grid; }
.mic-btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mic-btn.holding { background: var(--brand); color: #fff; transform: scale(1.18); transition: transform 140ms ease-out; }
.rec-lock { position: absolute; left: 50%; bottom: calc(100% + 10px); margin-left: -19px; width: 38px; padding: 9px 0 7px; display: grid; justify-items: center; gap: 3px;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 19px; box-shadow: var(--shadow-pop, 0 4px 14px rgba(0,0,0,.14)); pointer-events: none; }
.rec-lock.near { color: var(--ink); border-color: var(--brand); }
.rec-slide { display: none; align-items: center; gap: 4px; margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.rec-bar.holding { padding-left: 14px; }
.rec-bar.holding .rec-slide { display: inline-flex; }
.rec-bar.holding .rec-hint { display: none; }
.rec-bar.holding .rec-live { max-width: 30%; }
@media (prefers-reduced-motion: reduce) { .mic-btn.holding { transition: none; } }

/* 2.10.1: «Обучение» — the lessons page, and the coach panel that stays beside the work */
.learn-wrap { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.learn-lead { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.learn-list { display: grid; gap: 10px; }
.learn-card { gap: 8px; }
.lc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lc-ic { width: 40px; height: 40px; flex: none; border-radius: var(--r-ctl, 7px); display: grid; place-items: center; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.lc-main { flex: 1; min-width: 0; }
.lc-main h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.lc-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lc-intro { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.lc-foot { display: flex; gap: 8px; }
.learn-card .opill { flex: none; gap: 4px; }
.learn-tscroll { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px; }
.learn-tbl th { white-space: normal; min-width: 96px; vertical-align: bottom; }
.learn-tbl td.num, .learn-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.learn-tbl .opill { gap: 3px; }
.lp-who { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; }

.coach { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(420px, calc(100vw - 32px)); max-height: min(78vh, 680px); display: flex; flex-direction: column;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.coach.small { max-height: none; }
.coach-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 12px; }
.coach-ic { width: 30px; height: 30px; flex: none; border-radius: var(--r-ctl, 7px); display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); }
.coach-title { flex: 1; min-width: 0; display: grid; text-align: left; gap: 1px; padding: 0; background: none; color: inherit; }
.coach-title b { font-size: 14px; font-weight: 600; }
.coach-title small { font-size: 12px; color: var(--muted); }
.coach-bar { height: 3px; background: var(--line); flex: none; }
.coach-bar i { display: block; height: 100%; background: var(--brand); transition: width 200ms ease-out; }
.coach-in { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.coach-body { overflow-y: auto; padding: 14px 16px 6px; display: grid; gap: 10px; align-content: start; }
.coach-body h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.coach-text { display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
.coach-text p, .coach-note p { margin: 0; }
.coach-text ul, .coach-note ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.coach-where { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--muted); }
.coach-where.ext { color: var(--blue); }
.coach-note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: var(--r-ctl, 7px); font-size: 13.5px; line-height: 1.5; }
.coach-note > .ico { flex: none; margin-top: 2px; }
.coach-note > div { display: grid; gap: 6px; min-width: 0; }
.coach-note.warn { background: var(--red-soft); color: var(--ink); }
.coach-note.warn > .ico { color: var(--red); }
.coach-note.tip { background: var(--green-soft); color: var(--ink); }
.coach-note.tip > .ico { color: var(--green); }
.coach-copy { display: grid; gap: 6px; }
.coach-copy pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 'IBM Plex Mono', ui-monospace, monospace; background: var(--plate, var(--panel-2)); border: 1px solid var(--line); border-radius: var(--r-ctl, 7px); padding: 9px 11px; }
.coach-copy .btn { justify-self: start; }
.coach-foot { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.coach-foot .btn.primary { margin-left: auto; }
.coach-opts { display: grid; gap: 6px; }
.coach-opt { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl, 7px); background: var(--panel); color: var(--ink); font-size: 14px; line-height: 1.4; }
.coach-opt:hover:not(:disabled) { background: var(--panel-2); }
.coach-opt.right { border-color: var(--green); background: var(--green-soft); }
.coach-opt.wrong { border-color: var(--red); background: var(--red-soft); }
.coach-opt:disabled { opacity: 1; cursor: default; }
/* the thing «Показать где» points at */
.coach-spot { outline: 2px solid var(--brand) !important; outline-offset: 3px; border-radius: var(--r-ctl, 7px); animation: coachSpot 1.4s ease-in-out 3; position: relative; z-index: 2; }
@keyframes coachSpot { 50% { outline-offset: 7px; } }
@media (prefers-reduced-motion: reduce) { .coach-spot { animation: none; } .coach-bar i { transition: none; } }
.learn-nag .lc-ic { width: 34px; height: 34px; }
@media (max-width: 760px) {
  .coach { left: 8px; right: 8px; width: auto; bottom: calc(66px + env(safe-area-inset-bottom)); max-height: 62vh; }
  .coach-foot .btn { flex: 1 1 auto; justify-content: center; }
  .coach-foot .btn.primary { margin-left: 0; }
}
body.coach-on .nag-stack { display: none; }

/* 2.10.1: the order helper's answer in a thread */
.bot-row { justify-content: flex-start; padding-left: 0; }
.bubble.bot-card { max-width: min(560px, 100%); width: 100%; background: var(--panel); border: 1px solid var(--line); box-shadow: none; padding: 10px 12px 12px; display: grid; gap: 8px; }
.bot-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.bot-head > b { font-size: 13px; font-weight: 600; }
.bot-ic { width: 26px; height: 26px; border-radius: var(--r-ctl, 7px); display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); flex: none; }
.bot-time { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bot-rows { display: grid; gap: 6px; }
.bot-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13.5px; }
.bot-k { color: var(--muted); font-size: 12.5px; }
.bot-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--ink); }
.bot-v .opill { white-space: normal; height: auto; min-height: 21px; line-height: 1.35; padding-top: 2px; padding-bottom: 2px; }
.bot-sub { font-size: 12.5px; color: var(--muted); }
.bot-line { margin: 0; font-size: 14px; }
.bot-acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.bot-card .sup-part { height: 22px; font-size: 13px; }
.bot-card button.sup-part { cursor: copy; border: 0; }
@media (max-width: 560px) { .bot-kv { grid-template-columns: 1fr; gap: 3px; } }
.tour-deep { display: grid; gap: 6px; justify-items: start; margin: 4px 0 2px; padding-top: 8px; border-top: 1px solid var(--line); }

/* 2.10.2: «Идёт обновление» — over everything while the program is off, until it is back */
.maint { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(8,10,12,.52); }
:root[data-theme="dark"] .maint { background: rgba(0,0,0,.66); }
.maint-card {
  width: min(420px, 100%); background: var(--panel); color: var(--ink); border-radius: 20px; box-shadow: var(--float);
  padding: 28px 24px 22px; text-align: center; outline: none;
}
.maint-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.maint-card h2 { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.maint-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.47; }
.maint-wait {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 12px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums;
}
.maint-wait .bx-spin { color: var(--brand); }
.maint-card .maint-note { margin-top: 14px; color: var(--muted); font-size: 13px; }
.maint-late { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.maint-late p { font-size: 14px; }
.maint-late .btn { margin-top: 12px; width: 100%; }
body.maint-on .conn-banner, body.maint-on .nag-stack { display: none; }
@media (max-width: 520px) { .maint-card { padding: 24px 18px 18px; } }

/* 2.10.4: a picture of the screen in a lesson step — tap to see it large */
.coach-pic { margin: 0; display: grid; gap: 5px; }
.coach-pic-btn { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; }
.coach-pic-btn img, .coach-pic-big { display: block; width: 100%; height: auto; }
.coach-pic-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.coach-pic figcaption { font-size: 12px; line-height: 1.4; color: var(--muted); }
.coach-pic-big { border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* ===== 2.10.5 ===== */
/* what goes in this parcel: one row per item, a stepper for how many go now */
.ship-pick { display: grid; gap: 8px; }
.ship-pick-head { display: flex; align-items: center; gap: 8px; }
.ship-pick-head b { font-size: 13px; font-weight: 600; }
.ship-q-list { border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); }
.ship-q { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 52px; }
.ship-q + .ship-q { border-top: 1px solid var(--line); }
.ship-q.zero .ship-q-t, .ship-q.zero .ship-q-img { opacity: .45; }
.ship-q-img { width: 36px; height: 36px; flex: none; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.ship-q-img.ph { display: grid; place-items: center; color: var(--muted); background: var(--panel-2); }
.ship-q-t { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 13px; color: var(--ink); }
.ship-q-t .sup-part { justify-self: start; height: 20px; font-size: 12px; }
.ship-q-of { flex: none; min-width: 34px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty-step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-ctl); flex: none; }
.qty-step .qty-b { width: 32px; height: 32px; }
.qty-step .qty-b:disabled { opacity: .35; }
.qty-step .qty-in { width: 46px; height: 32px; padding: 0 4px; text-align: center; border: 0; background: transparent; font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty-step .qty-in::-webkit-outer-spin-button, .qty-step .qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ship-split { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--warn-soft); color: var(--ink); font-size: 13px; }
.ship-split .ico { color: var(--warn); flex: none; }
.ship-split.bad { background: var(--red-soft); }
.ship-split.bad .ico { color: var(--red); }
.otl-part { margin-top: 2px; }
@media (max-width: 560px) {
  .ship-q { flex-wrap: wrap; }
  .ship-q-t { flex-basis: calc(100% - 46px); }
  .qty-step { margin-left: 46px; }
  .qty-step .qty-b { width: 40px; height: 40px; }
}

/* taking the payment: the card's one clear action, the amount on the button in the figures font; green once taken */
.btn.cap-btn { height: 40px; padding: 0 14px 0 12px; gap: 9px; font-weight: 600; }
.btn.cap-btn .cap-amt { padding-left: 10px; margin-left: 1px; border-left: 1px solid color-mix(in srgb, currentColor 32%, transparent); font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.btn.primary.cap-btn.ok, .btn.primary.cap-btn.ok:hover, .modal .btn.primary.cap-btn.ok, .modal .actions .btn.primary.cap-btn.ok:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; transform: none; transition: background-color .3s ease, border-color .3s ease; }
.cap-box { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: var(--r-ctl); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.cap-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cap-txt b { font-size: 14px; font-weight: 600; color: var(--ink); }
.cap-sum { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cap-done { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-ctl); background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); color: var(--ink); }
.cap-done > .ico { color: var(--green); flex: none; }
.cap-done b { font-weight: 600; }
.cap-done.lit { animation: capLit 1.8s ease-out 1; }
@keyframes capLit {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 30%, var(--panel)); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 560px) {
  .cap-box { flex-direction: column; align-items: stretch; }
  .cap-box .cap-btn { justify-content: center; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cap-done.lit { animation: none; } .btn.cap-btn.ok { transition: none; } }

/* a PDF printed in place: kept out of sight while the print window is open */
.pdf-print { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; visibility: hidden; }

/* the label window: size and copies side by side, the paper hint under them */
.lbl-opts { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.lbl-opts .field { margin: 0; }
.lbl-opts .seg { flex-wrap: wrap; }
.lbl-opts .qty { height: 40px; }
.lbl-tip { line-height: 1.45; }

/* only the last 60 days of orders reachable */
.only60 { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-ctl); background: var(--blue-soft); color: var(--ink); font-size: 13px; line-height: 1.45; }
.only60 .ico { color: var(--blue); flex: none; margin-top: 1px; }
.olist .only60 { margin: 12px; }

/* the warehouse, in development: a new mark in the menu, a word for whoever looks in */
.nav-new { position: absolute; top: 7px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--rail); }
@media (min-width: 761px) {
  .rail .nav-btn > .nav-new { position: static; margin-left: auto; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
  #app.rail-slim .rail .nav-btn > .nav-new { position: absolute; top: 6px; right: 14px; margin: 0; box-shadow: 0 0 0 2px var(--rail); }
}
.wh-pill { margin-left: 8px; }
.wh-body { display: grid; justify-items: center; padding: 24px 16px 40px; }
.wh-card { width: min(640px, 100%); padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: grid; gap: 16px; }
.wh-top { display: flex; align-items: center; gap: 16px; }
.wh-top h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.wh-top p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.wh-shelf { display: grid; gap: 0; padding: 10px 12px 0; border-radius: var(--r-ctl); background: var(--panel-2); border: 1px solid var(--line); }
.wh-row { display: flex; align-items: flex-end; gap: 8px; height: 46px; padding: 0 4px; border-bottom: 4px solid var(--line-2); }
.wh-box { display: block; width: 14%; border-radius: 3px 3px 0 0; border: 1px solid var(--plate-edge); background: var(--plate); }
.wh-box.b0 { height: 70%; } .wh-box.b1 { height: 46%; } .wh-box.b2 { height: 86%; } .wh-box.b3 { height: 0; border: 0; background: none; }
.wh-row:nth-child(2) .wh-box.b2 { background: color-mix(in srgb, var(--brand) 22%, var(--plate)); border-color: color-mix(in srgb, var(--brand) 45%, var(--plate-edge)); }
.wh-card h3 { margin: 4px 0 -6px; font-size: 14px; font-weight: 600; }
.wh-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.wh-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink); }
.wh-list .ico { color: var(--green); flex: none; margin-top: 2px; }
.wh-foot { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.wh-foot .ico { color: var(--muted); flex: none; margin-top: 2px; }
@media (max-width: 560px) { .wh-card { padding: 20px 16px; } .wh-top { align-items: flex-start; } .wh-top h2 { font-size: 19px; } }

/* hello once a day, birthdays */
.push-nag.greet b, .push-nag.bday-nag b { font-weight: 600; }
.bday-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.bday-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel-2); }
.bday-box.empty { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.bday-box .bday-ic { width: 32px; height: 32px; }
.bday-in { display: flex; gap: 8px; align-items: center; }
.bday-in .input { width: 160px; }
.bday-modal .modal-head h2:empty, .bday-modal h2:empty { display: none; }
.bday-card { text-align: center; display: grid; gap: 8px; padding: 4px 4px 0; }
.bday-card h2 { margin: 0; font-size: 22px; font-weight: 600; }
.bday-card p { margin: 0 auto; max-width: 360px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.bday-art { position: relative; height: 92px; display: grid; place-items: center; color: var(--brand); overflow: hidden; }
.bday-art > .ico { width: 54px; height: 54px; padding: 10px; border-radius: 50%; background: var(--brand-soft); box-sizing: content-box; }
.bday-art .cf { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: cfFall 2.6s ease-in 1 forwards; }
.bday-art .cf.c0 { background: var(--brand); } .bday-art .cf.c1 { background: var(--blue); } .bday-art .cf.c2 { background: var(--green); } .bday-art .cf.c3 { background: var(--warn); }
@keyframes cfFall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(110px) rotate(260deg); } }
@media (prefers-reduced-motion: reduce) { .bday-art .cf { animation: none; opacity: 0; } }

/* the team for everyone: colleagues' cards show, only one's own opens */
.team-us { margin-left: 4px; font-size: 14px; }
.badge-card.peer { cursor: default; }
.badge-card.peer:hover { border-color: var(--line); transform: none; }
/* the order page tones down buttons inside its cards (one main action up top) — taking the payment is the exception */
.oview .op-body .cap-box .btn.primary.cap-btn:not(.ok) { background: var(--act); color: var(--act-ink); }
.oview .op-body .cap-box .btn.primary.cap-btn:not(.ok):hover:not(:disabled) { background: var(--act-hover); }
/* 2.12.14: …and so is sending the order for verification, and marking it verified */
.oview .op-body .addr-note .btn.primary.vf-send, .oview .op-body .vf-card .btn.primary { background: var(--act); color: var(--act-ink); }
.oview .op-body .addr-note .btn.primary.vf-send:hover:not(:disabled), .oview .op-body .vf-card .btn.primary:hover:not(:disabled) { background: var(--act-hover); }

/* ===== 2.10.7: holidays — a light layer over the program; nothing clickable, the colours untouched ===== */
:root { --hd-snow: #FFFFFF; --hd-snow-shade: #DCE6EF; --hd-snow-line: #B9CAD8; }
:root[data-theme="dark"] { --hd-snow: #E9EFF4; --hd-snow-shade: #AEBBC6; --hd-snow-line: #8E9DAA; }
.hd-layer { position: fixed; inset: 0; z-index: 29; pointer-events: none; overflow: hidden; } /* under drawers, windows, menus and a phone's open thread */
.hd-top { position: fixed; left: 0; top: 0; height: 40px; overflow: hidden; }
/* the place the top decoration hangs over (the open chat, or the page) keeps a strip on top for it,
   so it never hangs over a title, a button or a message */
.hd-host { padding-top: 28px; box-sizing: border-box; }
/* over the chat the strip is the header's own colour: the garland hangs along the top of the header */
.conv.hd-host::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: var(--panel); pointer-events: none; }
.hd-hang { display: block; }
.hd-wire { stroke: #6B7178; stroke-width: 1.2; }
:root[data-theme="dark"] .hd-wire { stroke: #8C949A; }
.hd-fall { position: fixed; inset: 0; width: 100vw; height: 100vh; }
.hd-item { animation: hdTwinkle 2.4s ease-in-out infinite; }
@keyframes hdTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* 2.10.8: the New Year garland — natural fir, a little snow, small cones and real little bulbs */
.hd-garland { position: relative; }
.hd-garland > .hd-rope { position: absolute; left: 0; top: 0; display: block; }
.hd-needles { fill: none; stroke-width: .95; stroke-linecap: round; }
.hd-twigs { fill: none; stroke: #5A4630; stroke-width: .7; stroke-linecap: round; }
.hd-n0 { stroke: #1C4128; } .hd-n1 { stroke: #265132; } .hd-n2 { stroke: #336741; } .hd-n3 { stroke: #437A4F; }
:root[data-theme="dark"] .hd-n0 { stroke: #2A5236; } :root[data-theme="dark"] .hd-n1 { stroke: #34623F; } :root[data-theme="dark"] .hd-n2 { stroke: #437A50; } :root[data-theme="dark"] .hd-n3 { stroke: #568E61; }
.hd-frosted { stroke: #DCE5E9; }
:root[data-theme="dark"] .hd-frosted { stroke: #D3DCE0; }
.hd-snowlump { fill: #FFFFFF; stroke: #CBD8E0; stroke-width: .5; opacity: .92; }
:root[data-theme="dark"] .hd-snowlump { fill: #E9EFF3; stroke: none; }
.hd-cone0 { fill: #7A4A26; }
.hd-cone-scale { fill: none; stroke: #B07D4C; stroke-width: .6; }
.hd-cone-snow { fill: #F6F9FA; }
.hd-sock { fill: #24452F; stroke: #12271A; stroke-width: .4; }
.hd-glass { stroke: rgba(0, 0, 0, .2); stroke-width: .35; }
/* each bulb's light is its own layer and only its brightness changes — slowly, each at its own pace, never out —
   so the chat under it is never repainted */
.hd-lamp { position: absolute; display: block; will-change: opacity; animation: hdGlow 6.5s ease-in-out infinite; }
.hd-lamp > * { position: absolute; display: block; }
.hd-spill { left: 0; top: 0; overflow: visible; opacity: .85;
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .5) 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .5) 58%, transparent 100%); }
.hd-spill path { fill: none; stroke: rgb(var(--lit)); stroke-width: .95; stroke-linecap: round; }
.hd-halo { inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--lit) / .55), rgb(var(--lit) / .2) 45%, rgb(var(--lit) / 0)); }
:root[data-theme="dark"] .hd-halo { background: radial-gradient(closest-side, rgb(var(--lit) / .66), rgb(var(--lit) / .27) 45%, rgb(var(--lit) / 0)); }
.hd-core { left: 50%; top: 50%; border-radius: 50%; background: radial-gradient(closest-side, #FFFFFF, var(--core) 38%, rgb(var(--lit) / .55) 72%, rgb(var(--lit) / 0)); }
.hd-glint { border-radius: 50%; background: rgba(255, 255, 255, .85); }
@keyframes hdGlow { 0%, 100% { opacity: 1; } 50% { opacity: .64; } }
/* «Праздничный режим» in the person's menu */
.menu .hd-mode-row { cursor: pointer; }
.menu .hd-mode-row:hover { background: var(--field); }
.hd-mode-txt { display: grid; gap: 1px; min-width: 0; }
.hd-mode-txt small { font-size: 12px; color: var(--muted); }
/* drifts: the page keeps a strip at the bottom free for them, so they never lie over a field or a button */
.hd-bottom { position: fixed; bottom: 0; right: 0; height: 44px; overflow: hidden; }
.hd-drifts { display: block; width: 100%; height: 44px; }
.hd-snow { fill: var(--hd-snow); stroke: var(--hd-snow-line); stroke-width: 1; }
.hd-snow-back { fill: var(--hd-snow-shade); stroke: var(--hd-snow-line); stroke-width: .8; }
.hd-snowman { fill: var(--hd-snow); stroke: var(--hd-snow-line); stroke-width: 1; }
body.hd-drift #main { padding-bottom: 28px; box-sizing: border-box; }
.rail { position: relative; }
.hd-cap { position: absolute; top: 0; left: 0; width: 100%; height: 12px; pointer-events: none; z-index: 1; }
.hd-cap .hd-snow { stroke: none; }
.rail .spacer { position: relative; }
.hd-corner { position: absolute; right: 10px; bottom: 6px; pointer-events: none; }
#app.rail-slim .hd-corner { right: 50%; transform: translateX(50%) scale(.8); }
@media (max-width: 760px) { /* on a phone: a smaller garland and the falling snow — the bottom bar has no room for drifts */
  .hd-corner, .hd-bottom, .hd-cap { display: none; }
  body.hd-drift #main { padding-bottom: 0; }
  .hd-host { padding-top: 20px; }
  .conv.hd-host::before { height: 20px; }
}
/* with reduced motion the lights simply glow, steadily */
@media (prefers-reduced-motion: reduce) { .hd-item, .hd-lamp { animation: none; } }
@media print { .hd-layer, .hd-corner, .hd-cap { display: none !important; } }
.hd-list { display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.hd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.hd-list > .hd-row:not(:first-child) { border-top: 1px solid var(--line); }
.hd-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.hd-check input { margin-top: 3px; flex: none; }
.hd-check > span { display: grid; gap: 2px; min-width: 0; }
.hd-check b { font-weight: 500; color: var(--ink); }
.hd-check small { font-size: 12.5px; }
.hd-row .btn { flex: none; }
.hd-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 12px 38px; font-size: 13px; }
.hd-md { display: inline-flex; gap: 6px; }
.hd-date { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hd-md select.input { width: auto; min-width: 0; height: 34px; padding-top: 0; padding-bottom: 0; }
.hd-now { color: var(--ink); margin: 0; }

/* ===== 2.10.7: discounts — the store's codes in force, one panel with hairlines ===== */
.dsc-lead { margin: 0 0 12px; max-width: 72ch; font-size: 13.5px; }
.dsc-list, .dsc-log-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.dsc-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.dsc-row + .dsc-row { border-top: 1px solid var(--line); }
.dsc-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.dsc-codes { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.dsc-code { font-size: 15px; padding: 2px 8px; border-radius: 4px; overflow-wrap: anywhere; }
.dsc-title { color: var(--ink); font-weight: 500; font-size: 14.5px; }
.dsc-name { font-size: 13px; }
.dsc-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dsc-copy { flex: none; }
.dsc-copy.done, .dsc-copy.done .ico { color: var(--green); }
.dsc-log { margin-top: 22px; }
.dsc-log h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.dsc-log-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.dsc-log-row + .dsc-log-row { border-top: 1px solid var(--line); }
.dsc-log-row .grow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dsc-log-row .dsc-code { font-size: 13px; }
@media (max-width: 760px) {
  .dsc-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .dsc-copy { width: 100%; justify-content: center; min-height: 40px; }
  .hd-row { flex-wrap: wrap; }
  .hd-dates { padding-left: 14px; }
}
/* 2.10.10: the parts that went in a shipment, under its tracking */
.ofo-items { margin-top: 8px; }

/* 2.10.11: an order edited in the store — money going back, and what the edit took out */
.pay-row.wait > span:last-child { color: var(--warn); }
.o-removed .oitem { opacity: .62; }
.o-removed .oi-price b { text-decoration: line-through; }
.o-removed > p { margin: 0 0 6px; }
.o-removed .ostate { background: var(--panel-2); color: var(--muted); }

/* 2.11.0: customers — the list, the card, the tax block with its certificates */
.cu-body { padding-top: 16px; }
.cu-list { background: var(--panel); border-radius: var(--r-group, 10px); overflow: hidden; }
.cux { position: relative; display: grid; grid-template-columns: 40px minmax(200px, 1.6fr) minmax(120px, 1fr) minmax(150px, 1fr) 110px 120px; gap: 14px; align-items: center; padding: 10px 16px; min-height: 60px; }
.cux + .cux::before { content: ""; position: absolute; left: 70px; right: 0; top: 0; border-top: 1px solid var(--line); }
.cux:not(.cux-head):hover { background: var(--panel-2); }
.cux.open { background: var(--open-row, var(--panel-2)); }
.cux-head { min-height: 40px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.cux-head + .cux::before { display: none; }
.cux .r { justify-self: end; text-align: right; }
.cux .rowlink { font-weight: 500; text-align: left; }
.cux .rowlink::after { content: ""; position: absolute; inset: 0; }
.cux:has(.rowlink:focus-visible) { box-shadow: inset 0 0 0 2px var(--brand); }
.cux .sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-who { min-width: 0; display: flex; flex-direction: column; }
.cu-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--field); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.cu-tax { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; position: relative; z-index: 1; pointer-events: none; }
.cu-sum { font-weight: 600; }
.cu-taxpill { gap: 4px; }
.cu-certn { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.cu-name { margin: 0; font-size: 20px; }
.cu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cu-stat { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cu-stat b { font-size: 18px; font-weight: 600; }
.cu-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cu-addr + .cu-addr { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cu-addr .ochip { margin-bottom: 4px; }
.cu-namelink { font-weight: 500; }
/* the tax block: first on the card, its state said in words and colour, the certificates under it */
.cu-taxcard { display: grid; gap: 14px; }
.cu-taxcard.on { box-shadow: inset 3px 0 0 var(--green); }
.cu-taxstate { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctl, 7px); background: var(--field); }
.cu-taxstate > .ico { flex: none; margin-top: 1px; color: var(--muted); }
.cu-taxstate b { font-size: 15px; }
.cu-taxstate.on { background: var(--green-soft); }
.cu-taxstate.on svg, .cu-taxstate.on b { color: var(--green); }
.cu-taxstate.part { background: var(--blue-soft); }
.cu-taxstate.part svg, .cu-taxstate.part b { color: var(--blue); }
.cu-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.cu-switch.off { cursor: default; opacity: .75; }
.cu-switch > span { display: flex; flex-direction: column; gap: 2px; }
.cu-sub { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 32px; }
.cu-states, .cu-certs { border-top: 1px solid var(--line); padding-top: 12px; }
.cu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cu-state { height: 28px; gap: 6px; padding: 0 4px 0 10px; }
.cu-state .muted { font-weight: 400; }
.cu-state:not(:has(.chip-x)) { padding-right: 10px; }
.chip-x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; color: var(--muted); }
.chip-x:hover { background: var(--panel-2); color: var(--ink); }
.cu-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-ctl, 7px); background: var(--warn-soft); color: var(--ink); font-size: 13px; margin-bottom: 10px; }
.cu-warn > .ico { flex: none; color: var(--warn); margin-top: 1px; }
.cu-warn.bad { background: var(--red-soft); }
.cu-warn.bad svg { color: var(--red); }
.cu-cert-list { display: grid; }
.cu-cert { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.cu-cert + .cu-cert { border-top: 1px solid var(--line); }
.cu-cert.removed { opacity: .6; }
.cu-cert .grow { min-width: 0; }
.cu-cert-pic { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--field); display: grid; place-items: center; border: 1px solid var(--line); }
.cu-cert-pic img { width: 100%; height: 100%; object-fit: cover; }
.cu-pdf { display: flex; flex-direction: column; align-items: center; color: var(--red); }
.cu-pdf small { font-size: 12px; font-weight: 600; }
.cu-cert-name { font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.cu-cert-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 3px 0; font-size: 13px; }
.cu-gone { margin-top: 8px; }
.cu-gone summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cu-stategrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 50vh; overflow: auto; }
.cu-statebox { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r-ctl, 7px); border: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.cu-statebox b { font-family: var(--mono, monospace); min-width: 24px; }
.cu-statebox.on { border-color: var(--green); background: var(--green-soft); }
.cu-filebox { position: relative; display: inline-flex; }
.cu-filebox .cu-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cu-orders { display: grid; }
.cu-order { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; color: inherit; text-decoration: none; }
.cu-order + .cu-order { border-top: 1px solid var(--line); }
a.cu-order:hover { background: var(--panel-2); }
.cu-order.cancelled { opacity: .6; }
.cu-o-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cu-o-top { display: flex; gap: 8px; align-items: center; }
.cu-o-main .sub { font-size: 12.5px; color: var(--muted); }
.cu-o-pills { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.cu-o-sum { font-weight: 600; min-width: 84px; text-align: right; }
.cu-ordertax { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; text-decoration: none; }
@media (max-width: 1179px) { .cux { grid-template-columns: 40px minmax(180px, 1.4fr) minmax(140px, 1fr) 100px 110px; } .cux .cu-place { display: none; } }
@media (max-width: 760px) {
  .cux-head { display: none; }
  .cux { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av who sum" "av tax n"; gap: 4px 12px; padding: 12px; }
  .cux + .cux::before { left: 12px; }
  .cux .cu-av { grid-area: av; } .cux .cu-who { grid-area: who; } .cux .cu-sum { grid-area: sum; } .cux .cu-tax { grid-area: tax; } .cux .cu-n { grid-area: n; font-size: 12.5px; color: var(--muted); }
  .cux .cu-place { display: none; }
  .cu-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cu-stat b { font-size: 15px; }
  .cu-order { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .cu-o-pills { grid-column: 2 / 4; justify-content: flex-start; }
  .cu-sub { flex-wrap: wrap; }
}
.cu-certno { font-size: 12px; }
.cu-also { padding: 10px 12px; border-radius: var(--r-ctl, 7px); background: var(--field); font-size: 13px; }

/* 2.11.1: returns and refunds made in the store, on the order */
.oi-back { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.refund-lines { display: grid; gap: 2px; margin: -2px 0 2px; }
.pay-row.sub { font-size: 13px; }
.pay-row.sub > span:first-child { min-width: 110px; padding-left: 12px; }
.o-sret .sret { display: grid; gap: 8px; padding-top: 10px; }
.o-sret .sret + .sret { border-top: 1px solid var(--line); margin-top: 6px; }
.sret-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sret-line { display: flex; gap: 12px; align-items: flex-start; }
.sret-line .num { white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px; }
.sret-t { font-weight: 500; overflow-wrap: anywhere; }
.sret-money { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.sret-money.wait { color: var(--warn); }
.sret-ours { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.sret-ours a.tag { text-decoration: none; color: inherit; }
@media (max-width: 760px) {
  .ogrid .o-sret { order: 1; } /* a phone: the store's return right after the items */
  .o-sret .ocard-head { flex-wrap: wrap; }
}
.sret-track { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.sret-track a.tag { text-decoration: none; color: inherit; }
.sret-ex { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-ctl, 7px); background: var(--field); }
.sret-ex-h { display: flex; align-items: center; gap: 6px; }
.opill.cancelled { text-decoration: line-through; }
/* 2.11.1: the restocking fee in the refund dialog */
.fee-pane { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius, 10px); border: 1px solid var(--line); }
.fee-l { display: flex; flex-direction: column; gap: 2px; }
.fee-pane .seg { justify-self: start; }
.fee-box:empty { display: none; }
.fee-box .field { max-width: 220px; margin: 0; }
.disc-neg { white-space: nowrap; }
.sret-fee { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sret-fee b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* 2.12.0: chargebacks — the list, the card, «our story» and the files for the bank */
.dsp-body { padding-top: 16px; }
.dsp-list { background: var(--panel); border-radius: var(--r-group, 10px); overflow: hidden; }
.dspx { position: relative; display: grid; grid-template-columns: 130px minmax(200px, 1.6fr) minmax(170px, 1fr) minmax(210px, 1fr) 110px; gap: 14px; align-items: center; padding: 10px 16px; min-height: 60px; }
.dspx + .dspx::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; border-top: 1px solid var(--line); }
.dspx:not(.dspx-head):hover { background: var(--panel-2); }
.dspx.open { background: var(--open-row, var(--panel-2)); }
.dspx-head { min-height: 40px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.dspx-head + .dspx::before { display: none; }
.dspx .r { justify-self: end; text-align: right; }
.dspx .rowlink { font-weight: 500; text-align: left; }
.dspx .rowlink::after { content: ""; position: absolute; inset: 0; }
.dspx:has(.rowlink:focus-visible) { box-shadow: inset 0 0 0 2px var(--brand); }
.dspx .sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsp-no { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.dsp-who { min-width: 0; }
.dsp-st { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dsp-mark { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; color: var(--green); }
.dsp-sum { font-weight: 600; }
.dsp-due { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dsp-due.near { color: var(--red); font-weight: 600; }
.dsp-head-note { max-width: 520px; text-align: right; }
.dsp-reason { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; }
.dsp-amount { font-weight: 600; }
.dsp-means { margin: 4px 0 8px; color: var(--ink); }
.dsp-sub { margin: 16px 0 6px; font-size: 14px; }
.dsp-how { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.dsp-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.45; }
.dsp-lead { margin: 0 0 8px; }
.dsp-story { width: 100%; min-height: 260px; font-size: 14px; line-height: 1.5; resize: vertical; }
.dsp-story-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.dsp-warn, .dsp-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-ctl, 7px); font-size: 13px; margin: 8px 0; }
.dsp-warn > svg, .dsp-note > svg { flex: none; margin-top: 2px; }
.dsp-warn { background: var(--red-soft); color: var(--red); }
.dsp-note { background: var(--blue-soft); color: var(--ink); }
.dsp-warn[hidden], .dsp-note[hidden] { display: none; }
.dsp-docs { display: grid; }
.dsp-doc { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; }
.dsp-doc + .dsp-doc { border-top: 1px solid var(--line); }
.dsp-doc-t { min-width: 0; }
.dsp-doc .sub { display: block; font-size: 12.5px; color: var(--muted); }
.dsp-doc > svg { color: var(--muted); }
.dsp-ck { display: grid; }
.dsp-ck-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 7px 0; align-items: start; }
.dsp-ck-row + .dsp-ck-row { border-top: 1px solid var(--line); }
.dsp-ck-i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--panel-2); color: var(--muted); }
.dsp-ck-row.ok .dsp-ck-i { background: var(--green-soft); color: var(--green); }
.dsp-ck-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dsp-ck-t .sub { font-size: 12.5px; color: var(--muted); }
.dsp-ck-t .dsp-plate { align-self: flex-start; height: 22px; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dsp-missing { margin: 8px 0 0; }
.dsp-chip { text-decoration: none; }
.dsp-page .op-row h2:not(.tag) { margin: 0; font-size: 18px; }
@media (max-width: 1179px) { .dspx { grid-template-columns: 120px minmax(180px, 1.4fr) minmax(170px, 1fr) 100px; } .dspx .dsp-when { display: none; } }
@media (max-width: 760px) {
  .dspx-head { display: none; }
  .dspx { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no sum" "who who" "st when"; gap: 6px 12px; padding: 12px; }
  .dspx + .dspx::before { left: 12px; }
  .dspx .dsp-no { grid-area: no; flex-direction: row; gap: 8px; align-items: center; } .dspx .dsp-who { grid-area: who; } .dspx .dsp-sum { grid-area: sum; }
  .dspx .dsp-st { grid-area: st; } .dspx .dsp-when { grid-area: when; display: block; justify-self: end; }
  .dsp-head-note { display: none; }
  .dsp-doc { grid-template-columns: 24px minmax(0, 1fr); } .dsp-doc .btn { grid-column: 1 / 3; justify-self: stretch; justify-content: center; min-height: 40px; }
  .dsp-story-bar .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
}

/* 2.12.1: the audit against the store's admin — held parcels, archive and chargeback marks in the
   list, the store's filters, several orders at once */
.orx .onum { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.omark { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 20px; padding: 0 6px; border-radius: 4px;
  background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omark svg { flex: none; }
.omark.bad { background: var(--red-soft); color: var(--red); }
.omark.warn { background: rgba(214,155,20,.16); color: #9A6A00; }
:root[data-theme="dark"] .omark.warn { color: #E3B44A; }
/* 2.12.12: billing and shipping addresses that differ */
.addr-note { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 8px; padding: 6px 9px; border-radius: 7px; background: var(--warn-soft); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.35; }
.addr-note > svg { color: var(--warn); flex: none; margin-top: 2px; }
.addr-note-geo { margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-2); overflow-wrap: anywhere; }
.addr-note-geo:empty { display: none; }
.hold-card .hold-why { margin: 2px 0 6px; line-height: 1.45; }
.hold-card .hold-why b { font-weight: 500; }
.hold-card .osmall { margin: 0; }
.bulk-fails { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bulk-fails li { line-height: 1.45; }
.bulk-fails .tag { margin-right: 4px; }
@media (max-width: 760px) {
  .orx .onum { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .orders-page .otools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .orders-page .otools::-webkit-scrollbar { display: none; }
  .orders-page .otools .fchip { flex: none; }
  .orders-page .otools > .muted { display: none; }
  .bulk { max-width: calc(100vw - 24px); }
  .bulk .btn .lbl { display: none; }
  .bulk .btn { min-width: 40px; min-height: 40px; justify-content: center; }
}

/* 2.12.3: the label's photo — where it came from, and the others to choose from */
.lph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lph-src { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.lph-src .icon { color: var(--muted); flex: none; }
.lph-row .btn { margin-left: auto; }
.lph-pick { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.lph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.lph-item { position: relative; display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; color: #1d1d1f; text-align: left; /* photos sit on white in both themes */
  transition: border-color 140ms ease, transform 140ms ease; }
.lph-item:hover { border-color: var(--line-2); transform: translateY(-1px); }
.lph-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lph-item.on { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
.lph-item img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.lph-item.bad img { opacity: .55; }
.lph-cap { font-size: 12px; line-height: 1.25; color: #4a4a50; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lph-flag { position: absolute; top: 6px; left: 6px; font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 4px; background: var(--red-soft); color: var(--red); }
.lph-flag.ok { background: var(--green-soft); color: var(--green); }
.lbl-setup { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.lbl-again { margin: 0; color: var(--green); }
.lbl-setup-sec { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.lbl-setup-sec summary { cursor: pointer; font-weight: 600; }
.lbl-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .lph-item { transition: none; } .lph-item:hover { transform: none; } }
/* 2.12.3: the edit's sums as the store counts them */
.edit-sums { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); transition: opacity 140ms ease; }
.edit-sums:empty { display: none; }
.edit-sums.busy { opacity: .6; }
.edit-sums .pay-row.due b { color: var(--ink); font-size: 15px; }
.eitem-sum { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.lbl-tip.warn-text { color: var(--warn); font-weight: 500; }

/* ---------- 2.12.5: the message menu on a phone, choosing messages, forwarding ---------- */
/* a phone: the menu comes up from the bottom, away from the finger that opened it */
.menu-back { position: fixed; inset: 0; z-index: 79; background: rgba(8,16,24,.32); }
.menu.sheet { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); top: auto; max-height: min(72vh, 560px); overflow-y: auto;
  border-radius: 16px; padding: 8px; overscroll-behavior: contain; }
.menu.sheet button { min-height: 46px; font-size: 16px; }
.menu.sheet .react-bar { justify-content: space-between; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu.sheet .react-bar .react-pick { width: 40px; min-height: 40px; justify-content: center; font-size: 22px; padding: 0; }
.msg-row.menu-on .bubble { box-shadow: 0 0 0 2px var(--brand); position: relative; z-index: 80; }
/* service lines are never picked up as text by a long press */
.sys-msg, .tomb, .day-sep, .unread-sep { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bubble img { -webkit-touch-callout: none; }
/* choosing: a ring before each message, filled when chosen; the row is lit */
.msgs.sel-mode .msg-row.pickable { position: relative; padding-left: 34px; cursor: pointer; }
.msgs.sel-mode .msg-row.pickable::before { content: ''; position: absolute; left: 6px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%; border: 2px solid var(--muted); background: var(--panel); box-sizing: border-box; }
.msgs.sel-mode .msg-row.pickable.sel::before { border-color: var(--act); background: var(--act)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.msgs.sel-mode .msg-row.sel { background: color-mix(in srgb, var(--act) 9%, transparent); border-radius: 10px; }
.msgs.sel-mode .msg-tools { display: none; }
.msgs.sel-mode .msg-row * { pointer-events: none; }
.msgs.sel-mode .msg-row:not(.pickable) { opacity: .55; }
.conv-head.choosing { gap: 12px; }
.conv-head.choosing .who small { color: var(--muted); }
.choose-bar { flex: none; display: flex; gap: 8px; padding: 8px 14px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.choose-bar .btn { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 44px; padding-inline: 10px; gap: 6px; }
.choose-bar .btn .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choose-bar[hidden] { display: none; }
/* «Forwarded from …» at the top of the message */
.fwd-from { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 3px; -webkit-user-select: none; user-select: none; }
.fwd-from svg { flex: none; }
/* the forward window: whom to send it to */
.fwd-modal .body { display: grid; gap: 10px; }
.fwd-list { max-height: min(46vh, 420px); overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.fwd-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; text-align: left; min-height: 48px; }
.fwd-row:hover { background: var(--field); }
.fwd-row.on { background: color-mix(in srgb, var(--act) 10%, transparent); }
.fwd-name { display: grid; min-width: 0; }
.fwd-name small { font-size: 12px; }
@media (max-width: 640px) { .choose-bar { padding: 6px 8px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); } }
/* on a phone the icon sits over the word, so «Копировать» fits whole in a third of the screen */
@media (max-width: 480px) { .choose-bar .btn { flex-direction: column; gap: 3px; min-height: 54px; padding: 6px 4px; font-size: 13px; line-height: 1.2; } }
/* 2.12.6: shipping in the order edit, and the sums laid out as the store's edit page */
.eship { display: grid; gap: 6px; }
.eship:empty { display: none; }
.eship-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.eship-head svg { color: var(--muted); }
.eship-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 14px; }
.eship-row .grow { min-width: 0; }
.eship-row.gone .grow, .eship-row.gone .eitem-sum { text-decoration: line-through; color: var(--muted); }
.eship-row.new { background: color-mix(in srgb, var(--blue) 6%, transparent); border-radius: 10px; padding: 4px 8px; border-top: 0; }
.eship > .btn { justify-self: start; }
.eship-form { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.edit-sums .pay-row.etotal { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.cap-edited { margin: 0; padding: 8px 10px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--ink); }
@media (max-width: 480px) { .eship-row { flex-wrap: wrap; } .eship-row .grow { flex: 1 1 60%; white-space: normal; overflow-wrap: anywhere; } }
/* 2.12.7: a task about an order — the order block, the paper scan, photos before the task is made */
.tord-block { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.tord-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.btn.tord-scan { border-radius: var(--radius); height: auto; min-height: 52px; padding: 8px 14px; justify-content: flex-start; gap: 12px; text-align: left; }
.tord-scan-t { display: grid; gap: 1px; min-width: 0; }
.tord-scan-t small { font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: normal; }
.tord-fields { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tord-fields .field { margin: 0; }
.tord-fields > .field:nth-child(4) { grid-column: span 2; }
.tord-fields input[data-ord="name"] { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; }
.tord-state { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.35; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--field); color: var(--ink); }
.tord-state[hidden] { display: none; }
.tord-state svg { flex: none; margin-top: 1px; }
.tord-state.ok { background: var(--green-soft); } .tord-state.ok svg { color: var(--green); }
.tord-state.warn { background: var(--warn-soft); } .tord-state.warn svg { color: var(--warn); }
.tord-state.muted { color: var(--muted); }
.tord-state.pick { display: grid; }
.tord-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.tord-pick .btn { height: auto; min-height: 36px; white-space: normal; text-align: left; }
.tord-state .spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: tord-spin .8s linear infinite; }
@keyframes tord-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tord-state .spin { animation-duration: 2.4s; } }
.tord { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 2px 8px; border-radius: 4px; background: var(--plate, var(--field)); color: var(--ink-2, var(--ink)); font-size: 13px; text-decoration: none; }
.tord svg { flex: none; color: var(--muted); }
.tord-no { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; color: var(--ink); white-space: nowrap; }
a.tord:hover { background: var(--field); }
.tcard .tord { margin-top: 6px; }
.tr-ord { font-weight: 400; }
.tshots { display: flex; flex-wrap: wrap; gap: 8px; }
.tshot { position: relative; width: 72px; height: 72px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); background: var(--field); }
.tshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tshot-file { display: grid; place-items: center; gap: 2px; height: 100%; padding: 6px; font-size: 11px; color: var(--muted); }
.tshot-file small { max-width: 100%; font-size: 12px; }
.tshot .icon-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.tshot-add { width: 96px; height: 72px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px dashed var(--line-2); border-radius: var(--r-ctl); color: var(--ink); font-size: 12.5px; line-height: 1.15; text-align: center; transition: background-color 140ms ease; }
.tshot-add:hover { background: var(--field); }
.tshot-add svg { color: var(--muted); }
@media (max-width: 640px) {
  .tord-fields { grid-template-columns: minmax(0, 1fr); }
  .tord-fields > .field:nth-child(4) { grid-column: auto; }
  .tshot, .tshot-add { height: 80px; } .tshot { width: 80px; }
}

/* 2.12.14: an order's verification — the offer in the billing card, its state on the order */
.addr-note .vf-send { margin-top: 8px; height: 34px; font-size: 13px; }
.vf-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid; }
.vf-card.pending { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.vf-card.ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.vf-card.bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.vf-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.vf-head b { font-size: 14px; font-weight: 600; color: var(--ink); }
.vf-card.pending .vf-head > svg { color: var(--warn); }
.vf-card.ok .vf-head > svg { color: var(--green); }
.vf-card.bad .vf-head > svg { color: var(--red); }
.vf-meta { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.vf-meta.warn { color: var(--warn); }
.vf-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.vf-radios { display: grid; gap: 8px; }
.vf-radio { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.vf-radio > input { margin-top: 3px; flex: none; }
.vf-radio > span { display: grid; gap: 2px; }
.vf-radio b { font-weight: 500; color: var(--ink); }
.vf-text { font-size: 13px; line-height: 1.45; min-height: 220px; }
.vf-depts { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-dept { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 500; }
.vf-dept.on { background: var(--act); border-color: var(--act); color: #fff; }
:root[data-theme="dark"] .vf-dept.on { color: var(--bg); }
@media (max-width: 640px) { .vf-acts > .btn { flex: 1; justify-content: center; } .addr-note .vf-send { width: 100%; justify-content: center; height: 40px; } }
/* 2.12.14: another part number shipped instead — ours only */
.osubs { display: grid; gap: 4px; margin-top: 6px; }
.osub { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 8px; border-radius: var(--r-ctl); background: var(--blue-soft); color: var(--ink); }
.osub > svg { color: var(--blue); flex: none; }
.osub-no { font-family: var(--mono); font-weight: 600; background: var(--plate); padding: 0 5px; border-radius: 4px; }
.osub-hist { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.osub-hist > svg { flex: none; margin-top: 2px; color: var(--muted); }
.osub-hist .osub-no { font-weight: 500; }
.osub-add { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; text-decoration: none; color: var(--ink-2); font-weight: 500; }
.osub-add:hover { color: var(--ink); text-decoration: underline; }
.osub-for { font-size: 14px; font-weight: 500; color: var(--ink); }
.omark.ok { background: var(--green-soft); color: var(--green); }

/* 2.12.15 - a draft as in the store, and an order paid later */
.paylater { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.paylater.over { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.paylater-due { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
.paylater-due > svg { color: var(--warn); flex: none; }
.paylater.over .paylater-due > svg { color: var(--red); }
.paylater-due b { font-weight: 600; }
.paylater-acts, .dp-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dp-acts { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.dp-line { align-items: center; }
.dp-line .oi-title { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.dp-line-price { display: flex; align-items: center; gap: 10px; flex: none; }
.dp-line-price .num { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.dp-items .ocard-head { flex-wrap: wrap; }
.dp-items .ppick, .dp-items .citem { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel-2); }
.dp-pay .pay-row .linkish { font-size: 14px; }
.dp-terms { display: grid; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.terms-pick { display: grid; gap: 6px; }
.terms-pick .select { max-width: 280px; }
.terms-pick input[type=date] { max-width: 180px; }
.dp-unsaved { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px 8px 14px; border-radius: var(--r-ctl); background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink); }
.dp-unsaved > svg { color: var(--brand); flex: none; }
.dp-unsaved b { font-weight: 600; }
.dp-cust { display: flex; gap: 8px; align-items: flex-start; }
.dp-cust .grow { min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.ship-opts { display: grid; gap: 2px; }
.ship-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-ctl); cursor: pointer; }
.ship-opt:hover { background: var(--panel-2); }
.ship-opt input { accent-color: var(--act); width: 18px; height: 18px; flex: none; }
.ship-opt .num { font-variant-numeric: tabular-nums; }
.warn-txt { color: var(--warn); font-weight: 500; }
@media (max-width: 640px) {
  .dp-line { flex-wrap: wrap; }
  .dp-line-price { width: 100%; justify-content: flex-end; }
  .dp-unsaved { flex-wrap: wrap; }
  .dp-unsaved .btn { flex: 1; }
  .paylater-acts .btn, .dp-acts .btn { flex: 1; }
}
/* 2.12.15: …and so is taking the payment of an order paid later, and the draft's own payment action */
.oview .op-body .paylater-acts .btn.primary, .oview .op-body .dp-acts .btn.primary { background: var(--act); color: var(--act-ink); }
.oview .op-body .paylater-acts .btn.primary:hover:not(:disabled), .oview .op-body .dp-acts .btn.primary:hover:not(:disabled) { background: var(--act-hover); }

/* 2.12.16 - a purchase's part numbers checked against our store */
.sup-pcheck { display: grid; gap: 6px; }
.sup-pcheck:empty { display: none; }
.pc-ok { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.pc-ok > svg { color: var(--green); flex: none; }
.pc-sug { align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .pc-sug > .btn { flex: 1 1 100%; justify-content: center; } }
.pc-sug .grow { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pc-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; cursor: default; }
button.pc-chip { cursor: pointer; }
button.pc-chip:hover { border-color: var(--line-2); background: var(--panel-2); }
.pc-chip.on { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.pc-chip.on > svg { color: var(--green); }
.pc-chip .tag { padding: 0 4px; }

/* 2.12.16 - access in groups: what each tick opens, ready sets, what the person gets */
.perms.acc { display: grid; gap: 10px; }
.acc-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.acc-role { display: grid; gap: 2px; text-align: left; padding: 9px 11px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.acc-role b { font-size: 14px; font-weight: 600; }
.acc-role span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.acc-role:hover { border-color: var(--line-2); background: var(--panel-2); }
.acc-role.on { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
.acc-role:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acc-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.acc-group.on { border-color: var(--line-2); }
.acc-ghead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.acc-group.special .acc-ghead { cursor: default; }
.acc-gic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--panel-2); color: var(--ink-2); }
.acc-group.on .acc-gic { color: var(--ink); }
.acc-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.acc-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.acc-d { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.acc-subs { display: grid; border-top: 1px solid var(--line); padding: 4px 0; }
.acc-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 12px 7px 16px; cursor: pointer; }
.acc-row input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--act); flex: none; }
.acc-row.off { cursor: default; }
.acc-row.off .acc-name { color: var(--muted); }
.acc-row.by-dept input { opacity: .6; }
.acc-row:hover:not(.off) { background: var(--panel-2); }
.acc-sum { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--panel-2); font-size: 13px; color: var(--ink); line-height: 1.4; }
.acc-sum b { font-weight: 600; }
.dept-perms .perm-row { align-items: flex-start; }
@media (max-width: 640px) { .acc-roles { grid-template-columns: 1fr 1fr; } }

/* 2.12.16 - a tracking number read by the camera */
.ts-view { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.ts-video { width: 100%; height: 100%; object-fit: cover; }
.ts-frame { position: absolute; left: 5%; right: 5%; top: 50%; height: clamp(120px, 30%, 260px); transform: translateY(-50%); border: 2px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.ts-bottom { display: grid; gap: 8px; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: #000; }
.ts-status { font-size: 15px; font-weight: 600; text-align: center; min-height: 20px; }
.ts-hint { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.72); text-align: center; }
.ts-picks { display: grid; gap: 6px; }
.ts-picks:empty { display: none; }
.ts-picks .btn { justify-content: center; }
@media (max-width: 640px) { .sup-head .sup-scan-btn { order: -1; } }

/* 2.12.18: the task board by importance */
.board-by { margin-left: 8px; }
.tc-doing { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--blue); }
.tc-doing .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
@media (max-width: 760px) { .board-by { margin-left: 0; } }
.board.by-prio { grid-template-columns: repeat(3, minmax(240px, 1fr)) minmax(220px, .8fr); min-width: 1040px; }
.board.by-prio .col-done .tcard { opacity: .8; }
@media (max-width: 760px) { .board.by-prio { min-width: 0; grid-template-columns: repeat(4, 84vw); } }