@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Bold.woff") format("woff"); }
/* Дизайн-система shadcn/ui (тема zinc) на чистом CSS: те же токены, размеры и состояния,
   что в исходниках компонентов Button, Card, Badge, Switch, Tabs, Input, Alert, Checkbox, Skeleton. */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 30%;
  --success-bg: 142 70% 94%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 10% 3.9%;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  color-scheme: light;
}
.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 70% 55%;
  --success-bg: 142 40% 12%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; border-color: hsl(var(--border)); }
html, body { margin: 0; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "calt", "kern";
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
#root { max-width: 520px; margin: 0 auto; padding: 16px 16px 8px; padding-top: calc(16px + env(safe-area-inset-top)); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
svg { flex: none; }

/* ── утилиты ── */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-sm { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.w-full { width: 100%; }
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: 12px; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.success-text { color: hsl(var(--success)); }
.destructive-text { color: hsl(var(--destructive)); }
.mt { margin-top: 8px; }
.hidden { display: none !important; }

/* ── page header ── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.page-desc { color: hsl(var(--muted-foreground)); font-size: 14px; margin-top: 4px; }
.section-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); margin: 20px 4px 8px; }

/* ── Button (shadcn) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  border-radius: calc(var(--radius) - 2px); font-size: 14px; font-weight: 500; border: 1px solid transparent;
  height: 36px; padding: 8px 16px; cursor: pointer; transition: background-color .15s, color .15s, opacity .15s;
}
.btn svg { width: 16px; height: 16px; pointer-events: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn-default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow); }
.btn-default:hover { background: hsl(var(--primary) / .9); }
.btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); box-shadow: var(--shadow-sm); }
.btn-destructive:hover { background: hsl(var(--destructive) / .9); }
.btn-outline { border-color: hsl(var(--input)); background: hsl(var(--background)); box-shadow: var(--shadow-sm); }
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: hsl(var(--secondary) / .8); }
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 32px; font-size: 15px; }
.btn-icon { height: 36px; width: 36px; padding: 0; }
.btn-icon.btn-sm { height: 32px; width: 32px; }
.btn.is-busy { opacity: .7; pointer-events: none; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Card ── */
.card { border-radius: calc(var(--radius) + 4px); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: var(--shadow); }
.card-header { padding: 20px 20px 0; }
.card-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-title { font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; font-size: 15px; }
.card-desc { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 6px; }
.card-content { padding: 20px; }
.card-header + .card-content { padding-top: 16px; }
.card-compact { padding: 12px 14px; }
.card.is-past { opacity: .55; }
.card.is-now { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }

/* ── Badge ── */
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: calc(var(--radius) - 2px); border: 1px solid transparent; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.badge svg { width: 12px; height: 12px; }
.badge-default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-sm); }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.badge-outline { border-color: hsl(var(--border)); color: hsl(var(--foreground)); font-weight: 500; }
.badge-success { background: hsl(var(--success-bg)); color: hsl(var(--success)); }

/* ── Input / Label ── */
.label { font-size: 14px; font-weight: 500; line-height: 1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.input {
  display: flex; height: 36px; width: 100%; border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--input));
  background: transparent; padding: 4px 12px; font-size: 16px; box-shadow: var(--shadow-sm); color: inherit; transition: box-shadow .15s;
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.input-otp { text-align: center; letter-spacing: .5em; font-size: 20px; height: 44px; font-variant-numeric: tabular-nums; }

/* ── Switch / Checkbox ── */
.switch { display: inline-flex; flex: none; height: 20px; width: 36px; align-items: center; border-radius: 9999px; border: 2px solid transparent; background: hsl(var(--input)); box-shadow: var(--shadow-sm); cursor: pointer; transition: background-color .15s; padding: 0; }
.switch[data-state="checked"] { background: hsl(var(--primary)); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.switch-thumb { display: block; height: 16px; width: 16px; border-radius: 9999px; background: hsl(var(--background)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); transition: transform .15s; transform: translateX(0); }
.switch[data-state="checked"] .switch-thumb { transform: translateX(16px); }
.checkbox { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 16px; width: 16px; border-radius: 4px; border: 1px solid hsl(var(--primary)); background: transparent; box-shadow: var(--shadow-sm); cursor: pointer; padding: 0; color: hsl(var(--primary-foreground)); }
.checkbox[data-state="checked"] { background: hsl(var(--primary)); }
.checkbox svg { width: 12px; height: 12px; display: none; stroke-width: 3; }
.checkbox[data-state="checked"] svg { display: block; }
.checkbox:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.checkbox:disabled { opacity: .5; cursor: not-allowed; }
.check-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; }
.check-row:disabled { cursor: default; }

/* ── Tabs ── */
.tabs-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; align-items: center; border-radius: var(--radius); background: hsl(var(--muted)); padding: 4px; color: hsl(var(--muted-foreground)); max-width: 100%; overflow: hidden; }
.tabs-list.full { width: 100%; }
.tabs-trigger { flex: 1; }
.tabs-trigger { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; border-radius: calc(var(--radius) - 2px); padding: 6px 8px; font-size: 13px; font-weight: 500; border: 0; background: transparent; cursor: pointer; transition: all .15s; color: inherit; }
.tabs-trigger[data-state="active"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow); }
.tabs-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--ring)); }

/* ── Alert ── */
.alert { position: relative; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--border)); padding: 12px 16px 12px 44px; font-size: 14px; background: hsl(var(--background)); }
.alert > svg { position: absolute; left: 16px; top: 14px; width: 16px; height: 16px; }
.alert-title { margin: 0 0 4px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-size: 14px; }
.alert-desc { font-size: 13px; opacity: .9; line-height: 1.5; }
.alert-destructive { border-color: hsl(var(--destructive) / .5); color: hsl(var(--destructive)); }
.dark .alert-destructive { border-color: hsl(var(--destructive)); color: hsl(0 84% 70%); }

/* ── Avatar / Separator / Skeleton ── */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 40px; width: 40px; border-radius: 9999px; background: hsl(var(--muted)); font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); user-select: none; }
.avatar-sm { height: 32px; width: 32px; font-size: 12px; }
.separator { height: 1px; width: 100%; background: hsl(var(--border)); border: 0; margin: 0; }
.skeleton { border-radius: calc(var(--radius) - 2px); background: hsl(var(--primary) / .1); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* ── schedule ── */
.day-title { font-size: 13px; font-weight: 600; margin: 20px 2px 8px; display: flex; align-items: center; gap: 8px; }
.day-title:first-child { margin-top: 0; }
.lesson { display: flex; gap: 14px; padding: 12px 14px; }
.lesson-time { width: 52px; flex: none; text-align: left; line-height: 1.3; }
.lesson-time b { display: block; font-size: 15px; font-weight: 600; }
.lesson-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; color: hsl(var(--muted-foreground)); font-size: 12px; }
.lesson-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lesson-meta svg { width: 13px; height: 13px; }

