/* Клиентская база Ethel Store — раскладка приложения поверх дизайн-системы (tokens.css + bundle.css).
   Компоненты es-* не переопределяем: здесь только то, что связывает экраны между собой. */

html, body { margin: 0; height: 100%; background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); }
/* У Manrope нет казахских Ә Ғ Қ Ң Ұ и знака ₸ — их подхватывают системные шрифты по очереди */
:root { --font-sans: Manrope, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--ink); }
a:hover { color: var(--ink-muted); }
button { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app-boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.app-boot img { height: 40px; opacity: .6; }

/* ── каркас ── */
.app { display: flex; min-height: 100vh; }
.app .es-side { position: sticky; top: 0; height: 100vh; flex: 0 0 var(--sidebar); box-sizing: border-box; }
.app .es-side a { text-decoration: none; }
.app-main { flex: 1; min-width: 0; padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 16px; max-width: var(--content-max); box-sizing: border-box; }
.app-main--wide { max-width: none; }
.app-top { display: none; }
.app-tabbar { display: none; }
.app-fab { display: none; }

.app-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.app-head__title { flex: 1; min-width: 240px; }
.app-head .es-search__box { width: 400px; max-width: 100%; }
.app-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); flex: 1; }
.app-crumbs a { color: var(--ink-muted); }
.app-crumbs b { color: var(--ink); font-weight: 600; }
.app-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.app-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.app-col { display: flex; flex-direction: column; gap: 12px; }
.app-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.app-sp { flex: 1; }
.app-link { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; text-decoration: none; }
.app-muted { color: var(--ink-muted); }
.app-small { font-size: 13px; }
.app-center { text-align: center; }
.app-pre { white-space: pre-wrap; }

.app-card-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.app-card-layout > .app-card-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.app-card-layout > aside { flex: 1 1 340px; max-width: 380px; min-width: 300px; display: flex; flex-direction: column; gap: 16px; }

