/* ==========================================================================
   OmniDesk — база: сцена (ambient mesh), каркас, плавающий стеклянный
   сайдбар, стеклянный топбар. Стиль Apple Liquid Glass.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- сцена: цветная «жидкость» под стеклом ----------
   Стекло красиво, когда есть что преломлять: мягкий mesh-градиент,
   закреплённый за вьюпортом (v1.7.1: статичный — см. body::before). */
body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46rem 32rem at 14% -6%,  var(--scene-1), transparent 62%),
    radial-gradient(40rem 28rem at 88% 12%,  var(--scene-2), transparent 60%),
    radial-gradient(44rem 30rem at 78% 96%,  var(--scene-3), transparent 64%),
    radial-gradient(38rem 26rem at 6% 88%,   var(--scene-4), transparent 58%);
  /* v1.7.1: сцена СТАТИЧНА. Раньше здесь жили filter: blur(2px),
     will-change: transform и бесконечная 36-секундная анимация — браузер
     перекрашивал полноэкранный слой 60 раз в секунду, и на этом фоне
     десятки стеклянных элементов передёргивались каждый кадр. Радиальные
     градиенты и так «мягкие» — визуально разницы нет, FPS заметно растёт. */
}
/* лёгкое зерно — стекло читается как материал, а не как размытие
   (в тёмной теме выключено: на прозрачных полях даёт муар) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-resolved-theme="dark"] body::after { opacity: 0; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--separator); }

h1, h2, h3, h4 { font-weight: 650; line-height: 1.25; letter-spacing: -.012em; }

::selection { background: rgb(46 144 255 / .28); }

/* тонкие «стеклянные» скроллбары */
* { scrollbar-width: thin; scrollbar-color: var(--separator-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--separator-strong);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* фокус — кольцо как в visionOS */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 5px var(--accent-hi);
  border-radius: var(--radius-s);
}

/* iOS-шкала типографики */
.t-large  { font-size: 34px; font-weight: 700; letter-spacing: -.016em; }
.t-title2 { font-size: 22px; font-weight: 650; letter-spacing: -.012em; }
.t-title3 { font-size: 20px; font-weight: 650; }
.t-head   { font-size: 17px; font-weight: 650; }
.t-body   { font-size: 17px; font-weight: 400; }
.t-sub    { font-size: 15px; color: var(--text-2); }
.t-foot   { font-size: 13px; color: var(--text-2); }
.t-mono   { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

/* ---------- каркас: плавающий стеклянный сайдбар + контент ---------- */
.app { min-height: 100dvh; }

.shell {
  display: grid;
  grid-template-columns: calc(var(--sidebar-w) + var(--sidebar-gap) * 2) 1fr;
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  margin: var(--sidebar-gap) 0 var(--sidebar-gap) var(--sidebar-gap);
  display: flex;
  flex-direction: column;
  padding: var(--s3) var(--s2) var(--s3);
  gap: var(--s1);
  z-index: 40;
  border-radius: var(--radius-xl);
  background: linear-gradient(168deg, var(--glass-tint-a), var(--glass-tint-b));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-stroke);
  box-shadow:
    inset 0 1px 0 var(--glass-spec),
    inset 0 -1px 0 var(--glass-spec-2),
    var(--glass-drop);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar { background: var(--glass-tint-solid); }
}

.sidebar__logo {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s2) var(--s3) var(--s4);
  font-weight: 750; font-size: 19px; letter-spacing: -.02em;
}
.sidebar__logo img {
  width: 32px; height: 32px; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 8px rgb(23 32 84 / .18);
}

.nav__section {
  font-size: 11.5px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding: var(--s3) var(--s3) var(--s1);
}
.nav__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--s3);
  border-radius: var(--radius-m);
  color: var(--text);
  font-size: 15px; font-weight: 550;
  cursor: pointer; user-select: none;
  transition: background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nav__item:hover { background: var(--hover); text-decoration: none; }
.nav__item:active { transform: scale(.985); }
/* выбранная точка — тинтовое стекло с бликом (тинт = акцент) */
.nav__item.is-active {
  background: linear-gradient(118deg, var(--accent-hi), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .42),
    inset 0 0 0 1px rgb(255 255 255 / .14),
    0 4px 14px rgb(0 105 217 / .35);
}
.nav__item .icon { width: 20px; height: 20px; color: var(--accent); flex: none; transition: color var(--t-fast) var(--ease); }
.nav__item.is-active .icon { color: #fff; }
.nav__badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--red);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 8px rgb(229 52 43 / .4);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav__spacer { flex: 1; }

.sidebar__user {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  margin-top: var(--s1);
  border-radius: var(--radius-m);
  background: var(--bg-sunken);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-hi), var(--purple));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 2px 8px rgb(101 88 230 / .3);
  color: #fff; font-weight: 650; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.sidebar__user-name { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__user-status { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 3px var(--green-soft); }
.dot.is-warn { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--topbar-h);
  padding: 0 var(--s6);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
/* при скролле топбар становится «регулярным стеклом» */
.topbar.is-stuck {
  background: linear-gradient(118deg, var(--glass-tint-a), var(--glass-tint-b));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--separator);
  box-shadow: inset 0 1px 0 var(--glass-spec), 0 6px 24px rgb(23 32 84 / .07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar.is-stuck { background: var(--glass-tint-solid); }
}
.topbar__title { font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: var(--s2); }

.content {
  width: 100%;
  max-width: var(--content-max);
  padding: var(--s4) var(--s6) 120px;
  animation: page-in var(--t-med) var(--ease) both;
}

/* бургер на узких экранах */
.burger { display: none; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 296px;
    margin: 10px; height: calc(100dvh - 20px);
    transform: translateX(calc(-100% - 16px));
    transition: transform var(--t-med) var(--ease);
    box-shadow: var(--glass-drop-lg);
  }
  .sidebar.is-open { transform: none; }
  .burger { display: inline-flex; }
  .content { padding: var(--s3) var(--s4) 120px; }
  .topbar { padding: 0 var(--s4); }
  .t-large { font-size: 28px; }
}

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