/* Вид экранов polyrent на телефоне.
 *
 * Политика безопасности страницы (style-src 'self') запрещает атрибут style=,
 * поэтому всё, что в макете стояло в разметке, живёт здесь классами; меняются
 * из кода только размеры полос — через el.style.setProperty. Шрифты системные:
 * страница не ходит ни на один чужой адрес. */

:root {
  --bg: #0d0f12;
  --card: #15181d;
  --line: #1c2026;
  --line2: #232830;
  --track: #1f242b;
  --idle: #2a2f37;
  --text: #ecebe7;
  --pale: #c9ccd0;
  --soft: #a9adb3;
  --mute: #737982;
  --green: #3fb96f;
  --red: #e5534b;
  --amber: #e3b341;
  --cyan: #39c5cf;
  --grey: #4a505a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
}

[hidden] { display: none !important; }

.m {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.defs { position: absolute; width: 0; height: 0; }

/* ---------- мелочи ---------- */
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.fs24 { font-size: 24px; }
.fs30 { font-size: 30px; }
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }
.w600 { font-weight: 600; }
.lh16 { line-height: 16px; }
.lh17 { line-height: 17px; }
.lh18 { line-height: 18px; }
.lh19 { line-height: 19px; }
.lh20 { line-height: 20px; }
.lh23 { line-height: 23px; }
.tight { letter-spacing: -0.02em; }
.center { text-align: center; }
.right { align-items: flex-end; }
.grow { flex-grow: 1; }
.mt8 { margin-top: 8px; }
.pb4 { padding-bottom: 4px; }
.nowrap { white-space: nowrap; }

.c-text { color: var(--text); }
.c-pale { color: var(--pale); }
.c-soft { color: var(--soft); }
.c-mute { color: var(--mute); }
.c-green { color: var(--green); }
.c-red { color: var(--red); }
.c-amber { color: var(--amber); }
.c-cyan { color: var(--cyan); }

.bg-cyan { background: var(--cyan); }
.bg-amber { background: var(--amber); }
.bg-green { background: var(--green); }
.bg-grey { background: var(--grey); }
.bg-idle { background: var(--idle); }

.big28 { font-size: 28px; line-height: 34px; font-weight: 600; }
.big30 { font-size: 30px; line-height: 36px; font-weight: 600; }
.big34 { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }

.col1, .col2, .col3, .col4, .col6, .col8, .col10, .col24 { display: flex; flex-direction: column; min-width: 0; }
.col1 { gap: 1px; }
.col2 { gap: 2px; }
.col3 { gap: 3px; }
.col4 { gap: 4px; }
.col6 { gap: 6px; }
.col8 { gap: 8px; }
.col10 { gap: 10px; }
.col24 { gap: 24px; }

