/* HelpDesk design system — ported from v0 admin dashboard */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap");

:root {
  color-scheme: light;
  --radius: 0.5rem;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --background: oklch(0.985 0.003 210);
  --foreground: oklch(0.24 0.02 235);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.972 0.004 220);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.24 0.02 235);
  --primary: oklch(0.52 0.085 185);
  --primary-foreground: oklch(0.99 0.005 190);
  --secondary: oklch(0.955 0.006 220);
  --secondary-foreground: oklch(0.3 0.02 235);
  --muted: oklch(0.965 0.005 220);
  --muted-foreground: oklch(0.52 0.018 235);
  --accent: oklch(0.94 0.02 190);
  --accent-foreground: oklch(0.32 0.05 190);
  --destructive: oklch(0.55 0.2 27);
  --destructive-foreground: oklch(0.99 0.005 20);
  --border: oklch(0.9 0.007 225);
  --input: oklch(0.9 0.007 225);
  --ring: oklch(0.52 0.085 185);
  --status-open: oklch(0.93 0.04 240);
  --status-open-fg: oklch(0.44 0.13 250);
  --status-work: oklch(0.93 0.06 75);
  --status-work-fg: oklch(0.48 0.12 65);
  --status-done: oklch(0.92 0.06 150);
  --status-done-fg: oklch(0.44 0.11 155);
  --status-cancel: oklch(0.93 0.006 235);
  --status-cancel-fg: oklch(0.48 0.02 235);
  --prio-high: oklch(0.93 0.06 25);
  --prio-high-fg: oklch(0.5 0.18 27);
  --prio-mid: oklch(0.94 0.05 75);
  --prio-mid-fg: oklch(0.5 0.12 65);
  --prio-low: oklch(0.94 0.01 235);
  --prio-low-fg: oklch(0.5 0.02 235);
  --shadow-sm: 0 1px 2px oklch(0.24 0.02 235 / 0.05);
}

html.dark {
  color-scheme: dark;
  --background: oklch(0.19 0.012 240);
  --foreground: oklch(0.94 0.006 220);
  --surface: oklch(0.23 0.014 240);
  --surface-2: oklch(0.26 0.015 240);
  --card: oklch(0.23 0.014 240);
  --card-foreground: oklch(0.94 0.006 220);
  --primary: oklch(0.7 0.1 185);
  --primary-foreground: oklch(0.18 0.02 200);
  --secondary: oklch(0.3 0.015 240);
  --secondary-foreground: oklch(0.92 0.006 220);
  --muted: oklch(0.28 0.014 240);
  --muted-foreground: oklch(0.68 0.015 225);
  --accent: oklch(0.34 0.03 190);
  --accent-foreground: oklch(0.9 0.03 190);
  --destructive: oklch(0.62 0.19 25);
  --destructive-foreground: oklch(0.98 0.005 20);
  --border: oklch(0.34 0.012 240);
  --input: oklch(0.36 0.013 240);
  --ring: oklch(0.7 0.1 185);
  --status-open: oklch(0.34 0.06 250);
  --status-open-fg: oklch(0.82 0.09 250);
  --status-work: oklch(0.37 0.06 70);
  --status-work-fg: oklch(0.85 0.09 80);
  --status-done: oklch(0.34 0.07 155);
  --status-done-fg: oklch(0.83 0.1 155);
  --status-cancel: oklch(0.32 0.008 240);
  --status-cancel-fg: oklch(0.78 0.012 235);
  --prio-high: oklch(0.36 0.09 27);
  --prio-high-fg: oklch(0.83 0.11 27);
  --prio-mid: oklch(0.37 0.07 70);
  --prio-mid-fg: oklch(0.85 0.1 80);
  --prio-low: oklch(0.32 0.008 240);
  --prio-low-fg: oklch(0.78 0.012 235);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-feature-settings: "cv01", "ss01";
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  margin: 0;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
img, svg { display: block; }
.num { font-variant-numeric: tabular-nums; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted-foreground); }
.line-clamp-1, .line-clamp-2 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }

/* Shell */
.app-shell { min-height: 100dvh; background: var(--background); }
.app-shell.has-sidebar { display: block; }

:root {
  --sidebar-w: 15.5rem;
  --sidebar-w-collapsed: 4rem;
  --topbar-h: 3.25rem;
}

/* Sidebar */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: width 0.2s ease, transform 0.2s ease;
}
html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-header {
  display: flex; align-items: center;
  height: var(--topbar-h);
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 0.625rem;
  min-width: 0; color: var(--foreground);
}
.sidebar-brand-text {
  display: flex; align-items: center; gap: 0.375rem; min-width: 0;
}
html[data-sidebar="collapsed"] .sidebar-header {
  justify-content: center;
  padding: 0 0.5rem;
}
html[data-sidebar="collapsed"] .sidebar-brand {
  justify-content: center;
}
html[data-sidebar="collapsed"] .sidebar-brand-text { display: none; }

