/* Liquid glass: общий материал isa-crm поверх базовой дизайн-системы. */
:root {
  --glass-fill: color-mix(in srgb, var(--surface) 76%, transparent);
  --glass-float: color-mix(in srgb, var(--surface) 91%, transparent);
  --glass-line: color-mix(in srgb, var(--text, var(--ink)) 12%, transparent);
  --glass-shine: rgba(255, 255, 255, .76);
  --glass-sheen: rgba(255, 255, 255, .42);
  --glass-shadow: 0 8px 28px rgba(31, 41, 85, .07), 0 2px 5px rgba(31, 41, 85, .04);
  --glass-glow-a: rgba(139, 120, 246, .19);
  --glass-glow-b: rgba(72, 177, 228, .15);
  --glass-glow-c: rgba(178, 141, 244, .12);
  --glass-ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="dark"] {
  --glass-fill: color-mix(in srgb, var(--surface) 70%, transparent);
  --glass-shine: rgba(255, 255, 255, .15);
  --glass-sheen: rgba(255, 255, 255, .065);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 5px rgba(0, 0, 0, .12);
  --glass-glow-a: rgba(108, 88, 232, .22);
  --glass-glow-b: rgba(33, 153, 188, .14);
  --glass-glow-c: rgba(116, 88, 206, .12);
}
/* Самостоятельный сканер также поддерживает автоматическую системную тему. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --glass-shine: rgba(255, 255, 255, .15);
    --glass-sheen: rgba(255, 255, 255, .065);
    --glass-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  }
}
body.isa-glass {
  background:
    radial-gradient(ellipse at 18% 0%, var(--glass-glow-a), transparent 52%),
    radial-gradient(ellipse at 88% 18%, var(--glass-glow-b), transparent 48%),
    radial-gradient(ellipse at 65% 95%, var(--glass-glow-c), transparent 55%), var(--bg);
  background-attachment: fixed;
}
.isa-glass :is(.side, .top, .card, .panel, .auth-card, .viewer-stage, .tl-entry,
  .inline-form, .lead-savebar, .gauge, .tile, .chart, .srow, details.help, dialog) {
  background: var(--surface);
  background: linear-gradient(145deg, var(--glass-sheen), transparent 48%), var(--glass-fill);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 rgba(255, 255, 255, .025), var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
.isa-glass .side { z-index: 21; }
.isa-glass .top { background-color: var(--glass-fill); box-shadow: inset 0 -1px 0 var(--glass-line); }
.isa-glass .card, .isa-glass .auth-card { border-radius: 20px; }
.isa-glass .panel, .isa-glass .viewer-stage { border-radius: 16px; }
/* backdrop-filter создаёт containing block: панель сохранения должна остаться у окна. */
.isa-glass .panel.lead-main { -webkit-backdrop-filter: none; backdrop-filter: none; }
.isa-glass .card { padding: 22px; }
.isa-glass .card-title { font-size: 15px; letter-spacing: -.01em; }
.isa-glass .card-desc { line-height: 1.65; }
.isa-glass .card-icon {
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 20px;
  background: linear-gradient(140deg, var(--glass-sheen), transparent), var(--accent-soft);
  border: 1px solid var(--accent-line, var(--glass-line));
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 12px rgba(79, 70, 229, .06);
  transition: transform .35s var(--glass-ease), box-shadow .35s;
}
.isa-glass .card-off { box-shadow: inset 0 1px 0 var(--glass-shine); }
.isa-glass .card-off .card-icon { background: var(--glass-fill); border-color: var(--glass-line); }
.isa-glass .brand-mark {
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .3), 0 4px 14px rgba(79, 70, 229, .28);
}
.isa-glass .nav-link {
  border: 1px solid transparent;
  transition: background .22s, border-color .22s, box-shadow .22s;
}
.isa-glass .nav-link.active {
  background: linear-gradient(125deg, var(--glass-sheen), transparent), var(--accent-soft);
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 3px 10px rgba(79, 70, 229, .06);
}
.isa-glass .nav-link.active::before { left: -1px; }
.isa-glass .nav-link:hover:not(.disabled) { border-color: var(--glass-line); background-color: var(--glass-fill); }
.isa-glass .btn {
  background: linear-gradient(160deg, var(--glass-sheen), transparent), var(--glass-fill);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 2px 4px rgba(0, 0, 0, .035);
  transition: transform .22s var(--glass-ease), box-shadow .22s, background .22s, border-color .22s;
}
.isa-glass .btn:hover { box-shadow: inset 0 1px 0 var(--glass-shine), 0 5px 14px rgba(79, 70, 229, .12); }
.isa-glass .btn:active { transform: translateY(1px) scale(.975); }
.isa-glass .btn-primary, html[data-theme="dark"] .isa-glass .btn-primary {
  background: linear-gradient(145deg, #7567f1, #5144cf 65%, #4536b7);
  color: #fff; border-color: rgba(255, 255, 255, .23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 12px rgba(79, 70, 229, .22);
}
.isa-glass .btn-primary:hover { filter: brightness(1.08); }
.isa-glass .btn-ghost { background: transparent; box-shadow: none; }
.isa-glass .btn-ghost:hover { background: var(--glass-fill); }
.isa-glass .theme-btn, .isa-glass .user-btn, .isa-glass .burger { transition: background .2s, transform .2s; }
.isa-glass :is(.theme-btn, .user-btn, .burger):hover { background: var(--glass-fill); }
.isa-glass .theme-btn:active { transform: rotate(15deg) scale(.92); }
.isa-glass :is(.user-drop, .dropdown-menu, .flt-panel, .flt-picker, .dp-pop) {
  background: var(--surface);
  background: linear-gradient(145deg, var(--glass-sheen), transparent 50%), var(--glass-float);
  border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow);
}
.isa-glass :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background-color: var(--glass-fill); border-color: var(--glass-line);
}
.isa-glass :is(input, select, textarea):focus { background-color: var(--surface); }
.isa-glass .form-actions, .isa-glass table.list thead { background: var(--glass-fill); }
.isa-glass .tabs { border-color: var(--glass-line); }
.isa-glass .tab { transition: color .2s, background .2s, box-shadow .2s; border-radius: 10px 10px 0 0; }
.isa-glass .tab.active { background: linear-gradient(0deg, var(--accent-soft), transparent); }
.isa-glass .chip, .isa-glass .stage-chip { box-shadow: inset 0 1px 0 var(--glass-shine); }
.isa-glass .tl-entry { border-radius: 14px; }
.isa-glass .slider-panel { background: var(--bg); border-left: 1px solid var(--glass-shine); }
.isa-glass .slider-overlay { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.isa-glass .overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.isa-glass .slider-close { border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow); }
.isa-glass .content { animation: glass-page-in .45s var(--glass-ease) both; }
.isa-glass .panel { animation: glass-fade-in .4s ease both; }
.isa-glass .grid .card { animation: glass-card-in .55s var(--glass-ease) backwards; }
.isa-glass .grid .card:nth-child(1) { animation-delay: .03s; }
.isa-glass .grid .card:nth-child(2) { animation-delay: .07s; }
.isa-glass .grid .card:nth-child(3) { animation-delay: .11s; }
.isa-glass .grid .card:nth-child(4) { animation-delay: .15s; }
.isa-glass .grid .card:nth-child(5) { animation-delay: .19s; }
.isa-glass .grid .card:nth-child(n+6) { animation-delay: .23s; }
.isa-glass .grid .card:nth-child(n+13) { animation: none; }
.isa-glass .card-link { position: relative; overflow: hidden; }
.isa-glass .card-link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--glint-x, 50%) var(--glint-y, 0%), var(--glass-sheen), transparent 75%);
  transition: opacity .35s;
}
@media (hover: hover) and (pointer: fine) {
  .isa-glass .card-link:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: inset 0 1px 0 var(--glass-shine), 0 16px 32px rgba(79, 70, 229, .12); }
  .isa-glass .card-link:hover::after { opacity: 1; }
  .isa-glass .card-link:hover .card-icon { transform: translateY(-2px) rotate(-4deg); }
}
@keyframes glass-page-in { from { opacity: .3; translate: 0 6px; } to { opacity: 1; translate: none; } }
@keyframes glass-card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes glass-fade-in { from { opacity: .35; } to { opacity: 1; } }