/* ── empty / kv ── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 20px; color: hsl(var(--muted-foreground)); }
.empty svg { width: 28px; height: 28px; opacity: .6; }
.empty b { color: hsl(var(--foreground)); font-weight: 600; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 12px; margin: 8px 0 0; }
.kv dt { color: hsl(var(--muted-foreground)); }
.kv dd { margin: 0; font-weight: 500; text-align: right; word-break: break-word; }
.pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── bottom navigation ── */
/* backdrop-filter тут был и давал на iOS/Android WebView случайное размытие всего экрана
   (известный баг рендеринга, isolation/translateZ не помогли до конца) — фон сделан непрозрачнее
   вместо размытия, чтобы баг не мог повториться в принципе */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: hsl(var(--background) / .97); border-top: 1px solid hsl(var(--border)); padding-bottom: env(safe-area-inset-bottom); }
.nav-inner { max-width: 520px; margin: 0 auto; display: flex; position: relative; }
.nav-item { flex: 1; position: relative; transition: color .2s; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; border: 0; background: none; color: hsl(var(--muted-foreground)); font-size: 11px; font-weight: 500; cursor: pointer; }
.nav-item svg { width: 21px; height: 21px; }
.nav-item.active { color: hsl(var(--foreground)); }
.nav-dot { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 9999px; background: hsl(var(--destructive)); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ── toast / dialog ── */
.toasts { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; max-width: 480px; width: 100%; display: flex; align-items: center; gap: 10px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); padding: 12px 14px; font-size: 13px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15); animation: toast-in .2s ease-out; }
.toast svg { width: 16px; height: 16px; }
.toast-error svg { color: hsl(var(--destructive)); }
.toast-success svg { color: hsl(var(--success)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.overlay { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .8); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade-in .15s; }
@keyframes fade-in { from { opacity: 0; } }
.dialog { width: 100%; max-width: 400px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); padding: 24px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); display: flex; flex-direction: column; gap: 8px; }
.dialog-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.dialog-desc { font-size: 14px; color: hsl(var(--muted-foreground)); }
.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ═══ v3: расписание по датам, заливка пары, анимации, отступы ═══ */
.stack-md { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }
.stack-lg > .page-header { margin-bottom: 0; }
.stack-lg > :empty { display: none; }
.section { display: block; }
.section > .section-title { margin: 0 4px 10px; }
.hint-line { margin: 10px 4px 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.card-compact { padding: 12px 14px; }
.card-compact .row { gap: 12px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt { margin-top: 14px; }
.tab-body { margin-top: 14px; }

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin: 0 2px; }
.cal-month { font-size: 15px; font-weight: 600; }
.date-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.date-strip::-webkit-scrollbar { display: none; }
.date-chip { flex: none; width: 48px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); cursor: pointer; font: inherit; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.date-chip:active { transform: scale(.95); }
.date-chip .dow { font-size: 11px; color: hsl(var(--muted-foreground)); text-transform: uppercase; }
.date-chip .num { font-size: 17px; font-weight: 600; line-height: 1.2; }
.date-chip .dot { width: 5px; height: 5px; border-radius: 9999px; background: transparent; margin-top: 1px; }
.date-chip.has-lessons .dot { background: hsl(var(--muted-foreground) / .6); }
.date-chip.is-today { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }
.date-chip.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.date-chip.active .dow { color: hsl(var(--primary-foreground) / .75); }
.date-chip.active.has-lessons .dot { background: hsl(var(--primary-foreground)); }

.day-box { min-height: 120px; overflow: hidden; }
.day-title { margin-top: 0; }
.day-count { margin-left: auto; font-weight: 400; }

.lesson { position: relative; overflow: hidden; }
.lesson > * { position: relative; z-index: 1; }
.lesson > .lesson-fill { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; background: hsl(var(--success) / .22); border-right: 2px solid hsl(var(--success) / .6); transition: width 1s linear; pointer-events: none; }
.lesson.is-past { opacity: 1; }
.lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lesson-head .badge { flex: none; }

.view { will-change: transform, opacity; }
.view-enter-right { animation: slide-in-right .28s cubic-bezier(.2, .8, .2, 1) both; }
.view-enter-left { animation: slide-in-left .28s cubic-bezier(.2, .8, .2, 1) both; }
.view-enter-fade { animation: fade-in .25s ease-out both; }
.day-wrap.view-enter-right, .day-wrap.view-enter-left { animation-duration: .22s; }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.nav-indicator { position: absolute; top: 0; left: 0; height: 2px; padding: 0; pointer-events: none; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.nav-indicator::after { content: ""; display: block; height: 2px; margin: 0 30%; border-radius: 0 0 2px 2px; background: hsl(var(--primary)); }

@media (prefers-reduced-motion: reduce) {
  .view-enter-right, .view-enter-left, .view-enter-fade, .nav-indicator, .lesson > .lesson-fill, .date-chip { animation: none !important; transition: none !important; }
}

/* ═══ v4: аватары, тема, проверка сервисов, админка ═══ */
.avatar { overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .3s, color .3s, border-color .3s, fill .3s !important; }
.wrap { flex-wrap: wrap; }
.mono { font-variant-numeric: tabular-nums; }
.destructive-text { color: hsl(var(--destructive)); }
.dark .destructive-text { color: hsl(0 84% 68%); }
.badge-destructive { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.dark .badge-destructive { background: hsl(0 62% 30% / .35); color: hsl(0 90% 75%); }
.dialog .input { margin-top: 10px; }

.svc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
.svc-row:last-child { border-bottom: 0; }
.svc-dot { width: 9px; height: 9px; border-radius: 9999px; background: hsl(var(--muted-foreground) / .4); flex: none; }
.svc-dot.ok { background: hsl(var(--success)); }
.svc-dot.bad { background: hsl(var(--destructive)); }
.svc-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 58%; }
.svc-badges .badge { white-space: normal; text-align: right; }

.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 12px; color: hsl(var(--muted-foreground)); pointer-events: none; }
.search .input { padding-left: 36px; }
.card.is-banned { border-color: hsl(var(--destructive) / .5); }
.btn-sm.btn-icon, .btn-icon.btn-sm { height: 32px; width: 32px; }

/* ═══ v5: баллы БРС, группа ═══ */
.progress { height: 8px; width: 100%; border-radius: 9999px; background: hsl(var(--primary) / .15); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 9999px; background: hsl(var(--primary)); transition: width .4s ease; }

/* ═══ v6: шторки, меню, чипы, админка ═══ */
#root { overflow-x: clip; }
body.sheet-open { overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); border-radius: 9999px; padding: 5px 12px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chip:active { transform: scale(.97); }
.chip.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

.sheet-overlay { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .55); display: flex; align-items: flex-end; justify-content: center; animation: fade-in .18s ease-out both; }
.sheet { width: 100%; max-width: 520px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgb(0 0 0 / .25); animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1) both; padding-bottom: env(safe-area-inset-bottom); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grip { width: 36px; height: 4px; border-radius: 9999px; background: hsl(var(--muted-foreground) / .35); margin: 8px auto 0; flex: none; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 18px; flex: none; }
.sheet-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 20px; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }

