/* LimboVPN — общий облик кабинета и мини-приложения (21.10.2026, вариант «графит»).
   ЕДИНСТВЕННЫЙ источник цветов и фирменных приёмов. Прототип, который владелец
   выбрал: https://claude.ai/artifact/JwHWVjUwKZxULy2kefNKF6

   Правила (владелец: «не просто белый и чёрный», но и «не заменить белый на
   оранжевый» — золотые кнопки он отклонил):
   • основа — прежняя: тёплый кремовый и тёплый тёмный, кнопки монохромные;
   • второй цвет — графитово-синий, на КРУПНЫХ плоскостях: блок устройств,
     тонированные карточки, кольца и шкалы, выбранный раздел. Не на кнопках;
   • глубина вместо плоскости: переливы фона, зерно, стекло у меню;
   • золото — только свет знака на тёмной главной карточке (.b-hero).

   Имена --b-accent* исторические: это «цвет выделения», теперь графитовый.
   Темы: светлая по умолчанию, тёмная — по системе или data-theme="dark". */
@font-face{font-family:"Inter";src:url("/brand/inter.woff2?v=1") format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:light;
  --b-bg:#f4f2ec; --b-elev:#fdfcf8; --b-soft:#eceadf; --b-sunken:#e3e0d3;
  --b-ink:#1c1b17; --b-ink-2:#5d5a51; --b-ink-3:#66635b;
  --b-line:#e5e1d6; --b-line-2:#d9d5c9;
  /* Главное действие — чернилами, как было. */
  --b-accent-fill:#24221c; --b-on-accent:#f4f1e8;
  /* Графит. */
  --b-accent:#34414f; --b-accent-ink:#2b3644; --b-accent-soft:#e2e7ec; --b-accent-line:#d3dbe3;
  --b-tint-ink-2:#4f5d6c; --b-ring-track:#c9d2dc;
  --b-deep:linear-gradient(160deg,#34414f 0%,#222c37 100%);
  --b-on-deep:#eef2f6; --b-on-deep-2:#b3bfcb;
  --b-glow:rgba(80,105,135,.16); --b-warm:rgba(214,190,140,.22);
  --b-card:linear-gradient(180deg,#fffefb 0%,#faf8f2 100%);
  --b-glass:rgba(253,252,248,.6);
  --b-grain:.05; --b-grain-inv:0;
  --b-sh-1:0 1px 2px rgba(40,36,24,.04),0 12px 32px rgba(40,36,24,.06);
  --b-sh-2:0 2px 6px rgba(40,36,24,.06),0 22px 48px rgba(40,36,24,.10);
  --b-sh-accent:0 1px 2px rgba(20,18,12,.18),0 6px 16px rgba(20,18,12,.10);
  --b-sh-deep:0 2px 6px rgba(20,24,30,.10),0 24px 50px rgba(20,24,30,.18);
  --b-sh-hero:0 28px 60px rgba(40,30,15,.28);
  /* Главная карточка тёмная в обеих темах: в ней свет знака. */
  --b-hero:radial-gradient(90% 150% at 80% 40%,#3a2a12 0%,#1a150d 46%,#100d09 100%);
  --b-hero-ink:#f7f0e3; --b-hero-ink-2:#bfb199; --b-hero-line:rgba(255,214,140,.20);
  --b-r:14px; --b-r-lg:24px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --b-bg:#181712; --b-elev:#211f18; --b-soft:#1d1b15; --b-sunken:#15140e;
  --b-ink:#f1efe6; --b-ink-2:#a9a392; --b-ink-3:#908977;
  --b-line:#2e2b22; --b-line-2:#3a362b;
  --b-accent-fill:#ece8dc; --b-on-accent:#1c1a15;
  --b-accent:#9fb3c8; --b-accent-ink:#c9d5e2; --b-accent-soft:#1c232b; --b-accent-line:#29333e;
  --b-tint-ink-2:#a3b0be; --b-ring-track:#2b3540;
  --b-deep:linear-gradient(160deg,#2f3c4b 0%,#1d2630 100%);
  --b-on-deep:#eef2f6; --b-on-deep-2:#a9b6c4;
  --b-glow:rgba(100,130,165,.16); --b-warm:rgba(120,95,50,.12);
  --b-card:linear-gradient(180deg,#24221b 0%,#1f1d17 100%);
  --b-glass:rgba(30,28,22,.6);
  --b-grain:.06; --b-grain-inv:1;
  --b-sh-1:inset 0 1px 0 rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.30);
  --b-sh-2:0 2px 8px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.55);
  --b-sh-accent:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.3);
  --b-sh-deep:inset 0 1px 0 rgba(255,255,255,.06),0 24px 56px rgba(0,0,0,.45);
  --b-sh-hero:0 30px 70px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --b-bg:#181712; --b-elev:#211f18; --b-soft:#1d1b15; --b-sunken:#15140e;
  --b-ink:#f1efe6; --b-ink-2:#a9a392; --b-ink-3:#908977;
  --b-line:#2e2b22; --b-line-2:#3a362b;
  --b-accent-fill:#ece8dc; --b-on-accent:#1c1a15;
  --b-accent:#9fb3c8; --b-accent-ink:#c9d5e2; --b-accent-soft:#1c232b; --b-accent-line:#29333e;
  --b-tint-ink-2:#a3b0be; --b-ring-track:#2b3540;
  --b-deep:linear-gradient(160deg,#2f3c4b 0%,#1d2630 100%);
  --b-on-deep:#eef2f6; --b-on-deep-2:#a9b6c4;
  --b-glow:rgba(100,130,165,.16); --b-warm:rgba(120,95,50,.12);
  --b-card:linear-gradient(180deg,#24221b 0%,#1f1d17 100%);
  --b-glass:rgba(30,28,22,.6);
  --b-grain:.06; --b-grain-inv:1;
  --b-sh-1:inset 0 1px 0 rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.30);
  --b-sh-2:0 2px 8px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.55);
  --b-sh-accent:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.3);
  --b-sh-deep:inset 0 1px 0 rgba(255,255,255,.06),0 24px 56px rgba(0,0,0,.45);
  --b-sh-hero:0 30px 70px rgba(0,0,0,.5);
}

/* Фон страницы с глубиной: холодный свет графита справа сверху, тёплый —
   слева снизу, поверх — едва заметное зерно. Фон держит html, а зерно —
   слой под содержимым, так что карточки и текст остаются чистыми. */
/* Свечения — закреплённым слоем, а не background-attachment:fixed: Safari на
   iPhone его не поддерживает, и фон обрывался на высоте первого экрана. */
html{background:var(--b-bg)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(55% 60% at 96% 0%,var(--b-glow),transparent 70%),
  radial-gradient(45% 55% at 10% 105%,var(--b-warm),transparent 70%)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--b-grain);
  filter:invert(var(--b-grain-inv));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Главное действие — чернилами. Одно на экран. */
.b-primary{background:var(--b-accent-fill);color:var(--b-on-accent);border-color:transparent;box-shadow:var(--b-sh-accent)}

/* Крупная графитовая плоскость (блок устройств и т. п.). */
.b-deep{position:relative;overflow:hidden;background:var(--b-deep);color:var(--b-on-deep);box-shadow:var(--b-sh-deep)}
.b-deep::before{content:"";position:absolute;right:-80px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent 70%);pointer-events:none}

