/* «Заказы» in the Poster register's look (a skin, preview of 2026-10-06): loaded after orders.css
   and sheet.css when a venue switches it on; layout and behaviour stay as they are. The cabinets
   (/manage, /me) take the same file after their own styles; their rules are at the end.
   Colours sampled from the register's own screenshots on joinposter.com (the order screen
   cafe-ru.png, the orders list orders-ru.png): the graphite bars, the grey-lilac floor under the
   product tiles, the action blue, the «Оплатить» green, the status red; flat white rows on
   hairlines, square-ish 3-4 px corners, the system font.
   Dark too (2026-10-07): Poster has no dark mode, so its night is ours to draw — the same
   graphite bars, now the darkest thing on the screen, over a dark floor and dark-grey cards;
   the blue, the green and the red a touch lighter. It follows the waiter's «Тема» as ours does
   (html data-theme; system follows the phone). Every colour a rule needs is a token here, so
   the dark blocks below only swap values. */

html[data-app] {
  --brand: #438DE2; --bg: #D8DBE6; --card: #FFFFFF; --ink: #222326; --dim: #84868C; --line: #E6E7EA;
  --soft: #F4F5F8; --line2: #D0DCEC; --mute: #A9ADB8; color-scheme: light;
  --pz-bar: #373D46; --pz-bar2: #272B33; --pz-bar-dim: #A9B0BC; --pz-go: #3BB534; --pz-go-down: #33A02D;
  --pz-red: #CA282F; --pz-btn-line: #D0DCEC; --pz-icon: #454A52; --pz-r: 4px;
  /* The phone's status bar (the clock) in the bar's graphite: read by the pages' scripts into
     <meta name="theme-color"> (orders.js paintTheme, manage.js). */
  --pz-status: #373D46;
  --pz-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;
  /* A white key (Пречек, ±, «⋯») and a field; a key that is off and its text; the grey captions
     over groups (menu headings a shade lighter) and the «·» between a table and its sum. */
  --pz-btn: #FFFFFF; --pz-field: #FFFFFF; --pz-off: #E6E7EA; --pz-off-ink: #B9BCC4;
  --pz-cap: #5E636D; --pz-cap2: #6E727B; --pz-sep: #C2C5CC;
  /* Status labels (paid green, waiting amber, removed red, neutral grey), the blue tint of a
     chosen row, a note's yellow, a free table on the hall map, the dimming under a popup, the toast
     and the notice card over the screen (ours' ink on the floor's colour in the light). */
  --pz-ok: #2C8A26; --pz-ok-bg: #E3F4E1; --pz-warn: #A35F00; --pz-warn-bg: #FFF1DC; --pz-bad-bg: #FBE6E7;
  --pz-chip: #5E636D; --pz-chip-bg: #EEF0F4; --pz-tint: #E1EDFB; --pz-note: #6B5300; --pz-note-bg: #FFF6DA;
  --pz-pic: #E6E9F0; --pz-table: #373D46; --pz-scrim: rgba(39,43,51,.55); --pz-toast: #373D46;
  --pz-pop: #222326; --pz-pop-ink: #D8DBE6;
  /* Ours' own colours the skin kept in the light (orders.css, sheet.css): the green and red words,
     the stop list's red «+», a part-paid label, a dish on the stop list, the hall's plan. */
  --pz-good: #1C7F46; --pz-bad: #B4413C; --pz-stop-bg: #F6E3E1; --pz-part: #8A5300; --pz-part-bg: #FDF1DC;
  --pz-stopped: #ABA49C; --pz-stopped2: #C4BEB7; --pz-plan: #D9DCE8; --pz-plan-table: #373D48;
}
/* The night register: the same names in the same order, picked in «Тема» or by the phone. */
html[data-app][data-theme="dark"] {
  --brand: #4A94E8; --bg: #1B1E24; --card: #252A32; --ink: #E6E8EC; --dim: #9AA1AC; --line: #363C46;
  --soft: #2A2F38; --line2: #48505C; --mute: #6B7380; color-scheme: dark;
  --pz-bar: #14171C; --pz-bar2: #0E1013; --pz-bar-dim: #9AA1AC; --pz-go: #41B93A; --pz-go-down: #37A331;
  --pz-red: #DE4349; --pz-btn-line: #444B57; --pz-icon: #C3C8D0;
  --pz-status: #14171C;
  --pz-btn: #2F353E; --pz-field: #1F2329; --pz-off: #343A44; --pz-off-ink: #6A717D;
  --pz-cap: #9AA1AC; --pz-cap2: #9AA1AC; --pz-sep: #5A616C;
  --pz-ok: #6BD164; --pz-ok-bg: #1F3A24; --pz-warn: #E8A84A; --pz-warn-bg: #3D2F18; --pz-bad-bg: #43262A;
  --pz-chip: #B4BAC4; --pz-chip-bg: #333943; --pz-tint: #243A55; --pz-note: #EBCF7A; --pz-note-bg: #3A3320;
  --pz-pic: #333943; --pz-table: #3A414C; --pz-scrim: rgba(0,0,0,.62); --pz-toast: #3A414C;
  --pz-pop: #3A414C; --pz-pop-ink: #FFFFFF;
  --pz-good: #6BD164; --pz-bad: #F0787C; --pz-stop-bg: #43262A; --pz-part: #E8A84A; --pz-part-bg: #3D2F18;
  --pz-stopped: #6B7380; --pz-stopped2: #565D69; --pz-plan: #1B1E24; --pz-plan-table: #3A414C;
}
@media (prefers-color-scheme: dark) {
  html[data-app]:not([data-theme="light"]) {
    --brand: #4A94E8; --bg: #1B1E24; --card: #252A32; --ink: #E6E8EC; --dim: #9AA1AC; --line: #363C46;
    --soft: #2A2F38; --line2: #48505C; --mute: #6B7380; color-scheme: dark;
    --pz-bar: #14171C; --pz-bar2: #0E1013; --pz-bar-dim: #9AA1AC; --pz-go: #41B93A; --pz-go-down: #37A331;
    --pz-red: #DE4349; --pz-btn-line: #444B57; --pz-icon: #C3C8D0;
    --pz-status: #14171C;
    --pz-btn: #2F353E; --pz-field: #1F2329; --pz-off: #343A44; --pz-off-ink: #6A717D;
    --pz-cap: #9AA1AC; --pz-cap2: #9AA1AC; --pz-sep: #5A616C;
    --pz-ok: #6BD164; --pz-ok-bg: #1F3A24; --pz-warn: #E8A84A; --pz-warn-bg: #3D2F18; --pz-bad-bg: #43262A;
    --pz-chip: #B4BAC4; --pz-chip-bg: #333943; --pz-tint: #243A55; --pz-note: #EBCF7A; --pz-note-bg: #3A3320;
    --pz-pic: #333943; --pz-table: #3A414C; --pz-scrim: rgba(0,0,0,.62); --pz-toast: #3A414C;
    --pz-pop: #3A414C; --pz-pop-ink: #FFFFFF;
    --pz-good: #6BD164; --pz-bad: #F0787C; --pz-stop-bg: #43262A; --pz-part: #E8A84A; --pz-part-bg: #3D2F18;
    --pz-stopped: #6B7380; --pz-stopped2: #565D69; --pz-plan: #1B1E24; --pz-plan-table: #3A414C;
  }
}