/* Реальная загрузка: тонкая полоса и стеклянная капсула после короткой задержки. */
.page-loading { position: fixed; inset: 0; z-index: 150; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
html.is-page-loading .page-loading { visibility: visible; opacity: 1; }
.loading-line { position: absolute; top: 0; left: 0; width: 100%; height: 3px; overflow: hidden; }
.loading-line::after {
  content: ""; display: block; width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), #b5b7ff, var(--accent), transparent);
  box-shadow: 0 1px 12px var(--accent); animation: glass-progress 1.3s ease-in-out infinite paused;
}
.loading-pill {
  position: absolute; top: 76px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 999px;
  background: var(--glass-float); color: var(--text, var(--ink)); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  font: 500 13px/1.4 var(--font, var(--font-ui)); white-space: nowrap;
  opacity: 0;
}
html.is-page-loading .loading-pill { animation: glass-loader-in .2s .25s both; }
.liquid-spinner {
  display: inline-block; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  border: 1px solid var(--glass-shine);
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), transparent 28%), conic-gradient(from 0deg, #9995fb, #61d1da, #6361d9, #c0bbff, #9995fb);
  box-shadow: inset -3px -4px 7px rgba(38, 35, 111, .35), 0 2px 10px rgba(99, 102, 241, .22);
  animation: glass-orbit 1.6s linear infinite paused;
}
html.is-page-loading .loading-line::after,
html.is-page-loading .page-loading .liquid-spinner,
.slider-panel.is-loading .liquid-spinner { animation-play-state: running; }
@keyframes glass-progress { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
@keyframes glass-orbit { to { transform: rotate(360deg); } }
@keyframes glass-loader-in { to { opacity: 1; } }
.isa-glass .flt-loading { position: relative; opacity: .65; }
.isa-glass .flt-loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, var(--glass-sheen) 50%, transparent 75%);
  background-size: 200% 100%; animation: glass-shimmer 1.4s ease-in-out infinite;
}
@keyframes glass-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.slider-loading {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px;
  color: var(--muted); font-size: 14px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--glass-glow-a), transparent 60%), var(--bg);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.slider-loading .liquid-spinner { width: 42px; height: 42px; }
