:root {
  --bg: #EEF1F3;
  --panel: #FFFFFF;
  --panel-2: #F5F7F9;
  --panel-3: #E9EDF0;
  --line: #DCE2E7;
  --line-2: #C3CCD3;
  --text: #14181C;
  --dim: #5A666F;
  --faint: #8B959D;
  --accent: #0B6E85;
  --accent-text: #085565;
  --accent-soft: #DDEDF1;
  --ok: #1E7A4C;
  --ok-soft: #DCEFE4;
  --warn: #9A6404;
  --warn-soft: #F6EBD4;
  --crit: #AC2B22;
  --crit-soft: #F7E0DE;
  --ai: #5B4FBE;
  --ai-soft: #E5E2F5;
  --shadow: 0 1px 2px rgba(16,24,32,.06), 0 4px 14px rgba(16,24,32,.05);

  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1013;
    --panel: #14191D;
    --panel-2: #1A2126;
    --panel-3: #222A30;
    --line: #262F35;
    --line-2: #38434B;
    --text: #E5EAEE;
    --dim: #94A0A9;
    --faint: #6E7A83;
    --accent: #4FC0D8;
    --accent-text: #7FD5E7;
    --accent-soft: #10333C;
    --ok: #56C288;
    --ok-soft: #14301F;
    --warn: #DDA53F;
    --warn-soft: #33270F;
    --crit: #EE7A6B;
    --crit-soft: #351C19;
    --ai: #A79CF0;
    --ai-soft: #221E44;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  }
}

:root[data-theme="dark"] {
  --bg: #0C1013;
  --panel: #14191D;
  --panel-2: #1A2126;
  --panel-3: #222A30;
  --line: #262F35;
  --line-2: #38434B;
  --text: #E5EAEE;
  --dim: #94A0A9;
  --faint: #6E7A83;
  --accent: #4FC0D8;
  --accent-text: #7FD5E7;
  --accent-soft: #10333C;
  --ok: #56C288;
  --ok-soft: #14301F;
  --warn: #DDA53F;
  --warn-soft: #33270F;
  --crit: #EE7A6B;
  --crit-soft: #351C19;
  --ai: #A79CF0;
  --ai-soft: #221E44;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ intro ============ */
.intro {
  max-width: 1360px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 0.9rem;
}
.intro h1 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .3rem;
  letter-spacing: -.01em;
}
.intro p {
  margin: 0;
  color: var(--dim);
  font-size: .84rem;
  max-width: 78ch;
}
.intro .hint {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--faint);
  margin-top: .45rem;
}

/* ============ app shell ============ */
.app {
  max-width: 1360px;
  margin: 0 auto 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  min-height: 760px;
}
@media (max-width: 900px) { .app { grid-template-columns: 1fr; min-height: 0; } }
@media (min-width: 1440px) { .app { margin-left: 1.2rem; margin-right: 1.2rem; } }

/* sidebar */
.side {
  background: var(--panel-2);
  border-right: 1px solid var(--line);
  padding: 1rem .7rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
@media (max-width: 900px) { .side { border-right: none; border-bottom: 1px solid var(--line); } }

.brand { display: flex; align-items: center; gap: .55rem; padding: .2rem .45rem .1rem; }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: var(--accent);
  display: grid; place-items: center;
  flex: none;
}
.brand-mark span {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--panel);
}
:root[data-theme="dark"] .brand-mark span { color: #0C1013; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark span { color: #0C1013; }
}
.brand-name { font-weight: 700; letter-spacing: .04em; font-size: .85rem; }
.brand-sub { font-family: var(--mono); font-size: .6rem; color: var(--faint); letter-spacing: .1em; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-lab {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: .5rem .5rem .3rem;
}
.nav button {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .48rem .5rem;
  border-radius: var(--r);
  color: var(--dim);
  font-size: .85rem;
  transition: background .12s, color .12s;
}
.nav button:hover { background: var(--panel-3); color: var(--text); }
.nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav .ico { width: 15px; height: 15px; flex: none; opacity: .9; }
.nav .badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .65rem;
  background: var(--panel-3);
  color: var(--dim);
  padding: .05rem .3rem;
  border-radius: 3px;
}
.nav button[aria-current="true"] .badge { background: var(--accent); color: var(--panel); }

