/* Шесть надстроек к текущему интерфейсу. Каркас, шрифт и фиолетовый акцент те же. */

html.elegance .nav-link,
html.elegance .btn,
html.elegance h1,
html.elegance .app-header-title,
html.elegance .login-title {
  font-family: inherit;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
}

html.elegance .nav-link:hover,
html.elegance .btn-back:hover,
html.elegance #sidebar-settings .sidebar-main-details > summary.nav-link--summary:hover {
  background: var(--accent-alpha-10);
  color: var(--text);
}

html.elegance .nav-link.active,
html.elegance #sidebar-settings .sidebar-main-details:has(.nav-link.active) > summary.nav-link--summary {
  color: var(--accent);
  background: var(--accent-alpha-10);
  border-left-color: var(--accent);
  box-shadow: none;
  font-weight: 500;
  margin: 0;
  border-radius: 0;
}

html.elegance .btn-primary,
html.elegance .tb-btn--primary,
html.elegance .tb2-btn--primary,
html.elegance .tb-vtab.is-active {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: none;
}

html.elegance .login-title::after {
  display: none;
}

/* 1. Темнее */
html[data-look="dusk"] {
  --bg: #0b0b10;
  --surface: #111116;
  --surface-header: #18181f;
  --border: #22222b;
  --border-hover: #34343f;
  --text: #ececf2;
  --text-muted: #7c7c90;
  --accent: #6c5ce7;
  --accent-hover: #7d6ef7;
  --accent-alpha-10: rgba(108, 92, 231, 0.14);
  --accent-alpha-15: rgba(108, 92, 231, 0.2);
  --link: #8ea2ff;
  --link-hover: #b0c0ff;
  --scrollbar-track: #07070b;
  --scrollbar-thumb: #2c2c36;
}

html.elegance[data-look="dusk"] body,
html.elegance[data-look="dusk"] .content,
html.elegance[data-look="dusk"] #screen-app {
  background: #0b0b10;
}

/* 2. Левитация */
html[data-look="float"] {
  --bg: #0c0c14;
  --surface: rgba(26, 26, 36, 0.62);
  --surface-header: rgba(38, 38, 52, 0.55);
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);
  --text: #eeeef4;
  --text-muted: #9a9ab0;
  --accent: #7d6ef7;
  --accent-hover: #8f82ff;
  --accent-alpha-10: rgba(125, 110, 247, 0.16);
  --accent-alpha-15: rgba(125, 110, 247, 0.24);
  --link: #aebcff;
  --link-hover: #d0d8ff;
}

html.elegance[data-look="float"] body {
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(108, 92, 231, 0.2), transparent 60%),
    #0a0a12;
}

html.elegance[data-look="float"] #screen-login,
html.elegance[data-look="float"] #screen-app,
html.elegance[data-look="float"] .content {
  background: transparent;
}

html.elegance[data-look="float"] .sidebar,
html.elegance[data-look="float"] .app-header,
html.elegance[data-look="float"] .login-card,
html.elegance[data-look="float"] .modal,
html.elegance[data-look="float"] .app-user-menu {
  background: rgba(22, 22, 32, 0.58);
  border-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 3. Матовый */
html[data-look="matte"] {
  --bg: #141416;
  --surface: #1b1b1e;
  --surface-header: #202024;
  --border: #2a2a2e;
  --border-hover: #3a3a40;
  --text: #e4e4e2;
  --text-muted: #8a8a86;
  --accent: #6e6894;
  --accent-hover: #7e789f;
  --accent-alpha-10: rgba(110, 104, 148, 0.16);
  --accent-alpha-15: rgba(110, 104, 148, 0.24);
  --link: #b7b3c9;
  --link-hover: #dedae8;
  --scrollbar-thumb: #3a3a3e;
  --scrollbar-track: #121214;
}

html.elegance[data-look="matte"] body,
html.elegance[data-look="matte"] .content,
html.elegance[data-look="matte"] #screen-app {
  background: #141416;
}

html.elegance[data-look="matte"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

html.elegance[data-look="matte"] #app {
  position: relative;
  z-index: 1;
}

html.elegance[data-look="matte"] .sidebar,
html.elegance[data-look="matte"] .app-header,
html.elegance[data-look="matte"] .login-card,
html.elegance[data-look="matte"] .modal,
html.elegance[data-look="matte"] .btn-primary {
  box-shadow: none;
}