/* ---------- type: the system font, lighter bold ---------- */
body, .tno, .sb-sum, .ord-sum, .oline .osum, .bell-n, .sheet-in > h3, .sheet-title, .sheet-big { font-family: var(--pz-font) }
body { font-size: 15px; letter-spacing: 0 }
/* The phone's status bar over a home-screen app takes the body's background (iOS paints it from
   there, not from theme-color — seen 2026-10-06): the body is the bars' graphite, and the page's
   lilac floor moves onto .wrap, full width, the content centred by padding instead of margin. */
body { background: var(--pz-bar) }
/* «Открыли чаевые»: the blue label says it opens; no chevron after it. */
.mstat[data-tips-opened] i::after { content: none }
/* The side gutter, in one place: the graphite bars below bleed by exactly it, so they reach the
   edges at any width (past 672px the gutter grows; a fixed -16px left lilac strips, 2026-10-07).
   By vw: a scrollbar only makes the column a touch narrower, the bars still meet the edges. No
   container units: a container on body made iOS 18.0 pin every fixed popup to the whole page
   instead of the screen — a manager's «Пригласить» showed the dimming alone. */
html[data-app="orders"] .wrap, html[data-app="me"] .wrap { --gut: max(16px, calc((100vw - 640px) / 2)) }
html[data-app="manage"] .wrap { --gut: max(14px, calc((100vw - 560px) / 2)) }
html[data-app="orders"] .wrap, html[data-app="me"] .wrap { max-width: none; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; margin: 0; padding-left: var(--gut); padding-right: var(--gut); background: var(--bg) }
html[data-app="manage"] .wrap { max-width: none; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; margin: 0; padding-left: var(--gut); padding-right: var(--gut); background: var(--bg) }
h1, h2, .tno, .ord-top b, .mn-h.mn-cat, .sheet-in > h3, .sheet-title { letter-spacing: 0 }