.side-foot { margin-top: auto; padding: .5rem; border-top: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: .5rem; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 600; color: var(--dim);
  flex: none;
}
.who-n { font-size: .78rem; font-weight: 500; }
.who-r { font-size: .68rem; color: var(--faint); }

/* main */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.crumb { font-size: .82rem; color: var(--dim); display: flex; align-items: center; gap: .4rem; min-width: 0; }
.crumb b { color: var(--text); font-weight: 600; }
.search {
  margin-left: auto;
  display: flex; align-items: center; gap: .4rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .3rem .55rem;
  color: var(--faint);
  font-size: .78rem;
  min-width: 180px;
}
@media (max-width: 700px) { .search { display: none; } }
.btn {
  border: 1px solid var(--line-2);
  background: var(--panel);
  border-radius: var(--r);
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 500;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--panel-2); border-color: var(--dim); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #08181C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #08181C; }
}
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); border-color: var(--accent); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--dim); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-sm { padding: .22rem .5rem; font-size: .74rem; }

.view { padding: 1.1rem; display: none; }
.view[data-active="true"] { display: block; }

.vhead { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.vhead h2 { font-size: 1.15rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.vhead .sub { color: var(--dim); font-size: .8rem; }
.vhead .spacer { margin-left: auto; display: flex; gap: .4rem; }

/* cards & grid */
.grid { display: grid; gap: .8rem; }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-2-1 { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }
@media (max-width: 1080px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-2-1, .g3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .g4, .g2 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.card-h {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.card-t { font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.card-a { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--faint); }
.card-b { padding: .85rem; }
.card-b.tight { padding: 0; }

/* stat tiles */
.stat { padding: .85rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.stat-l {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
.stat-v {
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat-v small { font-size: .8rem; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.stat-d { font-size: .74rem; color: var(--dim); display: flex; align-items: center; gap: .3rem; }
.trend-up { color: var(--ok); }
.trend-warn { color: var(--warn); }
.spark { display: block; margin-top: .3rem; }

/* pills */
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em;
  padding: .12rem .4rem; border-radius: 3px; white-space: nowrap;
  background: var(--panel-3); color: var(--dim);
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-crit { background: var(--crit-soft); color: var(--crit); }
.pill-acc { background: var(--accent-soft); color: var(--accent-text); }
.pill-ai { background: var(--ai-soft); color: var(--ai); }
.pill-flat::before { display: none; }

/* lists */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--line);
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left;
  transition: background .12s;
}
.row:last-child { border-bottom: none; }
button.row:hover { background: var(--panel-2); }
.row-time {
  font-family: var(--mono); font-size: .74rem; color: var(--dim);
  /* min-width zamiast width: krotkie wartosci ("2026-07", "12:30") trzymaja
     rowna kolumne jak dotad, ale pelna data "01.09.2026" dostaje tyle miejsca,
     ile potrzebuje, zamiast wchodzic na tytul wiersza */
  min-width: 3.1rem; flex: none; white-space: nowrap;
  padding-right: .5rem; font-variant-numeric: tabular-nums;
}
.row-main { min-width: 0; flex: 1; }
.row-t { font-size: .84rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-s { font-size: .74rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-r { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }
.row-num { font-family: var(--mono); font-size: .78rem; font-variant-numeric: tabular-nums; }
.stripe { width: 3px; align-self: stretch; border-radius: 2px; flex: none; background: var(--line-2); }
.stripe-crit { background: var(--crit); }
.stripe-warn { background: var(--warn); }
.stripe-ok { background: var(--ok); }
.stripe-ai { background: var(--ai); }

/* table */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 44rem; }
th, td { text-align: left; padding: .55rem .85rem; border-bottom: 1px solid var(--line); }
thead th {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  background: var(--panel-2); white-space: nowrap;
}
tbody tr { transition: background .12s; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--panel-2); }
tbody tr:last-child td { border-bottom: none; }
td { font-size: .84rem; }
td.mono, th.mono { font-family: var(--mono); font-size: .76rem; font-variant-numeric: tabular-nums; }
td.num { text-align: right; font-family: var(--mono); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-dim { color: var(--dim); }

/* filter chips */
.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 20px;
  padding: .2rem .65rem;
  font-size: .76rem;
  color: var(--dim);
}
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 500; }

/* detail layout */
.detail-head {
  display: flex; align-items: flex-start; gap: .9rem; flex-wrap: wrap;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem;
}
.detail-id { font-family: var(--mono); font-size: .74rem; color: var(--faint); }
.detail-t { font-size: 1.12rem; font-weight: 600; margin: .1rem 0 .2rem; letter-spacing: -.01em; }
.detail-m { font-size: .8rem; color: var(--dim); }
.detail-act { margin-left: auto; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .82rem; }
.kv dt { font-family: var(--mono); font-size: .7rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding-top: .12rem; }
.kv dd { margin: 0; }

.back {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: none; padding: 0 0 .6rem;
  color: var(--dim); font-size: .78rem;
}
.back:hover { color: var(--accent-text); }

/* photo recognition */
.recog { display: grid; gap: .9rem; }
@media (min-width: 860px) { .recog { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.shot {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .7rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.shot-frame {
  aspect-ratio: 4 / 3;
  background: var(--panel-3);
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  display: grid; place-items: center;
  overflow: hidden;
}
.shot-cap { font-family: var(--mono); font-size: .68rem; color: var(--faint); }

.field {
  display: grid; gap: .2rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.field:last-of-type { border-bottom: none; }
.field-l {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center; gap: .4rem;
}
.field-v {
  font-size: .9rem; font-weight: 500;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.field-v .val { font-family: var(--mono); font-size: .84rem; }
.field-empty { color: var(--faint); font-style: italic; font-weight: 400; font-size: .84rem; }
.conf { font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; padding: .05rem .3rem; border-radius: 3px; }
.conf-h { background: var(--ok-soft); color: var(--ok); }
.conf-m { background: var(--warn-soft); color: var(--warn); }
.conf-src { background: var(--accent-soft); color: var(--accent-text); }

.seg { display: flex; gap: .3rem; flex-wrap: wrap; }
.seg button {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r);
  padding: .3rem .6rem;
  font-size: .78rem;
  color: var(--dim);
}
.seg button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 500; }

/* agent */
.agent-box {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ai);
  background: var(--ai-soft);
  border-radius: 6px;
  padding: .75rem .85rem;
}
.agent-l {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ai); margin-bottom: .4rem;
  display: flex; align-items: center; gap: .4rem;
}
.quote {
  border-left: 2px solid var(--line-2);
  padding-left: .8rem;
  color: var(--dim);
  font-size: .84rem;
  margin: 0 0 .8rem;
}
.draft {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .8rem .9rem;
  font-size: .86rem;
  white-space: pre-line;
}

/* phones */
.phones { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: flex-start; }
.phone {
  width: 268px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: .5rem;
  box-shadow: var(--shadow);
  flex: none;
}
.phone-scr {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  height: 500px;
  display: flex; flex-direction: column;
}
.phone-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-size: .76rem; font-weight: 600;
}
.phone-bar .t { font-family: var(--mono); font-size: .62rem; color: var(--faint); margin-left: auto; }
.phone-body { padding: .7rem; overflow: hidden; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.phone-cap {
  text-align: center; font-family: var(--mono); font-size: .68rem;
  color: var(--faint); margin-top: .5rem;
}
.pf-l { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pf-box {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-2); padding: .45rem .55rem; font-size: .8rem;
}
.time-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.time-btns button {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r); padding: .45rem 0; font-size: .78rem; font-weight: 500;
}
.time-btns button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .time-btns button[aria-pressed="true"] { color: #08181C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .time-btns button[aria-pressed="true"] { color: #08181C; }
}
.big-total {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; text-align: center; padding: .2rem 0;
}
.phone-cta {
  margin-top: auto;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--r); padding: .6rem; font-size: .85rem; font-weight: 600;
  width: 100%;
}
:root[data-theme="dark"] .phone-cta { color: #08181C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-cta { color: #08181C; }
}
.sig-pad {
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--panel-2); height: 110px; display: grid; place-items: center;
}

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(8px);
  background: var(--text); color: var(--panel);
  padding: .55rem 1rem; border-radius: 6px; font-size: .82rem; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 50; box-shadow: var(--shadow);
}
.toast[data-show="true"] { opacity: 1; transform: translateX(-50%) translateY(0); }

.foot-note {
  max-width: 1360px; margin: 0 auto; padding: 0 1.2rem 3rem;
  color: var(--faint); font-size: .76rem;
}
.foot-note code { font-family: var(--mono); font-size: .72rem; }

/*
 * Blok, nie flex. Przy flexie każdy fragment tekstu obok <code> stawał się
 * osobnym elementem i notka rozsypywała się na kolumny — a to jest zwykły
 * akapit, który czasem zawiera kod albo ikonę.
 */
.muted-note {
  font-size: .78rem; line-height: 1.5; color: var(--dim); margin: .7rem 0 0;
}
.muted-note code {
  font-family: var(--mono); font-size: .72rem;
  background: var(--panel-3); border-radius: 3px; padding: 0 .25rem;
}
.muted-note .spin { vertical-align: -2px; margin-right: .35rem; display: inline-block; }
.spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--accent);
  animation: sp .7s linear infinite; display: inline-block;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ---- klienci ---- */
.cli-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.cli {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: .75rem .85rem;
  text-align: left;
  display: flex; flex-direction: column; gap: .45rem;
  transition: border-color .12s, background .12s;
}
.cli:hover { border-color: var(--line-2); background: var(--panel-2); }
.cli-top { display: flex; align-items: flex-start; gap: .5rem; }
.cli-n { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.cli-c { font-size: .74rem; color: var(--dim); }
.cli-meta {
  display: flex; gap: .8rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .68rem; color: var(--faint);
}
.cli-meta b { color: var(--dim); font-weight: 500; }

.meter { display: flex; align-items: center; gap: .5rem; }
.meter-bar {
  flex: 1; height: 5px; border-radius: 3px;
  background: var(--panel-3); overflow: hidden;
}
.meter-fill { height: 100%; border-radius: 3px; background: var(--ok); }
.meter-fill.mid { background: var(--warn); }
.meter-fill.low { background: var(--crit); }
.meter-v {
  font-family: var(--mono); font-size: .68rem; color: var(--dim);
  font-variant-numeric: tabular-nums; width: 2.4rem; text-align: right;
}

/* ---- karta klienta ---- */
.hero {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel-2);
  margin-bottom: .9rem;
}
.hero-id { font-family: var(--mono); font-size: .7rem; color: var(--faint); letter-spacing: .05em; }
.hero-n { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin: .1rem 0 .25rem; }
.hero-m { font-size: .82rem; color: var(--dim); }
.hero-r { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

.mini { display: grid; gap: .35rem; }
.mini-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; font-size: .82rem;
}
.mini-row .t-dim { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.doc-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .85rem; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: none; }
.doc-ico { width: 22px; height: 26px; flex: none; }
.doc-n { font-size: .82rem; font-weight: 500; }
.doc-m { font-family: var(--mono); font-size: .68rem; color: var(--faint); }

/* ---- oferty ---- */
.pipeline { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.col-h {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); padding: 0 .15rem .45rem;
}
.col { display: flex; flex-direction: column; gap: .5rem; }
.deal {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: .6rem .7rem;
  text-align: left;
  display: flex; flex-direction: column; gap: .3rem;
  transition: border-color .12s, background .12s;
}
.deal:hover { border-color: var(--line-2); background: var(--panel-2); }
.deal-n { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.deal-c { font-size: .74rem; color: var(--dim); }
.deal-f {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
  padding-top: .15rem;
}
.deal-v { color: var(--text); font-weight: 500; }

/* ================= dodatki aplikacji (poza makieta) ================= */

.nav a.nav-link {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; text-align: left; background: none; border: none;
  padding: .48rem .5rem; border-radius: var(--r);
  color: var(--dim); font-size: .85rem; text-decoration: none;
  transition: background .12s, color .12s;
}
.nav a.nav-link:hover { background: var(--panel-3); color: var(--text); }
.nav a.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav a.nav-link[aria-current="page"] .badge { background: var(--accent); color: var(--panel); }

a.row { text-decoration: none; color: inherit; }
a.row:hover { background: var(--panel-2); }
a.cli { text-decoration: none; color: inherit; }
a.deal { text-decoration: none; color: inherit; }
a.btn { text-decoration: none; display: inline-block; }

.search { flex: 1; max-width: 420px; }
.search input {
  border: none; background: transparent; color: var(--text);
  font: inherit; font-size: .78rem; width: 100%; outline: none;
}
.search input::placeholder { color: var(--faint); }

.input {
  width: 100%; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); border-radius: var(--r); padding: .45rem .6rem;
  font: inherit; font-size: .88rem; margin: .2rem 0 .7rem;
}
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea.input { min-height: 92px; resize: vertical; }
select.input { appearance: auto; }

.form-grid { display: grid; gap: 0 .9rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card {
  width: 100%; max-width: 360px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1.6rem; box-shadow: var(--shadow);
}
.login-err {
  background: var(--crit-soft); color: var(--crit); border-radius: var(--r);
  padding: .5rem .7rem; font-size: .82rem; margin: 0 0 .8rem;
}

.flash {
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent); border-radius: var(--r);
  padding: .5rem .8rem; font-size: .84rem; margin-bottom: .9rem;
}

.hit { display: block; text-decoration: none; color: inherit; }
.hit-kind {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}

/* widok terenowy - pelny ekran telefonu */
.field-app { max-width: 460px; margin: 0 auto; padding: .8rem; display: grid; gap: .8rem; }
.field-head {
  display: flex; align-items: center; gap: .6rem; padding: .2rem .2rem .6rem;
  border-bottom: 1px solid var(--line);
}
.field-head .brand-name { font-size: .8rem; }
.queue-badge {
  margin-left: auto; font-family: var(--mono); font-size: .7rem;
  padding: .15rem .45rem; border-radius: 3px; background: var(--panel-3); color: var(--dim);
}
.queue-badge[data-pending="true"] { background: var(--warn-soft); color: var(--warn); }

/* ---- rozpoznawanie ze zdjecia ---- */
.note-secret {
  border: 1px solid var(--crit); border-left: 3px solid var(--crit);
  background: var(--crit-soft); color: var(--text);
  border-radius: var(--r); padding: .7rem .85rem; margin-bottom: .8rem; font-size: .84rem;
}
.note-secret b { color: var(--crit); display: block; margin-bottom: .25rem; }
.note-secret code { background: var(--panel); }
.note-warn {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: var(--r);
  padding: .6rem .85rem; margin-bottom: .8rem; font-size: .82rem; color: var(--text);
}
.shot form { display: flex; flex-direction: column; gap: .55rem; }
.shot-frame img { border-radius: 5px; }

/* ---- rozliczenia: bank godzin, alarmy umów, zestawienie ---- */
.pool { margin-bottom: .8rem; }
.pool-bar {
  height: 8px; border-radius: 4px; background: var(--panel-3);
  overflow: hidden; margin-bottom: .4rem;
}
.pool-used { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.pool-legend {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .78rem; color: var(--dim);
}
.pool-legend .over { color: var(--warn); font-weight: 600; }

/* umowa, która przedłuży się sama, jeśli nikt nie zareaguje */
.alarm {
  border: 1px solid var(--warn); border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: var(--r);
  padding: .65rem .85rem; margin-bottom: .8rem; font-size: .84rem; color: var(--text);
}
.alarm-calm { border-color: var(--line); border-left-color: var(--accent); background: var(--panel-2); }

.warn-list { margin: 0; padding-left: 1.1rem; font-size: .82rem; color: var(--warn); }
.warn-list li { margin-bottom: .2rem; }

.sum-row {
  display: flex; gap: 1.2rem; justify-content: flex-end; flex-wrap: wrap;
  padding: .7rem .85rem; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--dim);
}
.sum-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.sum-row .grand b { color: var(--accent-text); font-size: .95rem; }

.chip-check {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .25rem .55rem; cursor: pointer;
}
.chip-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.inv-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.inv-form .input { flex: 1 1 8rem; min-width: 0; }

/* ---- skrzynka techniczna ---- */
.count {
  font-family: var(--mono); font-size: .7rem; color: var(--dim);
  background: var(--panel-3); border-radius: 3px; padding: .1rem .35rem;
}

/* podpowiedź: co się stało i co z tym zrobić */
.advice { padding: .85rem; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.advice-c { font-size: .86rem; color: var(--text); margin-bottom: .5rem; }
.advice-a { font-size: .92rem; color: var(--accent-text); font-weight: 500; line-height: 1.5; }
.advice-s {
  margin-top: .6rem; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
}

pre.log {
  margin: 0; font-family: var(--mono); font-size: .76rem; line-height: 1.5;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  max-height: 28rem; overflow: auto;
}

/* ---- sejf: klucz licencji ---- */
.secret-hint {
  font-family: var(--mono); font-size: .88rem; color: var(--dim);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: .5rem .7rem; letter-spacing: .04em;
}
.secret-open {
  padding: .85rem; border-left: 3px solid var(--warn); background: var(--warn-soft);
}
.secret-open code {
  font-family: var(--mono); font-size: .92rem; color: var(--text);
  word-break: break-all; user-select: all;
}

/* pasek akcji w nagłówku: przycisk, pole i przycisk w jednej linii */
.hdr-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hdr-actions .input { width: 6.5rem; }

/* ---- kalendarz terminów ---- */
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .7rem;
}
.cal-nav b { font-size: .95rem; text-transform: capitalize; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-h {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  padding: .2rem .3rem .4rem; text-align: center;
}
.cal-d {
  min-height: 3.9rem; padding: .3rem .35rem;
  background: var(--panel-2); border-radius: 3px;
  display: flex; flex-direction: column; gap: .2rem;
}
.cal-d.cal-out { background: transparent; }
.cal-d.cal-out .cal-n { color: var(--faint); opacity: .55; }
.cal-d.cal-has { background: var(--panel-3); }
.cal-d.cal-today { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.cal-d.cal-today .cal-n { color: var(--accent-text); font-weight: 600; }
.cal-n { font-family: var(--mono); font-size: .7rem; color: var(--dim); }
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.cal-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-2); display: inline-block; flex: none;
}
.cal-dot.cal-crit { background: var(--crit); }
.cal-dot.cal-warn { background: var(--warn); }
.cal-dot.cal-acc  { background: var(--accent); }
.cal-more { font-family: var(--mono); font-size: .58rem; color: var(--faint); }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .7rem;
  font-size: .7rem; color: var(--dim);
}
.cal-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.cal-legend i { flex: none; }