.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0.75rem 0.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.sidebar-section { display: flex; flex-direction: column; gap: 0.125rem; }
.sidebar-section-title {
  padding: 0.25rem 0.625rem 0.375rem;
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
html[data-sidebar="collapsed"] .sidebar-section-title {
  height: 0; margin: 0; padding: 0; overflow: hidden; opacity: 0;
}

.sidebar-link {
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%; border: 0; border-radius: calc(var(--radius) - 1px);
  padding: 0.5rem 0.625rem;
  background: transparent; cursor: pointer;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground); text-align: left;
  transition: background 0.15s, color 0.15s;
}
.sidebar-link:hover { background: var(--muted); color: var(--foreground); }
.sidebar-link.active {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}
.sidebar-link svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.sidebar-link-label { min-width: 0; flex: 1; display: flex; align-items: center; gap: 0.375rem; }
html[data-sidebar="collapsed"] .sidebar-link {
  justify-content: center; padding: 0.625rem;
}
html[data-sidebar="collapsed"] .sidebar-link-label { display: none; }

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.75rem 0.625rem;
}
.sidebar-account { position: relative; }
.sidebar-account-trigger {
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%; list-style: none; cursor: pointer;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  padding: 0.5rem 0.625rem;
  background: var(--surface-2);
  color: var(--foreground);
}
.sidebar-account-trigger::-webkit-details-marker { display: none; }
.sidebar-account-trigger:hover { background: var(--muted); }
.sidebar-account[open] .sidebar-account-trigger {
  background: var(--muted);
  border-color: color-mix(in oklab, var(--border) 70%, var(--foreground));
}
.sidebar-avatar { width: 2rem; height: 2rem; font-size: 0.8125rem; }
.sidebar-account-text {
  min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25;
}
.sidebar-account-name {
  font-size: 0.8125rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-account-meta {
  font-size: 0.6875rem; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-account-chevron {
  width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground);
}
html[data-sidebar="collapsed"] .sidebar-account-text,
html[data-sidebar="collapsed"] .sidebar-account-chevron { display: none; }
html[data-sidebar="collapsed"] .sidebar-account-trigger {
  justify-content: center; padding: 0.5rem; width: auto; margin: 0 auto;
}

.sidebar-account-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 0.5rem);
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
  background: var(--card); box-shadow: 0 8px 24px oklch(0 0 0 / 0.12);
  z-index: 5; overflow: hidden; min-width: 14rem;
}
html[data-sidebar="collapsed"] .sidebar-account-menu {
  left: calc(100% + 0.5rem); right: auto; bottom: 0; width: 15rem;
}
.sidebar-account-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-account-head-text { min-width: 0; }
.sidebar-account-head-title {
  font-size: 0.8125rem; font-weight: 600; color: var(--foreground);
}
.sidebar-account-head-email {
  margin-top: 0.125rem;
  font-size: 0.75rem; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-account-theme { flex-shrink: 0; width: 2rem; height: 2rem; }
.sidebar-account-links {
  display: flex; flex-direction: column; padding: 0.375rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-account-foot {
  padding: 0.375rem;
}
.sidebar-account-foot form { margin: 0; }
.sidebar-account-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent; padding: 0.5rem 0.625rem;
  font-size: 0.8125rem; font-weight: 500; cursor: pointer; text-align: left;
  color: var(--foreground); text-decoration: none;
}
.sidebar-account-item:hover { background: var(--muted); }
.sidebar-account-item svg { width: 1rem; height: 1rem; }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 35;
  border: 0;
  background: oklch(0 0 0 / 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html.dark .sidebar-backdrop {
  background: oklch(0 0 0 / 0.65);
}

/* Topbar */
.app-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.app-topbar-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem; font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-toggle { flex-shrink: 0; }

.app-frame {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app-shell.has-sidebar .app-frame {
  margin-left: var(--sidebar-w);
  transition: margin-left 0.2s ease;
}
html[data-sidebar="collapsed"] .app-shell.has-sidebar .app-frame {
  margin-left: var(--sidebar-w-collapsed);
}

.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--foreground); }
.brand-mark {
  display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center;
  border-radius: calc(var(--radius) - 1px); background: var(--primary); color: var(--primary-foreground);
  flex-shrink: 0;
}
.brand-mark svg { width: 1rem; height: 1rem; }
.brand-text { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.env-badge {
  border: 1px solid var(--border); border-radius: 0.25rem; padding: 0 0.25rem;
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

.nav-user-name { font-size: 0.875rem; font-weight: 500; }
.nav-user-role { font-size: 0.75rem; color: var(--muted-foreground); }

.main-content {
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  flex: 1;
}
@media (min-width: 768px) {
  .main-content { padding: 1.75rem 1.5rem 2.5rem; }
}
.main-content.narrow { max-width: 42rem; }
.main-content.login-main {
  max-width: none; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
}

/* Mobile: off-canvas sidebar */
@media (max-width: 767px) {
  .sidebar {
    width: min(18rem, 88vw);
    transform: translateX(-105%);
    box-shadow: none;
  }
  html[data-sidebar-mobile="open"] .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 24px oklch(0 0 0 / 0.18);
  }
  /* On mobile always show labels (ignore desktop collapsed). */
  html[data-sidebar="collapsed"] .sidebar { width: min(18rem, 88vw); }
  html[data-sidebar="collapsed"] .sidebar-header {
    justify-content: flex-start;
    padding: 0 0.75rem;
  }
  html[data-sidebar="collapsed"] .sidebar-brand { justify-content: flex-start; }
  html[data-sidebar="collapsed"] .sidebar-brand-text { display: flex; }
  html[data-sidebar="collapsed"] .sidebar-section-title {
    display: block; height: auto; margin: 0; padding: 0.25rem 0.625rem 0.375rem;
    overflow: visible; opacity: 1;
  }
  html[data-sidebar="collapsed"] .sidebar-link-label { display: flex; }
  html[data-sidebar="collapsed"] .sidebar-link {
    justify-content: flex-start; padding: 0.5rem 0.625rem;
  }
  html[data-sidebar="collapsed"] .sidebar-account-text { display: flex; }
  html[data-sidebar="collapsed"] .sidebar-account-chevron { display: block; }
  html[data-sidebar="collapsed"] .sidebar-account-trigger {
    justify-content: flex-start; padding: 0.5rem 0.625rem; width: 100%; margin: 0;
  }
  html[data-sidebar="collapsed"] .sidebar-account-menu {
    left: 0; right: 0; bottom: calc(100% + 0.5rem); width: auto;
  }

  .app-shell.has-sidebar .app-frame,
  html[data-sidebar="collapsed"] .app-shell.has-sidebar .app-frame {
    margin-left: 0;
  }
  html[data-sidebar-mobile="open"] .sidebar-backdrop { display: block; }
  body.sidebar-lock { overflow: hidden; }
}

/* Legacy tabbar unused */
.tabbar { display: none !important; }

/* Scroll to top */
.scroll-top {
  position: fixed;
  z-index: 28;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity .2s, transform .2s, background .15s, color .15s;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.scroll-top:hover {
  background: var(--muted);
  color: var(--primary);
}
.scroll-top:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.scroll-top svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) {
  .scroll-top { bottom: 1.5rem; right: 1.5rem; }
}

/* Sheet */
.sheet-root { position: fixed; inset: 0; z-index: 50; display: none; }
.sheet-root.is-open { display: block; }
@media (min-width: 768px) { .sheet-root.is-open { display: none; } }
.sheet-backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in oklab, var(--foreground) 40%, transparent); backdrop-filter: blur(2px); }
.sheet-panel {
  position: absolute; inset-inline: 0; bottom: 0;
  border-radius: 1rem 1rem 0 0; border-top: 1px solid var(--border);
  background: var(--card); padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.sheet-handle { width: 2.5rem; height: 0.25rem; margin: 0 auto 0.75rem; border-radius: 999px; background: var(--border); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.sheet-menu { display: flex; flex-direction: column; gap: 0.25rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.sheet-item {
  display: flex; width: 100%; align-items: center; gap: 0.625rem;
  border: 0; border-radius: calc(var(--radius) - 1px); background: transparent;
  padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; text-align: left;
}
.sheet-item:hover { background: var(--muted); }
.sheet-item.danger {
  background: transparent;
  border-color: transparent;
  color: var(--destructive);
}
.sheet-item.danger:hover,
.sheet-item.danger:active {
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
}
.sheet-item svg { width: 1rem; height: 1rem; }
.sheet-item-row { justify-content: space-between; }

/* Buttons — единая шкала (как kit): sm 2rem / md 2.5→2.25 / lg 2.75 */
.btn,
.button-link,
.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  background: transparent;
  color: var(--foreground);
  transition: background .15s, color .15s, border-color .15s, filter .15s, opacity .15s;
}
@media (min-width: 768px) {
  .btn:not(.btn-sm):not(.btn-lg):not(.btn-block),
  .button-link:not(.btn-sm):not(.btn-lg):not(.button-link-secondary):not(.filters-submit),
  .hd-btn:not(.btn-sm):not(.hd-btn-sm):not(.btn-lg):not(.hd-btn-lg) {
    height: 2.25rem;
  }
}
.btn:focus-visible,
.button-link:focus-visible,
.hd-btn:focus-visible,
.icon-btn:focus-visible,
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.btn:disabled,
.button-link.is-disabled,
.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.btn svg,
.button-link svg,
.hd-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke: currentColor;
}

/* sizes */
.btn-sm,
.hd-btn-sm,
.button-link-secondary,
.btn-secondary,
.filters-submit,
.btn-danger,
.cd-danger-btn {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}
.btn-lg,
.hd-btn-lg {
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
}
.btn-block {
  width: 100%;
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
}

/* variants */
.btn-primary,
.button-link-primary,
.hd-btn-primary,
.filters-submit {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: transparent;
}
.btn-primary:hover:not(:disabled),
.button-link-primary:hover,
.hd-btn-primary:hover:not(:disabled),
.filters-submit:hover {
  filter: brightness(0.95);
}
.btn-secondary,
.button-link:not(.button-link-primary):not(.button-link-secondary):not(.filters-submit) {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled),
.button-link:not(.button-link-primary):not(.button-link-secondary):not(.filters-submit):hover {
  background: color-mix(in oklab, var(--secondary) 70%, var(--muted));
}
.btn-outline,
.hd-btn-outline,
.button-link-secondary {
  background: var(--surface);
  color: var(--foreground);
  border-color: var(--border);
}
.btn-outline:hover:not(:disabled),
.hd-btn-outline:hover:not(:disabled),
.button-link-secondary:hover {
  background: var(--muted);
  filter: none;
}
.btn-ghost,
.hd-btn-ghost,
.create-cancel,
.linkish {
  background: transparent;
  color: var(--foreground);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled),
.hd-btn-ghost:hover:not(:disabled),
.create-cancel:hover,
.linkish:hover {
  background: var(--muted);
  filter: none;
}
.btn-danger,
.cd-danger-btn,
button.danger:not(.sheet-item) {
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
  border-color: color-mix(in oklab, var(--destructive) 25%, transparent);
}
.btn-danger:hover:not(:disabled),
.cd-danger-btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--destructive) 20%, transparent);
  filter: none;
}

