/* Поддержка Inscale — интерфейс v2 (12.11.2026): боковая панель, рабочее место инженера, переписка как чат.
   Фирменное сохранено: синий #1194FF, тёмный #080F21, небесный градиент, шрифт Onest, знак Inscale.
   Без inline-стилей и встроенных скриптов (CSP style-src 'self'). Иконки — CSS-маски в конце файла. */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/Onest-cyrillic-ext-11a468877c94605e8d19498e02468e1e.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/Onest-cyrillic-fe2bd26ae82a604773dc696a60820fd4.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/Onest-latin-ext-3e2cb98882069277dc6a50dedc7f3d25.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/Onest-latin-3db826ed1c5d780edac1a068afa38081.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0B1220; --ink-strong: #080F21; --ink-2: #1D283A; --text: #3A4658; --muted: #66758C; --muted-2: #97A4B7;
  --line: #E4E9F0; --line-2: #EEF2F6; --bg: #F2F5F9; --card: #FFFFFF; --hover: #F7F9FC;
  --blue: #1194FF; --blue-700: #0A7DE0; --blue-50: #EBF6FF; --blue-100: #CAE9FE; --sky: #DCEFFF;
  --ok: #0E9F6F; --ok-bg: #E2F7EE; --warn: #DB6B0B; --warn-bg: #FFF0DF; --bad: #DC2626; --bad-bg: #FDEBEB;
  --violet: #6D43B5; --violet-bg: #F1EAFB; --amber: #B7791F; --amber-bg: #FFF6E0; --amber-line: #F0C36A;
  --r-xl: 22px; --r-lg: 16px; --r-md: 12px; --r-sm: 10px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(11, 18, 32, .05);
  --sh-2: 0 1px 2px rgba(11, 18, 32, .04), 0 10px 28px -12px rgba(11, 18, 32, .16);
  --ring: 0 0 0 3px rgba(17, 148, 255, .18);
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --side-w: 252px;
  /* боковая панель: тёмная (по умолчанию) */
  --side-bg: #080F21; --side-ink: #FFFFFF; --side-muted: #93A5BF; --side-hover: rgba(255, 255, 255, .07);
  --side-active: rgba(17, 148, 255, .2); --side-active-ink: #FFFFFF; --side-line: rgba(255, 255, 255, .1);
  --side-accent: #6DBEFF; --side-logo-filter: brightness(0) invert(1); --side-glow: 1;
  --badge-bg: linear-gradient(160deg, #54B4FF 0%, #1194FF 58%, #0A7DE0 100%);
}
:root[data-theme="light"] {
  --side-bg: #FFFFFF; --side-ink: #0B1220; --side-muted: #66758C; --side-hover: #F2F5F9;
  --side-active: #EBF6FF; --side-active-ink: #0A7DE0; --side-line: #E4E9F0;
  --side-accent: #0A7DE0; --side-logo-filter: none; --side-glow: 0;
}
:root[data-theme="blue"] {
  --side-bg: linear-gradient(180deg, #1194FF 0%, #0A6FD0 100%); --side-ink: #FFFFFF; --side-muted: rgba(255, 255, 255, .8);
  --side-hover: rgba(255, 255, 255, .13); --side-active: rgba(255, 255, 255, .22); --side-active-ink: #FFFFFF;
  --side-line: rgba(255, 255, 255, .22); --side-accent: #DCEFFF; --side-glow: 0;
  --badge-bg: rgba(255, 255, 255, .2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: rgba(17, 148, 255, .2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(11, 18, 32, .16); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------- каркас: боковая панель + рабочая область ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; padding: 20px 14px 14px; z-index: 30; isolation: isolate; border-right: 1px solid var(--side-line); }
.side::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--side-glow); background: radial-gradient(420px 280px at 0% 0%, rgba(17, 148, 255, .34), transparent 70%), radial-gradient(320px 260px at 100% 100%, rgba(17, 148, 255, .16), transparent 70%); }
.side-top { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px; min-width: 0; }
.logo-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--badge-bg); box-shadow: inset 0 -1.5px 2px rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(17, 148, 255, .7); }
.logo-badge img { width: 21px; height: auto; }
.brand-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.logo-word { height: 11px; width: auto; filter: var(--side-logo-filter); }
.brand-tag { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--side-accent); line-height: 1; }
.navtoggle { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; }
.side-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 26px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--side-muted); opacity: .75; padding: 16px 12px 6px; }
.side-nav a { position: relative; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--side-muted); font-size: 14px; font-weight: 600; transition: background .14s, color .14s; }
.side-nav a .i { width: 18px; height: 18px; }
.side-nav a:hover { background: var(--side-hover); color: var(--side-ink); }
.side-nav a.active { background: var(--side-active); color: var(--side-active-ink); }
.side-nav a.active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
:root[data-theme="blue"] .side-nav a.active::before { background: #fff; }
.side-nav .count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--blue); color: #fff; font-variant-numeric: tabular-nums; }
.side-nav .count--warn { background: #F59E0B; color: #241500; }
:root[data-theme="blue"] .side-nav .count { background: #fff; color: #0A6FD0; }
.side-nav .ext { margin-left: auto; width: 14px; height: 14px; opacity: .6; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.side-alert { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--side-ink); background: var(--side-hover); }
a.side-alert:hover { background: var(--side-active); }
.side-alert .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .24); }
.side-alert--bad .dot { background: #F05151; box-shadow: 0 0 0 3px rgba(240, 81, 81, .24); }
.side-user { display: flex; align-items: center; gap: 4px; padding: 12px 4px 2px; margin-top: 4px; border-top: 1px solid var(--side-line); }
.side-user .who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; padding: 4px; border-radius: 10px; color: var(--side-ink); }
.side-user .who:hover { background: var(--side-hover); }
.who-text { min-width: 0; display: flex; flex-direction: column; }
.who-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-sub { font-size: 11px; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user form { margin: 0; }
.iconbtn { width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--side-muted); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.iconbtn:hover { background: var(--side-hover); color: var(--side-ink); }
.iconbtn .i { width: 17px; height: 17px; }
.themes { display: flex; align-items: center; gap: 8px; padding: 4px 8px 0; font-size: 11px; color: var(--side-muted); }
.themes span { margin-right: auto; }
.themes button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(147, 165, 191, .55); cursor: pointer; padding: 0; }
.themes .sw-dark { background: #080F21; } .themes .sw-light { background: #FFFFFF; } .themes .sw-blue { background: #1194FF; }
.themes button.is-on { box-shadow: 0 0 0 2px var(--side-bg, #080F21), 0 0 0 4px var(--side-accent); }

.avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(150deg, #54B4FF, #1194FF); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.avatar.slate { background: #E3E9F1; color: #48566B; }
.avatar.ink { background: var(--ink-strong); color: #fff; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }

.main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--sky) 0, rgba(220, 239, 255, 0) 300px) no-repeat, var(--bg); }
.page { flex: 1 0 auto; width: 100%; max-width: 1440px; margin: 0 auto; padding: 30px 34px 28px; display: flex; flex-direction: column; gap: 20px; }
.page--mid { max-width: 1200px; }
.page--narrow { max-width: 820px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.page-head > div { min-width: 0; }
.eyebrow { font-size: 12px; font-weight: 700; color: var(--blue-700); letter-spacing: .02em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-title { font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--ink); letter-spacing: -.02em; overflow-wrap: anywhere; }
.page-sub { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 72ch; }
.page-head .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head .actions form { margin: 0; }
.back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); align-self: flex-start; margin-bottom: -8px; }
.back:hover { color: var(--ink); }
.back .i { width: 15px; height: 15px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: -8px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span::before { content: "/"; margin-right: 6px; color: var(--muted-2); }
.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cols > aside { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; padding: 1px 1px 2px; margin: -1px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.muted { color: var(--muted); }
.t13 { font-size: 13px; } .t12 { font-size: 12px; } .t11 { font-size: 11px; }
.fw700 { font-weight: 700; } .fw600 { font-weight: 600; }
.mt12 { margin-top: 12px; } .w160 { width: 160px; }
.h32 { height: 32px; } .h36 { height: 36px; } .h38 { height: 38px; }
.mono { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; font-size: 13px; }

/* ---------- карточки ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 22px 24px; }
.card--flush { padding: 0; overflow: hidden; }
.card__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card__bar--stack { flex-direction: column; align-items: stretch; gap: 12px; }
.card__bar--stack .seg { align-self: flex-start; }
.card__bar--stack .filters { justify-content: flex-start; flex: 0 0 auto; flex-wrap: nowrap; }
.card__bar--stack .filters .sel { flex: 0 1 200px; min-width: 0; text-overflow: ellipsis; }
.card__bar--stack .filters .search { max-width: none; flex: 1 1 200px; min-width: 150px; }
.card__bar--stack .filters .btn { flex: 0 0 auto; }
.card__body { padding: 20px 24px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 18px; }
.ph { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.sec-h { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ink); background: transparent; transition: background .14s, box-shadow .14s, border-color .14s, transform .1s; }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible, .sel:focus-visible, .chip:focus-visible { outline: none; box-shadow: var(--ring); }
.btn .i { width: 16px; height: 16px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -8px rgba(17, 148, 255, .9); }
.btn-primary:hover { background: var(--blue-700); }
.btn-dark { background: var(--ink-strong); color: #fff; }
.btn-dark:hover { background: #141C33; }
.btn-ghost { background: #E9EEF4; color: var(--ink); }
.btn-ghost:hover { background: #DEE5EE; }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--sh-1); }
.btn-outline:hover { border-color: #CBD5E1; background: var(--hover); }
.btn-danger { background: #fff; border-color: var(--line); color: var(--bad); }
.btn-danger:hover { border-color: #F3A8A8; background: var(--bad-bg); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14.5px; border-radius: 12px; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-700); cursor: pointer; font-weight: 600; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- бейджи и метки ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-new { background: var(--blue-50); color: var(--blue-700); }
.st-work { background: var(--warn-bg); color: var(--warn); }
.st-wait { background: var(--violet-bg); color: var(--violet); }
.st-ok { background: var(--ok-bg); color: var(--ok); }
.st-cancel { background: #EDF1F5; color: var(--muted); }
.st-err { background: var(--bad-bg); color: var(--bad); }
.sev { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.sev-1 { background: var(--bad); color: #fff; }
.sev-2 { background: var(--warn-bg); color: var(--warn); }
.sev-3 { background: #EDF1F5; color: var(--text); }
.ttype { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; background: #EDF1F5; color: var(--text); }
.tag-test { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; background: #EDF1F5; color: var(--muted); }
.pill.blue { background: var(--blue-50); color: var(--blue-700); }
.pill.orange { background: var(--warn-bg); color: var(--warn); }
.ball { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ball::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.ball--us { color: var(--warn); } .ball--us::before { background: var(--warn); box-shadow: 0 0 0 3px rgba(219, 107, 11, .18); }
.ball--client { color: var(--violet); } .ball--client::before { background: var(--violet); }
.ball--done { color: var(--ok); } .ball--done::before { background: var(--ok); }

/* ---------- плитки-счётчики ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .14s, box-shadow .14s, border-color .14s; }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.kpi.is-active { border-color: var(--blue); box-shadow: var(--ring); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kpi__num { font-size: 32px; line-height: 1; font-weight: 700; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi__ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #EDF1F5; color: var(--muted); }
.kpi__ico .i { width: 18px; height: 18px; }
.kpi__label { font-size: 14px; font-weight: 700; color: var(--ink); }
.kpi__hint { font-size: 12px; color: var(--muted); }
.kpi--warn .kpi__ico { background: var(--warn-bg); color: var(--warn); }
.kpi--violet .kpi__ico { background: var(--violet-bg); color: var(--violet); }
.kpi--bad .kpi__ico { background: var(--bad-bg); color: var(--bad); }

/* ---------- переключатели и фильтры ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: #E9EEF4; flex-wrap: wrap; }
.seg a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .14s, color .14s; }
.seg a:hover { color: var(--ink); }
.seg a.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11, 18, 32, .1); }
.seg .count { font-size: 11.5px; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.seg a.active .count { color: var(--blue-700); }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 520px; justify-content: flex-end; margin: 0; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip { height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip.active { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
.chip .count { opacity: .6; }
.search { position: relative; display: flex; align-items: center; flex: 1 1 200px; max-width: 320px; }
.search::before { content: ""; position: absolute; left: 12px; width: 15px; height: 15px; background: var(--muted-2); -webkit-mask: var(--i-search) center / contain no-repeat; mask: var(--i-search) center / contain no-repeat; pointer-events: none; }
.search input { height: 38px; width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 0 12px 0 36px; font-size: 13.5px; color: var(--ink); outline: none; transition: border-color .14s, box-shadow .14s; }
.search--plain::before { display: none; }
.search--plain input { padding-left: 12px; }
.search input::placeholder { color: var(--muted-2); }
.search input:focus { border-color: var(--blue); box-shadow: var(--ring); }
.sel { height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); background-color: #fff; padding: 0 34px 0 12px; font-size: 13.5px; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366758C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; max-width: 100%; cursor: pointer; }
.sel:focus { border-color: var(--blue); box-shadow: var(--ring); }
.sel--sm { height: 32px; font-size: 13px; }
.sel--block { width: 100%; }

/* ---------- таблицы ---------- */
.tbl-wrap { width: 100%; overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl thead th { text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 11px 18px; white-space: nowrap; background: #F8FAFC; border-bottom: 1px solid var(--line); }
table.tbl tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); color: var(--text); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr.link { cursor: pointer; transition: background .12s; }
table.tbl tbody tr.link:hover { background: var(--hover); }
table.tbl tbody tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.tbl td.num { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl .nowrap { white-space: nowrap; }
table.tbl--queue { table-layout: fixed; }
table.tbl th.col-num { width: 76px; }
table.tbl th.col-client { width: 21%; }
table.tbl th.col-who { width: 19%; }
table.tbl th.col-status { width: 216px; }
.st-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.st-cell .ball { font-size: 12px; }
.who-cell { max-width: 100%; }
.nowrap { white-space: nowrap; }
.card:not(.card--flush) > .tbl-wrap table.tbl thead th:first-child, .card:not(.card--flush) > .tbl-wrap table.tbl tbody td:first-child { padding-left: 0; }
.card:not(.card--flush) > .tbl-wrap table.tbl thead th { background: transparent; padding-top: 0; }
.cell-ent { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ent-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nm { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; line-height: 1.35; }
a.nm:hover { color: var(--blue-700); }
.sub { font-size: 12px; font-weight: 500; color: var(--muted); }
.sub.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ent { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(150deg, #54B4FF, #1194FF); }
.ent.sm { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
.ent.slate { background: #E3E9F1; color: #48566B; }
.ent.dark { background: var(--ink-strong); }
.who-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--ink-2); }
.who-cell > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.who-cell.none { color: var(--muted-2); font-weight: 500; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 56px 20px; text-align: center; }
.empty .ico { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(160deg, var(--sky), #F3F8FF); color: var(--blue-700); display: grid; place-items: center; margin-bottom: 6px; font-size: 18px; font-weight: 700; }
.empty .ico .i { width: 24px; height: 24px; }
.empty .et { font-size: 16px; font-weight: 700; color: var(--ink); }
.empty .es { font-size: 13.5px; color: var(--muted); max-width: 48ch; }
.empty .btn { margin-top: 8px; }

/* список обращений клиента */
.tlist { display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); transition: background .12s; }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--hover); }
.trow--attn { box-shadow: inset 3px 0 0 var(--violet); background: #FBF9FE; }
.trow__num { flex: 0 0 auto; width: 62px; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.trow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.trow__title { font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; line-height: 1.35; }
.trow__meta { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.trow__state { flex: 0 0 auto; }
.trow > .i { width: 16px; height: 16px; color: var(--muted-2); flex: 0 0 auto; }

/* ---------- формы ---------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.req { color: var(--bad); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password], .field input[type=search], .field select, .field textarea, .input {
  height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 0 13px; font-size: 14px; color: var(--ink); outline: none; transition: border-color .14s, box-shadow .14s; width: 100%;
}
.field textarea { height: auto; min-height: 104px; padding: 11px 13px; resize: vertical; line-height: 1.55; }
.field textarea.tall { min-height: 190px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--blue); box-shadow: var(--ring); }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--muted-2); }
.field select, select.input { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366758C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field .hint { font-size: 12px; color: var(--muted); }
.field--err input, .field--err select, .field--err textarea { border-color: #F08A8A; }
.err { font-size: 12.5px; color: var(--bad); font-weight: 500; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; font-weight: 600; }
.check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.check small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.check--box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; background: #fff; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.inline-form .input { width: auto; flex: 1 1 200px; }
.inline-form .sel { flex: 0 1 auto; min-width: 150px; }
.inline-form .input--sm { flex: 0 1 200px; }
.inline-form .sel.input--sm { min-width: 210px; }

/* выбор типа и критичности */
.choice { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.choice legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0; margin-bottom: 2px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.choice-item { position: relative; display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 15px; background: #fff; cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; }
.choice-item:hover { border-color: #CBD5E1; }
.choice-item input { position: absolute; opacity: 0; pointer-events: none; }
.choice-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #EDF1F5; color: var(--muted); flex: 0 0 auto; transition: background .14s, color .14s; }
.choice-ico .i { width: 18px; height: 18px; }
.choice-item:has(input:checked) { border-color: var(--blue); background: var(--blue-50); box-shadow: var(--ring); }
.choice-item:has(input:checked) .choice-ico { background: var(--blue); color: #fff; }
.choice-item:has(input:focus-visible) { box-shadow: var(--ring); }
.choice-body { display: flex; flex-direction: column; gap: 4px; color: var(--ink); font-size: 14px; font-weight: 700; }
.choice-body small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; }
.field--err .choice-item { border-color: #F08A8A; }
.choice-item--tile { flex-direction: column; gap: 10px; }
.choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .choice-grid--3 { grid-template-columns: 1fr; } .choice-item--tile { flex-direction: row; } }

/* файлы */
.filepick { font-size: 12.5px; color: var(--muted); max-width: 100%; }
.filepick::file-selector-button { font: inherit; font-weight: 600; font-size: 12.5px; margin-right: 10px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.filepick::file-selector-button:hover { border-color: #CBD5E1; background: var(--hover); }
.files { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.files a { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink); transition: border-color .14s, background .14s; }
.files a::before { content: ""; flex: 0 0 auto; width: 13px; height: 13px; background: var(--blue); -webkit-mask: var(--i-clip) center / contain no-repeat; mask: var(--i-clip) center / contain no-repeat; }
.files a:hover { border-color: #CBD5E1; background: var(--hover); }
.files__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.files__size { color: var(--muted); font-weight: 500; }

/* ---------- переписка ---------- */
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; align-items: flex-start; scroll-margin-top: 20px; min-width: 0; }
.msg > .avatar { margin-top: 2px; }
.bubble { min-width: 0; max-width: min(740px, 88%); background: var(--card); border: 1px solid var(--line); border-radius: 5px 16px 16px 16px; padding: 12px 16px 13px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--sh-1); }
.msg--mine { flex-direction: row-reverse; }
.msg--mine .bubble { background: var(--blue-50); border-color: #C3E2FF; border-radius: 16px 5px 16px 16px; }
.msg--note .bubble { max-width: none; flex: 1 1 auto; background: #FFF9EC; border: 1px dashed var(--amber-line); border-radius: 14px; box-shadow: none; }
.msg--note > .avatar { background: #F6E3B4; color: #7A5200; }
.msg__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.msg__head b { color: var(--ink); font-weight: 700; }
.msg__who { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.msg--mine .msg__who { color: var(--blue-700); }
.msg--note .msg__who { color: var(--amber); display: inline-flex; align-items: center; gap: 5px; }
.msg--note .msg__who .i { width: 12px; height: 12px; }
.msg__when { margin-left: auto; padding-left: 12px; font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.msg__body { white-space: pre-line; overflow-wrap: anywhere; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

.composer { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 20px; transition: border-color .14s, background .14s; }
.composer:focus-within { border-color: #A9D5FF; }
.composer__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px 0; }
.composer__title { font-size: 14px; font-weight: 700; color: var(--ink); padding-left: 4px; }
.tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tabs label { position: relative; cursor: pointer; }
.tabs input { position: absolute; opacity: 0; pointer-events: none; }
.tabs span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .14s, color .14s; }
.tabs span .i { width: 14px; height: 14px; }
.tabs label:hover span { color: var(--ink); }
.tabs input:checked + span { background: var(--ink-strong); color: #fff; }
.tabs input:focus-visible + span { box-shadow: var(--ring); }
.tabs .tab--note input:checked + span { background: var(--amber); }
.composer textarea { border: 0; outline: 0; resize: vertical; min-height: 132px; padding: 14px 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink); background: transparent; width: 100%; display: block; }
.composer textarea::placeholder { color: var(--muted-2); }
.composer .err { padding: 0 18px 10px; }
.composer__hint { padding: 0 18px 12px; font-size: 12.5px; color: var(--muted); }
.composer__foot { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line-2); background: #FAFBFD; }
.composer__opts { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.composer__foot .btn { margin-left: auto; }
.optline { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.composer .field { gap: 4px; }
.composer .field .label { display: none; }
.composer .field .hint { font-size: 11.5px; }
.composer.is-note { border-color: var(--amber-line); background: #FFFBF1; }
.composer.is-note .composer__foot { background: var(--amber-bg); border-top-color: #F4DDA6; }

/* ---------- боковые панели карточки ---------- */
.kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 14px; margin: 0; }
.kv dt { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.kv dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.kv dd a:hover { color: var(--blue-700); }
.prop { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.prop + .prop { margin-top: 12px; }
.prop label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dur { display: flex; flex-direction: column; gap: 10px; }
.dur__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
.dur__row > .badge { justify-self: start; }
.dur + .kv { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 14px; }
.dur__val { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dur__val small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.bar { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 99px; background: #EDF1F5; overflow: hidden; color: var(--muted-2); }
.bar::-webkit-progress-bar { background: #EDF1F5; border-radius: 99px; }
.bar::-webkit-progress-value { background: currentColor; border-radius: 99px; }
.bar::-moz-progress-bar { background: currentColor; border-radius: 99px; }
.bar.st-new { color: var(--blue); background: #EDF1F5; } .bar.st-work { color: var(--warn); background: #EDF1F5; } .bar.st-wait { color: var(--violet); background: #EDF1F5; } .bar.st-ok { color: var(--ok); background: #EDF1F5; } .bar.st-cancel { color: var(--muted-2); background: #EDF1F5; }
.tl { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; }
.tl-item .rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.tl-item .knob { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); margin-top: 5px; }
.tl-item .line { flex: 1 1 auto; width: 2px; background: var(--line); margin: 4px 0; }
.tl-item:last-child .line { display: none; }
.tl-item .c { padding-bottom: 14px; min-width: 0; }
.tl-item:last-child .c { padding-bottom: 0; }
.tl-item .ct { font-size: 13px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.tl-item .cm { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mini-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.mini-row:first-child { padding-top: 0; }
.mini-row:last-child { border-bottom: none; padding-bottom: 0; }
.mini-row .body { flex: 1 1 auto; min-width: 0; }
.mini-row .t { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.mini-row .s { font-size: 12px; color: var(--muted); }
.mini-row form { margin: 0; }

/* шаги и состояние обращения у клиента */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); padding-right: 8px; }
.steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #CBD5E1; position: relative; z-index: 1; }
.steps li::after { content: ""; position: absolute; left: 14px; right: 0; top: 6px; height: 2px; background: #DCE3EC; }
.steps li:last-child::after { display: none; }
.steps li.is-done { color: var(--ink-2); }
.steps li.is-done::before { background: var(--blue); border-color: var(--blue); }
.steps li.is-done::after { background: var(--blue); }
.steps li.is-now { color: var(--ink); font-weight: 700; }
.steps li.is-now::before { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(17, 148, 255, .18); }
.state { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--sh-1); }
.state__ico { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); }
.state__ico .i { width: 19px; height: 19px; }
.state__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.state__s { font-size: 13.5px; color: var(--text); margin-top: 2px; }
.state--wait { border-color: #D9C8F3; background: #FAF7FE; } .state--wait .state__ico { background: var(--violet-bg); color: var(--violet); }
.state--ok { border-color: #BFE9D6; background: #F4FCF8; } .state--ok .state__ico { background: var(--ok-bg); color: var(--ok); }
.state--work .state__ico { background: var(--warn-bg); color: var(--warn); }
.state--closed .state__ico { background: #EDF1F5; color: var(--muted); }

/* подсказки сбоку */
.tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text); line-height: 1.45; }
.tips li .i { width: 15px; height: 15px; color: var(--blue); flex: 0 0 auto; margin-top: 2px; }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--ink-strong); color: #fff; }
.callout .i { width: 18px; height: 18px; color: var(--side-accent, #6DBEFF); flex: 0 0 auto; margin-top: 2px; }
.callout b { display: block; font-size: 14px; }
.callout span { display: block; font-size: 12.5px; color: #B8C7DB; margin-top: 2px; }
.callout a { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------- сообщения системы ---------- */
.flash { display: flex; flex-direction: column; gap: 8px; }
.note { padding: 12px 16px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.5; font-weight: 500; background: #fff; border: 1px solid var(--line); color: var(--text); }
.note--ok { background: var(--ok-bg); border-color: #BFE9D6; color: #0B6B4C; }
.note--err { background: var(--bad-bg); border-color: #F6C9C9; color: #991B1B; }
.note--info { background: var(--blue-50); border-color: #C3E2FF; color: var(--ink-2); }
.note--warn { background: var(--amber-bg); border-color: #F4DDA6; color: #7A5200; }
.note a { text-decoration: underline; font-weight: 600; }
.secret { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px dashed #BFD3E6; }
.secret code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
code, .code { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; font-size: 13px; }

/* учётки на подтверждении */
.acc-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.approve { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .7fr) auto; gap: 12px; align-items: end; border-top: 1px solid var(--line-2); padding-top: 16px; margin: 0; }

/* ---------- подвал ---------- */
.foot { flex: 0 0 auto; color: var(--muted-2); font-size: 12px; font-weight: 500; padding: 4px 34px 22px; display: flex; gap: 6px 20px; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0 auto; }
.foot a:hover { color: var(--ink); }

/* ---------- вход, регистрация, пароль ---------- */
.auth { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); background: #fff; }
.auth-brand { position: relative; isolation: isolate; background: var(--ink-strong); color: #fff; padding: 36px 52px 30px; display: flex; flex-direction: column; overflow: hidden; }
.auth-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px 440px at 0% 0%, rgba(17, 148, 255, .6), transparent 66%), radial-gradient(560px 440px at 100% 100%, rgba(17, 148, 255, .3), transparent 66%), radial-gradient(320px 240px at 88% 10%, rgba(202, 233, 254, .2), transparent 70%); }
.auth-brand .brand { padding: 0; }
.auth-brand .logo-word { filter: brightness(0) invert(1); }
.auth-brand .brand-tag { color: #9CD3FF; }
.auth-brand .logo-badge { background: linear-gradient(160deg, #54B4FF 0%, #1194FF 58%, #0A7DE0 100%); }
.auth-hero { margin: auto 0; padding: 44px 0; max-width: 470px; }
.auth-hero h2 { font-size: clamp(34px, 3.3vw, 48px); line-height: 1.06; letter-spacing: -.025em; font-weight: 700; color: #fff; text-wrap: balance; }
.auth-hero p { margin-top: 16px; font-size: 16px; line-height: 1.55; color: #B8C7DB; max-width: 44ch; }
.auth-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #DDE7F3; line-height: 1.45; }
.auth-points .i { color: #6DBEFF; width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.auth-brand-foot { font-size: 12px; color: #8196B0; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.auth-brand-foot a:hover { color: #fff; }
.auth-main { display: flex; flex-direction: column; padding: 26px 40px 28px; min-width: 0; }
.auth-main-top { display: flex; justify-content: flex-end; }
.auth-box { margin: auto; width: 100%; max-width: 420px; padding: 28px 0; }
.auth-box--wide { max-width: 580px; }
.auth-title { font-size: 32px; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; color: var(--ink-strong); }
.auth-sub { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 15px; margin-top: 26px; }
.afield { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; }
.afield > label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.afield input { width: 100%; height: 50px; border-radius: 12px; border: 1px solid var(--line); background: #F6F8FB; padding: 0 16px; font-size: 15px; color: var(--ink-strong); outline: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.afield input::placeholder { color: var(--muted-2); }
.afield input:focus { border-color: var(--blue); background: #fff; box-shadow: var(--ring); }
.afield--err input { border-color: #F08A8A; }
.agrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.auth-btn { width: 100%; height: 50px; border: none; border-radius: 12px; font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink-strong); color: #fff; box-shadow: 0 14px 28px -18px rgba(8, 15, 33, .8); transition: background .15s, transform .12s; }
.auth-btn:hover { background: #141C33; }
.auth-btn:active { transform: translateY(1px); }
.auth-btn--ghost { background: #E9EEF4; color: var(--ink); box-shadow: none; }
.auth-btn--ghost:hover { background: #DEE5EE; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; font-size: 13.5px; }
.text-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; font-size: 14px; color: var(--blue-700); cursor: pointer; }
.text-link:hover { text-decoration: underline; }
.text-link.t13 { font-size: 13px; }
.auth-links { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted); }
.auth-note { margin-top: 18px; padding: 12px 15px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; background: var(--blue-50); border: 1px solid #C3E2FF; color: var(--ink-2); }
.auth-note--err { background: var(--bad-bg); border-color: #F6C9C9; color: #991B1B; }
.auth-note--ok { background: var(--ok-bg); border-color: #BFE9D6; color: #0B6B4C; }
.auth-note a { text-decoration: underline; }
.consent { font-size: 12.5px; line-height: 1.5; color: var(--muted); width: 100%; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--ink-strong); }
.consent a { text-decoration: underline; }
.remember { display: inline-flex; gap: 9px; align-items: center; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.remember input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink-strong); }
.success-check { width: 64px; height: 64px; border-radius: 20px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin-bottom: 22px; }
.success-check .i { width: 30px; height: 30px; }
.pill-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 13.5px; padding: 0 16px; height: 38px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pill-btn:hover { background: var(--hover); border-color: #CBD5E1; }

/* ---------- адаптация ---------- */
@media (max-width: 1180px) {
  .cols { grid-template-columns: minmax(0, 1fr) 300px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > aside { position: static; max-height: none; overflow: visible; }
  .approve { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { display: block; }
  .side { height: auto; padding: 10px 14px; border-right: 0; }
  .burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--side-ink); cursor: pointer; }
  .burger:hover { background: var(--side-hover); }
  .burger .i { width: 20px; height: 20px; }
  .side-body { display: none; margin-top: 10px; padding-bottom: 6px; }
  .navtoggle:checked ~ .side-body { display: flex; }
  .side-nav a.active::before { display: none; }
  .main { min-height: 0; }
  .page { padding: 20px 16px 22px; gap: 16px; }
  .foot { padding: 4px 16px 20px; }
  .page-title { font-size: 22px; }
  .filters, .card__bar--stack .filters { justify-content: flex-start; flex-basis: 100%; flex-wrap: wrap; }
  .search { max-width: none; }
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 20px 22px 22px; }
  .auth-hero { padding: 22px 0 4px; margin: 0; }
  .auth-hero h2 { font-size: 28px; }
  .auth-hero p { font-size: 14.5px; margin-top: 10px; }
  .auth-points, .auth-brand-foot { display: none; }
  .auth-main { padding: 18px 22px 24px; }
  .auth-main-top { display: none; }
  .auth-box { padding: 12px 0; margin: 0 auto; }
  .auth-title { font-size: 26px; }
}
@media (max-width: 760px) {
  table.tbl thead { display: none; }
  table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; }
  table.tbl tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--line-2); position: relative; }
  .card:not(.card--flush) > .tbl-wrap table.tbl tbody tr { padding: 12px 0; }
  table.tbl tbody tr:last-child { border-bottom: none; }
  table.tbl tbody td { padding: 3px 0; border: none; }
  table.tbl tbody td.hide-m { display: none; }
  table.tbl tbody tr.hot td:first-child { box-shadow: none; }
  table.tbl tbody tr.hot { box-shadow: inset 3px 0 0 var(--bad); }
  table.tbl td.right-m { position: absolute; right: 16px; top: 12px; }
  table.tbl--queue { table-layout: auto; }
  table.tbl--queue td.right-m { position: static; padding-top: 8px; }
  .st-cell { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  .card:not(.card--flush) > .tbl-wrap table.tbl td.right-m { right: 0; }
  .bubble { max-width: 100%; }
  .msg > .avatar { display: none; }
  .trow { flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; }
  .trow__num { width: auto; }
  .trow__main { flex-basis: 100%; order: 3; }
  .trow__state { margin-left: auto; }
  .trow > .i { display: none; }
  .steps li { font-size: 11.5px; }
  .seg { display: flex; width: 100%; }
  .seg a { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .filters .sel, .card__bar--stack .filters .sel { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filters .search, .card__bar--stack .filters .search { flex: 1 1 100%; }
  .filters .btn, .card__bar--stack .filters .btn { flex: 1 1 100%; }
  .card { padding: 18px 16px; }
  .card--flush { padding: 0; }
}
@media (max-width: 560px) {
  .form-grid, .agrid { grid-template-columns: 1fr; }
  .kpis { gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi__num { font-size: 26px; }
  .kpi__hint { display: none; }
  .composer__foot .btn { margin-left: 0; width: 100%; }
}

/* ---------- иконки (CSS-маски, цвет — currentColor) ---------- */
.i { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; vertical-align: -3px; }
:root { --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); --i-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
.i-inbox { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.i-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.i-building { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/%3E%3C/svg%3E"); }
.i-settings { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E"); }
.i-plus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); }
.i-book { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.i-external { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E"); }
.i-logout { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); }
.i-search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); }
.i-clock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.i-alert { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.i-userx { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='17' y1='8' x2='22' y2='13'/%3E%3Cline x1='22' y1='8' x2='17' y2='13'/%3E%3C/svg%3E"); }
.i-hourglass { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); }
.i-zap { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
.i-clip { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
.i-lock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.i-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.i-chevron { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }
.i-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.i-flask { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6.5L4.5 19a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E"); }
.i-download { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.i-phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.i-user { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.i-menu { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E"); }
.i-incident { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); }
.i-change_request { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.i-question { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.i-send { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E"); }
.i-key { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E"); }
.i-shield { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.i-arrow-left { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E"); }
.i-file { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpolyline points='13 2 13 9 20 9'/%3E%3C/svg%3E"); }
.i-copy { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
.i-trash { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.i-refresh { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); }
.i-message { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }