/* ══════════════════════════════════════════════════════════════════
   Оформление xVOLT для панели New API.
   Панель нарисована на переменных цвета — переопределяем их, поэтому
   перекрашиваются все страницы сразу, а вёрстку не трогаем.
   Краски фирменные: лайм #c4f000, бумага #f7ffd6, фон #0a0c04.
   Файл подключается в index.html через Caddy (см. xvolt-theme-sync).
   ══════════════════════════════════════════════════════════════════ */

/* ─── шрифт: свои файлы с нашего же домена, без Google ─── */
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;
  src:url("/xvolt/fonts/manrope-cyrillic-500.woff") format("woff");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;
  src:url("/xvolt/fonts/manrope-latin-500.woff") format("woff");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;
  src:url("/xvolt/fonts/manrope-cyrillic-800.woff") format("woff");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;
  src:url("/xvolt/fonts/manrope-latin-800.woff") format("woff");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─── тёмная тема: основная, ею панель встречает гостя ─── */
html.dark{
  --background:#0a0c04; --foreground:#eef3e2;
  --card:#10140a; --card-foreground:#eef3e2;
  --popover:#131807; --popover-foreground:#eef3e2;
  --primary:#c4f000; --primary-foreground:#131605;
  --secondary:#1b2110; --secondary-foreground:#dcecb0;
  --muted:#141a0b; --muted-foreground:#9ba787;
  --accent:#1f2712; --accent-foreground:#dcecb0;
  --border:rgba(196,240,0,.13); --input:rgba(196,240,0,.2); --ring:#c4f000;
  --sidebar:#0c1005; --sidebar-foreground:#d5dfc2;
  --sidebar-primary:#c4f000; --sidebar-primary-foreground:#131605;
  --sidebar-accent:#1b2110; --sidebar-accent-foreground:#dcecb0;
  --sidebar-border:rgba(196,240,0,.12); --sidebar-ring:#c4f000;
  --destructive:#ff5f4d; --destructive-foreground:#fff;
  --success:#a3e635; --success-foreground:#131605;
  --success-bg:rgba(163,230,53,.12); --success-border:rgba(163,230,53,.3); --success-text:#bef264;
  --warning:#facc15; --warning-foreground:#131605;
  --warning-bg:rgba(250,204,21,.12); --warning-border:rgba(250,204,21,.3); --warning-text:#fde047;
  --chart-1:#c4f000; --chart-2:#9dc200; --chart-3:#e4ff7a; --chart-4:#6f8c00; --chart-5:#d7e8a8;
  --overview-accent-1:#c4f000; --overview-accent-2:#9dc200; --overview-accent-3:#e4ff7a;
  --info:#bef264; --info-foreground:#131605;
  --neutral:#9ba787; --neutral-foreground:#131605;
  --skeleton-base:#1b2110; --skeleton-highlight:#2f3a19;
  color-scheme:dark;
}

/* ─── светлая тема: та же марка, только на бумаге ─── */
html:not(.dark){
  --background:#f7ffd6; --foreground:#171c08;
  --card:#fdfff0; --card-foreground:#171c08;
  --popover:#fdfff0; --popover-foreground:#171c08;
  --primary:#a5cc00; --primary-foreground:#131605;
  --secondary:#ecf7c4; --secondary-foreground:#2b3410;
  --muted:#eef8ca; --muted-foreground:#5d6845;
  --accent:#e4f4ac; --accent-foreground:#2b3410;
  --border:rgba(35,45,10,.14); --input:rgba(35,45,10,.2); --ring:#a5cc00;
  --sidebar:#f2fbcf; --sidebar-foreground:#2b3410;
  --sidebar-primary:#a5cc00; --sidebar-primary-foreground:#131605;
  --sidebar-accent:#e4f4ac; --sidebar-accent-foreground:#2b3410;
  --sidebar-border:rgba(35,45,10,.12); --sidebar-ring:#a5cc00;
  --destructive:#e03e2b; --destructive-foreground:#fff;
  --success:#65a30d; --success-foreground:#fff;
  --success-bg:rgba(101,163,13,.12); --success-border:rgba(101,163,13,.3); --success-text:#3f6212;
  --warning:#ca8a04; --warning-foreground:#fff;
  --warning-bg:rgba(202,138,4,.12); --warning-border:rgba(202,138,4,.3); --warning-text:#854d0e;
  --chart-1:#a5cc00; --chart-2:#6f8c00; --chart-3:#c4f000; --chart-4:#3f5200; --chart-5:#8ba832;
  --overview-accent-1:#a5cc00; --overview-accent-2:#6f8c00; --overview-accent-3:#c4f000;
  --info:#4d7c0f; --info-foreground:#fff;
  --neutral:#5d6845; --neutral-foreground:#fff;
  --skeleton-base:#e4f4ac; --skeleton-highlight:#f2fbcf;
  color-scheme:light;
}