/* 4. Градиент */
html[data-look="gradient"] {
  --bg: #16141f;
  --surface: rgba(24, 22, 34, 0.82);
  --surface-header: rgba(34, 30, 52, 0.72);
  --border: rgba(160, 140, 220, 0.18);
  --border-hover: rgba(180, 160, 240, 0.35);
  --text: #eeeaf6;
  --text-muted: #9b95b0;
  --accent: #7a6cf0;
  --accent-hover: #8d82f6;
  --accent-alpha-10: rgba(122, 108, 240, 0.16);
  --accent-alpha-15: rgba(122, 108, 240, 0.24);
  --link: #b7b0ff;
  --link-hover: #ddd8ff;
}

html.elegance[data-look="gradient"] body {
  background: linear-gradient(165deg, #2a2458 0%, #1a1830 38%, #12141c 72%, #101218 100%);
  background-attachment: fixed;
}

html.elegance[data-look="gradient"] #screen-login,
html.elegance[data-look="gradient"] #screen-app,
html.elegance[data-look="gradient"] .content {
  background: transparent;
}

html.elegance[data-look="gradient"] .sidebar,
html.elegance[data-look="gradient"] .app-header {
  background: rgba(18, 16, 32, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 5. Тише — меньше шума в границах */
html[data-look="hush"] {
  --bg: #17171c;
  --surface: #1c1c22;
  --surface-header: #22222a;
  --border: #26262e;
  --border-hover: #34343e;
  --text: #e2e2e8;
  --text-muted: #8e8e9c;
  --accent: #6a62c8;
  --accent-hover: #7c74d4;
  --accent-alpha-10: rgba(106, 98, 200, 0.1);
  --accent-alpha-15: rgba(106, 98, 200, 0.16);
  --link: #9aa6e0;
  --link-hover: #c5cdf0;
}

html.elegance[data-look="hush"] body,
html.elegance[data-look="hush"] .content,
html.elegance[data-look="hush"] #screen-app {
  background: #17171c;
}

/* Глубже — «Тише» на шаг темнее, слои по-прежнему близко */
html[data-look="gloom"] {
  --bg: #101014;
  --surface: #141418;
  --surface-header: #18181d;
  --border: #1e1e24;
  --border-hover: #2c2c34;
  --text: #d8d8e0;
  --text-muted: #7e7e8c;
  --accent: #6a62c8;
  --accent-hover: #7c74d4;
  --accent-alpha-10: rgba(106, 98, 200, 0.12);
  --accent-alpha-15: rgba(106, 98, 200, 0.18);
  --link: #9aa6e0;
  --link-hover: #c5cdf0;
}

html.elegance[data-look="gloom"] body,
html.elegance[data-look="gloom"] .content,
html.elegance[data-look="gloom"] #screen-app {
  background: #101014;
}

/* Туман — «Тише» с лёгкой дымкой, без тяжёлой тени */
html[data-look="mist"] {
  --bg: #14141a;
  --surface: rgba(28, 28, 36, 0.72);
  --surface-header: rgba(34, 34, 44, 0.66);
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.14);
  --text: #e2e2e8;
  --text-muted: #8e8e9c;
  --accent: #6a62c8;
  --accent-hover: #7c74d4;
  --accent-alpha-10: rgba(106, 98, 200, 0.12);
  --accent-alpha-15: rgba(106, 98, 200, 0.18);
  --link: #9aa6e0;
  --link-hover: #c5cdf0;
}

html.elegance[data-look="mist"] body {
  background: #121218;
}

html.elegance[data-look="mist"] #screen-login,
html.elegance[data-look="mist"] #screen-app,
html.elegance[data-look="mist"] .content {
  background: transparent;
}