@media (max-width: 520px) {
  .cal-d { min-height: 2.5rem; }
}

/* subskrypcja kalendarza */
.steps { margin: 0; padding-left: 1.1rem; font-size: .84rem; color: var(--text); }
.steps li { margin-bottom: .5rem; line-height: 1.5; }
.feed { font-family: var(--mono); font-size: .74rem; word-break: break-all; }
.feed-input { font-family: var(--mono); font-size: .72rem; }

/* ---- tablica pracy ---- */
.oncall {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r); padding: .5rem .8rem; margin-bottom: .9rem;
  font-size: .86rem;
}
.oncall-l {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text);
}
.oncall a { color: var(--accent-text); font-weight: 600; }
.oncall-none { background: var(--panel-2); border-color: var(--line); }
.oncall-none .oncall-l { color: var(--faint); }

.bd-wrap { overflow-x: auto; margin-bottom: .9rem; }
.bd-grid {
  display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: .5rem; min-width: 44rem;
}
.bd-col {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden;
}
.bd-col.bd-today { border-color: var(--accent); }
.bd-head {
  display: flex; align-items: baseline; gap: .35rem;
  padding: .45rem .6rem; background: var(--panel-2);
  border-bottom: 1px solid var(--line); font-size: .74rem;
}
.bd-col.bd-today .bd-head { background: var(--accent-soft); }
.bd-head b { text-transform: capitalize; }
.bd-head span { color: var(--faint); font-family: var(--mono); font-size: .68rem; }
.bd-head .bn, .bd-head .bd-n {
  margin-left: auto; background: var(--panel-3); border-radius: 3px;
  padding: 0 .3rem; color: var(--dim);
}
.bd-body { padding: .4rem; display: grid; gap: .35rem; flex: 1; align-content: start; }
.bd-item {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel-2); border-left: 3px solid var(--line-2);
  border-radius: 3px; padding: .35rem .45rem;
}
.bd-item:hover { background: var(--panel-3); }
.bd-item.bd-warn { border-left-color: var(--warn); }
.bd-item.bd-acc  { border-left-color: var(--accent); }
.bd-item.bd-crit { border-left-color: var(--crit); }
.bd-t { display: block; font-family: var(--mono); font-size: .62rem; color: var(--dim); }
.bd-title { display: block; font-size: .78rem; line-height: 1.3; margin: .1rem 0; }
.bd-c { display: block; font-size: .68rem; color: var(--faint); }
.bd-empty { color: var(--faint); font-size: .8rem; text-align: center; padding: .6rem 0; }
.bd-foot {
  padding: .35rem .6rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .62rem; color: var(--faint);
}