/* ─── шрифт на все страницы: панель вешает на <html> класс font-inter ─── */
html{--font-sans:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html,body,.font-inter,button,input,select,textarea{
  font-family:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* ─── мелочи, которые красят панель целиком ─── */
::selection{background:rgba(196,240,0,.28);color:inherit}

/* полоса прокрутки в цвет фирмы */
html.dark *{scrollbar-color:rgba(196,240,0,.35) transparent}
html.dark *::-webkit-scrollbar{width:10px;height:10px}
html.dark *::-webkit-scrollbar-track{background:transparent}
html.dark *::-webkit-scrollbar-thumb{
  background:rgba(196,240,0,.22);border:2px solid transparent;
  background-clip:content-box;border-radius:8px}
html.dark *::-webkit-scrollbar-thumb:hover{background:rgba(196,240,0,.42);background-clip:content-box}

/* ─── атмосфера как на главной: сетка, лаймовые пятна, виньетка, зерно ───
   Рисуем за содержимым (z-index:-1 у body::before), поэтому текст и карточки
   ничем не притемняются. Цвет фона переносим на html: body делаем прозрачным,
   иначе слой за ним не виден. Своя главная рисует фон сама — там выключаем. */
html.dark{background:#0a0c04}
html.dark body{background:transparent}
html.dark body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:#0a0c04;
  background-image:
    radial-gradient(38rem 38rem at -8% 8%,rgba(196,240,0,.1),transparent 64%),
    radial-gradient(42rem 42rem at 108% 44%,rgba(157,194,0,.085),transparent 64%),
    radial-gradient(36rem 36rem at 45% 112%,rgba(196,240,0,.05),transparent 62%),
    linear-gradient(to right,rgba(196,240,0,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(196,240,0,.075) 1px,transparent 1px),
    radial-gradient(100% 100% at 50% 42%,transparent 38%,rgba(10,12,4,.55) 100%);
  background-size:auto,auto,auto,64px 64px,64px 64px,auto;
  animation:xv-bg-drift 44s ease-in-out infinite}
@keyframes xv-bg-drift{
  0%,100%{background-position:0 0,0 0,0 0,0 0,0 0,0 0}
  50%{background-position:2% -3%,-2% 3%,1% -2%,0 0,0 0,0 0}}
html.dark body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.1;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
html.dark body:has(.custom-home-content)::before,
html.dark body:has(.custom-home-content)::after{display:none}
@media (prefers-reduced-motion:reduce){html.dark body::before{animation:none}}

/* ─── сетка и пятна были видны только внизу страниц ───
   Обёртка страниц панели (div.bg-background.min-h-svh) закрашена наглухо
   и прячет наш фоновый слой. Видно было лишь там, куда она не достаёт —
   под её нижним краем. Делаем прозрачной, цвет остаётся на html. */
html.dark div.bg-background.min-h-svh{background-color:transparent}

/* ─── сетка на всех страницах, включая консоль ───
   Панель красит обёртки наглухо: у обычных страниц min-h-svh,
   у консоли h-dvh и внутренняя область min-h-0. Снимаем заливку
   со всех трёх — цвет остаётся на html, сетка проступает всюду. */
html.dark div.bg-background.min-h-svh,
html.dark div.bg-background.h-dvh,
html.dark div.bg-background.min-h-0{background-color:transparent}

/* ─── карточки, левое меню и фильтры не сливаются с сеткой ───
   Были почти в цвет фона. Поднимаем на пару тонов и чуть ярче рамку. */
html.dark{
  --card:#181f0e;
  --sidebar:#12170a;
  --muted:#1a2110;
  --secondary:#202810;
  --accent:#26300f;
  --border:rgba(196,240,0,.18);
  --sidebar-border:rgba(196,240,0,.16);
}

/* ─── кнопка-реклама TepmVPN в шапке ───
   Стоит сразу за логотипом xVOLT. Спокойная пилюля: значок, название,
   мелкая подпись. На узких экранах подпись и название убираем, чтобы
   не тесниться с меню — остаётся один значок. */
.xv-ad{display:inline-flex;align-items:center;gap:.45rem;margin-left:.7rem;
  padding:.3rem .6rem .3rem .42rem;border-radius:.7rem;text-decoration:none;
  background:rgba(196,240,0,.06);border:1px solid rgba(196,240,0,.16);
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.xv-ad:hover{background:rgba(196,240,0,.13);border-color:rgba(196,240,0,.34);transform:translateY(-1px)}
.xv-ad img{display:block;width:1.25rem;height:1.31rem;border-radius:.3rem}
.xv-ad-t{display:flex;flex-direction:column;line-height:1.05}
.xv-ad-t b{font-size:.78rem;font-weight:800;color:var(--foreground);letter-spacing:.01em}
.xv-ad-t i{font-size:.62rem;font-style:normal;color:var(--muted-foreground);letter-spacing:.02em}
@media (max-width:1180px){.xv-ad-t{display:none}.xv-ad{padding:.3rem;margin-left:.45rem}}

/* ─── сетка на консоли: два упрямых слоя ───
   Осмотрел консоль изнутри: её закрашивают не те обёртки, что на
   обычных страницах. Первый слой — обёртка сайдбара (класс с
   sidebar-wrapper), второй — <main>, а не <div>, поэтому прежние
   правила его не брали. Снимаем заливку с обоих. */
html.dark div[class*="sidebar-wrapper"],
html.dark main.bg-background{background-color:transparent}

/* ─── верх консоли: делаем как на витрине ───
   На витрине шапка плавает поверх страницы: содержимое проезжает под ней
   и размывается — шва не видно. В консоли шапка стояла в потоке отдельной
   прозрачной полосой, а окошко с содержимым начиналось под ней и резало
   карточки по кромке — получался тот же «этаж», что был внизу с подвалом.
   Поднимаем окошко под шапку (минус её высота) и возвращаем это место
   внутренним отступом: содержимое стоит там же, но теперь едет под шапку.
   Самой шапке даём стекло — полупрозрачный фон с размытием. */
html.dark header.sticky.top-0.z-40{
  background-color:rgba(10,12,4,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(196,240,0,.08)}
html:not(.dark) header.sticky.top-0.z-40{
  background-color:rgba(247,255,214,.74);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(60,80,0,.08)}
/* Таких окошек в консоли два: внешняя обёртка и настоящий прокрутчик
   внутри неё (его узнаём по боковым отступам px-3). Сдвигаем только его,
   иначе отступ сверху удваивается. */
html div.overflow-auto.flex-1.min-h-0.px-3{
  margin-top:calc(-1 * var(--app-header-height,3rem));
  padding-top:calc(var(--app-header-height,3rem) + .5rem)}

/* ─── кнопка-реклама: подпись одной строкой ───
   При схлопывании шапки места становится меньше, и «Premium VPN» рвалось
   на две строки. Запрещаем перенос и сжатие самой кнопки. */
.xv-ad{flex:0 0 auto;white-space:nowrap}
.xv-ad-t b,.xv-ad-t i{white-space:nowrap}

/* ─── шапка складывается быстро ───
   Панель анимирует «все свойства» 700 мс на элементе с размытием в 40
   пикселей: при прокрутке браузер каждый кадр заново размывает фон, отсюда
   медлительность и рывки. Сокращаем время, убираем из анимации размытие и
   фильтры, само размытие делаем вдвое слабее — на вид то же, считается вчетверо
   дешевле. */
html header .transition-all{
  transition-duration:.22s !important;
  transition-property:max-width,width,padding,margin,background-color,border-color,box-shadow,transform,opacity !important}
html header nav{
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important}

/* ─── подпись кнопки по центру ───
   Две строки — «TepmVPN» и «Premium» — теперь выровнены по общей середине. */
.xv-ad-t{align-items:center;text-align:center}

/* ══════════════════════════════════════════════════════════════════
   Левое меню консоли: было ровным серым списком. Оживляем в марке —
   активный пункт с лаймовой полоской и подсветкой, наведение со сдвигом,
   заголовки разделов с разрядкой и линией-хвостом.
   Активный пункт панель помечает aria-current="page" (проверено в живой
   консоли), поэтому за него и цепляемся.
   ══════════════════════════════════════════════════════════════════ */
[data-slot="sidebar-menu-button"]{
  position:relative;
  transition:background-color .16s ease,color .16s ease,padding-left .16s ease}
[data-slot="sidebar-menu-button"] svg{
  opacity:.6;transition:opacity .16s ease,color .16s ease,transform .16s ease}

/* наведение: подсветка, лёгкий сдвиг, значок оживает */
[data-slot="sidebar-menu-button"]:hover{padding-left:.85rem}
[data-slot="sidebar-menu-button"]:hover svg{opacity:1;color:var(--primary);transform:scale(1.08)}

/* активный: полоска слева, мягкая заливка в марке, лаймовый значок */
[data-slot="sidebar-menu-button"][aria-current="page"]{
  padding-left:.85rem;font-weight:700;color:var(--sidebar-accent-foreground)}
[data-slot="sidebar-menu-button"][aria-current="page"]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:64%;border-radius:0 3px 3px 0;background:var(--primary);
  box-shadow:0 0 10px 0 rgba(196,240,0,.55)}
[data-slot="sidebar-menu-button"][aria-current="page"] svg{opacity:1;color:var(--primary)}
html.dark [data-slot="sidebar-menu-button"][aria-current="page"]{
  background-image:linear-gradient(90deg,rgba(196,240,0,.15),rgba(196,240,0,.03) 60%,transparent)}
html:not(.dark) [data-slot="sidebar-menu-button"][aria-current="page"]{
  background-image:linear-gradient(90deg,rgba(120,160,0,.18),rgba(120,160,0,.04) 60%,transparent)}

/* заголовки разделов: разрядка и линия-хвост вместо простого серого текста */
[data-slot="sidebar-group-label"]{
  letter-spacing:.14em;font-size:10px;font-weight:800;text-transform:uppercase;
  opacity:.78;gap:.5rem}
[data-slot="sidebar-group-label"]::after{
  content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(196,240,0,.22),transparent)}

/* ══ Витрина моделей: карточки не должны рассыпаться ══
   Панель вставляет свой стиль, который внутри .truncate разрешает рвать
   слово в любом месте (white-space:normal; word-break:break-word). Из-за
   этого «claude-opus-4-6-thinking» ломался на 3–4 строки, а плашка
   «На основе токенов» — в столбик. Правим только внутри карточки модели. */
div.group.relative.flex.flex-col.rounded-xl .font-mono.truncate {
	font-size: 13px;
	line-height: 1.3;
	word-break: normal;      /* перенос по дефисам, а не посреди слова */
	overflow-wrap: anywhere; /* если совсем не влезает — тогда где угодно */
}
div.group.relative.flex.flex-col.rounded-xl span.truncate.leading-normal {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
div.group.relative.flex.flex-col.rounded-xl span.inline-flex.shrink {
	flex-shrink: 0;
}
/* Низ карточки панель делит на две колонки: слева группа и вид оплаты,
   справа теги. Теги забирали почти всю ширину, и «На основе токенов»
   оставалось 56 пикселей. Пускаем всё одним потоком с переносом. */
div.group.relative.flex.flex-col.rounded-xl > div.mt-2.grid.items-start {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}
/* Описание модели: у одних карточек две строки, у других три с рваным
   обрезом — выравниваем по двум строкам и ставим многоточие. */
div.group.relative.flex.flex-col.rounded-xl > p.line-clamp-1 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}