/* ---------- corners and buttons: flat, 3-4 px ---------- */
button, .quiet-link, .dd-btn, .dd-list, input[type=text], input[type=tel], textarea, .tile, .closed, .find-o, .install, .shiftgate, .callout, .saved-card, .sb-tips, .also, .ord-paid, .inote { border-radius: var(--pz-r) }
button { font-weight: 600 }
button.quiet, .sheet-acts > button.quiet, .sheet-in > button.quiet, .sheet-btn.quiet { background: var(--pz-btn); color: var(--ink); border: 1px solid var(--pz-btn-line); font-weight: 500 }
.sheet-acts > button, .sheet-in > button, .sheet-btn { border-radius: var(--pz-r); min-height: 48px }
button.quiet.danger, .sheet-in > button.quiet.danger { color: var(--pz-red); border-color: color-mix(in srgb, var(--pz-red) 35%, var(--pz-btn)) }
.sheet-acts > button.danger, .sheet-in > button.danger, .sheet-btn.danger, .oacts button[data-order-kitchen].redo, .ord-acts button[data-ord-kitchen].redo { background: var(--pz-red) }
input[type=text], input[type=tel], textarea { border-color: var(--pz-btn-line) }
input:focus, textarea:focus { border-color: var(--brand) }

/* The main step of a screen in Poster's «Оплатить» green: a new order, a dish added, the kitchen ticket. */
/* As Poster: «Бегунок» blue, «Пречек» white with black text; green for adding only. */
.onew, .sheet [data-opt-add], .install button:not(.quiet), .to-orders { background: var(--pz-go); color: #fff; border-color: transparent }
.ord-acts button[data-ord-kitchen]:not(.redo), .oacts button[data-order-kitchen]:not(.redo) { background: var(--brand); color: #fff; border-color: transparent }
.ord-acts button[data-ord-prebill], .oacts button[data-order-prebill] { background: var(--pz-btn); color: var(--ink); border: 1px solid var(--pz-btn-line) }
button.armed { background: var(--pz-go-down) !important }

/* ---------- the top bar: graphite, full width, white text ---------- */
.ohead, .wrap > header:first-child { margin: -18px calc(-1 * var(--gut, 16px)) 12px; padding: 10px var(--gut, 16px) 11px; background: var(--pz-bar); color: #fff }
.ohead h1, .wrap > header:first-child h1 { color: #fff; font-size: 18px; font-weight: 600 }
.ohead p, .wrap > header:first-child p { color: var(--pz-bar-dim) }
.ohead .out { left: calc(var(--gut, 16px) - 8px); top: 8px }
.ohead .bell { right: calc(var(--gut, 16px) - 8px); top: 8px }
.ohead button.ico { background: transparent; border-color: rgba(255,255,255,.14); color: #fff }
.ohead .linkdot { border: 0 }
.linkdot.ok i, .linkrow.ok i { background: #62D84E; box-shadow: 0 0 0 4px rgba(98,216,78,.18) }
[data-settings] .gdot { box-shadow: 0 0 0 2px var(--pz-bar) }

/* ---------- cards: white panels on the lilac floor, edge to edge like the register's list ---------- */
section { border-radius: var(--pz-r); box-shadow: 0 1px 2px rgba(0,0,0,.12) }
.wrap.mode-orders #sb-orders-card { margin-left: calc(-1 * var(--gut, 16px)); margin-right: calc(-1 * var(--gut, 16px)); border-radius: 0; box-shadow: none; padding-top: 0; padding-left: var(--gut, 16px); padding-right: var(--gut, 16px) }
.mystats h2 { color: var(--pz-cap); letter-spacing: .03em }
.mstat { border-radius: var(--pz-r); box-shadow: 0 1px 2px rgba(0,0,0,.14); background: var(--card) }
.mstat b { font-weight: 700 }
.mstat[data-tips-opened] i { color: var(--brand) }

/* The tabs over the list: the register's dark second bar, white current tab, grey others. */
.otabs { margin: 0 calc(-1 * var(--gut, 16px)) 12px; padding: 0 var(--gut, 16px); min-height: 48px; gap: 22px; background: var(--pz-bar2); border-bottom: 0 }
.otabs a { display: inline-flex; align-items: center; align-self: stretch; color: #8E95A1; font-size: 16px; font-weight: 500 }
.otabs .stopn { vertical-align: 0; line-height: 20px; border-radius: 10px }
.otabs:has(a:nth-child(3)) a { font-size: 16px }
.otabs a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--brand) }
.otabs .stopn { background: #FF3B30 }
.otabs .refresh { color: #fff; border-color: rgba(255,255,255,.2); background: transparent }

/* «Мои / Все столы»: a Poster segmented control, blue outline, the chosen one filled. */
.orders-head .tabs { background: transparent; padding: 0; gap: 0; border: 1px solid var(--brand); border-radius: var(--pz-r); overflow: hidden }
.orders-head .tabs button { min-height: 0; border-radius: 0; color: var(--brand); font-weight: 500 }
.orders-head .tabs button + button { border-left: 1px solid var(--brand) }
.orders-head .tabs button[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: none }

/* The search fields: a plain white box with a grey frame, no dashed tint. */
.ord-qi input, .oq-field input { border: 1px solid var(--pz-btn-line); background: var(--pz-field) }
.ord-qi input:focus, .oq-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent) }
.ord-qi svg, .oq-field svg { color: var(--pz-icon) }
.orders-head .ofind { background: var(--pz-btn); color: var(--brand); border: 1px solid var(--pz-btn-line) }

/* An order in the list: a white row on a hairline, the sum bold, a blue chevron; the row's
   action a blue button as «Перейти к оплате». */
.orders { gap: 0 }
.orders .orow + .pmsg + .orow, .orders .orow + .orow { margin-top: 0 }
.orow { padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center }
.orders .orow:first-child { border-top: 1px solid var(--line) }
.orders .order { background: transparent; border: 0; border-radius: 0; padding: 4px 0; min-height: 48px }
.tno { font-weight: 700; font-size: 20px }
.oline .osep, .orders .order .oline .osep { color: var(--pz-sep) }
.oline .osum { font-weight: 700 }
.orders .order i, .oarrow { color: var(--brand); font-size: 20px; font-weight: 400 }
.oacts button { min-height: 44px; background: var(--brand); color: #fff; border: 0; border-radius: var(--pz-r); padding: 0 16px; font-weight: 500; font-size: 14.5px }
.oacts button[data-order-kitchen].inflight:disabled, .ord-acts button[data-ord-kitchen].inflight:disabled { background: var(--pz-off); color: var(--dim); opacity: 1 }
.orders .order em.paid, .ord-paid { background: var(--pz-ok-bg); color: var(--pz-ok) }
/* «Найти стол»: its rows on hairlines like the list's. */
.orders .find-list { gap: 0 }
.onew { margin-top: 16px; min-height: 50px; font-size: 16px }

/* ---------- the order: the register's «Чек» head in graphite, lines as its table ---------- */
.ord { background: var(--card) }
.ord-top { margin: -14px -16px 0; padding: 8px 10px 8px 8px; background: var(--pz-bar); color: #fff }
.sb.hist .ord-top { margin-top: 0; padding-top: 8px; padding-bottom: 8px; background: var(--pz-bar) }
.ord-top b { color: #fff; font-size: 19px; font-weight: 600 }
.ord-top b .ordno, .ord-top span, .ord-who { color: var(--pz-bar-dim) }
.ord-top button.ico { background: transparent; color: #fff; border-color: rgba(255,255,255,.16) }
/* The register-off warning keeps its yellow on the graphite (the rule above matched it too). */
.ord-top button.ico.regoff { background: #FFE9A8; color: #8A5A00; border-color: #F0C24B }
.ord-top .ico.ord-plus-top { background: var(--pz-go); color: #fff; border: 0; font-weight: 500 }
/* «+» moves from the head to the right end of the bottom bar, green; the order's search field
   beside it framed in the same green. */
.ord-top .ico.ord-plus-top { display: none }
.ord-acts .ord-plus-bot { display: grid; place-items: center; order: 3; flex: 0 0 48px; width: 48px; min-height: 48px; padding: 0; background: var(--brand); color: #fff; border: 0; border-radius: var(--pz-r); font-size: 28px; font-weight: 500; line-height: 1 }
.ord-acts .ord-plus-bot:active { background: color-mix(in srgb, var(--brand) 85%, #000) }
/* «←» too: off the head, at the left end of the bottom bar (it closes the order, or ends a search). */
.ord-top .ord-close { display: none }
html[data-app] .ord:has(.ord-close) .ord-acts > .ico-back { display: grid }
.ord-acts .ord-qnav { background: var(--pz-btn); color: var(--pz-go); border: 1px solid var(--pz-btn-line); border-radius: var(--pz-r); font-weight: 600 }
.ord-acts .ord-qok:not(.quiet), .mn-q .st-ok:not(.quiet) { background: var(--pz-go); color: #fff; border: 0; border-radius: var(--pz-r); font-weight: 600 }
.ord-acts .ord-qok:not(.quiet):active, .mn-q .st-ok:not(.quiet):active { background: var(--pz-go-down) }
html[data-app] .ord.finding .ord-acts > .ico-back { display: none }
.ord-acts .ord-qok.quiet, .mn-q .st-ok.quiet { background: var(--pz-btn); color: var(--ink); border: 1px solid var(--pz-btn-line); border-radius: var(--pz-r); font-weight: 600 }
.ord-acts .ord-qnav:disabled { background: var(--pz-off); color: var(--dim); opacity: 1 }
.ord-qi input { border: 1.5px solid var(--brand) }
/* «Найти стол» framed in the action blue (a search, not an add). */
.oq-field input { border: 1.5px solid var(--brand) }
.ord-qi input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent) }
.ico.ocmt.has::after { background: #FF3B30; border-color: var(--pz-bar) }
.ord-sum { font-weight: 700; font-size: 28px; margin: 14px 0 8px }
.ord-items li { border-top-color: var(--line) }
.ord-items .nm { font-weight: 500 }
.ord-items .iedit .nm .bn::after { color: var(--brand) }
.inote { background: var(--pz-note-bg); color: var(--pz-note) }
.step button, .ostep button, .mn-ord li button { background: var(--pz-btn); border: 1px solid var(--pz-btn-line); color: var(--brand); border-radius: var(--pz-r) }
.step button:disabled, .mn-ord li button:disabled { color: var(--pz-off-ink) }
button.ico { border-radius: var(--pz-r); border-color: var(--pz-btn-line); color: var(--pz-icon) }
button.ico-back { background: var(--pz-btn); border: 1px solid var(--pz-btn-line); color: var(--pz-icon) }
.ord-bar, .mn-foot { border-top-color: var(--line); box-shadow: 0 -1px 0 rgba(0,0,0,.02) }
button.quiet.ord-add, .ord-acts button.ord-plus { background: var(--brand); color: #fff; border: 0; font-weight: 600 }
.also { border: 1px solid var(--line); background: var(--soft) }
button.quiet.also-b b { color: var(--pz-go) }

/* ---------- the menu: the lilac floor of the register, white tiles and rows on it ---------- */
.menu, .menu .mn-head { background: var(--bg) }
.mn-crumb { color: var(--brand); font-weight: 500 }
.mn-h { color: var(--pz-cap2) }
.tile { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.16); font-weight: 500; color: var(--ink) }
.tile .th { color: #fff; font-weight: 600; background-color: #438DE2 }
.tiles > :nth-child(5n+2) .th { background-color: #3BB534 }
.tiles > :nth-child(5n+3) .th { background-color: #F29C38 }
.tiles > :nth-child(5n+4) .th { background-color: #9566CF }
.tiles > :nth-child(5n+5) .th { background-color: #E0504F }
.prods li { background: var(--card); border-top: 0; margin-bottom: 4px; border-radius: var(--pz-r); box-shadow: 0 1px 1px rgba(0,0,0,.1) }
.prods button { border-top: 0; padding: 8px 10px 8px 12px; min-height: 50px; border-radius: var(--pz-r) }
.prods i { color: var(--dim) }
/* Adding is green: the «+» of a dish, the mark on the top dish found, the arrows that move it. */
.prods i::after { background: var(--pz-go); color: #fff; border-radius: var(--pz-r); font-weight: 500 }
.prods li:has(> [data-prod].top) { background: color-mix(in srgb, var(--pz-go) 13%, var(--card)) }
/* The dishes found over the order: white cards on the grey floor, as in the menu. */
.ord.finding.q-on .ord-in { background: var(--bg) }
/* The stop list's search layer: white like the list it came from. */
.sb.menu.stops, .menu.stops .mn-head { background: var(--card) }
.prods li.stale i::after { background: var(--pz-off); color: var(--dim) }
.prods .inord { background: var(--pz-go); border-radius: var(--pz-r) }
html[data-app] { --lit: color-mix(in srgb, var(--pz-go) 16%, var(--card)) }
.chips button { border-radius: var(--pz-r); background: var(--pz-btn); border: 1px solid var(--pz-btn-line) }
.chips button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand) }

/* ---------- popups: a square-cornered white sheet, as the register's dialogs ---------- */
.sheet { background: var(--pz-scrim) }
.sheet-in { border-radius: 8px 8px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.18) }
.sheet-in > h3, .sheet-title { font-size: 18px; font-weight: 600 }
.opt-g h4 { font-weight: 600; color: var(--pz-cap); text-transform: uppercase; font-size: 12.5px; letter-spacing: .04em }
.opt-g h4 span { text-transform: none; letter-spacing: 0 }
.seg3 { background: transparent; padding: 0; gap: 0; border: 1px solid var(--brand); border-radius: var(--pz-r); overflow: hidden }
.seg3 button { border-radius: 0; color: var(--brand); min-height: 40px }
.seg3 button + button { border-left: 1px solid var(--brand) }
.seg3 button[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: none }
.quiet-link { background: var(--pz-btn); border: 1px solid var(--pz-btn-line); color: var(--ink); font-weight: 500 }

/* A new order's tables: the hall map's graphite tables, open orders in blue. */
.tables button { background: var(--pz-table); color: #fff; border-radius: var(--pz-r) }
.hall { color: var(--pz-cap); text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px }
.hall-tabs button { border-radius: var(--pz-r); background: var(--pz-btn); border: 1px solid var(--pz-btn-line) }
.hall-tabs button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand) }

/* Ours' green and red words, the stop list's «+», a dish off sale, the hall's plan: in the skin's
   tokens (in the light the very colours of orders.css and sheet.css, so only the dark changes). */
.ok, .find-s, .orders .order .find-s, .sheet-msg.ok { color: var(--pz-good) }
.bad, .sheet-msg.bad, .inv-st.bad, .hlist li.bad span { color: var(--pz-bad) }
.st-search .prods i::after, .st-search .prods .more i::after { background: var(--pz-stop-bg); color: var(--pz-bad) }
.ord-paid.part { background: var(--pz-part-bg); color: var(--pz-part) }
.prods li.stopped button, .prods li.stopped button:disabled { color: var(--pz-stopped) }
.prods li.stopped button i, .prods li.stopped button small { color: var(--pz-stopped2) }
.plan { background: var(--pz-plan) }
.plan button { background: var(--pz-plan-table); box-shadow: 0 0 0 2px var(--pz-plan) }

/* ---------- the footer and the toast ---------- */
.ofoot a { color: var(--brand) }
.ofoot .powered span { color: var(--pz-go) }
.toast { border-radius: var(--pz-r); background: var(--pz-toast); color: #fff }
.ncard { background: var(--pz-pop); color: var(--pz-pop-ink) }

/* ================= the cabinets (admin «Вид кабинетов») =================
   The manager's cabinet (manage.css, html[data-app="manage"]) and the waiter's own page (mode
   'me' of orders.css, html[data-app="me"]) in the same language: a graphite bar on top, white
   cards on the lilac floor, rows on hairlines, blue outline buttons, green only for a screen's
   one main step, red only for what removes or closes. Every rule here is under the cabinet's own
   data-app, so «Заказы» (data-app="orders") never sees it. */

html[data-app="manage"] { --ok: #2C8A26; --warn: #B86E00 }
html[data-app="manage"][data-theme="dark"] { --ok: var(--pz-ok); --warn: var(--pz-warn) }
@media (prefers-color-scheme: dark) { html[data-app="manage"]:not([data-theme="light"]) { --ok: var(--pz-ok); --warn: var(--pz-warn) } }

/* ---------- the bar: graphite with the gear on its left; the manager's page has 14 px sides ---------- */
html[data-app="manage"] header.mhead { margin: 0 calc(-1 * var(--gut, 14px)) 12px; min-height: 62px; padding: 10px var(--gut, 14px) 10px calc(var(--gut, 14px) + 50px); display: flex; flex-direction: column; justify-content: center; background: var(--pz-bar); color: #fff }
html[data-app="manage"] .wrap > header.mhead:first-child { margin-top: -16px }
html[data-app="manage"] header.mhead.hub-head { padding-left: var(--gut, 14px); min-height: 56px }
html[data-app="manage"] .hub a { border-radius: var(--pz-r) }
html[data-app] .hubv a { border-radius: var(--pz-r) }
html[data-app="manage"] header.mhead h1 { color: #fff; font-size: 18px; font-weight: 600 }
html[data-app="manage"] header.mhead select { margin-top: 8px; border-color: transparent; border-radius: var(--pz-r) }
html[data-app="manage"] header.mhead.picks select { margin-top: 0 }
html[data-app="manage"] .mhead .gear-top, html[data-app="me"] .mhead .gear-top { left: calc(var(--gut, 14px) - 4px); top: 10px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--pz-r) }
html[data-app="me"] header.mhead { padding: 12px 60px 14px }
html[data-app="me"] .langs button { min-height: 30px; background: transparent; color: #C9CED8; border: 1px solid rgba(255,255,255,.22); border-radius: var(--pz-r) }
html[data-app="me"] .langs button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff }
/* «Журнал изменений»: its own screen, the same bar. */
html[data-app="manage"] .logscreen .wrap > header.loghead { margin: -16px calc(-1 * var(--gut, 14px)) 12px; padding: 10px var(--gut, 14px); background: var(--pz-bar) }
html[data-app="manage"] .loghead h1 { color: #fff; font-size: 18px; font-weight: 600 }
html[data-app="manage"] .loghead .back { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--pz-r); font-weight: 500 }
html[data-app="manage"] .logday { color: var(--pz-cap); font-size: 12.5px; letter-spacing: .04em }
html[data-app="manage"] .logrow { border-radius: var(--pz-r); box-shadow: 0 1px 2px rgba(0,0,0,.12) }

/* ---------- switches (Каждому / Команде, the people's tabs, month / week): Poster's segmented control ---------- */
html[data-app="manage"] .tabs { padding: 0; gap: 0; background: transparent; border: 1px solid var(--brand); border-radius: var(--pz-r); overflow: hidden }
html[data-app="manage"] .tabs button { min-height: 34px; padding: 0 10px; border-radius: 0; color: var(--brand); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: none }
html[data-app="manage"] .tabs button + button { border-left: 1px solid var(--brand) }
html[data-app="manage"] .tabs button[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: none }
html[data-app="manage"] .tabs button[aria-pressed="true"] .cnt { color: rgba(255,255,255,.75) }
html[data-app="manage"] .tabs .cnt { color: #8FB6EC }

/* ---------- a person's row: badges as the register's status labels, «⋯» a square key ---------- */
html[data-app="manage"] .chip { border-radius: 3px; padding: 4px 7px; background: var(--pz-chip-bg); color: var(--pz-chip); font-weight: 500 }
html[data-app="manage"] .chip.ok { background: var(--pz-ok-bg); color: var(--pz-ok) }
html[data-app="manage"] .chip.warn { background: var(--pz-warn-bg); color: var(--pz-warn) }
html[data-app="manage"] .chip.bad, html[data-app="manage"] .chip.bad.noclick { background: var(--pz-bad-bg); color: var(--pz-red) }
html[data-app="manage"] .w .wphone { color: var(--dim) }
html[data-app="manage"] .w .dots { border-color: var(--pz-btn-line); border-radius: var(--pz-r); background: var(--pz-btn); color: var(--pz-icon) }
html[data-app="manage"] .w .dots[aria-expanded="true"] { border-color: var(--brand); color: var(--brand) }
html[data-app="manage"] .w .wmore .pop { padding: 4px 0; border-radius: var(--pz-r); border-color: var(--line); box-shadow: 0 6px 22px rgba(39,43,51,.22) }
html[data-app="manage"] .w .wmore .pop button { min-height: 44px; padding: 0 14px; border-radius: 0; font-weight: 400 }
html[data-app="manage"] .w .wmore .pop button + button { border-top: 1px solid var(--line) }
html[data-app="manage"] .w .wmore .pop button:active { background: var(--pz-tint) }
html[data-app="manage"] .w .wmore .pop button.strong { color: var(--brand); font-weight: 600 }
html[data-app="manage"] .w .wmore .pop button.danger { color: var(--pz-red) }
html[data-app="manage"] .w .wmore .pop button.last { margin-top: 0; border-top: 6px solid var(--soft); border-radius: 0 }
html[data-app="manage"] .w .wmore .pop button.danger + button.danger { border-top: 1px solid var(--line) }
html[data-app="manage"] .w button:not(.dots):not(.quiet) { border-radius: var(--pz-r) }

/* ---------- buttons and fields of the cabinet ---------- */
html[data-app="manage"] .mini, html[data-app="manage"] .sync, html[data-app="manage"] .add-waiter summary, html[data-app="manage"] .inv-sms .linkbtn { border: 1px solid var(--pz-btn-line); border-radius: var(--pz-r); background: var(--pz-btn); color: var(--brand); font-weight: 600 }
html[data-app="manage"] .add-waiter summary { padding: 12px 14px }
html[data-app="manage"] .inv-sms .linkbtn { justify-self: stretch; min-height: 46px; padding: 0 16px; text-decoration: none }
html[data-app="manage"] .loglink { border-radius: var(--pz-r); box-shadow: 0 1px 2px rgba(0,0,0,.12); color: var(--brand) }
/* The one main step: «Добавить в Poster» in the add form, «Отправить SMS» once the number is shown. */
html[data-app="manage"] .add-waiter [data-add-waiter], html[data-app="manage"] .inv-sms .sheet-acts > button:not(.quiet) { background: var(--pz-go); color: #fff; border-radius: var(--pz-r) }
html[data-app="manage"] .pick input, html[data-app="manage"] .line.mine input, html[data-app="manage"] .add-waiter label.line input,
html[data-app="manage"] .sheet-in > input, html[data-app="manage"] .uzph, html[data-app="manage"] select { border-color: var(--pz-btn-line); border-radius: var(--pz-r) }
html[data-app="manage"] .add-waiter label.line .uzph input { border: 0; border-radius: 0 }
html[data-app="manage"] select { background-color: var(--pz-field) }
html[data-app="manage"] .addh { font-weight: 600 }

/* ---------- panels inside the cards ---------- */
html[data-app="manage"] .stat { border-radius: var(--pz-r); background: var(--soft); border: 1px solid var(--line) }
html[data-app="manage"] .stat b { font-weight: 700 }
html[data-app="manage"] .added { border-radius: var(--pz-r); background: var(--pz-tint) }
html[data-app="manage"] .cands { border-radius: var(--pz-r); background: var(--pz-note-bg) }
html[data-app="manage"] .tent, html[data-app="manage"] .tel-qr { border-radius: var(--pz-r) }
html[data-app="manage"] .nav-links a { border-radius: var(--pz-r); background: var(--pz-btn); border: 1px solid var(--pz-btn-line); font-weight: 500 }
html[data-app="manage"] .preview-note { border-radius: var(--pz-r) }

/* ---------- the waiter's own page ---------- */
/* «Показать QR-код»: the page's main step. «Сохранить» stays blue. */
html[data-app="me"] [data-screen-show] { background: var(--pz-go); color: #fff }
html[data-app="me"] .saved-card { border-radius: var(--pz-r); background: var(--soft); border: 1px solid var(--line) }
html[data-app="me"] .saved-card span { color: var(--pz-ok) }
html[data-app="me"] .callout { border-left-width: 3px; background: var(--pz-tint) }
html[data-app="me"] .callout.bad { background: var(--pz-bad-bg); border-left-color: var(--pz-red) }
html[data-app="me"] .recent .st { border-radius: 3px; background: var(--pz-chip-bg); color: var(--pz-chip) }
html[data-app="me"] .recent .st.paid { background: var(--pz-ok-bg); color: var(--pz-ok) }
html[data-app="me"] .recent button.st { background: var(--brand); color: #fff }
html[data-app="me"] .dd-list li { border-radius: 0 }
html[data-app="me"] .dd-list li.active, html[data-app="me"] .dd-list li:hover { background: var(--pz-tint) }
html[data-app="me"] .pic { background: var(--pz-pic) }
html[data-app="me"] .preview { color: var(--brand) }
html[data-app="me"] .need-pill, html[data-app="me"] [data-settings] .gdot { background: var(--pz-red) }
/* The analytics' periods three a row: lines between the rows, none at a row's start. */
html[data-app="manage"] .tabs.an-periods button:nth-child(3n+1) { border-left: 0 }
html[data-app="manage"] .tabs.an-periods button:nth-child(n+4) { border-top: 1px solid var(--brand) }