html.elegance[data-look="mist"] .sidebar,
html.elegance[data-look="mist"] .app-header,
html.elegance[data-look="mist"] .login-card,
html.elegance[data-look="mist"] .modal,
html.elegance[data-look="mist"] .app-user-menu {
  background: rgba(26, 26, 32, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

/* Пыль — «Тише» почти без цвета */
html[data-look="dust"] {
  --bg: #171717;
  --surface: #1c1c1c;
  --surface-header: #222222;
  --border: #262626;
  --border-hover: #343434;
  --text: #e0e0e0;
  --text-muted: #8a8a8a;
  --accent: #8d8d96;
  --accent-hover: #a3a3ac;
  --accent-alpha-10: rgba(141, 141, 150, 0.12);
  --accent-alpha-15: rgba(141, 141, 150, 0.18);
  --link: #b0b0b6;
  --link-hover: #d4d4d8;
}

html.elegance[data-look="dust"] body,
html.elegance[data-look="dust"] .content,
html.elegance[data-look="dust"] #screen-app {
  background: #171717;
}

/* Тепло — «Тише» в тёплом сером */
html[data-look="warm"] {
  --bg: #181614;
  --surface: #1e1c1a;
  --surface-header: #242220;
  --border: #2a2724;
  --border-hover: #3a3530;
  --text: #e6e1da;
  --text-muted: #908980;
  --accent: #8a7d72;
  --accent-hover: #a09084;
  --accent-alpha-10: rgba(138, 125, 114, 0.14);
  --accent-alpha-15: rgba(138, 125, 114, 0.2);
  --link: #c4b8ae;
  --link-hover: #e4dcd4;
}

html.elegance[data-look="warm"] body,
html.elegance[data-look="warm"] .content,
html.elegance[data-look="warm"] #screen-app {
  background: #181614;
}

/* Ровно — «Тише», рамки почти слились с фоном */
html[data-look="plain"] {
  --bg: #17171c;
  --surface: #1a1a20;
  --surface-header: #1a1a20;
  --border: #1a1a20;
  --border-hover: #2a2a32;
  --text: #e2e2e8;
  --text-muted: #8e8e9c;
  --accent: #6a62c8;
  --accent-hover: #7c74d4;
  --accent-alpha-10: rgba(106, 98, 200, 0.1);
  --accent-alpha-15: rgba(106, 98, 200, 0.16);
  --link: #9aa6e0;
  --link-hover: #c5cdf0;
}

html.elegance[data-look="plain"] body,
html.elegance[data-look="plain"] .content,
html.elegance[data-look="plain"] #screen-app {
  background: #17171c;
}

/* Ночь — «Ровно» темнее */
html[data-look="night"] {
  --bg: #0e0e12;
  --surface: #111116;
  --surface-header: #111116;
  --border: #111116;
  --border-hover: #22222a;
  --text: #d6d6de;
  --text-muted: #7a7a88;
  --accent: #6a62c8;
  --accent-hover: #7c74d4;
  --accent-alpha-10: rgba(106, 98, 200, 0.12);
  --accent-alpha-15: rgba(106, 98, 200, 0.18);
  --link: #9aa6e0;
  --link-hover: #c5cdf0;
}

html.elegance[data-look="night"] body,
html.elegance[data-look="night"] .content,
html.elegance[data-look="night"] #screen-app {
  background: #0e0e12;
}

/* Ясно — «Ровно», текст ярче */
html[data-look="clear"] {
  --bg: #17171c;
  --surface: #1a1a20;
  --surface-header: #1a1a20;
  --border: #1a1a20;
  --border-hover: #2e2e38;
  --text: #f5f5f8;
  --text-muted: #a4a4b2;
  --accent: #7c74e4;
  --accent-hover: #8e88ee;
  --accent-alpha-10: rgba(124, 116, 228, 0.12);
  --accent-alpha-15: rgba(124, 116, 228, 0.18);
  --link: #c4ccff;
  --link-hover: #eef0ff;
}

html.elegance[data-look="clear"] body,
html.elegance[data-look="clear"] .content,
html.elegance[data-look="clear"] #screen-app {
  background: #17171c;
}

