/* Выставочная поверхность. Свет и полупрозрачные слои заменяют металлические
   рамки; плотность информации и размер сенсорных зон сохраняются. */

body {
  background-image: radial-gradient(ellipse at 68% 0%, #2f424140, transparent 65%);
}
.content {
  z-index: 1;
  transform-origin: center top;
  transition: transform 480ms var(--ease), filter 480ms var(--ease);
}
.sidebar {
  background: linear-gradient(180deg, #141d1cb8, #0f1616c9);
  backdrop-filter: blur(24px) saturate(130%);
  box-shadow: 12px 0 40px #080e0e20;
  border-color: #efe0c112;
}
.brand__mark {
  border-color: #e6cd9c55;
  background: radial-gradient(circle at 35% 25%, #e6cd9a26, #51645f33);
  box-shadow: 0 0 22px #e1c38622, inset 0 0 12px #e8d1a416;
}
.brand__name { font-weight: 550; letter-spacing: -0.04em; }
.brand__note { color: #889592; }
.nav-group { gap: 4px; }
.nav-group__title { color: #7c8986; letter-spacing: 0.14em; }
.nav-link {
  position: relative;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #adb9b6;
  box-shadow: none;
}
.nav-link:hover {
  color: #f8f5ef;
  background: #f1e2c508;
  border-color: #f1e3c612;
}
.nav-link[aria-current="page"] {
  color: #f5f2eb;
  border-color: #e9d3a824;
  background: linear-gradient(100deg, #e0c18220, #e6cd9a0d);
  box-shadow: inset 0 0 18px #e4c99306, 0 0 22px #e2c48908;
}
.nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 44%;
  left: -1px;
  top: 28%;
  border-radius: 10px;
  background: #ebd6ad;
  box-shadow: 0 0 10px #e4c994;
}
.nav-link__glyph { color: #cfbc97; }
.nav-link[aria-current="page"] .nav-link__glyph { color: #eddbb6; }
.sidebar-summary { border-color: #efe0c112; }
.header {
  background: #121a1a9c;
  backdrop-filter: blur(24px) saturate(140%);
  border-color: #eedebd12;
  box-shadow: 0 6px 28px #080f0e20;
}
.header__views, .header-actions {
  border-radius: 12px;
  border: 1px solid #ece5d70f;
  background: #0a10102e;
  box-shadow: inset 0 1px 4px #09100f20;
}
.view-tab { border-radius: 8px; color: #a6b4b0; }
.view-tab[aria-pressed="true"] {
  background: linear-gradient(110deg, #ead6ad20, #c6b38e20);
  box-shadow: inset 0 0 0 1px #eddbb72b, 0 0 20px #e2c58c10;
  color: #f5f1e9;
}
.header-action { border-radius: 9px; }
.header-action--capture {
  background: linear-gradient(135deg, #eddbb8, #e4c891);
  color: #1d2f2e;
  border-color: #ece4d6bb;
  box-shadow: 0 0 20px #e2c58c22;
}
.header-action--capture:hover, .header-action--capture:focus-visible {
  background: linear-gradient(135deg, #f0eadf, #ebd7af);
  box-shadow: 0 0 28px #e2c68d55;
}
.header-action--fullscreen[aria-pressed="true"] {
  color: #e9d3a7;
  background: #e3c7901a;
  border-color: #ebd7af44;
}
.demo-mark { border-color: #ece6d922; color: #95a29f; }
.page-head h1 { font-weight: 550; letter-spacing: -0.035em; }
.page-head h1::before {
  width: 3px;
  background: linear-gradient(#ecd9b3, #e5ca95);
  box-shadow: 0 0 18px #e3c78e;
}
.page-head__sub { color: #9da8a5; }

.panel, .orbit-overview {
  border: 1px solid #eddcb920;
  border-radius: var(--radius);
  background: var(--sheen), var(--panel-glass);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: var(--shadow-panel);
}
.panel {
  position: relative;
  transition: border-color 300ms, box-shadow 300ms, transform 450ms var(--ease);
}
.panel::before {
  top: -1px; left: 15%; right: 25%; height: 1px;
  background: linear-gradient(90deg, transparent, #eedcb970, #ac9aff40, transparent);
}
.panel::after, .orbit-overview::after {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--light-x, 50%) var(--light-y, 0%), #e5cb9712, transparent 70%);
  opacity: 0;
  transition: opacity 400ms;
  pointer-events: none;
}
.panel__head {
  margin: 0 0 8px;
  padding: 1px 0 8px;
  border-color: #efdebd12;
  background: transparent;
  box-shadow: none;
}
.panel__title { font-weight: 550; letter-spacing: -0.015em; }
.panel__title::before, .pulse-panel .panel__title::before {
  width: 5px; height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}
.panel__hint { color: #98a5a2; }
.pulse-panel { background: var(--sheen), #23313073; }
.schedule-panel, .context-preview { background: var(--sheen), #1b28274d; }
.panel--flat { background: #10181866; backdrop-filter: none; box-shadow: var(--shadow-inset); }
.pulse-panel .card--accent {
  border: 1px solid #e6cd9b44;
  box-shadow: inset 2px 0 #e8d1a366, 0 0 32px #dbb87108;
  background: linear-gradient(125deg, #b39c6f17, #a0b5b011);
}
.card, .entity-row, .stat, .step {
  border: 1px solid #e0d1b214;
  border-radius: 10px;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.entity-row:hover {
  border-color: #e7cf9f4d;
  background: linear-gradient(125deg, #e5ca9512, #ebd7af09);
}
.entity-row--flat:hover { background: var(--surface-card); }
.waiting-panel .entity-row, .promises-panel .entity-row { border-radius: 10px; padding: 8px; }
.state-dot { box-shadow: 0 0 12px currentColor; }
.schedule__body {
  border: 1px solid #e0d1b20c;
  border-radius: 8px;
  background: linear-gradient(110deg, #eeddbc08, #d7c09303);
  box-shadow: none;
}
.schedule__bar { box-shadow: 0 0 12px currentColor; }
.badge {
  border-radius: 6px;
  border-color: #dfcfae33;
  background-image: none;
  box-shadow: none;
  font-weight: 400;
}
.badge--personal { border-color: #bbabff40; }
.badge--corporate { border-color: #e6cd9c40; }
.badge--warning { border-color: #f0a95a40; }
.badge--danger { border-color: #f0787e40; }
.notice { box-shadow: none; }
.empty-state, .error-state, .raw-text { background: #111a1950; box-shadow: none; }
.graph-wrap { background: radial-gradient(ellipse at 50% 48%, #576a6538, transparent 65%), #0f17166b; }
.graph-node__shape { filter: drop-shadow(0 0 9px #e0c28577); }

.btn, .icon-btn, .chip, .tab {
  border-radius: 8px;
  border-color: #e1cda533;
  background: var(--surface-control);
  box-shadow: var(--shadow-control);
}
.btn:hover:not(:disabled), .icon-btn:hover {
  background: linear-gradient(125deg, #e7d0a126, #ead5aa16);
  border-color: #eddab580;
  box-shadow: 0 0 24px #e4c99420;
}
.btn--primary {
  color: #182626;
  font-weight: 650;
  border-color: #eddbb699;
  background: linear-gradient(115deg, #ecdab5, #e6cd9b);
  box-shadow: 0 4px 18px #dfbe7d22;
}
.btn--primary:hover:not(:disabled) {
  background: linear-gradient(115deg, #eee8dd, #ecd9b2);
  border-color: #f0ebe1;
  box-shadow: 0 0 30px #e2c48944;
}
.btn--ghost { background: #c7b59109; border-color: #ebdcbf20; box-shadow: none; }
.btn--ghost:hover:not(:disabled) { background: #eddbb60f; }
.btn--danger { background: #f0787e0b; border-color: #f0787e55; }
.input, .select, .textarea {
  border-radius: 10px;
  border-color: #e6d6b526;
  background: #0b121261;
  box-shadow: inset 0 1px 5px #090e0e22;
  transition: border-color 180ms, box-shadow 250ms;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: #e7ce9d80;
  box-shadow: 0 0 24px #e3c78f14;
}
.tabs { border-color: #eddcb917; padding-bottom: 3px; }
.tab { background: transparent; border-color: transparent; box-shadow: none; }
.tab[aria-selected="true"], .chip[aria-pressed="true"] {
  color: #ede6d9;
  background: #e2c68d17;
  box-shadow: inset 0 0 0 1px #e9d3a644, 0 0 20px #e3c68d0b;
}
.tab[aria-selected="true"] { border-bottom-color: #ead5ac; }

.orbit-overview {
  overflow: visible;
  border-radius: 20px;
  background: radial-gradient(ellipse at 73% 80%, #a887442b, transparent 65%),
    linear-gradient(115deg, #394e4d55, #23313033 55%, #46585344);
  box-shadow: inset 0 1px #ece6d912, 0 18px 48px #090f0f33;
}
.orbit-overview h2 { font-weight: 550; letter-spacing: -0.04em; }
.eyebrow { color: #dbccae; letter-spacing: 0.16em; }
.overview-stat {
  position: relative;
  border-radius: 12px;
  border: 1px solid #eedebd20;
  background: linear-gradient(140deg, #efdfc009, #eeddbc05);
  box-shadow: none;
}
.overview-stat strong { font-weight: 500; letter-spacing: -0.04em; }
.overview-stat:hover { background: #e8d2a512; border-color: #eeddbc80; box-shadow: 0 0 28px #e7cfa016; }
.orbit-node {
  border-radius: 24px;
  background: linear-gradient(120deg, #9db3ad26, #1c2b2a88);
  border-color: #f1e4c933;
  backdrop-filter: blur(20px);
  box-shadow: 0 5px 25px #0d161555, inset 0 1px #f6f3ed0d;
}
.orbit-node:hover { background-color: #67563588; box-shadow: 0 0 26px #e9d2a533; }
.orbit-node__icon { box-shadow: 0 0 14px #ebd7af24, inset 0 0 8px #eddcb922; }
.orbit-core__sphere {
  background: radial-gradient(circle at 30% 24%, #ecdab542, #6e5c3755 45%, #131d1c80 80%);
  border-color: #efe0c199;
  box-shadow: inset 0 0 22px #eddab533, 0 0 45px #dab66d66, 0 0 90px #8f6dff33;
  backdrop-filter: blur(8px);
}
.orbit-core__plasma {
  position: absolute;
  inset: -30%;
  border-radius: 42%;
  background: conic-gradient(from 45deg, #e6cd9a00, #e6cc9966, #e7ce9d0d, #88ffe944, #e6cd9a00);
  filter: blur(10px);
}
.orbit-core__sphere svg { position: relative; opacity: 0.6; }
.orbit-core__avatar { background: #ecd9b30c; border-color: #f0e1c455; }
.orbit-core::before {
  border: 1px solid #e8d0a144;
  border-top-color: #ece5d8;
  border-bottom-color: #a58cff;
  box-shadow: 0 0 22px #e8d0a133;
}
.holo-field {
  position: absolute;
  left: 50%; top: 50%;
  width: 180px; height: 180px;
  transform: translate(-50%, -50%);
  perspective: 600px;
  pointer-events: none;
}
.holo-field__ring {
  position: absolute;
  inset: 0;
  border: 1px solid #e9d3a766;
  border-radius: 50%;
  box-shadow: 0 0 12px #e6cd9a22, inset 0 0 12px #e6cd9a0f;
}
.holo-field__ring:nth-child(2) { inset: -15px; rotate: 65deg; border-color: #b499ff77; }
.holo-field__ring:nth-child(3) { inset: 18px; rotate: -40deg; border-style: dashed; border-color: #96f0df77; }
.holo-field__axis {
  position: absolute;
  left: 50%; top: -25%;
  width: 1px; height: 150%;
  background: linear-gradient(transparent, #ecdab555, transparent);
  transform: rotate(30deg);
}
.ambient-backdrop__planet { opacity: 0.22; }
.ambient-backdrop__grid { opacity: 0.45; background-size: 88px 88px; }
.ambient-backdrop__aurora {
  position: absolute;
  width: 85vw; height: 42vh;
  border-radius: 50%;
  filter: blur(65px);
  mix-blend-mode: screen;
  opacity: 0.28;
  pointer-events: none;
}
.ambient-backdrop__aurora--blue {
  left: 6%; top: -16%;
  background: radial-gradient(ellipse, #86672a, #7b653899 42%, transparent 68%);
  transform: rotate(-24deg);
}
.ambient-backdrop__aurora--violet {
  right: -28%; bottom: 0;
  background: radial-gradient(ellipse, #6654cf, #816a3d99 42%, transparent 68%);
}

.scrim { backdrop-filter: blur(5px) saturate(65%); }
.dialog-wrap { align-items: center; }
.dialog, .drawer, .demo-panel {
  border: 1px solid #f0e0c140;
  border-radius: 18px;
  background: linear-gradient(145deg, #243332f0, #161f1fed 65%, #2b3534ed);
  backdrop-filter: blur(30px) saturate(140%);
  box-shadow: inset 0 1px #f4f0e71c, 0 24px 90px #0a1211a6, 0 0 45px #e2c4890d;
}
.dialog__head, .drawer__head {
  padding: 12px;
  background: linear-gradient(110deg, #ebd7b007, transparent);
  border-color: #f0e1c317;
  box-shadow: none;
}
.dialog__foot { background: #0a10101f; border-color: #eddbb817; box-shadow: none; }
.drawer { top: calc(var(--header-h) + 12px); right: 12px; bottom: 12px; }
.drawer__body { min-height: 0; }
.demo-panel { position: fixed; }
.toast { border-color: #f0e1c33b; background: #22302fed; backdrop-filter: blur(22px); }
.app-shell:has(.drawer) .content { transform: translateX(-12px) scale(.99); filter: saturate(.8); }
.app-shell:has(.dialog) .content { transform: scale(.987); }

/* Слои реакции всегда пропускают события к настоящим элементам интерфейса. */
.scene-veil, .contact-layer, .pointer-aura { position: fixed; pointer-events: none; }
.scene-veil {
  inset: 0; z-index: 48; opacity: 0;
  background: radial-gradient(ellipse at 55% 45%, #1b2928c9, #070b0b 78%);
}
.scene-veil__horizon {
  position: absolute;
  left: 0; right: 0; top: 45%; height: 1px;
  background: linear-gradient(90deg, transparent, #e8d1a299, #b5aaff99, transparent);
  box-shadow: 0 0 50px 3px #debe7d40;
  transform: rotate(-12deg);
}
.contact-layer { inset: 0; z-index: 120; overflow: hidden; }
.contact-ring {
  position: absolute;
  width: 70px; height: 70px;
  border: 1px solid #f3e6cdb3;
  border-radius: 50%;
  background: radial-gradient(circle, #ecd9b225, transparent 65%);
  box-shadow: 0 0 22px #e9d2a544, inset 0 0 16px #ecdab522;
  opacity: 0;
}
.contact-ring::after { content: ""; position: absolute; inset: 9px; border: 1px solid #b8afff80; border-radius: 50%; }
.pointer-aura {
  left: -240px; top: -240px; z-index: 0;
  width: 480px; height: 480px;
  background: radial-gradient(circle, #e3c8910d, transparent 67%);
  opacity: 0;
  transition: transform 750ms cubic-bezier(.2,.7,.25,1), opacity 350ms;
}
@media (hover: hover) {
  .panel:hover { border-color: #eeddbc40; box-shadow: var(--shadow-panel), 0 0 35px #e2c4890b; }
  .panel:hover::after, .orbit-overview:hover::after { opacity: 1; }
}
@media (max-width: 720px) {
  .drawer { inset: 0; width: 100%; }
  .drawer, .dialog { border-radius: 0; border: 0; }
  .dialog-wrap { align-items: flex-start; }
  .app-shell:has(.drawer) .content, .app-shell:has(.dialog) .content { transform: none; }
  .ambient-backdrop__aurora { filter: blur(40px); }
}
@media (pointer: coarse) {
  .panel::after, .pointer-aura { display: none; }
}
@supports not (backdrop-filter: blur(4px)) {
  .panel, .orbit-overview, .dialog, .drawer, .demo-panel { background: var(--panel-solid); }
}