/* Маркетинговый хаб Loretto: Geometria, бордовый #720000. Компьютер - светлый фон и две колонки,
   телефон и Mini App - Liquid Glass, как в Mini App сервиса. */
@font-face { font-family: "Geometria"; src: url("/static/fonts/geometria_medium.otf") format("opentype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Geometria"; src: url("/static/fonts/geometria_bold.otf") format("opentype"); font-weight: 600 700; font-display: swap; }

:root {
  --brand: #720000; --bg: #f6f1eb; --panel: #fff; --fg: #1c1412; --muted: #6f625a; --line: #e8ddd1; --fill: rgba(114, 0, 0, .07);
  --ok: #2f6b4f; --bad: #b3261e; --warn: #9a5b00; --accent: #720000; --track: #e6ddd3;
  --glass-t: rgba(255, 255, 255, .6); --glass-s: #fbf8f4; --glass-hi: rgba(255, 255, 255, .95); --glass-line: rgba(60, 20, 0, .09);
  --glass-shadow: 0 12px 32px -12px rgba(60, 20, 0, .3); --spec: .6;
  --glass: var(--glass-t); --blur: blur(24px) saturate(180%); --bar: #720000;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141010; --panel: #1d1817; --fg: #f2ecea; --muted: #ab9f9c; --line: #342c2a; --fill: rgba(217, 100, 92, .14);
    --ok: #6fcf9f; --bad: #ff7b72; --warn: #f0b45a; --accent: #d9645c; --track: #3a302c;
    --glass-t: rgba(39, 32, 29, .6); --glass-s: #27201d; --glass-hi: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08);
    --glass-shadow: 0 12px 32px -12px rgba(0, 0, 0, .75); --spec: .08; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141010; --panel: #1d1817; --fg: #f2ecea; --muted: #ab9f9c; --line: #342c2a; --fill: rgba(217, 100, 92, .14);
  --ok: #6fcf9f; --bad: #ff7b72; --warn: #f0b45a; --accent: #d9645c; --track: #3a302c;
  --glass-t: rgba(39, 32, 29, .6); --glass-s: #27201d; --glass-hi: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08);
  --glass-shadow: 0 12px 32px -12px rgba(0, 0, 0, .75); --spec: .08; color-scheme: dark;
}
/* Без размытия, сплошным фоном: «Понижение прозрачности», нет backdrop-filter, слабый Android */
@media (prefers-reduced-transparency: reduce) { :root { --glass: var(--glass-s); --blur: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: var(--glass-s); --blur: none; } }
:root.lowfx { --glass: var(--glass-s); --blur: none; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg); font-family: "Geometria", system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.4;
  min-height: 100vh; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); }