/* ---- propozycje z przypomnień ---- */
.note-ok {
  border: 1px solid var(--line); border-left: 3px solid var(--ok);
  background: var(--ok-soft); border-radius: var(--r);
  padding: .6rem .85rem; margin-bottom: .9rem; font-size: .84rem; color: var(--text);
}
.match { display: flex; align-items: center; gap: .75rem; }
.match-v {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 600;
  min-width: 3.2rem; text-align: center; padding: .35rem .2rem;
  border-radius: var(--r); background: var(--panel-3); color: var(--dim);
}
.match-ok .match-v   { background: var(--ok-soft); color: var(--ok); }
.match-acc .match-v  { background: var(--accent-soft); color: var(--accent-text); }
.match-warn .match-v { background: var(--warn-soft); color: var(--warn); }
.match-crit .match-v { background: var(--crit-soft); color: var(--crit); }

.chips-l {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); align-self: center; margin-right: .2rem;
}
/* pierwszy wiersz nowego klienta przy sortowaniu po kliencie */
tbody tr.grp td { border-top: 1px solid var(--line-2); }

/* ---- dokumentacja i runbooki ---- */
.rb-card { margin-bottom: .9rem; }
.rb-card .card-a { display: flex; align-items: center; gap: .45rem; }

/* pole „- klucz: wartość" */
.rb-l {
  display: grid; grid-template-columns: 13rem 1fr; gap: .5rem;
  padding: .28rem 0; border-bottom: 1px dotted var(--line);
  font-size: .86rem; align-items: baseline;
}
.rb-l:last-child { border-bottom: 0; }
.rb-k {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint); padding-top: .1rem;
}
.rb-v { color: var(--text); word-break: break-word; }
.rb-v i { color: var(--faint); font-style: normal; }
.rb-l:only-child .rb-v, .rb-l > .rb-v:only-child { grid-column: 1 / -1; }