/* Главная карточка со светом: знак и лучи (разметка — web.brand.hero_light). */
.b-hero{position:relative;overflow:hidden;background:var(--b-hero);color:var(--b-hero-ink);
  border:1px solid var(--b-hero-line);box-shadow:inset 0 1px 0 rgba(255,232,190,.08),var(--b-sh-hero)}
.b-hero__light{position:absolute;inset:0;pointer-events:none}
.b-hero__light svg.b-beams{position:absolute;inset:0;width:100%;height:100%}
.b-hero__glow{position:absolute;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,140,.5),rgba(245,165,36,.10) 55%,transparent 75%)}
.b-hero__mark{position:absolute;width:96px;height:96px;filter:drop-shadow(0 0 14px rgba(245,165,36,.8))}
@media (prefers-reduced-motion:no-preference){
  .b-hero__mark{animation:b-breathe 6s ease-in-out infinite}
  @keyframes b-breathe{50%{filter:drop-shadow(0 0 22px rgba(245,165,36,.95))}}
}

/* Статус «работает» — точка. */
.b-live{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--b-accent);
  box-shadow:0 0 0 4px var(--b-accent-soft)}

/* Переключатель внутри раздела — тот же, что у устройств в подключении
   (.cxt в web/gift/gift.css): «Мои устройства · Близкие». Семья — часть
   раздела «Устройства», а не отдельная страница (владелец 26.10.2026). */
.b-seg{display:flex;width:fit-content;align-self:flex-start;gap:4px;max-width:100%;padding:4px;border-radius:16px;
  background:color-mix(in srgb,var(--b-soft) 85%,transparent);border:1px solid var(--b-line)}
.b-seg a{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:12px;
  color:var(--b-ink-2);font:550 14px/1 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;
  transition:color .15s,background .15s}
.b-seg a:hover{color:var(--b-ink)}
.b-seg a.on{background:var(--b-elev);color:var(--b-ink);box-shadow:var(--b-sh-1)}
@media (max-width:900px){.b-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}}