button.icon-btn, .icon-btn, .theme-toggle:not(.sidebar-link) {
  display: inline-flex; width: 2.25rem; height: 2.25rem; padding: 0;
  align-items: center; justify-content: center;
  border-radius: calc(var(--radius) - 1px); border: 1px solid var(--border);
  background: var(--surface); color: var(--muted-foreground); cursor: pointer;
  filter: none; font-size: 0;
}
button.icon-btn:hover, .icon-btn:hover, .theme-toggle:not(.sidebar-link):hover {
  background: var(--muted); color: var(--foreground); filter: none;
}
.icon-btn svg { width: 1rem; height: 1rem; display: block; }
.theme-toggle:not(.sidebar-link) svg { width: 1rem; height: 1rem; }
.theme-toggle .theme-icon-sun { display: block; }
.theme-toggle .theme-icon-moon { display: none; }
html.dark .theme-toggle .theme-icon-sun { display: none; }
html.dark .theme-toggle .theme-icon-moon { display: block; }
.sidebar-link.theme-toggle {
  font-size: 0.875rem;
}
.sidebar-link.theme-toggle .theme-icon-sun,
.sidebar-link.theme-toggle .theme-icon-moon { width: 1.125rem; height: 1.125rem; }
.sidebar-account-theme.theme-toggle {
  font-size: 0;
}
.ticket-actions-spaced { margin-top: 1rem; }
.ms-auto { margin-left: auto; }
.danger-text { color: var(--destructive); }
.login-screen { min-height: 100dvh; background: var(--background); }

/* Forms */
.stack, .field-stack, form.stack, .comment-form, .resolve-form, .assign-form {
  display: flex; flex-direction: column; gap: 1rem;
}
label, .field {
  display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; font-weight: 500;
}
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.field-hint { font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  width: 100%; border-radius: calc(var(--radius) - 1px); border: 1px solid var(--input);
  background: var(--surface); padding: 0 0.75rem; font-size: 0.875rem;
  box-shadow: var(--shadow-sm); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { height: 2.5rem; }
@media (min-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { height: 2.25rem; }
}
textarea { min-height: 6rem; padding: 0.5rem 0.75rem; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
  box-shadow: none;
}
.ui-select {
  position: relative;
  display: block;
}
.ui-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  width: 100%;
}
.ui-select::after {
  content: ""; position: absolute; right: 0.85rem; top: 50%; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--muted-foreground); border-bottom: 2px solid var(--muted-foreground);
  transform: translateY(-60%) rotate(45deg); pointer-events: none;
}