/* Быстрее и легче: как «Ясно», но меню без разделителей */
html.elegance[data-look="ease"] .sidebar-nav-links > * + *,
html.elegance[data-look="swift"] .sidebar-nav-links > * + *,
html.elegance[data-look="air"] .sidebar-nav-links > * + *,
html.elegance[data-look="signal"] .sidebar-nav-links > * + *,
html.elegance[data-look="ease"] .sidebar-nav-links > .sidebar-main-details > .sidebar-main-details__group,
html.elegance[data-look="swift"] .sidebar-nav-links > .sidebar-main-details > .sidebar-main-details__group,
html.elegance[data-look="air"] .sidebar-nav-links > .sidebar-main-details > .sidebar-main-details__group,
html.elegance[data-look="signal"] .sidebar-nav-links > .sidebar-main-details > .sidebar-main-details__group,
html.elegance[data-look="ease"] #sidebar-settings > .sidebar-nav > * + *,
html.elegance[data-look="swift"] #sidebar-settings > .sidebar-nav > * + *,
html.elegance[data-look="air"] #sidebar-settings > .sidebar-nav > * + *,
html.elegance[data-look="signal"] #sidebar-settings > .sidebar-nav > * + * {
  border-top-color: transparent;
}

/* Легче — вес шрифта в меню снят */
html[data-look="ease"] {
  --bg: #17171c;
  --surface: #1a1a20;
  --surface-header: #1a1a20;
  --border: #1a1a20;
  --border-hover: #2a2a32;
  --text: #f7f7fa;
  --text-muted: #9a9aa8;
  --accent: #7c74e4;
  --accent-hover: #8e88ee;
  --accent-alpha-10: rgba(124, 116, 228, 0.1);
  --accent-alpha-15: rgba(124, 116, 228, 0.16);
  --link: #c4ccff;
  --link-hover: #eef0ff;
}

html.elegance[data-look="ease"] body,
html.elegance[data-look="ease"] .content,
html.elegance[data-look="ease"] #screen-app {
  background: #17171c;
}

html.elegance[data-look="ease"] .nav-link,
html.elegance[data-look="ease"] .app-header-title {
  font-weight: 400;
}

/* Быстро — яркий текст, активный пункт без плашки */
html[data-look="swift"] {
  --bg: #17171c;
  --surface: #1a1a20;
  --surface-header: #1a1a20;
  --border: #1a1a20;
  --border-hover: #1a1a20;
  --text: #fbfbfe;
  --text-muted: #b0b0be;
  --accent: #8e88f0;
  --accent-hover: #a29cff;
  --accent-alpha-10: transparent;
  --accent-alpha-15: transparent;
  --link: #d4daff;
  --link-hover: #ffffff;
}

html.elegance[data-look="swift"] body,
html.elegance[data-look="swift"] .content,
html.elegance[data-look="swift"] #screen-app {
  background: #17171c;
}

html.elegance[data-look="swift"] .nav-link {
  font-weight: 400;
}

/* Воздух — фон светлее, меньше «пещеры» */
html[data-look="air"] {
  --bg: #22222a;
  --surface: #26262f;
  --surface-header: #26262f;
  --border: #26262f;
  --border-hover: #34343e;
  --text: #f6f6fa;
  --text-muted: #b0b0bc;
  --accent: #8b84ea;
  --accent-hover: #9d98f0;
  --accent-alpha-10: rgba(139, 132, 234, 0.12);
  --accent-alpha-15: rgba(139, 132, 234, 0.18);
  --link: #d0d4ff;
  --link-hover: #ffffff;
}

html.elegance[data-look="air"] body,
html.elegance[data-look="air"] .content,
html.elegance[data-look="air"] #screen-app {
  background: #22222a;
}

html.elegance[data-look="air"] .nav-link {
  font-weight: 400;
}

/* Сигнал — меню серое, фиолетовый только там, где действие */
html[data-look="signal"] {
  --bg: #18181e;
  --surface: #1c1c22;
  --surface-header: #1c1c22;
  --border: #1c1c22;
  --border-hover: #2a2a32;
  --text: #f4f4f8;
  --text-muted: #8a8a96;
  --accent: #8b84ea;
  --accent-hover: #9d98f0;
  --accent-alpha-10: transparent;
  --accent-alpha-15: transparent;
  --link: #c8c8d4;
  --link-hover: #ffffff;
}

html.elegance[data-look="signal"] body,
html.elegance[data-look="signal"] .content,
html.elegance[data-look="signal"] #screen-app {
  background: #18181e;
}

html.elegance[data-look="signal"] .nav-link {
  font-weight: 400;
  color: #8a8a96;
}

html.elegance[data-look="signal"] .nav-link.active {
  background: transparent;
  color: #c8c4ff;
}