/* ── оверлеи: панель обращения, окна, поиск ── */
#overlay:empty { display: none; }
.app-layer { position: fixed; inset: 0; z-index: 60; display: flex; }
.app-layer > .es-scrim { position: absolute; inset: 0; }
.app-layer--panel { justify-content: flex-end; }
.app-layer--panel > .es-panel { position: relative; width: min(1180px, calc(100vw - 120px)); height: 100vh; }
.app-layer--modal { align-items: center; justify-content: center; padding: 16px; }
.app-layer--modal > .es-modal { position: relative; width: 100%; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; }
.app-layer--modal > .es-modal.app-modal--wide { max-width: 560px; }
.app-layer--search { align-items: flex-start; justify-content: center; padding: 88px 16px 16px; }
.app-palette { position: relative; width: 680px; max-width: 100%; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-panel); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 120px); }
.app-palette__in { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-height: 60px; border-bottom: 1px solid var(--line); }
.app-palette__in input { flex: 1; border: none; outline: none; font-size: 18px; font-family: inherit; background: none; color: var(--ink); min-width: 0; }
.app-palette__list { padding: 8px; overflow: auto; display: flex; flex-direction: column; }
.es-panel__body-scroll { flex: 1; min-height: 0; overflow: auto; }
.app-panel-cols { display: flex; gap: 20px; padding: 20px; align-items: flex-start; }
.app-panel-cols > .app-panel-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.app-panel-cols > .app-panel-side { flex: 0 0 340px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.app-panel-tabs { display: none; }

.app-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.app-toasts .es-toast { pointer-events: auto; }

/* ── мелочи ── */
.app-pick { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin: 8px -6px 0; }
.app-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; }
.app-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: var(--surface-field); border: 1px solid var(--line-soft); cursor: pointer; font: inherit; color: inherit; min-height: 84px; }
.app-day.is-a { background: var(--lilac-light); }
.app-day.is-rest { border-style: dashed; border-color: var(--line-dashed); }
.app-day b { font-size: 12px; }
.app-day__tag { font-size: 11px; color: var(--ink-muted); }
.app-day__edited { font-size: 10.5px; color: var(--ink-2); font-weight: 700; }
.app-day__rest { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 11px; font-weight: 700; }
.app-cellbtn { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; background: none; border: none; border-right: 1px solid var(--line-soft); border-radius: 0; }
.app-cellbtn:last-child { border-right: none; }
.app-cellbtn:hover { background: var(--surface-field); }
.app-row > .app-cellbtn { border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.app-mini-proto { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.app-mini-proto table { border-collapse: collapse; width: 100%; font-size: 11px; }
.app-mini-proto th, .app-mini-proto td { border: 1px solid var(--ink); padding: 5px 6px; text-align: left; vertical-align: top; }
.app-mini-proto th { width: 64px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.app-wa-text { width: 100%; min-height: 360px; font-family: inherit; font-size: 14px; line-height: 1.5; box-sizing: border-box; }
.app-status-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); }
.app-skel-list { display: flex; flex-direction: column; gap: 10px; }
.app-skel-list .es-skel { height: 72px; border-radius: 14px; }
.app-table-wrap { overflow-x: auto; }
.app-mark { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; align-self: flex-start; }
.app-mark--promo { background: var(--status-partial-bg); color: var(--status-partial); border: 1px solid var(--status-partial-line); }
.app-mark--defect { background: var(--surface-sunken); color: var(--ink-2); border: 1px dashed var(--line-dashed); }
.app-oline { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.app-oline__ctrl { grid-column: 2 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-oline__sum { text-align: right; }
.app-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.app-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.app-photo { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--line); cursor: pointer; padding: 0; }
.app-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-photo.is-sel { outline: 2px solid var(--ink); outline-offset: 2px; }
.app-photo__label { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.92); border-radius: 12px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.app-empty-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }

/* ── каталог ── */
.app-chips-scroll { flex-wrap: wrap; }
.app-cat-layout { display: flex; gap: 20px; align-items: flex-start; }
.app-cat-main { flex: 1; min-width: 0; }
.app-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.app-cat-grid .es-prod--l { width: auto; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.app-cat-item.is-sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.app-cat-list { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 6px; }
.app-cat-aside { flex: 0 0 380px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; }
.app-cat-head { display: flex; gap: 14px; align-items: flex-start; }
.app-cat-head .es-thumb--l { width: 104px; height: 104px; }
.app-details > summary { list-style: none; }
.app-details > summary::-webkit-details-marker { display: none; }
.app-details[open] > summary .es-ic { transform: rotate(180deg); }
.app-details > summary .es-ic { margin-left: auto; }
.app-details__body { padding: 0 16px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }

/* ── настройки ── */
.app-shifts { display: grid; gap: 4px; min-width: 560px; }
.app-shifts__h { font-size: 12px; font-weight: 700; color: var(--ink-muted); text-align: center; padding: 4px 0; }
.app-shifts__h.is-today { color: var(--ink); }
.app-shifts__name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; }
.app-shift { min-height: 40px; border-radius: 8px; border: 1px dashed var(--line-dashed); background: var(--surface); color: var(--ink-faint); font: inherit; font-size: 12.5px; cursor: pointer; }
.app-shift.is-on { background: var(--lilac-light); border: 1px solid var(--lilac-deep); color: var(--ink); font-weight: 700; }
.app-dict { display: flex; flex-direction: column; }
.app-dict__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; text-align: left; cursor: default; }
button.app-dict__row { cursor: pointer; }
.app-dict__row.is-hidden .app-dict__name { color: var(--ink-faint); text-decoration: line-through; }
.app-dict__name { flex: 1; min-width: 120px; font-weight: 600; }