/* Surfaces */
.card, .create-box, .filters-panel, .detail, .comments, .client-tickets, section.comments {
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--card);
  box-shadow: var(--shadow-sm);
}
.create-box, .detail, .comments, .client-tickets { padding: 1.25rem; }
@media (min-width: 640px) { .create-box { padding: 1.5rem; } }

.create-page { display: flex; flex-direction: column; gap: 1.25rem; max-width: 42rem; }
.create-page-head { display: flex; flex-direction: column; gap: 0.75rem; }
.create-page-head .back-link { margin-bottom: 0; }
.create-page-title {
  margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
}
.create-form { display: flex; flex-direction: column; gap: 1.25rem; }
.create-form-actions {
  display: flex; align-items: center; gap: 0.5rem;
  border-top: 1px solid var(--border); padding-top: 1rem;
}
.edit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}
.page-header {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .page-header {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  }
}
.page-header h1, .page-title {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
}
.page-desc { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.page-count {
  display: inline-flex; border-radius: calc(var(--radius) - 1px); background: var(--muted);
  padding: 0.125rem 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  vertical-align: middle;
}
.page-header .button-link-primary { align-self: flex-start; }
@media (min-width: 640px) {
  .page-header .button-link-primary { align-self: center; }
}
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.section-head h2 { font-size: 0.875rem; font-weight: 600; }
.section-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-bottom: 1px solid var(--border); padding: 0.75rem 1rem;
}
.section-card-head h2 { font-size: 0.875rem; font-weight: 600; }
.section-card-body { padding: 1rem; }
.back-link { margin-bottom: 1rem; }
.back-link a {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  transition: color .15s;
}
.back-link a:hover { color: var(--foreground); }
.back-link svg { width: 1rem; height: 1rem; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: calc(var(--radius) - 1px); padding: 0.125rem 0.5rem;
  font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; white-space: nowrap;
  background: var(--muted); color: var(--muted-foreground);
}
.badge .dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; }
.badge svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.badge-open { background: var(--status-open); color: var(--status-open-fg); }
.badge-work { background: var(--status-work); color: var(--status-work-fg); }
.badge-done { background: var(--status-done); color: var(--status-done-fg); }
.badge-cancel { background: var(--status-cancel); color: var(--status-cancel-fg); }
.badge-high, .badge.priority-high { background: var(--prio-high); color: var(--prio-high-fg); }
.badge-mid, .badge.priority-mid, .badge.priority { background: var(--prio-mid); color: var(--prio-mid-fg); }
.badge-low, .badge.priority-low { background: var(--prio-low); color: var(--prio-low-fg); }
.badge-accent, .badge.caller { background: var(--accent); color: var(--accent-foreground); }
.badge-neutral { background: var(--muted); color: var(--muted-foreground); }