/* nagłówek sekcji wewnątrz treści */
.rb-h {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  margin: 1rem 0 .35rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--line-2);
}
.rb-h:first-child { margin-top: 0; }

.rb-p { margin: .35rem 0; font-size: .88rem; line-height: 1.55; color: var(--text); }

/* krok procedury */
.rb-step {
  font-size: .88rem; line-height: 1.5; padding: .3rem 0 .3rem .3rem;
  border-left: 2px solid var(--accent); margin: .25rem 0 .25rem .1rem;
  padding-left: .65rem;
}

/* odwołania do sejfu */
.rb-secrets {
  margin-top: .9rem; padding: .6rem .75rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r); display: flex; flex-wrap: wrap;
  align-items: center; gap: .4rem;
}
.rb-secrets .pf-l { margin: 0 .3rem 0 0; }
.rb-secret {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .72rem;
  padding: .18rem .5rem; border-radius: 3px; text-decoration: none;
  background: var(--panel-3); border: 1px solid var(--line-2); color: var(--dim);
}
.rb-secret::before { content: "•"; color: var(--accent); }
.rb-secret:hover { border-color: var(--accent); color: var(--text); }

/* stopka wpisu: kiedy potwierdzone + przycisk */
.rb-foot {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .68rem; color: var(--faint);
}
.rb-foot form { margin-left: auto; }
.rb-foot .btn { font-family: var(--ui); }