.card.menu { padding: 0; overflow: hidden; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: 0; border-bottom: 1px solid hsl(var(--border)); text-align: left; cursor: pointer; color: inherit; transition: background .15s; }
.menu-row:last-child { border-bottom: 0; }
.menu-row:active { background: hsl(var(--accent)); }
.menu-row > svg { color: hsl(var(--muted-foreground)); }
.menu-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: hsl(var(--muted)); flex: none; }
.menu-title { display: block; font-weight: 500; font-size: 14px; }
.menu-desc { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 1px; }

.list-group { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); background: hsl(var(--card)); overflow: hidden; }
.list-row, .ev-row, .user-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; }
.list-row:last-child, .ev-row:last-child, .user-row:last-child { border-bottom: 0; }
.user-row { cursor: pointer; transition: background .15s; font: inherit; }
.user-row:active { background: hsl(var(--accent)); }
.user-row > svg { color: hsl(var(--muted-foreground)); }
.user-row.is-banned { background: hsl(var(--destructive) / .06); }
.day-label { font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 4px 4px 0; text-transform: uppercase; letter-spacing: .05em; }

.ev-avatar { position: relative; flex: none; }
.ev-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 2px solid hsl(var(--background)); background: hsl(var(--muted-foreground)); color: hsl(var(--background)); }
.ev-badge.tone-success { background: hsl(var(--success)); color: #fff; }
.ev-badge.tone-destructive { background: hsl(0 72% 51%); color: #fff; }
.ev-badge.tone-muted { background: hsl(var(--muted-foreground)); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); padding: 12px 14px; background: hsl(var(--card)); }
.stat-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-label { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.stat.tone-success .stat-num { color: hsl(var(--success)); }
.stat.tone-destructive .stat-num { color: hsl(0 72% 51%); }
.dark .stat.tone-destructive .stat-num { color: hsl(0 90% 72%); }
.kv.kv-lg { font-size: 13px; gap: 8px 14px; margin: 0; }

/* ═══════ Карта кампуса ═══════ */
.map-screen {
  --mp-bg: #eef1f6; --mp-room: #ffffff; --mp-hall: #e3e8f0; --mp-void: #d5dbe6; --mp-wall: #7c879b; --mp-door: #ffffff;
  --mp-text: #1b2333; --mp-halo: rgb(255 255 255 / .92); --mp-focus: rgb(59 130 246 / .30); --mp-entrance: #d8f3e2;
  --mp-path: #2563eb; --mp-path-halo: #ffffff; --mp-from: #16a34a; --mp-to: #e11d48; --mp-stair: #2563eb;
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: hsl(var(--background)); animation: fade-in .18s ease-out both;
}
.dark .map-screen { --mp-bg: #0d1016; --mp-room: #1b212c; --mp-hall: #141922; --mp-void: #0a0c10; --mp-wall: #566176; --mp-door: #1b212c; --mp-text: #e8ecf4; --mp-halo: rgb(13 16 22 / .92); --mp-focus: rgb(96 165 250 / .38); --mp-entrance: #17382a; --mp-path: #60a5fa; --mp-path-halo: #0d1016; --mp-stair: #60a5fa; }
.map-top { flex: none; display: flex; flex-direction: column; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid hsl(var(--border)); max-height: 52dvh; overflow-y: auto; scrollbar-width: none; }
.map-top::-webkit-scrollbar { display: none; }
.map-search { position: relative; display: flex; align-items: center; }
.map-search > svg { position: absolute; left: 12px; color: hsl(var(--muted-foreground)); pointer-events: none; }
.map-search .input { padding-left: 36px; }
.map-results { border: 1px solid hsl(var(--border)); border-radius: 12px; overflow-y: auto; max-height: 32dvh; background: hsl(var(--card)); }
.map-res { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid hsl(var(--border)); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.map-res:last-child { border-bottom: 0; }
.map-res:active { background: hsl(var(--muted)); }
.map-route { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); }
.map-end { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.map-end > .muted:first-of-type { width: 46px; flex: none; }
.map-pin { flex: none; width: 24px; height: 24px; border-radius: 9999px; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.map-pin.from { background: #16a34a; } .map-pin.to { background: #e11d48; }
.map-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.map-step { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%; background: hsl(var(--muted)); border: 0; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.map-step-n { flex: none; width: 20px; height: 20px; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.map-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--mp-bg); }
.map-stage.loading::after { content: "Загружаю план…"; position: absolute; inset: 0; display: grid; place-items: center; color: hsl(var(--muted-foreground)); font-size: 14px; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; --fs: 24px; }
.map-svg:active { cursor: grabbing; }
.map-world { transition: opacity .15s ease; }
.map-world.fade { opacity: 0; }
.mp-room { fill: var(--mp-room); stroke: none; cursor: pointer; transition: fill .12s; }
.mp-room.hall { fill: var(--mp-hall); }
.mp-room.void { fill: var(--mp-void); cursor: default; }
.mp-room.entrance { fill: var(--mp-entrance); }
.mp-room.focus { fill: var(--mp-focus); }
.mp-wall { fill: none; stroke: var(--mp-wall); stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mp-door { fill: var(--mp-door); pointer-events: none; }
.mp-label { font-family: "Inter", system-ui, sans-serif; font-size: var(--fs); fill: var(--mp-text); pointer-events: none; paint-order: stroke; stroke: var(--mp-halo); stroke-width: calc(var(--fs) / 3.2); stroke-linejoin: round; font-weight: 600; letter-spacing: -.01em; }
.mp-path-halo { fill: none; stroke: var(--mp-path-halo); stroke-width: 9px; stroke-linecap: round; stroke-linejoin: round; opacity: .9; pointer-events: none; }
.mp-path { fill: none; stroke: var(--mp-path); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 9; pointer-events: none; animation: mp-march 1.1s linear infinite; }
@keyframes mp-march { to { stroke-dashoffset: -20; } }
.mp-mark { pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)); }
.mp-mark circle { stroke: #fff; stroke-width: 2.5px; }
.mp-mark.from circle { fill: var(--mp-from); } .mp-mark.to circle { fill: var(--mp-to); } .mp-mark.stair circle { fill: var(--mp-stair); }
.mp-mark-ch { fill: #fff; font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 700; }
.mp-mark-label { fill: var(--mp-text); font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--mp-halo); stroke-width: 4px; stroke-linejoin: round; }
.map-floors { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100% - 20px); overflow-y: auto; scrollbar-width: none; }
.map-floor { width: 40px; height: 40px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: 15px; font-weight: 700; cursor: pointer; position: relative; box-shadow: var(--shadow); transition: background .15s, color .15s, transform .1s; }
.map-floor:active { transform: scale(.94); }
.map-floor.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.map-floor.route::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 9999px; background: #2563eb; }
.map-zoom { position: absolute; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
.map-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.map-btn:active { transform: scale(.94); }
.map-info { position: absolute; left: 10px; right: 64px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 14px; background: hsl(var(--card)); box-shadow: var(--shadow); animation: sheet-up .2s ease-out both; }
.map-err { position: absolute; left: 12px; right: 12px; top: 12px; }

/* ── Чат ── */
.nav-dot.soft { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
body.chat-mode { overflow: hidden; padding-bottom: 0; }
body.chat-mode #root { padding-bottom: 0; }
.chat-view { display: flex; flex-direction: column; height: calc(100dvh - 16px - env(safe-area-inset-top) - 62px - env(safe-area-inset-bottom)); min-height: 0; gap: 8px; }
.chat-rooms { display: flex; align-items: center; gap: 6px; }
.chat-tabs { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chat-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 60%; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); border-radius: 9999px; padding: 7px 12px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.chat-tab.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.chat-pin { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); border-radius: var(--radius); padding: 8px 10px; color: hsl(var(--foreground)); font-size: 12px; cursor: pointer; }
.chat-pin .grow { min-width: 0; display: flex; flex-direction: column; }
.chat-pin b, .chat-pin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pin span { color: hsl(var(--muted-foreground)); }
.chat-listwrap { position: relative; flex: 1; min-height: 0; }
.chat-list { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; -webkit-overflow-scrolling: touch; }
.chat-fresh { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 9999px; padding: 8px 12px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 12px; font-weight: 600; box-shadow: 0 4px 12px rgb(0 0 0 / .2); cursor: pointer; }
.chat-fresh svg { transform: rotate(-90deg); }
.chat-day { align-self: center; margin: 8px 0 4px; }
.chat-day span { font-size: 11px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border-radius: 9999px; padding: 3px 10px; }
.chat-empty { margin: auto; text-align: center; color: hsl(var(--muted-foreground)); font-size: 14px; padding: 24px; }
.chat-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; animation: chat-in .18s ease-out; }
.chat-msg.mine { justify-content: flex-end; }
.chat-msg.flash .chat-bubble { box-shadow: 0 0 0 2px hsl(var(--primary) / .5); }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } }
.chat-av { flex: none; }
.chat-bubble { position: relative; max-width: 82%; min-width: 64px; text-align: left; border: 0; background: hsl(var(--muted)); color: hsl(var(--foreground)); border-radius: 16px 16px 16px 4px; padding: 7px 10px 6px; font: inherit; font-size: 14px; line-height: 1.35; cursor: pointer; word-break: break-word; overflow-wrap: anywhere; transition: box-shadow .3s; }
.chat-msg.mine .chat-bubble { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 16px 16px 4px 16px; }
.chat-msg.deleted .chat-bubble { background: transparent; border: 1px dashed hsl(var(--border)); cursor: default; }
.chat-author { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.chat-text { white-space: pre-wrap; }
.chat-link { color: inherit; text-decoration: underline; }
.mention { font-weight: 600; color: hsl(210 90% 55%); }
.chat-msg.mine .mention { color: inherit; text-decoration: underline; }
.mention.me { background: hsl(45 95% 55% / .3); border-radius: 4px; padding: 0 2px; }
.chat-quote { display: flex; flex-direction: column; width: 100%; text-align: left; border: 0; border-left: 3px solid currentColor; background: hsl(0 0% 50% / .14); border-radius: 6px; padding: 3px 8px; margin-bottom: 4px; font: inherit; font-size: 12px; color: inherit; cursor: pointer; opacity: .9; }
.chat-quote b { font-weight: 600; }
.chat-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; opacity: .8; }
.chat-img { display: block; max-width: 100%; max-height: 280px; border-radius: 10px; margin: 2px 0 4px; background: hsl(0 0% 50% / .12); min-height: 40px; }
.chat-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 10px; opacity: .65; margin-top: 2px; }
.chat-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-react { display: inline-flex; align-items: center; gap: 3px; border: 1px solid hsl(0 0% 50% / .3); background: hsl(0 0% 50% / .12); color: inherit; border-radius: 9999px; padding: 1px 7px; font-size: 12px; cursor: pointer; }
.chat-react.mine { border-color: hsl(210 90% 55%); background: hsl(210 90% 55% / .18); }
.chat-react b { font-weight: 600; font-size: 11px; }
.chat-composer { position: relative; display: flex; flex-direction: column; gap: 6px; }
.chat-row { display: flex; align-items: flex-end; gap: 4px; }
.chat-ic { flex: none; width: 36px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: hsl(var(--muted-foreground)); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; }
.chat-ic:active { background: hsl(var(--muted)); }
.chat-input { flex: 1; min-width: 0; resize: none; max-height: 122px; overflow: hidden; scrollbar-width: none; box-sizing: border-box; height: 42px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 15px; line-height: 1.3; outline: none; }
.chat-input:focus { border-color: hsl(var(--ring, var(--primary))); }
.chat-send { flex: none; width: 40px; height: 40px; border-radius: 9999px; border: 0; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s, transform .15s; }
.chat-send:active { transform: scale(.92); }
.chat-send.busy { opacity: .5; }
.chat-banner { display: flex; align-items: center; gap: 8px; border-left: 3px solid hsl(var(--primary)); background: hsl(var(--muted)); border-radius: 8px; padding: 6px 6px 6px 10px; font-size: 12px; }
.chat-banner .grow { min-width: 0; display: flex; flex-direction: column; }
.chat-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--muted-foreground)); }
.chat-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.chat-ments { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 16px rgb(0 0 0 / .12); }
.chat-ment { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font-size: 14px; }
.chat-ment:active { background: hsl(var(--muted)); }
.chat-panel { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); max-height: 220px; overflow-y: auto; }
.chat-emojis { display: grid; grid-template-columns: repeat(8, 1fr); padding: 6px; }
.chat-emoji { border: 0; background: none; font-size: 22px; padding: 6px 0; cursor: pointer; border-radius: 8px; }
.chat-emoji:active { background: hsl(var(--muted)); }
.chat-gifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.chat-gif { border: 0; padding: 0; background: hsl(var(--muted)); border-radius: 8px; overflow: hidden; cursor: pointer; }
.chat-gif img { width: 100%; height: 90px; object-fit: cover; display: block; }
.chat-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chat-qbtn { border: 1px solid hsl(var(--border)); background: hsl(var(--background)); border-radius: 12px; font-size: 24px; padding: 8px 0; cursor: pointer; }
.chat-qbtn.mine { background: hsl(210 90% 55% / .18); border-color: hsl(210 90% 55%); }