/* Filters */
.filters-panel { overflow: visible; margin-bottom: 1.25rem; }
.filters-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; list-style: none;
  background: transparent; border: 0; color: var(--foreground);
}
.filters-toggle::-webkit-details-marker { display: none; }
.filters-toggle-left { display: inline-flex; align-items: center; gap: 0.5rem; }
.filters-toggle-left svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
.filters-count {
  display: inline-flex; border-radius: 0.25rem; background: color-mix(in oklab, var(--primary) 15%, transparent);
  padding: 0.125rem 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--primary);
}
.filters {
  border-top: 1px solid var(--border); padding: 1rem; display: grid; gap: 1rem;
  overflow: visible;
  transform: none;
  filter: none;
}
.filters select,
.filters input {
  transform: none;
}
.filters-row { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .filters-row-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .filters-row-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filters-row-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.filters-row-search { grid-template-columns: 1fr; }
.filters-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.25rem; }
.filter-range {
  margin: 0; padding: 0.75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px);
  display: grid; gap: 0.75rem;
}
@media (min-width: 480px) { .filter-range { grid-template-columns: 1fr 1fr; } }
.filter-range legend { padding: 0 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* Tables & cards */
.table-wrap {
  display: none; overflow: visible; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .table-wrap { display: block; } }
/* Задачи: таблица только когда реально влезает, иначе карточки */
.table-wrap.tickets-table-wrap { display: none; }
@media (min-width: 1000px) { .table-wrap.tickets-table-wrap { display: block; } }
.table-wrap.always { display: block; overflow-x: auto; }
.tickets-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tickets-table:not(.clients-table) { table-layout: fixed; }
.tickets-table th {
  padding: 0.625rem 0.75rem; text-align: left; font-size: 0.75rem; font-weight: 500;
  color: var(--muted-foreground); background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.tickets-table th:first-child, .tickets-table td:first-child { padding-left: 1rem; }
.tickets-table th:last-child, .tickets-table td:last-child { padding-right: 1rem; }
.tickets-table td {
  padding: 0.75rem; vertical-align: middle; border-bottom: 1px solid var(--border);
}
.tickets-table tr:last-child td { border-bottom: 0; }
.tickets-table tbody tr:hover td { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.tickets-table:not(.clients-table) .col-main { width: 36%; }
.tickets-table:not(.clients-table) .col-status { width: 11.5rem; }
.tickets-table:not(.clients-table) .col-priority { width: 6.75rem; }
.tickets-table:not(.clients-table) .col-assignee { width: 7.5rem; }
.tickets-table:not(.clients-table) .col-updated { width: 8.75rem; }
.tickets-table:not(.clients-table) .col-status,
.tickets-table:not(.clients-table) .col-priority,
.tickets-table:not(.clients-table) .col-assignee {
  white-space: nowrap;
}
.tickets-table:not(.clients-table) .col-status .badge,
.tickets-table:not(.clients-table) .col-priority .badge {
  max-width: 100%;
}
.tickets-table:not(.clients-table) th,
.tickets-table:not(.clients-table) td {
  padding: 0.625rem 0.5rem;
}
.tickets-table:not(.clients-table) th:first-child,
.tickets-table:not(.clients-table) td:first-child { padding-left: 0.875rem; }
.tickets-table:not(.clients-table) th:last-child,
.tickets-table:not(.clients-table) td:last-child { padding-right: 0.875rem; }
.tickets-table:not(.clients-table) .col-assignee {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-desc { position: relative; }
.ticket-desc-preview { color: var(--muted-foreground); }
.ticket-row-link:hover .ticket-desc-preview,
.ticket-card:hover .ticket-desc-preview { color: var(--foreground); }
.ticket-desc-pop {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  width: max(100%, 22rem);
  max-width: min(32rem, 70vw);
  max-height: 14rem;
  overflow: auto;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 8px 24px color-mix(in oklab, #000 22%, transparent);
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (hover: hover) and (pointer: fine) {
  .tickets-table tbody tr:hover .ticket-desc.is-clamped .ticket-desc-pop,
  .ticket-card:hover .ticket-desc.is-clamped .ticket-desc-pop {
    display: block;
  }
}
.mono { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }
.nowrap { white-space: nowrap; }
.italic { font-style: italic; }
.min-w-0 { min-width: 0; }
.ticket-row-link { display: block; min-width: 0; }
.ticket-row-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.125rem; min-width: 0; }
.ticket-row-client {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-cards { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1000px) { .ticket-cards { display: none; } }
.ticket-card {
  display: flex; flex-direction: column; gap: 0.625rem;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--card);
  padding: 0.875rem; box-shadow: var(--shadow-sm); color: inherit;
}
.ticket-card:active { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.ticket-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ticket-card-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ticket-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border-top: 1px solid var(--border); padding-top: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground);
}

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  border-radius: var(--radius); border: 1px dashed var(--border); background: var(--surface-2);
  padding: 3.5rem 1.5rem; text-align: center;
}
.empty-state p { font-size: 0.875rem; font-weight: 600; }
.empty-state .muted { font-weight: 400; max-width: 24rem; margin-top: 0.25rem; }
.empty { padding: 1rem 0; }

.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem;
}
.pagination-actions { display: flex; gap: 0.5rem; }

/* Detail (legacy + client/user cards) */
.ticket-id { margin: 0 0 0.35rem; font-size: 0.875rem; }
.ticket-id code { font-family: var(--font-mono); font-size: 0.8125rem; }
.detail > h1 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.ticket-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-bottom: 1rem; font-size: 0.875rem;
}
.description-block { margin: 1rem 0; }
.description-block h2, .comments h2 {
  margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground);
}
.description-panel {
  max-height: min(50vh, 22rem); overflow: auto; padding: 0.9rem 1rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); background: var(--surface-2);
}
.description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; margin: 0; text-wrap: pretty; }
.comments { margin-top: 1.25rem; }
.comments h2 { color: var(--foreground); font-size: 0.875rem; margin-bottom: 1rem; }
.comment { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.comment:last-of-type { border-bottom: 0; }
.comment-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); margin-bottom: 0.35rem; }
.comment-body { white-space: pre-wrap; line-height: 1.5; margin: 0; font-size: 0.875rem; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ticket-actions form { margin: 0; }

/* Ticket detail — 1:1 with mockup */
.ticket-detail { display: flex; flex-direction: column; gap: 1.25rem; }
.td-head { display: flex; flex-direction: column; gap: 0.75rem; }
.td-head .back-link { margin-bottom: 0; }
.td-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.td-code {
  margin: 0; font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--foreground); overflow-wrap: anywhere;
}
.td-grid { display: grid; gap: 1.25rem; align-items: start; }
.td-main { display: flex; flex-direction: column; gap: 1.25rem; order: 2; }
.td-side {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.td-side > * { min-width: 0; }
/* Планшет: мета и история рядом только при свёрнутом сайдбаре (хватает ширины) */
@media (min-width: 768px) and (max-width: 1023px) {
  html[data-sidebar="collapsed"] .td-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
@media (min-width: 1024px) {
  .td-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .td-main { order: 1; }
  .td-side { order: 2; }
}
.td-card {
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-sm); padding: 1rem;
}
@media (min-width: 640px) { .td-card { padding: 1.25rem; } }
.td-card-title {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground);
}
.td-card-title svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.td-client-tickets-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.td-client-tickets-head .td-card-title { margin: 0; }
.td-history .td-card-title { margin-bottom: 0.75rem; }
.td-history .td-event { padding-bottom: 0.75rem; }
.td-history .td-event-msg { font-size: 0.8125rem; line-height: 1.35; }
.td-history-more { margin-top: 0.25rem; }
.td-history-more > summary {
  cursor: pointer; list-style: none;
  font-size: 0.8125rem; font-weight: 500; color: var(--primary);
  padding: 0.25rem 0;
}
.td-history-more > summary::-webkit-details-marker { display: none; }
.td-history-more > summary::before {
  content: "▸"; display: inline-block; margin-right: 0.35rem;
  transition: transform 0.15s ease;
}
.td-history-more[open] > summary::before { transform: rotate(90deg); }
.td-history-more[open] > summary { margin-bottom: 0.75rem; }
.td-history-more .td-timeline { margin-top: 0; }
.td-count { font-size: 0.75rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.td-desc {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.625; text-wrap: pretty; color: var(--foreground);
}
.td-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.td-actions form { margin: 0; }

.td-resolve-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.td-resolve {
  display: none; margin-top: 1rem; padding: 1rem;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2);
}
.td-resolve-toggle:checked ~ .td-resolve { display: block; }
.td-stack { display: flex; flex-direction: column; gap: 1rem; }
.td-fieldset { margin: 0; padding: 0; border: 0; }
.td-fieldset legend {
  padding: 0; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--foreground);
}
.td-choice-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .td-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.td-choice {
  position: relative; display: block; margin: 0; padding: 0; cursor: pointer; font-weight: 500;
}
.td-choice input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  border: 0; background: none; box-shadow: none; padding: 0;
}
.td-choice span {
  display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center;
  border-radius: calc(var(--radius) - 1px); border: 1px solid var(--border);
  background: var(--surface); padding: 0.5rem 0.75rem; font-size: 0.875rem;
  color: var(--muted-foreground); transition: background .15s, color .15s, border-color .15s;
}
.td-choice:hover span { color: var(--foreground); }
.td-choice input:checked + span {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
}
.td-choice input:focus-visible + span {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.td-field { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.td-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.td-hint { font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }
.td-resolve-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.td-assign { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ticket-detail button.hd-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.td-comments { display: flex; flex-direction: column; gap: 0.75rem; }
.td-comment {
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-2); padding: 0.75rem;
}
.td-comment-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem;
}
.td-comment-author { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.td-comment-time { font-size: 0.75rem; color: var(--muted-foreground); }
.td-comment-body {
  margin: 0; font-size: 0.875rem; line-height: 1.625; white-space: pre-wrap; color: var(--foreground);
}
.td-empty { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); }
.td-comment-form {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
}
.td-comment-send { display: flex; justify-content: flex-end; }

.td-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.td-event { display: flex; gap: 0.75rem; padding-bottom: 1rem; }
.td-event:last-child { padding-bottom: 0; }
.td-event:last-child .td-line { display: none; }
.td-rail { display: flex; flex-direction: column; align-items: center; width: 0.5rem; flex-shrink: 0; }
.td-dot {
  margin-top: 0.35rem; width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: var(--primary); flex-shrink: 0;
}
.td-line { width: 1px; flex: 1; min-height: 0.75rem; margin-top: 0.25rem; background: var(--border); }
.td-event-body { margin-top: -0.125rem; min-width: 0; }
.td-event-msg { margin: 0; font-size: 0.875rem; color: var(--foreground); }
.td-event-meta { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); }
.td-event-actor { font-weight: 500; color: var(--foreground); }