.err { color: var(--bad); }
button, select, input { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Логотип: белый знак, всегда на бордовой плашке (шапка, вход) */
.logo { width: 150px; aspect-ratio: 2000 / 294; background: url("/static/logo-white.webp") center / contain no-repeat; flex: none; }

/* ---------- шапка ---------- */
.brandbar { background: var(--bar); color: #fff; padding-top: env(safe-area-inset-top, 0px); position: sticky; top: 0; z-index: 20; }
.brandbar-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px max(20px, env(safe-area-inset-left, 0px)); }
.hub-name { font-weight: 700; letter-spacing: .02em; opacity: .92; }
.updated { margin-left: auto; font-size: 13px; opacity: .8; white-space: nowrap; }
.brandbar form { margin: 0; }
.logout { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 16px; cursor: pointer; font-weight: 700; font-size: 14px; min-height: 36px; }
.logout:hover { background: rgba(255, 255, 255, .24); }
/* RU/EN: два сегмента, на бордовой шапке и на странице входа */
.lang { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); flex: none; }
.lang button { color: #fff; background: transparent; border: 0; border-radius: 999px; padding: 0 11px; min-height: 32px; font-weight: 700; font-size: 13px; cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--brand); background: #fff; }

/* ---------- вкладки ---------- */
.tabs { max-width: 1180px; margin: 0 auto; padding: 16px 20px 0; display: flex; gap: 8px; }
.tabs button { color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 20px; cursor: pointer; font-weight: 700; min-height: 40px; }
.tabs button[aria-selected="true"] { color: #fff; background: var(--brand); border-color: var(--brand); }
:root[data-theme="dark"] .tabs button[aria-selected="true"] { background: #9c1a12; border-color: #9c1a12; }

/* ---------- содержимое ---------- */
.app { max-width: 1180px; margin: 0 auto; padding: 16px 20px 48px; display: flex; flex-direction: column; gap: 16px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card > h2 { font-size: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sub { font-size: 13px; font-weight: 500; color: var(--muted); }
h3 { font-size: 15px; display: flex; align-items: baseline; gap: 8px; }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.toolbar .range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.toolbar .range label { flex-direction: column; align-items: flex-start; gap: 4px; }
input[type="date"] { color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 40px; font-weight: 700; }
.go { color: #fff; background: var(--brand); border: 0; border-radius: 10px; padding: 0 18px; min-height: 40px; font-weight: 700; cursor: pointer; }
.footnote { font-size: 13px; color: var(--muted); }
select { color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 40px; font-weight: 700; }
.warn { color: var(--warn); }
.bad-note { color: var(--bad); font-weight: 700; }

/* ---------- счётчики ---------- */
.blogger { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.card > .blogger:first-of-type { border-top: 0; padding-top: 0; }
.blogger.total { padding: 12px; margin: 0 -4px; background: var(--fill); border: 0; border-radius: 12px; }
.kind { display: flex; align-items: center; gap: 10px; }
.kind-name { width: 54px; flex: none; color: var(--muted); font-size: 13px; }
.cells { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.cell { flex: 1 1 52px; min-width: 52px; background: var(--fill); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.total .cell { background: var(--panel); }
.cell b { font-size: 18px; line-height: 1.15; font-weight: 700; }
.cell span { font-size: 11px; color: var(--muted); line-height: 1.2; }
.cell.ok b { color: var(--ok); }
.cell.bad b { color: var(--bad); }
.cell.warn b { color: var(--warn); }
.cells.direct .cell { flex: 1 1 88px; }
.cells.small .cell { padding: 4px 8px; }
.cells.small .cell b { font-size: 15px; }
.day { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.bads:empty { display: none; }
.accs { display: flex; flex-direction: column; gap: 8px; }
.acc-name { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.card > .acc + .acc { padding-top: 8px; }

/* ---------- списки ---------- */
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ul.plain li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
ul.plain li:first-child { border-top: 0; }
.date { font-weight: 700; min-width: 44px; font-variant-numeric: tabular-nums; }
.nick { font-weight: 700; }
.badge { font-size: 12px; color: var(--muted); background: var(--fill); border-radius: 999px; padding: 1px 10px; }
.item { flex-wrap: nowrap; }
.item .text { flex: 1 1 0; min-width: 0; }
.open { color: var(--accent); font-weight: 700; text-decoration: none; padding: 4px 0; }
.open:hover { text-decoration: underline; }
.st-on_time .text, .st-early .text { color: var(--ok); }
.st-late .text, .st-wait .text { color: var(--warn); }
.st-missed .text { color: var(--bad); }
.st-ahead .text { color: var(--muted); }
.mention .nick { flex: 1 1 auto; }
.mention .acc-tag { color: var(--muted); font-size: 13px; }
.upcoming { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- таблицы ---------- */
.tablewrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
@media (max-width: 600px) { .tablewrap { margin: 0 -8px; } table { font-size: 12.5px; } th, td { padding: 8px 2px; } thead th { font-size: 11px; } }
th, td { padding: 8px 4px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.2; }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody th { font-weight: 700; white-space: nowrap; }
tbody th small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
td.n { white-space: nowrap; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; min-height: 36px; font-weight: 700; }
.chip[aria-pressed="true"] { color: #fff; background: var(--brand); border-color: var(--brand); }

ul.topics li { flex-wrap: nowrap; align-items: center; }
.tname { width: 112px; flex: none; }
.bar { flex: 1; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
:root[data-theme="dark"] .bar i { background: #d9645c; }
.tval { width: 32px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- вход ---------- */
body.login { display: grid; place-items: center; align-content: center; gap: 28px; min-height: 100vh; background: #720000; padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
body.login .lang { justify-self: center; }
body.login .logo { width: min(220px, 60vw); }
.login-box { width: min(100%, 22rem); background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-box h1 { font-size: 22px; line-height: 1.2; }
.login-box p { color: var(--muted); }
.login-box p.err { color: var(--bad); font-weight: 700; }
.login-box #widget { display: flex; justify-content: center; min-height: 0; }
.login-box form { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.login-box label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.login-box input { color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 15px; }
.login-box button { color: #fff; background: var(--brand); border: 0; border-radius: 8px; padding: 10px 12px; font-weight: 700; cursor: pointer; min-height: 40px; }
.spin { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); align-self: center; }
@media (prefers-reduced-motion: no-preference) { .spin { animation: r .9s linear infinite; } @keyframes r { to { transform: rotate(360deg); } } }
[hidden] { display: none !important; }

/* ---------- телефон и Mini App: Liquid Glass ---------- */
@media (max-width: 600px) {
  body.app-page { background: radial-gradient(120% 60% at 15% -5%, rgba(114, 0, 0, .16), transparent 60%), radial-gradient(90% 50% at 100% 35%, rgba(226, 203, 175, .5), transparent 65%), var(--bg); background-attachment: fixed; }
  .brandbar { background: var(--bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14); }
  .brandbar-in { padding: 10px 16px; gap: 8px 10px; flex-wrap: wrap; }
  .lang button { min-height: 36px; padding: 0 10px; }
  .logo { width: 112px; }
  .hub-name { display: none; }
  .updated { font-size: 12px; }
  .logout { min-height: 44px; padding: 0 14px; }
  .app { padding: 16px 16px calc(96px + var(--safe-b)); }
  .card { background: linear-gradient(165deg, rgba(255, 255, 255, var(--spec)) 0%, rgba(255, 255, 255, 0) 46%), var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid var(--glass-line); border-radius: 24px; box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow); padding: 18px 16px; }
  .total .cell { background: var(--glass-s); }
  /* Нижняя панель вкладок - стеклянная капсула */
  .tabs { position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 30; max-width: none; margin: 0; padding: 5px; gap: 4px; border-radius: 999px;
    background: linear-gradient(165deg, rgba(255, 255, 255, var(--spec)) 0%, rgba(255, 255, 255, 0) 46%), var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow); }
  .tabs button { flex: 1; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--fg); }
  .tabs button[aria-selected="true"] { color: #fff; background: var(--brand); }
  .kind { flex-direction: column; align-items: stretch; gap: 4px; }
  .kind-name { width: auto; }
  .cell { flex: 1 1 44px; min-width: 44px; padding: 6px; }
  .cells:not(.direct):not(.small) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cells:not(.direct):not(.small) .cell { min-width: 0; }
  .cells.direct .cell { flex: 1 1 96px; }
  select { min-height: 44px; }
  .chip { min-height: 44px; }
  input[type="date"], .go { min-height: 44px; }
  .tname { width: 96px; }
  body.login { background: #720000; }
}
:root.is-tg body.app-page { background: radial-gradient(120% 60% at 15% -5%, rgba(114, 0, 0, .16), transparent 60%), var(--bg); background-attachment: fixed; }