.row-between { display: flex; justify-content: space-between; gap: 8px; }
.row-base { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row-end { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.row-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.row-gap14 { display: flex; gap: 14px; flex-wrap: wrap; }
.row-tri { display: flex; align-items: center; gap: 6px; }
.row-stop { display: flex; align-items: center; gap: 10px; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.h1-22 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.h1-26 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.h2 { margin: 0; font-size: 13px; font-weight: 500; color: var(--soft); }
.h2-17 { margin: 0; font-size: 17px; font-weight: 600; }

/* ---------- полосы ---------- */
.track4, .track6 { border-radius: 3px; background: var(--track); overflow: hidden; }
.track4 { flex-grow: 1; height: 4px; }
.track6 { height: 6px; }
.fill { height: 100%; width: 0; border-radius: 3px; }
.fill-grey { background: #6f757e; }
.fill-red { background: var(--red); }
.fill-amber { background: var(--amber); }
.fill-soft { background: var(--soft); }

.split { display: flex; height: 10px; gap: 2px; }
.split-a { border-radius: 3px 0 0 3px; }
.split-b { border-radius: 0 3px 3px 0; }
.split-a, .split-m, .split-b { min-width: 0; }
.bg-red { background: var(--red); }

.dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.dots span { height: 5px; border-radius: 1px; background: var(--idle); }
.dots span.on { background: var(--cyan); }

/* ---------- карточки и рамки ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 14px;
}

.card-s {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-foot {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--mute);
  border-top: 1px solid var(--line2);
  padding-top: 10px;
}

.frame {
  position: relative;
  margin-top: 8px;
  border: 1px solid var(--idle);
  border-radius: 12px;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.frame-amber { border-color: #5c4d24; }
.frame-cyan { border-color: #1f5257; padding: 22px 14px 14px; gap: 12px; }
.frame-dead { border-color: #2f3136; }
.frame-title {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 0 6px;
  background: var(--bg);
  font-size: 12px;
  line-height: 20px;
}
.frame-dead .frame-title { color: var(--soft); }

/* ---------- шапка ---------- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.status { display: flex; align-items: center; gap: 8px; }
.top-right { display: flex; align-items: center; gap: 6px; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(63, 185, 111, 0.18); }
.dot.dead { background: var(--red); box-shadow: 0 0 0 3px rgba(229, 83, 75, 0.2); }
.dot-s { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.dot-s.off { background: var(--red); }
.dot-s.unknown { background: var(--idle); }

.mode { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--amber); }
.mode.dead { color: var(--red); }
.mode.paper { color: var(--cyan); }

.icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--mute);
  cursor: pointer; padding: 0;
}
.icon-btn:active { background: var(--card); }

.menu {
  position: absolute;
  top: calc(52px + env(safe-area-inset-top));
  right: 16px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.menu-item {
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 15px; text-align: left;
  padding: 12px; border-radius: 8px; cursor: pointer;
}
.menu-item:active { background: var(--line); }

.offline {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(227, 179, 65, 0.12);
  color: var(--amber);
  font-size: 12px;
}

.alarm, .halt {
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alarm { border: 1px solid rgba(229, 83, 75, 0.55); background: rgba(229, 83, 75, 0.08); }
.halt { border: 1px solid rgba(227, 179, 65, 0.55); background: rgba(227, 179, 65, 0.08); }

/* ---------- каркас приложения ---------- */
#app {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.screens { display: flex; flex-direction: column; gap: 14px; }
/* Приглушаются только числа: плашка «молчит» и останов должны читаться в полную силу. */
.screens.dim .screen { opacity: 0.55; }
.screen { display: flex; flex-direction: column; gap: 14px; }
#tab-standing.screen, #tab-positions.screen { gap: 16px; }

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(13, 15, 18, 0.96);
  border-top: 1px solid var(--line);
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  backdrop-filter: blur(8px);
}
.tab {
  height: 52px;
  border: 0; border-radius: 12px;
  background: transparent; color: var(--soft);
  font: inherit; font-size: 12px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer;
}
.tab-on { background: var(--text); color: var(--bg); font-weight: 600; }

/* ---------- машина ---------- */
.machine {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--line);
}
.mc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-k { font-size: 11px; color: var(--mute); }
.mc-v { font-size: 13px; color: var(--soft); }
.mc-v.warn { color: var(--amber); }
.mc-ws { display: flex; align-items: center; gap: 5px; height: 18px; }

/* ---------- сводка ---------- */
.tri path { fill: var(--red); }
.tri.up path { fill: var(--green); }

.drag { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.drag-q { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.drag-v { font-size: 14px; flex-shrink: 0; }

.spark { display: block; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--line); color: var(--soft); }
.chip-main { color: var(--text); }

.hits { display: block; width: 100%; height: auto; }
.hits text { font-size: 10px; font-family: ui-monospace, Menlo, monospace; }
.hits text.sans { font-size: 11px; font-family: system-ui, sans-serif; }
.hits .axis { stroke: var(--idle); stroke-width: 1; }
.hits .tick { stroke: #3a4049; }
.hits .sep { stroke: var(--idle); stroke-width: 1; stroke-dasharray: 2 3; }
.hits .lbl-mute { fill: var(--mute); }
.hits .lbl-soft { fill: var(--soft); }
.hits .lbl-cyan { fill: var(--cyan); }
.hits .lbl-green { fill: var(--green); }
.hits .lbl-red { fill: var(--red); }
.hits .bar-green { fill: var(--green); }
.hits .bar-red { fill: var(--red); }
.hits .live-green { fill: url(#hatch-green); stroke: var(--green); stroke-width: 0.6; }
.hits .live-red { fill: url(#hatch-red); stroke: var(--red); stroke-width: 0.6; }
.hits .live-grey { fill: url(#hatch-grey); stroke: var(--soft); stroke-width: 0.6; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--mute); }
.lg { display: flex; align-items: center; gap: 6px; }
.lg-solid { width: 8px; height: 12px; border-radius: 1px; background: var(--soft); }
.lg-stop { width: 6px; height: 6px; background: var(--soft); }

/* ---------- где стоим ---------- */
.hump-legend { display: flex; align-items: center; gap: 12px; }
.hump { display: block; flex-shrink: 0; }
.hump .band { fill: rgba(63, 185, 111, 0.13); stroke: rgba(63, 185, 111, 0.55); stroke-width: 1; }
.hump .base { stroke: var(--idle); stroke-width: 1; }
.hump .edge { stroke: var(--grey); stroke-width: 1; }
.hump .stem { stroke: var(--cyan); stroke-width: 2; }
.hump .knob { fill: var(--cyan); }
.hump .price { fill: var(--green); }
.inline-tri { display: inline-block; vertical-align: 0; }

.list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }

.mrow { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.mrow-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mname {
  font-size: 15px; line-height: 20px; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mpay { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.mpay-v { font-size: 17px; line-height: 20px; font-weight: 600; color: var(--green); }
.mrow-mid { display: flex; align-items: center; gap: 14px; }
.mrow-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; }

.tail {
  min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.chevron { flex-shrink: 0; transition: transform 0.15s; }
.chevron.open { transform: rotate(180deg); }

.offsets { display: block; width: 100%; height: auto; }
.offsets rect { fill: var(--cyan); }
.offsets text { font-size: 10px; font-family: ui-monospace, Menlo, monospace; fill: var(--mute); }
.offsets text.top { fill: var(--text); }

.frow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 52px; gap: 10px; align-items: center; }
.frow-q { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow-track { height: 6px; background: var(--track); border-radius: 3px; }
.frow-fill { height: 100%; width: 0; background: var(--amber); border-radius: 3px; }
.frow-n { font-size: 12px; color: var(--soft); text-align: right; }

.lim { background: var(--card); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.lim-top { display: flex; justify-content: space-between; font-size: 12px; }

/* ---------- позиции ---------- */
.prow { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.prow-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.prow-q { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.pdot { flex-shrink: 0; margin-top: 6px; }
.pdot circle { fill: none; stroke: var(--mute); stroke-width: 1.4; }
.pdot.orders circle { fill: var(--cyan); stroke: var(--cyan); }
.pname {
  font-size: 15px; line-height: 20px; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prow-sum { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.prow-diff { font-size: 16px; line-height: 20px; font-weight: 600; }
.prow-pct { font-size: 12px; }
.prow-mid { display: flex; align-items: center; gap: 8px; padding-left: 17px; flex-wrap: wrap; }
.prow-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-left: 17px; }
.side { font-size: 12px; line-height: 18px; padding: 0 7px; border: 1px solid var(--idle); border-radius: 6px; color: var(--soft); }

.tag { font-size: 12px; line-height: 22px; padding: 0 8px; border-radius: 6px; justify-self: start; }
.tag-amber { background: rgba(227, 179, 65, 0.12); color: var(--amber); }
.tag-red { background: rgba(229, 83, 75, 0.12); color: var(--red); }
.tag-green { background: rgba(63, 185, 111, 0.12); color: var(--green); }
.tag-grey { background: var(--track); color: var(--soft); }

.why { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px 12px; align-items: start; font-size: 12px; line-height: 17px; color: var(--soft); }
.why-t { padding-top: 2px; }

.hrow { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.hrow-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hrow-sum { display: flex; align-items: center; gap: 6px; }
.hrow-stop { font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: 5px; background: rgba(229, 83, 75, 0.12); color: var(--red); }
.hrow-v { font-size: 15px; font-weight: 600; }
.hrow-q { font-size: 14px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- вход, уведомления, заставка ---------- */
.boot, .login, .notify {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.boot { align-items: center; justify-content: center; gap: 14px; }
.login { justify-content: center; gap: 32px; }
.notify { justify-content: space-between; gap: 24px; padding-top: calc(56px + env(safe-area-inset-top)); }

.logo { display: block; }
.login-head { display: flex; flex-direction: column; gap: 14px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-note { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 19px; color: var(--mute); }

.field {
  height: 52px;
  border: 1px solid var(--idle);
  border-radius: 12px;
  background: var(--card);
  padding: 0 8px 0 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(57, 197, 207, 0.14); }
.field-input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  letter-spacing: 0.18em;
  outline: none;
}

.btn-main {
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-main[disabled] { opacity: 0.5; }
.btn-plain {
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.bell {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(227, 179, 65, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.reasons { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.reason { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pip { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex-shrink: 0; }
.pip-red { background: var(--red); }
.pip-amber { background: var(--amber); }