.td-meta { padding: 1rem; overflow: hidden; }
.td-meta-list { margin: 0; display: flex; flex-direction: column; font-size: 0.875rem; }
.td-meta-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.625rem 0; border-bottom: 1px solid var(--border);
}
.td-meta-row:first-child { padding-top: 0; }
.td-meta-row:last-child { padding-bottom: 0; border-bottom: 0; }
.td-meta-row dt {
  font-size: 0.75rem; color: var(--muted-foreground);
  flex: 0 1 auto; max-width: 45%; padding-top: 0.2rem;
}
.td-meta-row dd {
  margin: 0; text-align: right; min-width: 0; flex: 1 1 auto;
  display: flex; justify-content: flex-end; flex-wrap: wrap;
}
.td-meta-row dd .badge,
.td-meta-row dd a.badge {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.td-link { font-weight: 500; color: var(--primary); }
.td-link:hover { text-decoration: none; }
.td-assignee {
  display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; color: var(--foreground);
  min-width: 0; overflow-wrap: anywhere;
}
.td-assignee svg { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); flex-shrink: 0; }
a.badge { color: inherit; }

/* Client layout (legacy) */
.client-layout {
  display: grid; gap: 1.25rem; align-items: start;
}
@media (min-width: 900px) {
  .client-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.client-tickets-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.client-tickets-table td, .client-tickets-table th {
  padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--border); text-align: left;
}

/* Client detail (mockup) */
.cd-head { display: flex; flex-direction: column; gap: 0.75rem; }
.cd-head .back-link { margin-bottom: 0; }
.cd-title-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.cd-identity { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.cd-avatar {
  display: inline-flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: calc(var(--radius) - 1px); background: var(--muted); color: var(--muted-foreground);
}
.cd-avatar svg { width: 1.25rem; height: 1.25rem; }
.cd-name { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.cd-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.cd-address {
  display: flex; align-items: flex-start; gap: 0.375rem;
  margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--muted-foreground);
  line-height: 1.4; text-wrap: pretty;
}
.cd-address svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; margin-top: 0.1rem; }
.cd-head-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.cd-edit,
.cd-wiki-btn { gap: 0.5rem; }
.cd-edit svg,
.cd-wiki-btn svg { width: 1rem; height: 1rem; }