/* pole edycji treści */
.rb-edit {
  font-family: var(--mono); font-size: .82rem; line-height: 1.65;
  min-height: 22rem; resize: vertical; white-space: pre; overflow-wrap: normal;
  overflow-x: auto;
}

@media (max-width: 640px) {
  .rb-l { grid-template-columns: 1fr; gap: .1rem; }
  .rb-foot form { margin-left: 0; }
}

/* ---- sonda ---- */
.rb-steps { margin: 0; padding-left: 1.15rem; font-size: .86rem; line-height: 1.6; }
.rb-steps li { margin: .3rem 0; }
.rb-steps code, .pre-cfg {
  font-family: var(--mono); font-size: .78rem;
  background: var(--panel-3); border-radius: 3px; padding: 0 .25rem;
}
.pre-cfg {
  display: block; margin: .6rem 0 0; padding: .7rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r);
  max-height: 22rem; overflow: auto; white-space: pre; line-height: 1.5;
}
details > summary::-webkit-details-marker { color: var(--faint); }

/* ---- ocena wizyty ---- */
.ocena-box {
  border: 1px solid var(--line); border-left: 3px solid var(--ok);
  background: var(--ok-soft); border-radius: var(--r);
  padding: .7rem .9rem; margin-bottom: .9rem;
}
.ocena-box.zla { border-left-color: var(--crit); background: var(--crit-soft); }
.ocena-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; }
.ocena-kiedy { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--faint); }
.ocena-tresc { margin-top: .5rem; font-size: .88rem; line-height: 1.55; color: var(--text); }
.ocena-stopka {
  margin-top: .55rem; padding-top: .45rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .68rem; color: var(--faint);
}
@media (max-width: 640px) { .ocena-kiedy { margin-left: 0; width: 100%; } }

/* ---- podgląd dokumentu w panelu ---- */
.pv-doc {
  width: 100%; height: 30rem; border: 0; display: block;
  background: var(--panel-2); border-top: 1px solid var(--line);
}

/* ---- CRM: lejek szans ---- */
.bd-grid.lejek { grid-template-columns: repeat(4, minmax(180px, 1fr)); min-width: 32rem; }
.chip-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 500; }
.t-warn { color: var(--warn); }