/* Серо — «Ровно» без фиолетового */
html[data-look="gray"] {
  --bg: #161616;
  --surface: #1a1a1a;
  --surface-header: #1a1a1a;
  --border: #1a1a1a;
  --border-hover: #2c2c2c;
  --text: #e4e4e4;
  --text-muted: #8e8e8e;
  --accent: #b0b0b6;
  --accent-hover: #c8c8ce;
  --accent-alpha-10: rgba(176, 176, 182, 0.12);
  --accent-alpha-15: rgba(176, 176, 182, 0.18);
  --link: #c8c8ce;
  --link-hover: #eeeef2;
}

html.elegance[data-look="gray"] body,
html.elegance[data-look="gray"] .content,
html.elegance[data-look="gray"] #screen-app {
  background: #161616;
}

/* Холод — «Ровно» в сине-сером */
html[data-look="cold"] {
  --bg: #14181e;
  --surface: #171c24;
  --surface-header: #171c24;
  --border: #171c24;
  --border-hover: #28303c;
  --text: #dce3ec;
  --text-muted: #8b97a6;
  --accent: #6e86c4;
  --accent-hover: #82a0d4;
  --accent-alpha-10: rgba(110, 134, 196, 0.12);
  --accent-alpha-15: rgba(110, 134, 196, 0.18);
  --link: #b7c6e4;
  --link-hover: #e4ecf8;
}

html.elegance[data-look="cold"] body,
html.elegance[data-look="cold"] .content,
html.elegance[data-look="cold"] #screen-app {
  background: #14181e;
}

/* Песок — «Ровно» в тёплом сером */
html[data-look="sand"] {
  --bg: #181614;
  --surface: #1c1a18;
  --surface-header: #1c1a18;
  --border: #1c1a18;
  --border-hover: #322e2a;
  --text: #e8e2da;
  --text-muted: #978f86;
  --accent: #a09084;
  --accent-hover: #b4a494;
  --accent-alpha-10: rgba(160, 144, 132, 0.14);
  --accent-alpha-15: rgba(160, 144, 132, 0.2);
  --link: #d4c8bc;
  --link-hover: #f0e8e0;
}

html.elegance[data-look="sand"] body,
html.elegance[data-look="sand"] .content,
html.elegance[data-look="sand"] #screen-app {
  background: #181614;
}

/* Голо — «Ровно», без подсветки активного пункта */
html[data-look="bare"] {
  --bg: #17171c;
  --surface: #1a1a20;
  --surface-header: #1a1a20;
  --border: #1a1a20;
  --border-hover: #1a1a20;
  --text: #e2e2e8;
  --text-muted: #8e8e9c;
  --accent: #6a62c8;
  --accent-hover: #7c74d4;
  --accent-alpha-10: transparent;
  --accent-alpha-15: transparent;
  --link: #9aa6e0;
  --link-hover: #c5cdf0;
}

html.elegance[data-look="bare"] body,
html.elegance[data-look="bare"] .content,
html.elegance[data-look="bare"] #screen-app {
  background: #17171c;
}

/* 6. Бархат — тёплый тёмный отлив, мягкий верхний край */
html[data-look="velvet"] {
  --bg: #121018;
  --surface: #1a1722;
  --surface-header: #221e2c;
  --border: #2c2836;
  --border-hover: #3e3850;
  --text: #eee8f2;
  --text-muted: #9a92a8;
  --accent: #7b6ae0;
  --accent-hover: #8d7eec;
  --accent-alpha-10: rgba(123, 106, 224, 0.14);
  --accent-alpha-15: rgba(123, 106, 224, 0.22);
  --link: #c0b6ee;
  --link-hover: #e4defa;
}

html.elegance[data-look="velvet"] body {
  background:
    radial-gradient(1000px 420px at 50% -20%, rgba(90, 70, 150, 0.18), transparent 60%),
    #121018;
}

html.elegance[data-look="velvet"] #screen-app,
html.elegance[data-look="velvet"] .content {
  background: transparent;
}

html.elegance[data-look="velvet"] .sidebar,
html.elegance[data-look="velvet"] .app-header,
html.elegance[data-look="velvet"] .login-card,
html.elegance[data-look="velvet"] .modal {
  background: #1a1722;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}