.cd-grid {
  display: grid; gap: 1.25rem;
}
.cd-contacts {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .cd-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.cd-section {
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cd-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-bottom: 1px solid var(--border); padding: 0.75rem 1rem;
}
.cd-section-head h2 { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.cd-section-desc { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); }
.cd-section-body { padding: 1rem; }
.cd-notes { margin: 0; font-size: 0.875rem; line-height: 1.625; text-wrap: pretty; white-space: pre-wrap; }
.cd-link { font-size: 0.875rem; font-weight: 500; color: var(--primary); }
.cd-link:hover { text-decoration: none; }

.cd-phones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* ~4 строки номера + отступы между ними */
  max-height: calc(4 * 3.25rem + 3 * 0.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cd-phones::-webkit-scrollbar { display: none; }
.cd-phone {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-radius: calc(var(--radius) - 1px); border: 1px solid var(--border);
  background: var(--surface-2); padding: 0.5rem 0.75rem;
}
.cd-phone-main { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.cd-phone-main > svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
.cd-phone-num { font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; }
.cd-phone-label { font-size: 0.75rem; color: var(--muted-foreground); }
.cd-phone form { margin: 0; display: flex; }
button.cd-phone-del {
  display: inline-flex; width: 2.25rem; height: 2.25rem; padding: 0;
  align-items: center; justify-content: center;
  border: 0; border-radius: calc(var(--radius) - 1px);
  background: transparent; color: var(--muted-foreground); cursor: pointer;
  filter: none; font-size: inherit;
}
button.cd-phone-del:hover {
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive); filter: none;
}
button.cd-phone-del svg { width: 1rem; height: 1rem; display: block; }

.cd-phone-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.cd-phone-add input.cd-phone-input,
.cd-phone-add input.cd-phone-label-input {
  box-sizing: border-box;
  height: 2.25rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px);
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  box-shadow: none;
}
.cd-phone-add input.cd-phone-input {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
.cd-phone-add input.cd-phone-label-input {
  width: 100%;
  min-width: 0;
}
.cd-phone-add input::placeholder {
  color: var(--muted-foreground);
}
button.cd-phone-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: calc(var(--radius) - 1px);
  border: 0;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  filter: none;
  box-shadow: none;
}
button.cd-phone-add-btn:hover {
  background: color-mix(in oklab, var(--muted) 70%, var(--secondary));
  color: var(--foreground);
  filter: none;
}
button.cd-phone-add-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

.cd-tickets { display: flex; flex-direction: column; }
.cd-ticket {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border); color: inherit;
}
.cd-ticket:first-child { padding-top: 0; }
.cd-ticket:last-child { padding-bottom: 0; border-bottom: 0; }
.cd-ticket:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.cd-ticket-main { min-width: 0; }
.cd-ticket-meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: var(--muted-foreground);
}
.cd-ticket-desc { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--foreground); }
.cd-ticket-badges { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
@media (max-width: 639px) {
  .cd-ticket-badges .badge-high,
  .cd-ticket-badges .badge-mid,
  .cd-ticket-badges .badge-low { display: none; }
}
.cd-ticket-chevron { width: 1rem; height: 1rem; color: var(--muted-foreground); }

/* Danger zone (clients + users) */
.danger-zone,
.cd-danger,
.ud-danger {
  display: flex; flex-direction: column; gap: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--destructive) 25%, transparent);
  background: var(--card); padding: 1.25rem; box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) {
  .cd-danger {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem;
  }
}
.danger-zone-text h2,
.cd-danger-text h2,
.ud-danger-text h2 { margin: 0; font-size: 0.875rem; font-weight: 600; }
.danger-zone-text p,
.cd-danger-text p,
.ud-danger-text p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }
.danger-zone form,
.cd-danger form,
.ud-danger form { margin: 0; }
.ud-danger-btn { align-self: flex-start; }
.client-name-cell {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--foreground);
  min-width: 0; max-width: 100%;
}
.client-name-cell:hover .client-name-text { text-decoration: none; }
.client-kind-icon {
  width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground);
}
.client-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clients-table-wrap { display: none; }
@media (min-width: 1000px) { .clients-table-wrap { display: block; } }
.clients-table { table-layout: fixed; width: 100%; }
.clients-table th:nth-child(1),
.clients-table td:nth-child(1) { width: 40%; }
.clients-table th:nth-child(2),
.clients-table td:nth-child(2) { width: 18%; }
.clients-table th:nth-child(3),
.clients-table td:nth-child(3),
.clients-table th:nth-child(4),
.clients-table td:nth-child(4) { width: 21%; }
.clients-table td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clients-table .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.client-cards { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1000px) { .client-cards { display: none; } }
.client-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 0.875rem;
  color: inherit;
}
.client-card:active { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.client-card-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.client-card-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 1px);
  background: var(--surface-2);
  color: var(--muted-foreground);
}
.client-card-icon svg { width: 1rem; height: 1rem; }
.client-card-text { min-width: 0; }
.client-card-name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-card-phone {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Users list */
.users-create-disabled {
  opacity: 0.7; pointer-events: none; cursor: not-allowed;
  background: var(--muted) !important; color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
}
.users-info-note {
  display: flex; align-items: flex-start; gap: 0.625rem;
  border-radius: calc(var(--radius) - 1px); border: 1px solid var(--border);
  background: var(--surface-2); padding: 0.625rem 0.75rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}
.users-info-note svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; }
.users-table-wrap { display: none; }
@media (min-width: 1000px) { .users-table-wrap { display: block; } }
.users-table { table-layout: fixed; }
.users-table th:nth-child(1),
.users-table td:nth-child(1) { width: 28%; }
.users-table th:nth-child(2),
.users-table td:nth-child(2) { width: 34%; }
.users-table th:nth-child(3),
.users-table td:nth-child(3) { width: 22%; }
.users-table th:nth-child(4),
.users-table td:nth-child(4) { width: 16%; }
.users-table td {
  overflow: hidden;
}
.user-name-cell {
  display: flex; align-items: center; gap: 0.625rem; min-width: 0; max-width: 100%;
  font-weight: 500; color: var(--foreground);
}
.user-name-cell:hover .user-name-text { text-decoration: none; }
.user-avatar {
  display: inline-flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary); font-size: 0.75rem; font-weight: 600; line-height: 1;
}
img.user-avatar {
  display: block; object-fit: cover; padding: 0;
  background: var(--muted); color: transparent;
}
.user-avatar-lg { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
.user-name-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.users-table td.muted {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.users-table .badge {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-cards { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1000px) { .user-cards { display: none; } }
.user-card {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--card);
  padding: 0.875rem; box-shadow: var(--shadow-sm); color: inherit;
}
.user-card:active { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.user-card-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.user-card-name {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-weight: 500;
}
.user-card-name .user-name-text { flex: 1; }
.user-card-email {
  display: flex; align-items: center; gap: 0.25rem; margin-top: 0.125rem;
  font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-card-email svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.user-card-status {
  margin-top: 0.2rem; font-size: 0.75rem; font-weight: 500;
}
.user-card-side { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.user-card-chevron { width: 1rem; height: 1rem; color: var(--muted-foreground); }

/* User detail */
.user-detail { max-width: 42rem; }
.user-detail .back-link { margin-bottom: 0; }
.user-avatar-xl {
  width: 3.5rem; height: 3.5rem; font-size: 1.125rem;
}
.ud-card {
  display: flex; flex-direction: column; gap: 1rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.ud-top {
  display: flex; align-items: flex-start; gap: 1rem;
}
.ud-identity { flex: 1; min-width: 0; }
.ud-name-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.ud-name {
  margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
}
.ud-email {
  display: inline-flex; align-items: center; gap: 0.375rem;
  margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground);
}
.ud-email:hover { color: var(--foreground); }
.ud-email svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.ud-edit { flex-shrink: 0; gap: 0.5rem; }
.ud-edit svg { width: 1rem; height: 1rem; }

/* Account profile */
.account-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.35rem; padding: 0.5rem 0 0.25rem;
}
.account-avatar {
  width: 5.5rem; height: 5.5rem; font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.account-avatar-img {
  object-fit: cover; padding: 0;
  background: var(--muted);
}
.account-avatar-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem; margin-top: 0.75rem;
}
.account-avatar-upload { margin: 0; }
.account-avatar-pick {
  position: relative; display: inline-flex; margin: 0;
  cursor: pointer; border-radius: 9999px;
}
.account-avatar-pick:hover .account-avatar,
.account-avatar-pick:focus-within .account-avatar {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}
.account-avatar-pick input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.account-avatar-hint {
  margin: 0.5rem 0 0; text-align: center;
}
.account-badges {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem; font-size: 0.875rem;
}
.account-name {
  margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
}
.account-email {
  font-size: 0.875rem; color: var(--muted-foreground);
  overflow-wrap: anywhere;
}
.account-email:hover { color: var(--foreground); }
.account-form { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.account-fields { margin: 0; }
.account-actions {
  display: flex; justify-content: flex-end;
  padding-top: 0.75rem; border-top: 1px solid var(--border);
}

.ud-meta {
  display: grid; gap: 1px; margin: 0;
  overflow: hidden; border-radius: calc(var(--radius) - 1px);
  border: 1px solid var(--border); background: var(--border);
  font-size: 0.875rem;
}
@media (min-width: 640px) {
  .ud-meta { grid-template-columns: 1fr 1fr; }
}
.ud-meta-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--card); padding: 0.625rem 0.75rem;
}
.ud-meta-cell dt { color: var(--muted-foreground); }
.ud-meta-cell dd { margin: 0; }
.ud-status-active {
  font-weight: 500; color: var(--status-done-fg);
}
.ud-status-blocked {
  font-weight: 500; color: var(--destructive);
}
.badge-danger {
  background: color-mix(in oklab, var(--destructive) 14%, transparent);
  color: var(--destructive);
}

/* Login */
.login-wrap { width: 100%; max-width: 24rem; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin-bottom: 1.5rem; }
.login-brand-mark {
  display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center;
  border-radius: 0.75rem; background: var(--primary); color: var(--primary-foreground);
}
.login-brand-mark svg { width: 1.5rem; height: 1.5rem; }
.login-wrap h1 { font-size: 1.125rem; font-weight: 600; }
.login-card-box { padding: 1.25rem; }
.login-foot { margin-top: 1rem; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); }

/* Alerts */
.error, .error-note {
  display: flex; align-items: flex-start; gap: 0.5rem;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid color-mix(in oklab, var(--destructive) 25%, transparent);
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive); padding: 0.625rem 0.75rem; font-size: 0.875rem;
}

/* Offline */
.offline-card { max-width: 24rem; margin: 0 auto; padding: 1.5rem; text-align: center; }
.offline-card h1 { margin-bottom: 0.5rem; }
.offline-card p { margin-bottom: 1rem; }

/* Stack pages gap */
.page-stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* Settings */
.page-title svg { width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); }
.settings-group {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.settings-group-head h2 {
  margin: 0;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--foreground);
}
.settings-group-desc {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.4;
}
.settings-card {
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden;
}
.settings-card .section-card-head h2,
.settings-card .section-card-head h3 {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 1rem; font-weight: 600;
}
.settings-card .section-card-head svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.settings-card .section-card-body { display: flex; flex-direction: column; gap: 0.75rem; }
.settings-card .section-card-body > .muted { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.settings-subhead {
  margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--foreground);
}
.settings-kv {
  margin: 0; display: flex; flex-direction: column; font-size: 0.875rem;
}
.settings-kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.settings-kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-kv-row:first-child { padding-top: 0; }
.settings-kv-row dt { color: var(--muted-foreground); flex-shrink: 0; }
.settings-kv-row dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.settings-soon {
  align-self: flex-start; margin: 0;
  border-radius: 0.25rem; background: var(--muted);
  padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground);
}
.settings-form { margin: 0; }
.settings-form-actions {
  display: flex; justify-content: flex-end;
  margin-top: 0.25rem;
}
.settings-form:has(.settings-form-fields) .settings-form-actions {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
}
.settings-switch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.settings-switch-text { min-width: 0; }
.settings-switch-text h2,
.settings-switch-text h3 {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 1rem; font-weight: 600;
}
.settings-switch-desc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.35;
}
.settings-check {
  display: flex; flex-direction: row; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.settings-check input {
  width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); cursor: pointer;
}
label.ui-switch {
  display: inline-flex; flex-direction: row; align-items: center;
  flex-shrink: 0; gap: 0; margin: 0; padding: 0;
  font-weight: 400; cursor: pointer; user-select: none;
}
.ui-switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ui-switch-track {
  position: relative; display: block; flex-shrink: 0;
  width: 2.75rem; height: 1.5rem;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ui-switch-thumb {
  position: absolute; top: 0.125rem; left: 0.125rem;
  width: 1.125rem; height: 1.125rem;
  border-radius: 999px;
  background: var(--card-foreground);
  opacity: 0.55;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.ui-switch input:checked + .ui-switch-track {
  background: var(--primary);
  border-color: transparent;
}
.ui-switch input:checked + .ui-switch-track .ui-switch-thumb {
  transform: translateX(1.25rem);
  background: var(--primary-foreground);
  opacity: 1;
}
.ui-switch input:focus-visible + .ui-switch-track {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.ui-switch:hover .ui-switch-track {
  border-color: color-mix(in oklab, var(--ring) 40%, var(--border));
}
.settings-kv-readonly { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.flash {
  border-radius: var(--radius); border: 1px solid var(--border);
  padding: 0.75rem 1rem; font-size: 0.875rem;
}
.flash-ok {
  border-color: color-mix(in oklab, var(--status-done-fg) 35%, var(--border));
  background: color-mix(in oklab, var(--status-done) 55%, transparent);
  color: var(--status-done-fg);
}
.flash-error {
  border-color: color-mix(in oklab, var(--destructive) 35%, var(--border));
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: var(--destructive);
}