/* Skeyndor · Админка — спокойная «уходовая» эстетика. Mobile-first. */

:root {
  --bg: #F7F4EF;
  --bg-blur: rgba(247, 244, 239, .86);
  --card: #FFFFFF;
  --ink: #2E2A27;
  --ink-2: #4A433E;
  --muted: #8C8178;
  --line: #E4DDD3;
  --soft: #F2EDE6;
  --soft-2: #EAE3D9;
  --accent: #B8865B;
  --accent-2: #D9A877;
  --accent-ink: #8E6340;
  --accent-soft: #F5EADF;
  --on-accent: #FFFFFF;

  --ok: #4F7556;   --ok-bg: #E5EEE3;
  --warn: #A9701C; --warn-bg: #F8EBD3;
  --bad: #B0503C;  --bad-bg: #F7E2DB;
  --off: #7D746C;  --off-bg: #EDE8E2;

  /* Категории расходов — одни и те же везде */
  --c-agent:  #A8754F;  /* Ассистент — медь */
  --c-image:  #D9A877;  /* Картинки — золотистый песок */
  --c-video:  #6E4F45;  /* Видео — какао */
  --c-effect: #C98577;  /* Эффекты — пыльная роза */
  --c-search: #8D9C83;  /* Поиск — шалфей */
  --c-voice:  #7A8798;  /* Голос — серо-голубой */
  --c-doc:    #C8B89E;  /* Документы — тауп */
  --c-other:  #B9AFA5;

  --r: 16px;
  --r-sm: 12px;
  --shadow: 0 1px 2px rgba(46, 42, 39, .04), 0 6px 22px rgba(46, 42, 39, .055);
  --shadow-lg: 0 10px 40px rgba(46, 42, 39, .18);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --side: 248px;
  --tabbar: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161311;
    --bg-blur: rgba(22, 19, 17, .86);
    --card: #211D1A;
    --ink: #F1EAE1;
    --ink-2: #D9D0C5;
    --muted: #A2968A;
    --line: #362F29;
    --soft: #2A2420;
    --soft-2: #332C27;
    --accent: #C99567;
    --accent-2: #E2B585;
    --accent-ink: #E2B585;
    --accent-soft: #33281F;
    --on-accent: #1E1915;

    --ok: #93B898;   --ok-bg: #22302630;
    --warn: #E3AC52; --warn-bg: #3A2E1A;
    --bad: #E59079;  --bad-bg: #3B231E;
    --off: #A79D93;  --off-bg: #2D2723;

    --c-agent:  #C08A60;
    --c-image:  #E2B585;
    --c-video:  #9C7568;
    --c-effect: #D4917F;
    --c-search: #9DAE93;
    --c-voice:  #8E9CAF;
    --c-doc:    #CFC0A6;
    --c-other:  #7F766D;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px rgba(0, 0, 0, .25);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
  :root { --ok-bg: #23302A; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.noscroll { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 18px; height: 18px; }

/* ---------- Каркас ---------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--bg-blur);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.brand-txt { min-width: 0; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.05; white-space: nowrap; letter-spacing: .1px; }
.brand-name span { color: var(--accent); }
.brand-user { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; margin-right: -8px;
  border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; border-radius: 12px;
}
.logout:hover { color: var(--ink); background: var(--soft); }

.main { padding: 18px 16px calc(var(--tabbar) + env(safe-area-inset-bottom) + 28px); }
.content { max-width: 1080px; margin: 0 auto; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px 4px env(safe-area-inset-bottom);
  background: var(--bg-blur);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 4px 2px;
  color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .1px; border-radius: 12px;
}
.tab .ico { width: 23px; height: 23px; }
.tab.on { color: var(--accent-ink); }
.tab.on .ico { stroke-width: 2; }
.tab .dot {
  position: absolute; top: 5px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

.sidebar { display: none; }

@media (min-width: 900px) {
  .topbar, .tabbar { display: none; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 20;
    display: flex; flex-direction: column; gap: 6px;
    padding: 24px 16px 18px;
    background: var(--card); border-right: 1px solid var(--line);
  }
  .sidebar .brand { flex: none; padding: 0 8px 22px; }
  .sidebar .brand img { width: 38px; height: 38px; }
  .sidebar .brand-name { font-size: 24px; }
  .sidebar .brand-user { font-size: 13px; letter-spacing: .3px; }
  .side-link {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px; padding: 0 12px; border-radius: 12px;
    color: var(--ink-2); font-weight: 500;
  }
  .side-link:hover { background: var(--soft); }
  .side-link.on { background: var(--accent-soft); color: var(--accent-ink); }
  .side-link .dot {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    background: var(--bad); color: #fff; font-size: 12px; font-weight: 600; line-height: 22px; text-align: center;
  }
  .side-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); }
  .side-foot .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-foot .role { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
  .side-foot .logout { margin: 0 0 0 -12px; }
  .main { margin-left: var(--side); padding: 34px 40px 60px; }
}

/* ---------- Типографика страниц ---------- */
.page-head { margin: 2px 0 18px; }
.page-head h1, .h1 {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -.2px;
}
.lead { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 640px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase; color: var(--muted); }
h2.t, .t2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.1; }
.sec-title { display: flex; align-items: baseline; gap: 8px; margin: 26px 2px 10px; font-size: 13px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.sec-title .count { color: var(--ink-2); }

/* ---------- Карточки ---------- */
.card {
  background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid transparent;
}
@media (prefers-color-scheme: dark) { .card { border-color: var(--line); } }
.card + .card { margin-top: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.hint { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }

/* ---------- Обзор ---------- */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ov-grid > .card, .ov-left > .card, .ov-right > .card { margin: 0; }
@media (min-width: 900px) {
  .ov-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 16px; }
  .ov-left, .ov-right { display: grid; gap: 16px; }
  .ov-left > .card, .ov-right > .card { margin: 0; }
}
@media (max-width: 899px) { .ov-left, .ov-right { display: contents; } #settings { order: 2; } }

.hero { padding: 20px 18px 18px; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 168, 119, .22), rgba(217, 168, 119, 0) 70%); pointer-events: none;
}
.hero-label { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.hero-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 14px; }
.big { font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -.5px; font-variant-numeric: lining-nums tabular-nums; }
.of { color: var(--muted); font-size: 15px; }
.bar { height: 10px; border-radius: 6px; background: var(--soft-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }
.bar.warn > i { background: linear-gradient(90deg, #C98A2B, #E3AC52); }
.bar.over > i { background: linear-gradient(90deg, #A8432F, #D06A50); }
.bar-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4;
}
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.over { background: var(--bad-bg); color: var(--bad); }
.note.info { background: var(--soft); color: var(--ink-2); }
.note b { font-weight: 600; }
.note .ico { margin-top: 1px; }
.note-link { display: inline-block; margin-top: 4px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats > .card { margin: 0; padding: 16px; }
.stat-label { font-size: 13px; color: var(--muted); line-height: 1.3; }
.stat-num { margin-top: 6px; font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.stat-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

.link-card { display: flex; align-items: center; gap: 14px; color: var(--ink); min-height: 72px; }
.link-card:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.link-card .badge-num {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 600; font-size: 18px; background: var(--soft); color: var(--muted);
}
.link-card.has .badge-num { background: var(--bad-bg); color: var(--bad); }
.link-card .lc-main { flex: 1; min-width: 0; }
.link-card .lc-title { font-weight: 600; }
.link-card .lc-sub { font-size: 13.5px; color: var(--muted); }
.link-card .chev { color: var(--muted); }

/* ---------- Пончик ---------- */
.donut-wrap { display: grid; gap: 16px; align-items: center; }
.dn-body { container-type: inline-size; }
@container (min-width: 480px) { .donut-wrap { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; } }
.donut { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle.seg { transition: opacity .2s; }
.donut.dim circle.seg:not(.hl) { opacity: .28; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 0 30px; }
.donut-center .v { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.donut-center .l { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.25; }
.legend { list-style: none; margin: 0; padding: 0; }
.legend li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 9px 4px; border-top: 1px solid var(--line);
}
.legend li:first-child { border-top: 0; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.legend .lt { font-weight: 500; min-width: 0; }
.legend .ls { grid-column: 2; font-size: 13px; color: var(--muted); }
.legend .lp { grid-row: 1 / span 2; grid-column: 3; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.empty-donut { text-align: center; color: var(--muted); padding: 10px 0 4px; }

/* Переключатель */
.seg-sw { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--soft); gap: 2px; }
.seg-sw button {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: none;
  color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.seg-sw button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(46, 42, 39, .12); }

/* ---------- Формы ---------- */
.field { display: block; }
.field + .field { margin-top: 14px; }
.field > span.lbl { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.err { border-color: var(--bad); }
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix .pre { position: absolute; left: 14px; color: var(--muted); font-size: 16px; pointer-events: none; }
.input-affix .post { position: absolute; right: 14px; color: var(--muted); font-size: 14px; pointer-events: none; }
.input-affix .input.has-pre { padding-left: 30px; }
.input-affix .input.has-post { padding-right: 78px; }
select.input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8178' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .grow { flex: 1 1 160px; min-width: 0; }
.form-grid { display: grid; gap: 14px; }
.cq { container-type: inline-size; }
@container (min-width: 460px) { .form-grid.two { grid-template-columns: 1fr 1fr; align-items: end; } }
.form-grid .field + .field { margin-top: 0; }
.field-err { margin-top: 6px; font-size: 13px; color: var(--bad); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 500; line-height: 1.1; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s, opacity .15s;
  -webkit-user-select: none; user-select: none;
}
.btn:hover { background: var(--soft); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn-primary { border-color: transparent; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px rgba(184, 134, 91, .28); }
.btn-primary:hover { background: linear-gradient(135deg, #A9784F, #CF9C69); }
@media (prefers-color-scheme: dark) { .btn-primary:hover { background: linear-gradient(135deg, #D3A072, #EBC195); } }
.btn-soft { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.btn-soft:hover { background: var(--soft-2); }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: transparent; }
.btn-danger-solid { border-color: transparent; background: var(--bad); color: #fff; }
.btn-danger-solid:hover { background: #9B4433; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
.btn-icon:hover { color: var(--bad); background: var(--bad-bg); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btns > .btn { flex: 1 1 auto; }
.btn .spin { width: 18px; height: 18px; border-width: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; min-width: 64px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip-gold { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip-gold:hover { background: var(--soft-2); }

/* ---------- Значки ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 12px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; vertical-align: middle; line-height: 1;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.b-active { background: var(--ok-bg); color: var(--ok); }
.b-pending { background: var(--warn-bg); color: var(--warn); }
.b-disabled { background: var(--off-bg); color: var(--off); }
.b-rejected { background: var(--bad-bg); color: var(--bad); }
.b-role { background: var(--accent-soft); color: var(--accent-ink); }
.b-ready { background: var(--ok-bg); color: var(--ok); }
.b-uploading { background: var(--warn-bg); color: var(--warn); }
.b-failed { background: var(--bad-bg); color: var(--bad); }

/* ---------- Аватар ---------- */
.av {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px; letter-spacing: .3px; color: #4A3A2E;
}
.av-lg { width: 64px; height: 64px; font-size: 22px; }

/* ---------- Заявки ---------- */
.req { display: grid; gap: 14px; }
.req-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.req-who { min-width: 0; flex: 1; }
.req-name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.req-sub { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.req-actions { display: grid; gap: 10px; }
@media (min-width: 560px) {
  .req-actions.access { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
}
.req-actions .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 560px) { .req-actions .two { display: contents; } }
.tok-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tok-actions .chip { min-width: 0; }
.tok-actions .btn { grid-column: 1 / -1; }
@media (min-width: 560px) { .tok-actions { grid-template-columns: repeat(3, 84px) 1fr; } .tok-actions .btn { grid-column: auto; justify-self: end; } }
.req.leaving { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }

/* ---------- Пустые состояния ---------- */
.empty { text-align: center; padding: 34px 20px 30px; }
.empty .em-ico {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.empty .em-ico .ico { width: 28px; height: 28px; }
.empty .em-t { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.15; }
.empty .em-s { margin: 8px auto 0; max-width: 380px; color: var(--muted); font-size: 14.5px; }
.empty .btn { margin-top: 16px; }

/* ---------- Команда ---------- */
.people { display: grid; gap: 10px; }
@media (min-width: 1100px) { .people { grid-template-columns: 1fr 1fr; } }
.person-row {
  display: flex; gap: 12px; align-items: flex-start; color: var(--ink); min-height: 76px;
  transition: box-shadow .15s, transform .08s;
}
.card.person-row { margin: 0; padding: 14px 16px; }
.person-row:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.person-row:active { transform: scale(.995); }
.pr-main { flex: 1; min-width: 0; }
.pr-line1 { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.pr-line1 .pr-name { margin-right: 2px; }
.pr-name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.pr-sub { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; margin-top: 1px; }
.pr-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.pr-nums b { font-weight: 600; color: var(--ink); }
.pr-side { display: flex; align-self: center; }
.pr-side .chev { color: var(--muted); }

.invites { display: grid; gap: 0; padding: 4px 6px 4px 16px; }
.invite { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--line); }
.invite:first-child { border-top: 0; }
.invite .iv-main { flex: 1; min-width: 0; }
.invite .iv-name { font-weight: 600; overflow-wrap: anywhere; }
.invite .iv-sub { font-size: 13px; color: var(--muted); }

/* ---------- Сотрудник ---------- */
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 6px -8px; padding: 0 10px 0 4px; color: var(--muted); font-weight: 500; border-radius: 12px; }
.back:hover { color: var(--ink); background: var(--soft); }
.p-head { display: flex; gap: 14px; align-items: center; }
.p-head .h1 { font-size: 30px; overflow-wrap: anywhere; }
.p-sub { color: var(--muted); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.p-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.p-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 18px -18px 0; border-top: 1px solid var(--line); }
.p-stats > div { padding: 14px 12px 2px 18px; border-left: 1px solid var(--line); min-width: 0; }
.p-stats > div:first-child { border-left: 0; }
.p-stats .stat-num { font-size: 26px; }
@media (max-width: 420px) {
  .p-stats { grid-template-columns: 1fr 1fr; }
  .p-stats > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .p-stats > div:nth-child(2) { border-left: 0; }
}
.p-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.p-actions .btn { padding: 0 10px; }
.p-actions .wide { grid-column: 1 / -1; }
@media (min-width: 640px) { .p-actions { display: flex; flex-wrap: wrap; } .p-actions .btn { padding: 0 18px; } }
.p-meta { margin-top: 14px; font-size: 13px; color: var(--muted); }
.p-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.p-grid > * { min-width: 0; }
.p-grid > .card { margin: 0; }
@media (min-width: 900px) { .p-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 16px; margin-top: 16px; } }
.auto-state { font-size: 14px; color: var(--ink-2); margin: 2px 0 12px; }
.auto-state b { font-weight: 600; }

/* Вкладки */
.tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -18px 16px; padding: 0 18px; border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; min-height: 46px; padding: 0 12px; border: 0; background: none;
  color: var(--muted); font-weight: 500; font-size: 15px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button .cnt { color: var(--muted); font-weight: 400; margin-left: 2px; }

/* ---------- Работы ---------- */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1100px) { .works.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work { min-width: 0; }
.work-media {
  position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--soft);
  border: 0; padding: 0; width: 100%; display: block;
}
.work-media img, .work-media video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.work-media img { background: var(--soft); transition: transform .3s; }
button.work-media:hover img { transform: scale(1.03); }
.work-media .kind {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 8px;
  background: rgba(30, 25, 21, .58); color: #fff; font-size: 11.5px; font-weight: 600; pointer-events: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
.ph small { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ph .ico { width: 28px; height: 28px; opacity: .7; }
.ph-fail { color: var(--bad); background: var(--bad-bg); }
.work-cap { padding: 8px 2px 0; }
.work-title { font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-meta { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.work-author { display: inline-block; padding: 12px 8px 12px 0; margin: -12px 0 -10px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar .input { max-width: 340px; flex: 1 1 220px; }
.filter-bar .cnt { color: var(--muted); font-size: 14px; }

/* ---------- Переписка ---------- */
.chat {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 68vh; max-height: 68dvh; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -18px -18px; padding: 4px 14px 18px;
}
.chat-more { align-self: center; margin: 4px 0 10px; }
.day { align-self: center; margin: 10px 0 4px; padding: 3px 10px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 500; }
.msg { max-width: 86%; padding: 9px 13px 7px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 6px; }
.msg.assistant { align-self: flex-start; background: var(--soft); border-bottom-left-radius: 6px; }
.msg .who { font-size: 12px; font-weight: 600; color: var(--accent-ink); margin-bottom: 2px; }
.msg .at { font-size: 11px; color: var(--muted); text-align: right; margin-top: 3px; }
.msg code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 1px 5px; border-radius: 5px; background: rgba(46, 42, 39, .07); }
.msg pre { white-space: pre-wrap; margin: 4px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.msg a { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { .msg code { background: rgba(255, 255, 255, .08); } }

/* ---------- История ---------- */
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.hist li:first-child { border-top: 0; padding-top: 0; }
.h-what { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.h-what .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.h-what span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-sub { grid-column: 1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.h-delta { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-delta.plus { color: var(--ok); }
.h-usd { grid-column: 2; text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.profile-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; color: var(--ink-2); background: var(--soft); border-radius: 12px; padding: 14px 16px; }

/* ---------- База знаний ---------- */
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; border-top: 1px solid var(--line); }
.kb-item:first-child { border-top: 0; }
.ext {
  flex: none; width: 44px; height: 52px; border-radius: 9px; display: grid; place-items: end center; padding-bottom: 8px;
  background: var(--soft); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  position: relative;
}
.ext::before { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: linear-gradient(225deg, var(--card) 50%, var(--soft-2) 50%); border-bottom-left-radius: 4px; }
.kb-main { flex: 1; min-width: 0; }
.kb-name { font-weight: 500; overflow-wrap: anywhere; line-height: 1.3; }
.kb-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--muted); }
.progress { height: 6px; border-radius: 4px; background: var(--soft-2); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s; }
.drop {
  display: grid; place-items: center; gap: 6px; text-align: center;
  padding: 22px 16px; border: 1.5px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px;
  transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .btn { margin-bottom: 4px; }

/* ---------- Нижняя шторка / диалог ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(30, 25, 21, .42); opacity: 0; transition: opacity .2s; }
.sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--card); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg);
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(24px); opacity: 0; transition: transform .22s ease, opacity .22s ease;
  outline: none;
}
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; }
.sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; opacity: 1; }
@media (min-width: 640px) {
  .sheet-wrap { align-items: center; padding: 24px; }
  .sheet { border-radius: 20px; padding: 24px; }
  .sheet::before { display: none; }
}
.sheet h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.sheet .s-text { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.sheet .s-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.sheet .s-btns.one { grid-template-columns: 1fr; }
.sheet .chips { margin-bottom: 14px; }
.sheet.media { max-width: 760px; }
.lb-media { border-radius: 14px; overflow: hidden; background: var(--soft); }
.lb-media img, .lb-media video { width: 100%; max-height: 64vh; max-height: 64dvh; object-fit: contain; margin: 0 auto; }
.lb-info { margin-top: 14px; }
.lb-info .lb-t { font-weight: 600; font-size: 16px; }
.lb-info .lb-m { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.lb-info .lb-p { margin-top: 10px; font-size: 14px; color: var(--ink-2); background: var(--soft); border-radius: 12px; padding: 10px 12px; overflow-wrap: anywhere; }

/* ---------- Тост ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 12px); z-index: 120; display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
@media (min-width: 900px) { .toasts { bottom: 28px; left: var(--side); } }
body.noscroll .toasts { top: calc(env(safe-area-inset-top) + 14px); bottom: auto; left: 0; }
.toast {
  max-width: 460px; padding: 12px 16px; border-radius: 14px;
  background: var(--ink); color: var(--bg); font-size: 14.5px; font-weight: 500; line-height: 1.35;
  box-shadow: var(--shadow-lg); pointer-events: auto;
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { background: var(--bad); color: #fff; }

/* ---------- Загрузка ---------- */
.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--soft-2); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sk { border-radius: 10px; background: linear-gradient(90deg, var(--soft) 0%, var(--soft-2) 50%, var(--soft) 100%); background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-h { height: 34px; width: 46%; margin: 4px 0 20px; }
.sk-card { height: 150px; border-radius: var(--r); margin-top: 12px; }
.sk-card.s { height: 84px; }
.loading-line { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px; color: var(--muted); font-size: 14px; }

/* ---------- Экран входа ---------- */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 20px; }
.gate-card { width: 100%; max-width: 420px; text-align: center; }
.gate-card img { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 22px; box-shadow: 0 10px 30px rgba(184, 134, 91, .3); }
.gate-card .brand-name { font-size: 30px; white-space: normal; }
.gate-card .g-text { margin: 18px auto 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 360px; }
.gate-card .g-text b { font-weight: 600; color: var(--ink); }
.gate-card .g-sub { margin-top: 12px; font-size: 14px; color: var(--muted); }
.gate-card .btn { margin-top: 26px; }
.gate-card .g-note { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 14px; font-weight: 500; }

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