.slider-panel.is-loading .slider-loading { opacity: 1; visibility: visible; }
.slider-panel.is-loading .slider-frame { opacity: 0; }
.slider-frame { transition: opacity .25s ease; }
.isa-glass .slider-close { z-index: 2; }
.isa-glass:not(.isa-scanner) .toast {
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow);
}
.isa-glass:not(.isa-scanner) .toast:not(.error):not(.warning) {
  background: var(--glass-float); color: var(--text); border-color: var(--glass-line);
}

/* Отдельный экран OBD: сохраняем плотность приборов и семантические цвета. */
.isa-scanner :is(.gauge, .tile, .chart, .srow) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.isa-scanner .btn.primary { background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
.isa-scanner nav.tabs { background: var(--glass-float); border-color: var(--glass-line); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 var(--glass-shine); }
.isa-scanner .field { background: var(--glass-fill); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-shine); }
.isa-scanner .view.active { animation: glass-page-in .3s var(--glass-ease); }
.isa-scanner .panel { border-radius: 16px; }
@media (max-width: 900px) { .isa-glass .side { z-index: 30; background-color: var(--glass-float); } }
@media (max-width: 700px) {
  .isa-glass .card { padding: 20px; }
  .isa-glass :is(.card, .panel) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .loading-pill { top: 68px; }
}
/* Стекло деградирует до сплошной поверхности, а анимации не обязательны. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .isa-glass :is(.side, .top, .card, .panel, .auth-card, .dropdown-menu, .user-drop, .flt-panel, .flt-picker, .dp-pop, .loading-pill) { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body.isa-glass { background: var(--bg); }
  .isa-glass :is(.side, .top, .card, .panel, .auth-card, .dropdown-menu, .user-drop, .flt-panel, .flt-picker, .dp-pop, .loading-pill, .tl-entry) { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .isa-glass *, .isa-glass *::before, .isa-glass *::after { animation: none !important; transition: none !important; }
  .isa-glass .card-link:hover, .isa-glass .card-link:hover .card-icon { transform: none; }
  html.is-page-loading .loading-pill { opacity: 1; }
  .loading-line::after { width: 100%; transform: none; }
}