.chat-cnt { min-width: 16px; height: 16px; border-radius: 9999px; padding: 0 4px; background: hsl(var(--destructive)); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-ment-empty { padding: 10px 12px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.chat-rooms .btn { flex: none; }
.chat-input::-webkit-scrollbar, .chat-list::-webkit-scrollbar, .chat-panel::-webkit-scrollbar, .chat-tabs::-webkit-scrollbar { display: none; width: 0; }
.chat-list, .chat-panel { scrollbar-width: none; }

/* ── «в сети» ── */
.av-wrap { position: relative; flex: none; display: inline-flex; }
.pres { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 9999px; border: 2.5px solid hsl(var(--background)); background: hsl(220 8% 55%); box-sizing: border-box; transition: background .3s; }
.av-wrap-sm .pres { width: 11px; height: 11px; border-width: 2px; }
.pres.on { background: #23a55a; }
.pres.idle { background: #f0b232; }
.pres.off { background: hsl(220 8% 55%); }
.textarea { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.chat-tick { font-size: 11px; letter-spacing: -2px; margin-left: 2px; }
.chat-tick.read { color: #60a5fa; }
.chat-msg.mine .chat-tick.read { color: #7dd3fc; }
.dark .chat-msg.mine .chat-tick.read { color: #2563eb; }

.update-bar { position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); z-index: 70; max-width: 496px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgb(0 0 0 / .25); animation: toast-in .2s ease-out; }
.update-bar .btn { background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); }

.chat-tick { display: inline-flex; align-items: center; letter-spacing: 0; margin-left: 3px; opacity: .6; }
.chat-tick svg { width: 14px; height: 14px; stroke-width: 2.4; }
.chat-tick svg + svg { margin-left: -9px; }
.chat-tick.read { opacity: 1; color: #38bdf8; }
.dark .chat-msg.mine .chat-tick.read { color: #2563eb; }
.chat-seen { font-size: 11px; margin-left: 3px; }

.bc { position: relative; padding-top: 14px; }
.bc-max { position: absolute; top: 0; left: 0; font-size: 10px; color: var(--muted-foreground, #888); }
.bc-plot { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--border, #ddd); padding-bottom: 0; margin-bottom: 18px; }
.bc-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bc-bar { width: 100%; max-width: 22px; background: #60a5fa; border-radius: 3px 3px 0 0; min-height: 0; transition: height .3s; }
.bc-bar.hot { background: #1d4ed8; }
.dark .bc-bar { background: #3b82f6; } .dark .bc-bar.hot { background: #93c5fd; }
.bc-lab { position: absolute; top: 100%; margin-top: 3px; font-size: 10px; color: var(--muted-foreground, #888); white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-n { font-size: 22px; font-weight: 700; }
.seg { display: flex; gap: 4px; background: var(--muted, #f1f5f9); border-radius: 10px; padding: 3px; }
.seg-btn { flex: 1; border: 0; background: transparent; padding: 7px 4px; border-radius: 8px; font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.seg-btn.on { background: var(--card, #fff); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.dark .seg-btn.on { background: #334155; }

/* ═══════════ v7.3: плавность ═══════════ */
:root { --ease: cubic-bezier(.22, .9, .3, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
button, .chip, .tabs-trigger, .menu-row, .list-row, .user-row, .nav-item, .btn, .card, .switch, .switch-thumb, .chat-react, .chat-qbtn, .seg-btn {
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), opacity .22s var(--ease);
}
.btn:active, .chip:active, .tabs-trigger:active, .nav-item:active, .chat-react:active, .seg-btn:active { transform: scale(.95); }
.menu-row:active, .list-row:active, .user-row:active { transform: scale(.992); }
.chat-qbtn:active { transform: scale(.85); }
.chat-qbtn:hover { transform: scale(1.08); }
.switch-thumb { transition: transform .3s var(--ease-spring); }
.switch { transition: background-color .25s var(--ease); }

/* вкладки админки: прокрутка вместо наложения */
.tabs-list.scroll { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tabs-list.scroll::-webkit-scrollbar { display: none; }
.tabs-list.scroll .tabs-trigger { flex: 0 0 auto; padding: 6px 14px; overflow: visible; scroll-snap-align: center; }
.chips { gap: 8px; }
.chip { flex: 0 0 auto; }

/* появление содержимого: плавный подъём со ступенчатой задержкой */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
.view-enter-fade > *, .view-enter-right > *, .view-enter-left > *, .tab-body > *, .sheet-body > .stack-md > *, .sheet-body > .stack-lg > *, .sheet-body > .stack-sm > * { animation: rise .42s var(--ease) both; }
:is(.view-enter-fade, .view-enter-right, .view-enter-left, .tab-body, .sheet-body > .stack-md, .sheet-body > .stack-lg, .sheet-body > .stack-sm) > :nth-child(2) { animation-delay: 40ms; }
:is(.view-enter-fade, .view-enter-right, .view-enter-left, .tab-body, .sheet-body > .stack-md, .sheet-body > .stack-lg, .sheet-body > .stack-sm) > :nth-child(3) { animation-delay: 80ms; }
:is(.view-enter-fade, .view-enter-right, .view-enter-left, .tab-body, .sheet-body > .stack-md, .sheet-body > .stack-lg, .sheet-body > .stack-sm) > :nth-child(4) { animation-delay: 120ms; }
:is(.view-enter-fade, .view-enter-right, .view-enter-left, .tab-body, .sheet-body > .stack-md, .sheet-body > .stack-lg, .sheet-body > .stack-sm) > :nth-child(5) { animation-delay: 160ms; }
:is(.view-enter-fade, .view-enter-right, .view-enter-left, .tab-body, .sheet-body > .stack-md, .sheet-body > .stack-lg, .sheet-body > .stack-sm) > :nth-child(n+6) { animation-delay: 200ms; }
.list-group > *, .menu > * { animation: rise .38s var(--ease) both; }
.list-group > :nth-child(2), .menu > :nth-child(2) { animation-delay: 30ms; } .list-group > :nth-child(3), .menu > :nth-child(3) { animation-delay: 60ms; }
.list-group > :nth-child(4), .menu > :nth-child(4) { animation-delay: 90ms; } .list-group > :nth-child(n+5), .menu > :nth-child(n+5) { animation-delay: 120ms; }
.view-enter-right { animation-duration: .38s; animation-timing-function: var(--ease); }
.view-enter-left { animation-duration: .38s; animation-timing-function: var(--ease); }

/* шторки и диалоги */
.sheet-overlay { animation: fade-in .25s var(--ease) both; transition: opacity .19s ease; }
.sheet { animation: sheet-up .42s var(--ease) both; transition: transform .19s ease-in, opacity .19s ease; }
@keyframes sheet-up { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-overlay.closing { opacity: 0; pointer-events: none; }
.sheet-overlay.closing .sheet { transform: translateY(40px); opacity: 0; }
.overlay { animation: fade-in .2s var(--ease) both; transition: opacity .16s ease; }
.dialog { animation: pop-in .3s var(--ease-spring) both; transition: transform .16s ease, opacity .16s ease; }
.overlay.closing { opacity: 0; pointer-events: none; }
.overlay.closing .dialog { transform: scale(.96); opacity: 0; }
.toast { animation: pop-in .35s var(--ease-spring) both; }

/* чат */
.chat-msg { animation: pop-in .32s var(--ease) both; }
.chat-bubble { transition: transform .15s var(--ease), box-shadow .2s var(--ease); }
.chat-bubble:active { transform: scale(.985); }
.chat-bubble { position: relative; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.chat-text { -webkit-user-select: text; user-select: text; }
.chat-react .emo, .chat-qbtn .emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; font-variant-emoji: emoji; }
.chat-react { animation: pop-in .3s var(--ease-spring) both; }
.heart-pop { position: absolute; left: 50%; top: 50%; font-size: 44px; line-height: 1; pointer-events: none; z-index: 5; transform: translate(-50%, -50%) scale(0); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; animation: heart-pop .7s var(--ease) both; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .3)); }
@keyframes heart-pop { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 25% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; } 55% { transform: translate(-50%, -62%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }

/* графики */
.bc-bar { transform-origin: bottom; animation: grow .6s var(--ease) both; }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.bc-col:nth-child(2n) .bc-bar { animation-delay: 25ms; } .bc-col:nth-child(3n) .bc-bar { animation-delay: 50ms; }
.seg-btn.on { transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }

/* журнал обновлений на весь экран */
.whatsnew { position: fixed; inset: 0; z-index: 80; background: hsl(var(--background)); display: flex; flex-direction: column; animation: fade-in .35s var(--ease) both; transition: opacity .22s ease, transform .22s ease; }
.whatsnew.closing { opacity: 0; transform: scale(1.02); pointer-events: none; }
.whatsnew-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: calc(28px + env(safe-area-inset-top)) 16px 16px; max-width: 520px; width: 100%; margin: 0 auto; }
.whatsnew-hero { text-align: center; margin-bottom: 22px; animation: rise .5s var(--ease) both; }
.whatsnew-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; }
.whatsnew-emoji { font-size: 46px; animation: heart-bounce 1.6s var(--ease-spring) .2s both; }
@keyframes heart-bounce { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
.whatsnew-scroll .section { animation: rise .5s var(--ease) .12s both; }
.whatsnew-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); max-width: 520px; width: 100%; margin: 0 auto; }
.log-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.badge-v { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* расписание: любые даты, посещаемость */
.card.is-past { opacity: 1; }
.card.is-past .lesson-time, .card.is-past .lesson-head > .medium, .card.is-past .lesson-meta { opacity: .6; }
.date-chip.is-old { opacity: .75; }
.date-chip.is-old.active { opacity: 1; }
.date-pick { position: relative; overflow: hidden; cursor: pointer; }
.date-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; font-size: 16px; }
.lesson-att { margin-top: 8px; }
.att-chip { border: 1px dashed hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground)); border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
.att-chip.m-present { border-style: solid; border-color: hsl(var(--success) / .5); color: hsl(var(--success)); background: hsl(var(--success) / .1); }
.att-chip.m-absent { border-style: solid; border-color: hsl(var(--destructive) / .5); color: hsl(var(--destructive)); background: hsl(var(--destructive) / .1); }
.att-chip:disabled { opacity: .5; }

/* интерактивные графики */
.bc-read { min-height: 36px; margin-bottom: 6px; padding-right: 36px; font-size: 12.5px; line-height: 1.35; transition: color .2s; }
.bc-read:not(.muted) { color: hsl(var(--foreground)); font-weight: 500; }
.bc { padding-top: 0; }
.bc-max { top: 44px; }
.bc-plot { touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.bc-plot.pick { cursor: pointer; }
.bc-col { transition: background-color .15s; border-radius: 4px; }
.bc-col.act { background: hsl(var(--primary) / .12); }
.bc-col.act .bc-bar { background: #2563eb; filter: saturate(1.2); }
.dark .bc-col.act .bc-bar { background: #bfdbfe; }
.stat-nav { gap: 8px; }
.stat-nav .center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.link-btn { background: none; border: 0; color: hsl(var(--primary)); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

/* своя тема */
.custom-theme { padding-top: 4px; }
.swatch-big { padding: 2px 0; }
.swatch-prev { padding: 14px; display: flex; flex-direction: column; gap: 12px; border: 1px solid hsl(var(--border)); transition: background-color .3s, border-radius .3s; }
.swatch-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; transition: background-color .3s, border-radius .3s; }
.swatch-btn { align-self: flex-start; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #fff; mix-blend-mode: normal; text-shadow: 0 1px 2px rgb(0 0 0 / .35); transition: background-color .3s, border-radius .3s; }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: 7px; flex: none; border: 1px solid hsl(var(--border)); }
.chip-sw { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; }
.mine-theme { padding: 0; overflow: hidden; }
.chip-main { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; padding: 4px 6px 4px 5px; cursor: pointer; }
.chip-x { border: 0; background: none; color: inherit; font: inherit; font-size: 16px; padding: 4px 10px 4px 4px; cursor: pointer; opacity: .6; }
.color-list { padding: 4px 16px; }
.color-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid hsl(var(--border)); }
.color-row:last-child { border-bottom: 0; }
.color-in { -webkit-appearance: none; appearance: none; width: 44px; height: 32px; padding: 0; border: 1px solid hsl(var(--border)); border-radius: 10px; background: none; cursor: pointer; overflow: hidden; }
.color-in::-webkit-color-swatch-wrapper { padding: 0; } .color-in::-webkit-color-swatch { border: 0; border-radius: 9px; } .color-in::-moz-color-swatch { border: 0; border-radius: 9px; }
.range { -webkit-appearance: none; appearance: none; width: 130px; height: 6px; border-radius: 9999px; background: hsl(var(--muted)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--primary)); border: 3px solid hsl(var(--background)); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--primary)); border: 3px solid hsl(var(--background)); }

.lesson-time { align-items: center; }
.att-sign { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 6px; border-radius: 9999px; font-size: 18px; font-weight: 700; line-height: 1; font-family: inherit; }
.att-sign.plus { color: hsl(var(--success)); background: hsl(var(--success) / .14); }
.att-sign.minus { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .14); }
.dark .att-sign.minus { color: #f87171; background: rgb(248 113 113 / .16); }
.att-sign.excused { color: #d97706; background: rgb(217 119 6 / .14); }

/* ═══════════ расписание v7.5 ═══════════ */
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson { --lc: var(--muted-foreground); gap: 12px; padding: 14px 14px 14px 12px; align-items: stretch; }
.lesson.t-lec { --lc: 217 91% 60%; } .lesson.t-pr { --lc: 142 62% 42%; } .lesson.t-lab { --lc: 28 92% 52%; } .lesson.t-exam { --lc: 350 80% 58%; }
.lesson-time { width: 46px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.lesson-time b { font-size: 16px; letter-spacing: -.01em; }
.lesson-bar { flex: none; width: 3px; border-radius: 9999px; background: hsl(var(--lc)); opacity: .9; }
.lesson-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lesson-top { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.lesson-top > :last-child:not(.lesson-tag) { margin-left: auto; }
.lesson-tag { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: hsl(var(--lc)); }
.lesson-name { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.lesson-meta { margin-top: 2px; gap: 4px 12px; }
.lesson.is-past .lesson-name, .lesson.is-past .lesson-time b { opacity: .6; }
.lesson.is-past .lesson-bar { opacity: .35; }
.lesson-gap { display: flex; align-items: center; gap: 10px; font-size: 11px; color: hsl(var(--muted-foreground)); padding: 0 4px; }
.lesson-gap::before, .lesson-gap::after { content: ""; flex: 1; height: 1px; background: hsl(var(--border)); }
.day-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 6px 2px 2px; }
.day-sum { font-size: 13px; margin: 0 2px 12px; }
.day-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 16px; text-align: center; border: 1px dashed hsl(var(--border)); border-radius: calc(var(--radius) + 4px); }
.day-empty-ic { font-size: 34px; margin-bottom: 4px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.att-sign { margin-top: 0; width: 26px; height: 26px; font-size: 18px; }
.att-sign.unknown { color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); font-size: 14px; font-weight: 600; }

/* кнопка и лист календаря */
.cal-open { width: 36px; height: 36px; border-radius: 12px; border: 1px solid hsl(var(--primary) / .25); background: hsl(var(--primary) / .08); color: hsl(var(--primary)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cal-open:active { transform: scale(.92); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { margin-bottom: 4px; } .cal-dow span { text-align: center; font-size: 11px; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; padding: 4px 0; }
.cal-cell { aspect-ratio: 1; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; cursor: pointer; padding: 0; }
.cal-cell.empty { pointer-events: none; }
.cal-day:hover { background: hsl(var(--accent)); }
.cal-day i { width: 4px; height: 4px; border-radius: 9999px; background: transparent; }
.cal-day.has i { background: hsl(var(--muted-foreground) / .7); }
.cal-day.old { color: hsl(var(--muted-foreground)); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 700; }
.cal-day.sel { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.cal-day.sel i { background: hsl(var(--primary-foreground) / .8); }
.cal-foot { margin-top: 14px; }

/* события: счётчик повторов, подробности */
.ev-count { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9999px; font-size: 11px; font-weight: 600; background: hsl(0 72% 51% / .14); color: hsl(0 72% 45%); vertical-align: 1px; }
.dark .ev-count { color: hsl(0 85% 72%); }
.ev-time { text-align: right; white-space: nowrap; }
.ev-row { cursor: pointer; transition: background-color .15s ease; }
.ev-row:active { background: hsl(var(--muted)); }
.ev-trace { max-height: 260px; overflow: auto; font-size: 11px; }
.ev-times { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.chips.wrap { flex-wrap: wrap; }

/* выбор людей для рассылки */
.pick-list { max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.user-row.is-picked { background: hsl(var(--primary) / .08); }
.pick-box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid hsl(var(--border)); display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.pick-box.on { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: scale(1.05); }
.stack-xs { display: flex; flex-direction: column; gap: 2px; }

/* статус в профиле: «в вузе» и срок сессии */
.pstat { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pstat-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: hsl(var(--muted) / .55); border: 1px solid hsl(var(--border)); position: relative; overflow: hidden; }
.pstat-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.pstat-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pstat-top { font-size: 12px; color: hsl(var(--muted-foreground)); }
.pstat-main { font-size: 18px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pstat-sub { font-size: 12px; color: hsl(var(--muted-foreground)); }
.pstat-tile.is-in { background: hsl(var(--success-bg)); border-color: hsl(var(--success) / .35); }
.pstat-tile.is-in .pstat-ic { background: hsl(var(--success) / .18); color: hsl(var(--success)); }
.pstat-tile.is-in .pstat-main { color: hsl(var(--success)); }
.pstat-tile.is-warn .pstat-ic { background: hsl(38 92% 50% / .18); color: hsl(38 92% 40%); }
.pstat-tile.is-bad .pstat-ic { background: hsl(var(--destructive) / .15); color: hsl(var(--destructive)); }
.pstat-tile.is-bad .pstat-main { color: hsl(var(--destructive)); }
.pstat-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: hsl(var(--border)); }
.pstat-bar > i { display: block; height: 100%; background: hsl(var(--success)); border-radius: 0 3px 3px 0; transition: width .6s ease; }
.pstat-tile.is-warn .pstat-bar > i { background: hsl(38 92% 50%); }
.pstat-tile.is-bad .pstat-bar > i { background: hsl(var(--destructive)); }
.pstat-live { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--success)); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 0 hsl(var(--success) / .5); animation: pstatPulse 2s infinite; }
@keyframes pstatPulse { 70% { box-shadow: 0 0 0 7px hsl(var(--success) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--success) / 0); } }
@media (prefers-reduced-motion: reduce) { .pstat-live { animation: none; } .pstat-bar > i { transition: none; } }

/* блоки пар: длинные названия и ФИО переносятся, а не вылезают за карточку */
.lesson-main { flex: 1 1 0; min-width: 0; }
.lesson-name, .lesson-meta span, .lesson-tag { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.lesson-meta { min-width: 0; }
.lesson-top { flex-wrap: wrap; row-gap: 2px; }
.lesson-list { padding-bottom: 16px; }
.snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9000; }
.snow-val { min-width: 44px; text-align: right; }

.inuni.in { color: hsl(var(--success)); font-weight: 600; }
.inuni.out { opacity: .85; }
.inuni.fresh { color: hsl(38 92% 42%); font-weight: 600; }
.inuni.unknown { opacity: .6; font-style: italic; }

/* поддержка */
.sup-item { display: flex; flex-direction: column; gap: 4px; width: 100%; box-sizing: border-box; text-align: left; font: inherit; color: inherit; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 12px 14px; cursor: pointer; min-width: 0; }
.sup-item:active { background: hsl(var(--muted)); }
.sup-dot { width: 9px; height: 9px; border-radius: 9999px; background: hsl(var(--primary)); flex: none; display: inline-block; }
.sup-chips, .sup-quick { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sup-quick { flex-direction: column; flex-wrap: nowrap; }
.sup-chip { font: inherit; font-size: 13px; line-height: 1.35; color: hsl(var(--foreground)); background: hsl(var(--muted)); border: 1px solid transparent; border-radius: 12px; padding: 8px 12px; cursor: pointer; text-align: left; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.sup-chip.on { background: hsl(var(--primary) / .12); border-color: hsl(var(--primary)); color: hsl(var(--primary)); font-weight: 600; }
.sup-subj { overflow-wrap: anywhere; min-width: 0; }
.sup-peer { align-items: center; gap: 12px; min-width: 0; }
.sup-closed { text-align: center; padding: 10px 12px; border-radius: 12px; background: hsl(var(--muted)); }
.sup-steps { display: flex; gap: 4px; margin-top: 2px; }
.sup-step { flex: 1; min-width: 0; font-size: 11px; color: hsl(var(--muted-foreground)); display: flex; flex-direction: column; gap: 4px; }
.sup-step i { height: 4px; border-radius: 9999px; background: hsl(var(--muted)); display: block; }
.sup-step.done i { background: hsl(var(--primary) / .5); }
.sup-step.now { color: hsl(var(--foreground)); font-weight: 600; }
.sup-step.now i { background: hsl(var(--primary)); }
.sup-step.bad { color: hsl(var(--destructive)); font-weight: 600; }
.sup-step.bad i { background: hsl(var(--destructive)); }
.sup-msgs { display: flex; flex-direction: column; gap: 8px; }
.sup-msg { max-width: 86%; box-sizing: border-box; padding: 8px 12px; border-radius: 16px; background: hsl(var(--muted)); align-self: flex-start; overflow-wrap: anywhere; }
.sup-msg.me { align-self: flex-end; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.sup-text { white-space: pre-wrap; }
.sup-who { font-size: 11px; font-weight: 600; opacity: .7; margin-bottom: 2px; }
.sup-time { font-size: 10px; opacity: .75; text-align: right; margin-top: 2px; display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.sup-msg.me .chat-tick.read { color: #bae6fd; }
.sup-event { align-self: center; max-width: 100%; text-align: center; font-size: 12px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .6); border-radius: 9999px; padding: 3px 10px; }
.sup-input { display: flex; gap: 8px; align-items: flex-end; }
.sup-bar { position: sticky; top: -4px; z-index: 3; background: hsl(var(--background)); padding: 4px 0 8px; margin-top: -4px; border-bottom: 1px solid hsl(var(--border)); gap: 8px; min-width: 0; }
.sup-foot { position: sticky; bottom: -20px; z-index: 3; background: hsl(var(--background)); padding: 10px 0 20px; margin-bottom: -4px; }
.sup-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.sup-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.sup-meta .truncate { min-width: 0; flex: 1; text-align: right; }
.sup-meta .badge { flex: none; }
.sup-item .row { min-width: 0; }
.px6-row { align-items: center; gap: 10px; }
.px6-left { font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.px6-left.ok { color: hsl(var(--success)); }
.px6-left.warn { color: hsl(38 92% 42%); }
.px6-left.bad { color: hsl(var(--destructive)); }
.svc-dot.warn { background: hsl(38 92% 50%); }
.xsmall { font-size: 11px; }
.seg { display: flex; gap: 4px; background: hsl(var(--muted)); border-radius: 12px; padding: 4px; }
.seg-btn { flex: 1; font: inherit; font-size: 13px; font-weight: 600; color: hsl(var(--muted-foreground)); background: transparent; border: 0; border-radius: 9px; padding: 8px 6px; cursor: pointer; }
.seg-btn.on { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
button.px6-row { cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: background .15s ease, transform .08s ease, border-color .15s ease; }
button.px6-row:hover { background: hsl(var(--muted)); border-color: hsl(var(--ring, var(--primary)) / .4); }
button.px6-row:active { transform: scale(.985); }