/* ── бонусная программа ── */
.app-lvl { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.app-lvl--zero { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line); }
.app-lvl--start { background: var(--lilac-light); color: var(--ink); border-color: var(--lilac); }
.app-lvl--silver { background: linear-gradient(135deg, #F1F2F4, #CBD0D7); color: #3E393A; border-color: #C3C8CF; }
.app-lvl--gold { background: linear-gradient(135deg, #F7EBCB, #DCBD78); color: #4A3A16; border-color: #D3B26A; }
.app-lvl--platinum { background: linear-gradient(135deg, #5A5457, #2B2728); color: #fff; border-color: #2B2728; }
.app-bonus { display: flex; flex-direction: column; gap: 12px; }
.app-bonus__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-bonus__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-bonus__nums > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface-field); border-radius: 12px; }
.app-bonus__big { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app-bonus__warn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--status-partial); background: var(--status-partial-bg); border: 1px solid var(--status-partial-line); border-radius: 10px; padding: 6px 10px; }
.app-bonus__prog { display: flex; flex-direction: column; gap: 6px; }
.app-bar { height: 6px; border-radius: 6px; background: var(--surface-sunken); overflow: hidden; }
.app-bar > span { display: block; height: 100%; background: var(--ink); border-radius: 6px; }
.app-bday { font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: var(--surface-field); }
.app-bday.is-on { background: var(--lilac-light); border: 1px solid var(--lilac-deep); }
.app-bday.is-muted { color: var(--ink-muted); }
.app-bonus--compact .app-bonus__big { font-size: 22px; line-height: 26px; }
.app-loy-box { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-field); display: flex; flex-direction: column; gap: 12px; }
.app-loy { display: flex; flex-direction: column; gap: 10px; }
.app-loy__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-loy__row > .es-label { width: 64px; flex: none; margin: 0; }
.app-loy__spend { display: inline-flex; align-items: center; gap: 8px; }
.app-loy__spend .es-input { width: 110px; min-height: 36px; text-align: right; }
.app-loy__sum { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.app-loy__sum > div { display: flex; justify-content: space-between; gap: 12px; }
.app-loy__pay { font-size: 18px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 2px; }
.app-loy__pay b { font-size: 22px; font-weight: 800; }
.app-loy__earn b { color: var(--status-helped); }
.app-loy__up { justify-content: flex-start !important; align-items: center; gap: 6px !important; font-size: 13px; color: var(--ink-2); }
.app-qp__sum { font-size: 24px !important; font-weight: 800; min-height: 56px; text-align: right; }
.app-qp__phone { font-size: 18px !important; }
.app-qp__client { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-field); }
.app-blog { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; }
.app-blog__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.is-plus { color: var(--status-helped); }
.is-minus { color: var(--ink-2); }
.app-bline { margin-top: 8px; font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.app-ctable tbody tr { cursor: pointer; }
.app-ctable td { white-space: nowrap; }
.app-ctable td .es-btn { opacity: .55; }
.app-ctable tr:hover td .es-btn { opacity: 1; }
.app-bday-soon { font-weight: 700; color: var(--status-partial); }
.app-bday-card { display: flex; flex-direction: column; gap: 10px; }
.app-bday-card.is-today { background: var(--lilac-light); border-color: var(--lilac-deep); }
.app-ccard { cursor: pointer; }
.app-ltable td, .app-ltable th { padding: 6px 10px; }
.app-ltable .es-input { min-height: 36px; padding: 6px 10px; }

/* ── телефон ── */
@media (max-width: 760px) {
  .app { display: block; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); }
  .app .es-side { display: none; }
  .app-top { display: flex; }
  .app-main { padding: 12px 16px 96px; gap: 12px; }
  .app-head { align-items: stretch; }
  .app-head__title { display: none; }
  .app-head .es-search__box { width: 100%; }
  .app-head .app-head__new { display: none; }
  .app-tabbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }
  .app-tabbar a { text-decoration: none; }
  .app-fab { display: inline-flex; position: fixed; right: 16px; bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 41; }
  .app-grid2, .app-grid4 { grid-template-columns: 1fr; }
  .app-card-layout > aside { max-width: none; min-width: 0; flex-basis: 100%; }
  .app-desk { display: none !important; }
  .app-layer--panel > .es-panel { width: 100vw; border-radius: 0; }
  .app-panel-cols { padding: 12px; }
  .app-panel-cols > .app-panel-side { display: none; }
  .app-panel-cols.show-proto > .app-panel-form { display: none; }
  .app-panel-cols.show-proto > .app-panel-side { display: flex; flex: 1; position: static; }
  .app-panel-tabs { display: flex; }
  .app-layer--search { padding: 0; }
  .app-palette { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .app-days { grid-template-columns: 1fr; }
  .app-day { flex-direction: row; min-height: 0; justify-content: flex-start; gap: 10px; padding: 8px 12px; }
  .app-day b { width: 28px; }
  .es-input, .es-textarea, .es-search__input, .app-palette__in input { font-size: 16px; }
  .app-toasts { bottom: calc(var(--tabbar) + 16px); }
  .app-chips-scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .app-chips-scroll > * { flex: none; }
  .app-cat-aside { display: none; }
  .app-dict__row .es-btn { min-height: 32px; }
  .app-loy__row > .es-label { width: 100%; }
  .app-ccard .es-ccard__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-qp__client { flex-wrap: wrap; }
  .app-qp__client > .app-col { flex-direction: row !important; align-items: center !important; gap: 8px !important; order: 3; width: 100%; padding-left: 52px; }
  .app-bonus__nums { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 761px) { .app-phone { display: none !important; } }

/* ── протокол ── */
.app-mini-proto td img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
.app-mp__it { display: inline; }
.app-proto { min-height: 100vh; display: flex; flex-direction: column; }
.app-proto__head { display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.app-proto__head a { text-decoration: none; }
.app-proto__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; flex: 1; }
.app-proto__body { flex: 1; display: flex; min-height: 0; }
.app-proto__stage { flex: 1; min-width: 0; background: var(--surface-sunken); padding: 28px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.app-proto__scale { width: 794px; transform-origin: top left; display: flex; flex-direction: column; gap: 28px; align-self: flex-start; margin-left: auto; margin-right: auto; }
.app-proto__aside { flex: 0 0 400px; background: var(--surface); border-left: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; position: sticky; top: 57px; height: calc(100vh - 57px); overflow: auto; }
.app-proto__ctl { display: flex; gap: 18px; flex-wrap: wrap; }
.app-proto__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-proto__text { flex: 1; min-height: 0; }
.app-proto__text textarea { flex: 1; min-height: 360px; resize: vertical; }
.app-proto__over { background: var(--status-partial-bg); color: var(--status-partial); border: 1px solid var(--status-partial-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.app-proto-page { box-sizing: border-box; width: 794px; min-height: 1123px; display: flex; flex-direction: column; flex: none; }
.app-proto-page .es-proto__grid { flex: none; }
.app-proto-page--one { padding: 36px 44px 28px; }
.app-proto-page--one .es-proto__cell { padding: 8px 12px; gap: 4px; }
.app-proto-page--one .es-proto__why { font-size: 11.5px; }
.app-proto-page--one .es-proto__foot { margin-top: 16px; padding-top: 12px; }
.app-proto__pageno { margin-top: 14px; font-size: 12px; color: var(--ink-2); text-align: right; }
.app-proto__when-inline { font-weight: 500; color: var(--ink-2); }
.app-proto__howlist { font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.app-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--ink-2); text-align: center; width: 96px; }
.app-qr img { width: 88px; height: 88px; image-rendering: pixelated; }
.app-proto-render { position: fixed; left: -10000px; top: 0; width: 794px; background: #fff; }
.app-proto-render .es-proto, .app-print .es-proto { box-shadow: none; }
.app-print { display: none; }
@media (max-width: 760px) {
  .app-proto__head { padding: 8px 12px; }
  .app-proto__title { font-size: 17px; }
  .app-proto__body { flex-direction: column; }
  .app-proto__stage { padding: 12px 16px; order: 2; background: var(--surface-page); }
  .app-proto__scale { gap: 12px; margin: 0; }
  .app-proto__scale .es-proto { box-shadow: 0 1px 2px rgba(62,57,58,.08); border: 1px solid var(--line); }
  .app-proto__aside { flex: none; position: static; height: auto; border-left: none; padding: 12px 16px; gap: 12px; order: 1; }
  .app-proto__text textarea { min-height: 280px; }
}
@media print {
  @page { size: A4; margin: 0; }
  body.is-printing > *:not(.app-print) { display: none !important; }
  body.is-printing .app-print { display: block; }
  .app-print .es-proto { width: 210mm; height: 297mm; min-height: 0; overflow: hidden; page-break-after: always; break-after: page; }
  .app-print .es-proto:last-child { page-break-after: auto; break-after: auto; }
  html, body { background: #fff !important; height: auto; }
}
@media print { .app .es-side, .app-tabbar, .app-fab, .app-top { display: none !important; } }
.es-table th .app-link { text-transform: inherit; letter-spacing: inherit; font-size: inherit; color: inherit; white-space: nowrap; }

/* ── давно не покупали ── */
.app-idle { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-idle--short { background: var(--surface-sunken); color: var(--ink); }
.app-idle--mid { background: var(--status-partial-bg); color: var(--status-partial); border: 1px solid var(--status-partial-line); }
.app-idle--long { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid var(--danger-line); }
.app-idle__late { color: var(--danger-ink); font-weight: 700; }
.app-ctable tr.is-done td, .app-ccard.is-done { opacity: .5; }
.app-idle-fact.is-late { color: var(--danger-ink); }
.app-idle-fact .es-hint { margin-left: 4px; }
.app-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.app-roles > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface-field); border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.app-roles b { color: var(--ink); font-size: 14px; }
@media (max-width: 760px) { .app-roles { grid-template-columns: 1fr; } }
.app-wb__rep { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin-top: 12px; font-size: 14px; }
.app-wb__rep > div { display: contents; }
.app-wb__rep span { color: var(--ink-2); }
.app-wb__rep b { text-align: right; font-variant-numeric: tabular-nums; }
.app-wb__total span, .app-wb__total b { font-size: 16px; color: var(--ink); font-weight: 800; padding-top: 6px; border-top: 1px solid var(--line); }
.app-burn { display: flex; flex-direction: column; gap: 10px; }
.app-burn__line { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-burn__days { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-sunken); color: var(--ink-2); }
.app-burn__days.is-soon { background: var(--danger-bg); color: var(--danger-ink); }