@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');
/* =========================================================================
p2line — dark dashboard (Fundedpipps style)
Почти-чёрный фон с мягким фиолетовым свечением, две «оконные» панели
(сайдбар + контент) на тёмном бэкдропе, лавандовые акценты.
Только визуал; логика не меняется. app.css подключён последним.
========================================================================= */
:root {
--font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--bg: #09070f; /* бэкдроп */
--panel: #0e0e15; /* окна: сайдбар + контент */
--card: #16161d; /* карточки */
--card-2: #1c1c25; /* hover/raised */
--line: rgba(255, 255, 255, 0.06);
--line-2: rgba(255, 255, 255, 0.10);
--text-1: #ececf1;
--text-2: #8b8b97;
--text-3: #5a5a64;
--accent-1: #b3a7f7; /* лаванда */
--accent-2: #9585f1; /* фиолетовый */
--accent-blue: #5b9dff; /* синий акцент */
--accent-blue-2: #3f7fe0;
--accent-grad: linear-gradient(135deg, #b3a7f7 0%, #8f8cf4 52%, #6aa5ff 100%);
--accent-ink: #131a33; /* текст на светлых кнопках */
--active: #20202b; /* активный пункт меню */
--card-3: #24242f; /* hover вторичной кнопки */
--text-strong: #ffffff; /* самый контрастный текст (цифры, заголовки) */
--hover: rgba(255, 255, 255, 0.055);
--scroll-thumb: rgba(255, 255, 255, 0.13);
--scroll-thumb-hover: rgba(255, 255, 255, 0.24);
--track: rgba(255, 255, 255, 0.16);
--appbar-bg: rgba(14, 14, 21, 0.85);
--popover-bg: #14141a;
--dialog-bg: #131319;
--scrim: rgba(6, 5, 12, 0.7);
--shadow-card: 0 10px 28px -18px rgba(0, 0, 0, 0.85);
--ok: #4ade80;
--ok-bg: rgba(34, 197, 94, 0.15);
/* фон «чипа» метки инпута — должен совпадать с поверхностью под полем */
--input-label-bg: var(--panel);
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 22px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* MudBlazor palette (перебивает инлайн-JS форс-дарк) */
--mud-palette-primary: var(--accent-2) !important;
--mud-palette-secondary: #6b6b78 !important;
--mud-palette-background: transparent !important;
--mud-palette-surface: var(--card) !important;
--mud-palette-drawer-background: transparent !important;
--mud-palette-drawer-text: var(--text-1) !important;
--mud-palette-drawer-icon: var(--text-2) !important;
--mud-palette-text-primary: var(--text-1) !important;
--mud-palette-text-secondary: var(--text-2) !important;
--mud-palette-action-default: var(--text-2) !important;
--mud-palette-action-default-hover: var(--hover) !important;
--mud-palette-lines-default: var(--line) !important;
--mud-palette-lines-inputs: var(--line-2) !important;
--mud-selected: var(--active) !important;
--mud-drawer-width-left: 260px !important;
--mud-default-borderradius: var(--radius) !important;
--mud-elevation-1: 0 8px 24px -16px rgba(0, 0, 0, 0.85) !important;
--mud-typography-family: var(--font) !important;
--mud-typography-default-size: 0.82rem !important;
--mud-zindex-dialog: 9999;
/* Попоувер ОБЯЗАН быть выше диалога, иначе календарь/селект, открытый внутри
диалога, уезжает под него и его не видно.
Считается так: .mud-dialog = dialog+2 = 10001, подложка = dialog+1 = 10000,
.mud-popover = popover+1. Штатные 1400 -> 1401 < 10001, отсюда и баг.
Раньше это не проявлялось лишь потому, что new.css грузился после app.css
и сбивал dialog на 1300; после переноса app.css в конец победило
9999. Поэтому фиксируем стек здесь явно, а не полагаемся на порядок файлов. */
--mud-zindex-popover: 10010;
}
/* ---------------------------------------------------------------- base ---- */
/* body — content-driven (min-height, НЕ height:100%). Иначе body ровно с экран,
его переполнение уходит в скролл окна, а когда диалог MudBlazor вешает на body
overflow:hidden (scroll-locked), контент обрезается, высота документа схлопывается
и скролл прыгает в 0. С min-height body растёт по содержимому — блокировка
overflow ничего не схлопывает, позиция скролла сохраняется. */
html, #app { height: 100%; }
body { min-height: 100%; }
/* Запрет горизонтального скролла. ВАЖНО: именно `clip`, а НЕ `hidden`.
`overflow-x: hidden` по спеке заставляет браузер вычислить `overflow-y: auto`,
и тогда сам становится скролл-контейнером. При открытии диалога
MudBlazor вешает на body блокировку скролла (overflow:hidden) — браузер
сбрасывает scrollTop в 0, контент прыгает наверх, фон мигает. `overflow-x: clip`
давит горизонталь, но вертикаль оставляет `visible` — скроллит окно, как и
ожидает MudBlazor, и прыжка нет. */
html, body { overflow-x: clip !important; max-width: 100%; }
/* ВАЖНО: здесь НЕЛЬЗЯ ставить overflow-x: hidden — браузер превращает его в
`overflow: hidden auto`, блок становится обрезающим контейнером, а внутри
лежит .mud-popover-provider => все выпадашки (даты, селекты) обрезаются.
Горизонтальный скролл душим только на html/body выше. */
.mud-layout, .mud-main-content, .mud-container { max-width: 100%; }
.mud-table .mud-table-container { overflow-x: auto; }
body {
background:
radial-gradient(55% 45% at 50% 118%, rgba(139, 124, 240, 0.16), transparent 60%),
radial-gradient(45% 40% at 103% -6%, rgba(70, 140, 255, 0.16), transparent 60%),
radial-gradient(42% 38% at -6% -2%, rgba(91, 157, 255, 0.10), transparent 60%),
var(--bg) !important;
background-attachment: fixed !important;
color: var(--text-1) !important;
font-family: var(--font) !important;
font-weight: 400;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(149, 133, 241, 0.4); color: #ffffff; }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
#components-reconnect-modal { display: none !important; }
.mud-layout, .mud-container { background: transparent !important; }
/* -------------------------------------------------------- typography ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font) !important; color: var(--text-1); letter-spacing: -0.02em; }
h2 { margin-bottom: 1rem; font-weight: 700; font-size: 21px !important; color: var(--text-strong) !important; text-shadow: none; }
h1:focus { outline: none; }
.mud-dialog-title .mud-typography { font-weight: 600; letter-spacing: -0.02em; }
label { color: var(--text-2) !important; }
/* Reusable dark surface */
.mud-paper,
.grid-item,
.log-item,
.dialog-check,
.indicator-item,
.tab-stats-item,
.tab-fin-stats-item,
.users-list .user-item,
.mud-table,
.not-found-base64,
.compensation-amount,
.equivalent-amount,
.mud-card,
.mud-expansion-panel,
.mud-menu-list,
.mud-list,
.mud-popover {
background: var(--card) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 1px solid var(--line) !important;
box-shadow: var(--shadow-card) !important;
border-radius: var(--radius) !important;
}
/* ------------------------------------------------------------ buttons ---- */
button { border-radius: var(--radius-sm) !important; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease) !important; }
.mud-button-filled,
.mud-button-filled-primary {
background: var(--accent-grad) !important;
color: var(--accent-ink) !important;
border: none !important;
box-shadow: 0 10px 24px -10px rgba(149, 133, 241, 0.55) !important;
text-transform: none !important;
font-weight: 600;
letter-spacing: -0.01em;
}
.mud-button-filled-primary { min-width: 142px !important; }
.mud-button-filled:hover,
.mud-button-filled-primary:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 14px 30px -10px rgba(149, 133, 241, 0.65) !important;
opacity: 1 !important;
}
.mud-button-filled:active, .mud-button-filled-primary:active { transform: translateY(0); }
/* secondary = тёмная */
.mud-button-filled-secondary,
.header .profile .withdraw {
background: var(--card-2) !important;
color: var(--text-1) !important;
border: 1px solid var(--line-2) !important;
box-shadow: none !important;
text-transform: none !important;
font-weight: 600;
}
.mud-button-filled-secondary:hover,
.header .profile .withdraw:hover { background: var(--card-3) !important; transform: translateY(-1px); }
.mud-button-outlined { border: 1px solid var(--line-2) !important; color: var(--text-1) !important; text-transform: none !important; background: transparent !important; }
.mud-button-outlined:hover { background: var(--hover) !important; }
.mud-button-text { text-transform: none !important; color: var(--text-1) !important; }
.mud-button-text:hover { background: var(--hover) !important; }
.mud-icon-button:hover { background: var(--hover) !important; }
.mud-pagination .mud-button-root {
height: 32px !important; width: 32px !important; min-width: unset !important;
background: var(--card) !important; color: var(--text-1) !important;
border: 1px solid var(--line) !important; box-shadow: none !important;
}
.mud-pagination .mud-button-root:hover { background: var(--card-2) !important; border-color: var(--line-2) !important; }
.mud-pagination .mud-button-root.mud-button-filled-primary { background: var(--accent-grad) !important; color: var(--accent-ink) !important; }
/* ---------------------------------------------------------- app bar ---- */
.mud-appbar {
padding-left: 1rem; padding-right: 1rem;
background: var(--appbar-bg) !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
}
/* ===================== LEFT PANEL — dark wide sidebar ===================== */
/* new.css задаёт `.mud-layout .mud-drawer { background-color:#121212 !important }`
— перебиваем той же специфичностью (наш файл подключён последним). */
.mud-layout .mud-drawer { background: var(--panel) !important; }
.mud-drawer {
background: var(--panel) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid var(--line) !important;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9) !important;
overflow: hidden;
position: relative;
}
.mud-drawer > * { position: relative; }
/* шапка: логотип + название */
.mud-drawer-header {
display: flex !important; flex-direction: row; align-items: center; gap: 0.55rem;
margin-bottom: 0.35rem; padding: 1.15rem 1.15rem 0.9rem; position: relative;
}
.mud-drawer-header::after {
content: ""; position: absolute; left: 1.15rem; right: 1.15rem; bottom: 0; height: 1px;
background: var(--line);
}
/* Логотип в шапке панели: показываем картинку слева от названия.
Заменить логотип = положить новый файл в wwwroot/img и поправить путь
в NavMenu.cs и LoginLayout.cs. */
.mud-drawer-header img {
display: inline-block !important;
/* !important обязателен: new.css задаёт логотипу 10rem и центрирует его
через position/left/transform — из-за этого он наезжал на название.
Гасим и размер, и позиционирование. */
position: static !important;
left: auto !important;
transform: none !important;
margin-top: 0 !important; margin-bottom: 0 !important;
width: 30px !important; height: 30px !important;
min-width: 30px !important; max-width: 30px !important;
flex: 0 0 auto !important;
border-radius: 8px;
object-fit: contain;
vertical-align: middle;
margin-right: 10px;
}
.mud-drawer-header .mud-typography { display: block !important; white-space: nowrap; overflow: visible; color: var(--text-strong); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; margin: 0 !important; }
.mud-drawer-header .mud-typography::before { content: "p2line"; }
.mud-navmenu-default, .container-padding { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
/* курс — компактный тёмный чип */
.usdt-rate-modern {
margin: 0.35rem 0.4rem 0.55rem !important; padding: 0.55rem 0.75rem !important; border-radius: 10px !important;
background: var(--card) !important; border: 1px solid var(--line) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: relative; overflow: hidden;
}
.rate-value-modern { font-size: 12px; color: var(--text-1); font-weight: 500; }
/* плоский список — без заголовков групп */
.nav-step { margin: 0.1rem 0; }
.nav-step label { display: none !important; }
/* пункты — во всю ширину, компактные, иконка + подпись в строку.
ВАЖНО: классы nav-link-modern/active приходят на обёртку .mud-nav-item,
поэтому фон/hover/active красим на ней (new.css красит её в #161616/#2d2d2d/#b42626). */
.mud-navmenu, .mud-nav-menu { display: flex !important; flex-direction: column; align-items: stretch; gap: 2px; }
.mud-nav-item { height: auto; width: 100%; }
.mud-nav-item.nav-link-modern, .nav-link-modern {
background: transparent !important;
padding: 0 !important; min-height: 0 !important;
margin: 1px 4px !important; border-radius: 10px !important;
transition: background .15s var(--ease) !important;
overflow: hidden;
}
.nav-link-modern:hover { background: var(--hover) !important; }
.nav-link-modern.active { background: var(--active) !important; }
/* цветная полоска-индикатор активного пункта (new.css рисует её cyan) */
.nav-link-modern.active::before { background: var(--accent-2) !important; }
.mud-nav-link {
display: flex !important; flex-direction: row !important; align-items: center; gap: 11px;
width: auto; min-width: 0; margin: 0 !important; padding: 0 11px !important;
height: 38px !important; min-height: 38px !important;
background: transparent !important;
border-radius: 10px !important; font-size: 13px; font-weight: 500;
color: var(--text-2) !important; text-align: left; white-space: nowrap; overflow: hidden;
transition: color .15s var(--ease);
}
.mud-drawer-mini .mud-nav-link { border-radius: 10px !important; }
.mud-nav-link:hover { background: transparent !important; color: var(--text-1) !important; }
.mud-nav-link-icon { min-width: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.mud-nav-link .mud-icon-root { font-size: 1.2rem !important; }
.mud-nav-link-text { font-size: 13px !important; font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
/* активный пункт: текст и иконки контрастные */
.nav-link-modern.active .mud-nav-link, .nav-link-modern.active .mud-nav-link-text { color: var(--text-strong) !important; }
/* иконки */
.mud-nav-link svg { color: var(--text-2) !important; }
.mud-nav-link svg [stroke] { stroke: var(--text-2) !important; }
.nav-link-modern:hover .mud-nav-link svg, .nav-link-modern.active .mud-nav-link svg { color: var(--text-strong) !important; }
.nav-link-modern:hover .mud-nav-link svg [stroke], .nav-link-modern.active .mud-nav-link svg [stroke] { stroke: var(--text-strong) !important; }
/* позиция: широкая тёмная панель-окно слева (desktop) */
@media (min-width: 711px) {
.mud-drawer.mud-drawer-fixed {
top: 16px !important; bottom: 16px !important; left: 16px !important;
height: auto !important; width: 228px !important; transform: none !important;
border-radius: var(--radius-lg) !important;
overflow-y: auto !important; overflow-x: hidden !important;
}
.mud-drawer.mud-drawer-mini { height: auto !important; }
}
/* ---------------------------------------------------- content window ---- */
.mud-main-content {
background: var(--panel) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius-lg) !important;
margin-top: 16px !important;
margin-right: 16px !important;
margin-bottom: 16px !important;
padding: 0.6rem 1.4rem 1.4rem !important;
min-height: calc(100vh - 32px);
}
.mud-container-maxwidth-lg { max-width: unset !important; }
/* ------------------------------------------------------------- header ---- */
.header { display: flex; align-items: center; padding-top: 0.6rem; }
.header .profile {
margin-left: auto;
background: var(--card) !important;
border-radius: 999px !important;
border: 1px solid var(--line) !important;
display: flex; align-items: center; justify-content: center;
box-shadow: none !important;
padding: 0.35rem 0.45rem 0.35rem 0.5rem; gap: 0.3rem;
}
.header .profile .profile-id {
display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
padding: 0.2rem 0.55rem 0.2rem 0.3rem; border-radius: 999px;
transition: background-color .18s var(--ease); user-select: none;
}
.header .profile .profile-id:hover { background: var(--hover); }
.header .profile .profile-id::after {
content: ""; width: 7px; height: 7px; margin-left: 0.1rem;
border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3);
transform: rotate(45deg) translateY(-1px); transition: border-color .18s var(--ease);
}
.header .profile .profile-id:hover::after { border-color: var(--text-1); }
.header .profile label { margin: auto 0; font-weight: 600; font-size: 13px; color: var(--text-1); cursor: inherit; }
.header .profile svg { margin-top: auto; margin-bottom: auto; }
.header .profile .mud-avatar { margin: auto 0; background: var(--accent-grad) !important; color: var(--accent-ink) !important; font-weight: 700; }
.header .profile .mud-button-label .mud-button-icon-end { display: flex !important; margin: 0 !important; margin-inline-start: unset !important; margin-inline-end: unset !important; }
.header .profile button { max-width: unset !important; min-width: unset !important; }
.header .profile .deposit { margin-left: 0.2rem; margin-right: 0.2rem; }
.header .profile .exit-btn {
background: transparent !important; color: var(--text-2) !important; border: 1px solid transparent !important;
box-shadow: none !important; min-width: 38px !important; padding: 0.35rem !important; border-radius: 999px !important;
}
.header .profile .exit-btn:hover { background: rgba(255, 92, 122, 0.14) !important; color: #ff8faa !important; transform: none; }
.header .header-action { margin-left: auto; display: flex; margin-right: 1rem; }
.header .header-action button { margin-top: auto; margin-bottom: auto; }
/* --------------------------------------------------- profile dialog ---- */
.profile-card { display: flex; flex-direction: column; gap: 1.1rem; }
.profile-card-head {
display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius);
background: var(--card-2); border: 1px solid var(--line);
}
.profile-card-head .mud-avatar { background: var(--accent-grad) !important; color: var(--accent-ink) !important; font-weight: 800; width: 56px; height: 56px; font-size: 24px; }
.profile-card-id { display: flex; flex-direction: column; gap: 0.2rem; }
.profile-card-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.profile-card-type {
align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent-ink); background: var(--accent-grad); padding: 0.18rem 0.6rem; border-radius: 999px;
}
.profile-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.profile-stat {
padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line);
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.profile-stat:hover { border-color: var(--line-2); transform: translateY(-2px); }
.profile-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.35rem; }
.profile-stat-value { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.profile-stat.accent { background: var(--accent-grad); border-color: transparent; }
.profile-stat.accent .profile-stat-label { color: rgba(23, 18, 46, 0.65); }
.profile-stat.accent .profile-stat-value { color: var(--accent-ink); }
.profile-meta {
display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: var(--radius);
background: var(--card); border: 1px solid var(--line);
}
.profile-meta-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 12.5px; }
.profile-meta-row span:first-child { color: var(--text-3); }
.profile-meta-row span:last-child { color: var(--text-1); font-weight: 500; }
/* -------------------------------------------------- cards / stat tiles ---- */
.mud-paper-outlined { border: 1px solid var(--line) !important; box-shadow: none !important; }
.mud-elevation-2 { box-shadow: var(--shadow-card) !important; }
.mud-tabs-tabbar .mud-tabs-tabbar-inner { border-bottom: 1px solid var(--line); box-shadow: none; }
.mud-tab { text-transform: none !important; color: var(--text-2) !important; }
.mud-tab.mud-tab-active { color: var(--text-strong) !important; background: transparent !important; }
.mud-tabs-tabbar .mud-tab-slider { background: var(--accent-2) !important; height: 3px !important; border-radius: 3px; }
.tab-stats-item { flex: 1; min-width: 260px; padding: 1rem; }
.tab-fin-stats-item { flex: 1; min-width: 200px; padding: 1rem; }
.indicator-item { padding: 0.6rem; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.indicator-item:hover, .tab-stats-item:hover, .tab-fin-stats-item:hover, .users-list .user-item:hover, .log-item:hover, .mud-paper:hover {
border-color: var(--line-2) !important; transform: translateY(-2px);
}
.indicator-collection { display: flex; gap: 0.5rem; flex-wrap: wrap; min-height: 88px !important; }
.indicator-header { display: flex; margin-bottom: 0.5rem; }
.indicator-header label { margin: auto 0; color: var(--text-2) !important; font-size: 12px; }
.indicator-header .mud-svg-icon { margin-right: 0.2rem !important; }
.indicator-footer { display: flex; margin-top: 0.5rem; }
.indicator-value { font-size: 26px; font-weight: 700; color: var(--text-strong); }
.i-item-header { display: flex; margin-bottom: 0.2rem; }
.i-item-header label { margin: auto 0; }
.i-item-header svg { width: 22px !important; margin-right: 0.2rem !important; margin-top: auto; margin-bottom: auto; }
.i-item-value { font-size: 14px; }
.i-item { padding: 0.5rem; }
.tab-stats-item-label { display: flex; }
.tab-stats-item-label label { margin: auto 0; color: var(--text-2) !important; font-size: 12px; }
.tab-stats-item-label svg { margin-left: auto; }
.tab-stats-item-value { margin-top: 0.3rem; font-size: 26px; font-weight: 700; color: var(--text-strong); }
.tab-fin-stats-item-label { display: flex; }
.tab-fin-stats-item-label label { margin: auto 0; color: var(--text-2) !important; font-size: 12px; }
.tab-fin-stats-item-label svg { margin-left: auto; }
.tab-fin-stats-item-value { margin-top: 0.3rem; font-size: 20px; font-weight: 700; color: var(--text-strong); }
.tab-fin-stats-item-sub { margin-top: 0.3rem; font-size: 14px; color: var(--text-2); }
.tab-stats-list, .tab-fin-stats-list { display: flex; flex-flow: row wrap; gap: 0.5rem; }
.tab-head, .tab-stats { margin-bottom: 1rem; margin-top: 10px; }
.tab-fin-stats:last-of-type { margin-top: 1rem; }
.tab-head-item { display: flex; gap: 1rem; }
.grid-list { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.grid-item { padding: 1rem; border-radius: var(--radius) !important; }
.grid-item .grid-item-title { display: flex; }
.grid-item .grid-item-title h3 { margin: auto 0; font-size: 16px; }
.grid-item .grid-item-title svg { margin-left: auto; margin-top: auto; margin-bottom: auto; }
/* ------------------------------------------------------- users list ---- */
.users-header { display: flex; }
.users-header .mud-button-group { margin-left: auto; }
.users-list { display: flex; flex-direction: column; gap: 1rem; }
.users-list .user-item { padding: 1rem; display: flex; gap: 1rem; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.users-list .user-item .mud-avatar { margin: auto 0; }
.users-list .user-item .user-info { flex: 1; display: flex; margin: auto 0; }
.users-list .user-item .user-action { margin-left: auto; margin-top: auto; margin-bottom: auto; }
/* --------------------------------------------------------- reflective ---- */
.reflective { margin-top: 0.5rem; }
.reflective .header { display: flex; }
.reflective .header .mud-avatar { margin: auto 0; }
.reflective .header-info { flex: 1; margin-left: 1rem; }
.reflective .settings { margin-top: 1rem; display: flex; gap: 1rem; }
.reflective .settings .mud-button-filled-size-medium { flex: 1; }
.reflective .action { margin-top: 1rem; }
.reflective .action button { background: var(--accent-grad) !important; color: var(--accent-ink) !important; }
.reflective .information { margin-top: 1rem; display: flex; gap: 0.5rem; }
.reflective .information-item { flex: 1; }
/* ------------------------------------------------------------ wallet ---- */
.user-wallet { max-width: 900px; }
.user-wallet-withdraw-action { display: flex; gap: 1rem; margin-top: 1rem; }
.user-wallet-withdraw-action .mud-input-control { flex: 1; }
.user-wallet-action { margin-top: 1rem; display: flex; gap: 1rem; }
.user-wallet-action .mud-button-filled { flex: 1; background: var(--accent-grad) !important; color: var(--accent-ink) !important; }
/* ------------------------------------------------------------- tables ---- */
.mud-table { border-radius: var(--radius) !important; overflow: hidden; }
.mud-table .mud-table-root, .mud-table .mud-table-container { background: transparent !important; }
.mud-table-cell { color: var(--text-1) !important; font-size: 11px !important; border-bottom: 1px solid var(--line) !important; }
.mud-table-cell .mud-typography { font-size: 11px !important; }
.mud-table-cell .mud-icon-root { margin-left: auto !important; margin-right: auto !important; }
.mud-table-loading { display: none !important; }
.mud-table-head .mud-table-cell { color: var(--text-2) !important; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px !important; background: transparent !important; }
.mud-table-row:hover { background: var(--hover) !important; }
._indicator { justify-content: center; display: flex; }
/* ----------------------------------------------------- inputs / forms ---- */
/* outlined-инпуты: прозрачная заливка + видимая рамка, без «коробки в коробке» */
.mud-input-outlined-border { border-color: var(--line-2) !important; background: transparent !important; }
.mud-input { background: transparent !important; color: var(--text-1) !important; }
.mud-input input, .mud-input textarea, .mud-input .mud-input-slot, .mud-select-input {
background: transparent !important; color: var(--text-1) !important;
}
.mud-input input::placeholder { color: var(--text-3) !important; }
.mud-input:focus-within { box-shadow: none !important; }
.mud-input:focus-within .mud-input-outlined-border { border-color: var(--accent-blue) !important; }
.mud-input-label { color: var(--text-3) !important; }
/* адорнмент-иконки в инпутах (календарь, глаз, стрелка) — ровные и тёмные */
.mud-input-adornment, .mud-input-adornment .mud-icon-root, .mud-input-adornment-icon-button { color: var(--text-2) !important; }
.mud-input-adornment .mud-icon-button:hover { background: var(--hover) !important; }
/* рамка инпута — аккуратный скруглённый прямоугольник (перебиваем пилюлю 10vh из new.css) */
.mud-input-control-input-container .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 10px !important; }
/* обёртка пикера НЕ должна рисовать свою рамку/фон поверх инпута */
.mud-picker, .mud-picker-inline, .mud-picker-container, .mud-picker-input {
background: transparent !important; border: none !important; box-shadow: none !important;
}
/* выпадающие панели (календарь, списки) — тёмные, не белые */
.mud-picker-content, .mud-select-popover, .mud-autocomplete-popover, .mud-menu-popover {
background: var(--popover-bg) !important; color: var(--text-1) !important; border: 1px solid var(--line-2) !important;
border-radius: var(--radius-sm) !important;
}
.mud-list-item:hover, .mud-picker-calendar-day:hover { background: var(--hover) !important; }
/* шапка календаря: MudBlazor заливает её акцентом на 100px ради одного года —
делаем компактной полосой в тон попоувера, а год оставляем акцентным */
.mud-picker-toolbar {
background: var(--card-2) !important;
border-bottom: 1px solid var(--line-2) !important;
min-height: 0 !important;
height: auto !important;
padding: 8px 16px !important;
}
.mud-picker-toolbar .mud-button-root, .mud-picker-toolbar .mud-typography { color: var(--accent-1) !important; }
/* выбранный день — акцентная заливка с читаемым текстом */
.mud-picker-calendar-day.mud-selected { background: var(--accent-2) !important; color: var(--accent-ink) !important; }
/* ============== RADZEN-СЕЛЕКТ (выбор трейдера/мерчанта в шапке) ============
Единственный компонент не из MudBlazor (FinanceTab): вся остальная тема
написана под .mud-*, поэтому он оставался неоформленным — «поплыл».
Вторая беда: Radzen рисует иконки лигатурами шрифта Material Symbols
(--rz-icon-font-family), а этот шрифт в проект не подключён — вместо стрелки
в поле печаталось слово "arrow_drop_down". Шрифт ради двух иконок не тянем:
прячем лигатуру и рисуем стрелку средствами CSS. */
.rz-dropdown {
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
height: 40px !important;
background: transparent !important;
border: 1px solid var(--line-2) !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.rz-dropdown:hover { border-color: var(--line) !important; }
.rz-dropdown:focus, .rz-dropdown.rz-state-focused { border-color: var(--accent-blue) !important; outline: none !important; }
.rz-dropdown .rz-dropdown-label {
flex: 1 1 auto !important;
margin: 0 !important;
padding: 0 12px !important;
background: transparent !important;
color: var(--text-1) !important;
font-family: var(--font) !important;
font-size: 0.82rem !important;
line-height: 38px !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rz-dropdown .rz-dropdown-trigger {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 100% !important;
background: transparent !important;
border: none !important;
}
.rz-dropdown .rz-dropdown-trigger-icon { font-size: 0 !important; color: transparent !important; }
.rz-dropdown .rz-dropdown-trigger::after {
content: '';
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--text-2);
}
/* список Radzen: свой тёмный фон #161616 мимо темы -> переводим на токены,
иначе в светлой теме он остаётся чёрным */
.rz-dropdown-panel {
background: var(--popover-bg) !important;
border: 1px solid var(--line-2) !important;
border-radius: var(--radius-sm) !important;
box-shadow: var(--shadow-card) !important;
}
.rz-dropdown-panel .rz-dropdown-item {
color: var(--text-1) !important;
font-family: var(--font) !important;
font-size: 0.82rem !important;
}
.rz-dropdown-panel .rz-dropdown-item:hover,
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight { background: var(--hover) !important; }
/* разделитель под поиском приходил светло-серым (#eee) из дефолтной темы Radzen */
.rz-dropdown-panel .rz-dropdown-filter-container {
background: transparent !important;
padding: 6px !important;
border-bottom: 1px solid var(--line-2) !important;
}
.rz-dropdown-panel .rz-dropdown-filter {
box-sizing: border-box !important;
width: 100% !important;
height: 32px !important;
background: var(--card-2) !important;
color: var(--text-1) !important;
border: 1px solid var(--line-2) !important;
border-radius: 8px !important;
padding: 0 10px !important;
font-family: var(--font) !important;
}
/* иконка поиска — тоже лигатура, печаталась бы словом "search" */
.rz-dropdown-panel .rz-dropdown-filter-icon { display: none !important; }
/* Кнопкам не хватало ширины: текст упирался в края (запас 0–2px), а вместе с
иконкой не помещался вовсе («Общие логи», «Выгрузки», «Привязать Telegram»).
Даём горизонтальный воздух и запрещаем перенос. Иконочные кнопки и пункты
меню исключены — им ширина по содержимому нужна, иначе разъедутся. */
.mud-button-root:not(.mud-icon-button):not(.mud-nav-link):not(.mud-tab) {
padding-left: 20px !important;
padding-right: 20px !important;
white-space: nowrap !important;
}
.mud-input-numeric-spin { margin-right: 1rem; }
.mud-input-number-control.mud-input-showspin .mud-input-adornment-end { margin-inline-end: 30px !important; margin-inline-start: unset; }
.mud-input-control-input-container { min-height: 40px !important; height: auto !important; line-height: normal !important; }
.mud-input { min-height: 40px !important; height: auto !important; line-height: normal !important; }
.mud-input-control { flex: none !important; }
/* Поля в шапке списка (Pay In, Pay Out и т.п.): ширина у .mud-input-control
считается по содержимому (flex:0 0 auto), поэтому после выбора короткого
значения — «Карты» вместо «Все типы» — поле схлопывалось с 199px до 94px,
а соседние прыгали следом. Задаём стабильную ширину: значение длиннее
обрезается многоточием (см. правило для div.mud-input-slot). */
.cards-header .type-select,
.cards-header .status-select { flex: 0 0 220px !important; width: 220px !important; }
.cards-header .search-field { flex: 0 0 250px !important; width: 250px !important; }
.mud-input-label-outlined.mud-input-label-inputtype-text.mud-input-label { transform: translate(14px, 11px) scale(1); }
.tab-head-item .mud-input-label-outlined.mud-input-label { transform: translate(14px, 11px) scale(1); }
.mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(14px, 10px) scale(1); }
/* Правило `.tab-head-item .mud-select .mud-select-input {height:100%; line-height:normal}`
удалено намеренно: значение селекта — это div со ВСЕМИ классами сразу
(mud-input-slot + mud-select-input), и этот селектор (вес 0,3,0) перебивал
общее центрирование `.mud-input div.mud-input-slot` (вес 0,2,1) — текст в
шапках вкладок (Datalens, Трейдеры) прилипал к верху поля. */
.tab-head-item .mud-button-filled-size-medium, .tab-head-item .mud-menu, .tab-head-item .mud-input-outlined-with-label { height: 41px; margin-top: auto !important; margin-bottom: auto !important; }
.tab-header .mud-input-control-input-container { margin-top: auto; margin-bottom: auto; }
.nav-container { margin-bottom: 1rem; padding-top: 1rem; }
.nav-container label { margin-bottom: 1rem !important; }
.nav-container .mud-input-outlined-border { border-radius: 12px !important; }
.nav-container .mud-input-control { margin-bottom: 0.5rem; }
.nav-container .mud-button-filled-size-medium { width: 100%; }
.nav-container .mud-input { min-height: 40px !important; height: auto !important; line-height: normal !important; }
input:-webkit-autofill { box-shadow: 0 0 0 3000px var(--card) inset !important; -webkit-text-fill-color: var(--text-1) !important; caret-color: var(--text-1) !important; }
.virtualize-modal .mud-typography-caption { line-height: 40px !important; height: 40px !important; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid #ff6b8a; }
.validation-message { color: #ff9bb0; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--text-3); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
/* ------------------------------------------------------------ dialogs ---- */
.mud-dialog {
background: var(--dialog-bg) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid var(--line-2) !important;
border-radius: var(--radius-lg) !important;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85) !important;
}
.mud-dialog button { height: 36.5px !important; }
.mud-dialog .mud-button { width: 100%; }
.mud-dialog .mud-input { border-radius: 50px !important; }
.mud-dialog-actions { padding: 0 24px 24px !important; }
.mud-overlay-scrim { background: var(--scrim) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.compensation-amount, .equivalent-amount { padding: 0.75rem 1rem; border-radius: var(--radius-sm) !important; }
.data-correct b { color: var(--ok); }
/* --------------------------------------------------------- status pill ---- */
.invoice-status {
background: var(--card-2) !important;
color: var(--text-1) !important;
border: 1px solid var(--line-2) !important;
border-radius: 999px !important;
box-shadow: none !important;
}
/* ============================== LOGIN (dark) ============================= */
.area {
background: transparent !important;
background-image:
radial-gradient(50% 45% at 50% 116%, rgba(139, 124, 240, 0.20), transparent 60%),
radial-gradient(45% 40% at 100% 0%, rgba(139, 124, 240, 0.14), transparent 60%),
var(--bg) !important;
width: 100%; height: 100vh;
}
.login-layout { font-family: var(--font) !important; text-align: center !important; }
.logo-with-text { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.logo-image { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; }
.logo-text { font-size: 2rem; font-weight: 700; color: var(--text-strong) !important; letter-spacing: -0.02em; text-shadow: none !important; }
.login-header { color: var(--text-2); }
body .login-layout {
background: var(--panel) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid var(--line-2) !important;
border-radius: var(--radius-lg) !important;
box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.8) !important;
padding: 1.75rem !important;
}
body .login-layout .login { margin-top: 0; text-align: center; background: transparent !important; border: none !important; box-shadow: none !important; }
.login fieldset { border-radius: 12px !important; }
.login-inputs { margin-top: 1rem; }
.login-inputs .mud-input-control { margin-bottom: 1rem; }
.login-inputs .mud-input { min-height: 40px !important; height: auto !important; line-height: normal !important; border-radius: 12px !important; }
.login-action { margin-top: 1.5rem; }
.login .login-action button,
.mud-input-error ~ .login-action button {
width: 100% !important; height: 44px;
background: var(--accent-grad) !important;
color: var(--accent-ink) !important;
border: none !important;
box-shadow: 0 12px 28px -10px rgba(149, 133, 241, 0.6) !important;
border-radius: 12px !important; margin-top: 0.5rem; font-weight: 700;
}
.login .login-action button:hover { transform: translateY(-1px); filter: brightness(1.06); opacity: 1 !important; }
.action button { width: 100%; }
.circles li { background: rgba(149, 133, 241, 0.14) !important; box-shadow: 0 0 24px rgba(139, 124, 240, 0.2) !important; border-radius: 24% !important; }
/* --------------------------------------------------------- invoices ---- */
.reflective-invoice { width: 100%; max-width: unset; }
.reflective-invoice-data { display: flex; gap: 1rem; }
.data-left { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.data-left .mud-input-control { flex: 1; }
.data-right { padding-left: 0.5rem; padding-right: 0.5rem; }
.invoice-row { display: flex; gap: 10px; align-items: stretch; height: 606px; }
.invoice-row .reflective-invoice { width: 100%; }
.invoice-card { flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
.tab-data { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.not-found { padding: 1rem; }
.not-found-base64 { margin-left: 1rem; border-radius: var(--radius) !important; }
/* ------------------------------------------------------- balance log ---- */
.log-item { display: flex; padding: 0.6rem; margin-top: 1rem; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.log-items-data { width: 100%; }
.log-item-type { display: flex; margin-right: 1rem; }
.log-item-type .mud-avatar { margin: auto 0; }
.log-data { display: flex; }
.log-data span:first-of-type { font-weight: 600; margin-right: 0.3rem; }
.log-data span:last-of-type { margin-left: auto; }
.log-data-description { margin-top: 0.3rem; color: var(--text-2); }
.log-data-date { margin-top: 0.3rem; display: flex; }
.log-data-date span:first-of-type { font-weight: 600; }
.log-data-date span:last-of-type { margin-left: auto; font-weight: 600; }
/* ------------------------------------------------------------- misc ---- */
.params button { margin-top: 1rem !important; }
.dialog-check { padding: 1rem; border-radius: var(--radius) !important; }
.dialog-check button { width: 100%; }
.dialog-row { margin-bottom: 0.2rem !important; }
.mud-avatar { background: var(--accent-grad) !important; color: var(--accent-ink) !important; }
.mud-chip { background: var(--card-2) !important; color: var(--text-1) !important; border: 1px solid var(--line) !important; }
.mud-switch-track { background: var(--track) !important; }
.blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--radius-sm); }
.blazor-error-boundary::after { content: "An error has occurred."; }
.header-menu { display: none; }
.mobile-menu-button { background: var(--card) !important; color: var(--text-1) !important; border: 1px solid var(--line) !important; }
/* =================== TAB CONTENT — содержимое вкладок ===================== */
/* Красивые карточки статистики под референс: тёмные плитки, лавандовые
иконки-тайлы, крупные значения, мягкое угловое свечение. Перебивает new.css. */
/* Плитки балансов / конверсии (SimpleStats) */
.simple-stats {
background: var(--card) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
padding: 1.05rem 1.2rem !important;
display: flex !important; flex-direction: column; gap: 0.45rem;
min-width: 200px; flex: 1; position: relative; overflow: hidden;
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.simple-stats:hover { border-color: var(--line-2) !important; transform: translateY(-2px); }
.simple-stats::after {
content: ""; position: absolute; top: -28px; right: -28px; width: 92px; height: 92px; border-radius: 50%;
background: radial-gradient(circle, rgba(91, 157, 255, 0.20), transparent 70%); pointer-events: none;
}
.simple-stats label:not(.data) { color: var(--text-2) !important; font-size: 12px !important; font-weight: 500; position: relative; }
.simple-stats .data { color: var(--text-strong) !important; font-size: 24px !important; font-weight: 700; letter-spacing: -0.02em; position: relative; }
/* Финансовый блок (FinanceStats) */
.finance-stats-modern {
background: var(--card) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius-lg) !important;
box-shadow: none !important;
padding: 1.4rem !important;
zoom: 100% !important;
}
.finance-header { border-bottom: 1px solid var(--line) !important; margin-bottom: 1.2rem !important; padding-bottom: 0.9rem !important; }
.header-content { display: flex; align-items: center; gap: 0.7rem; }
.finance-header .header-icon { color: var(--accent-1) !important; }
.header-title { color: var(--text-strong) !important; font-size: 1.05rem !important; font-weight: 700 !important; zoom: 100% !important; }
.main-metrics-grid { gap: 14px !important; margin-bottom: 1.4rem !important; }
.metric-card {
background: var(--card-2) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
padding: 1.1rem 1.2rem !important;
position: relative; overflow: hidden;
transition: border-color .2s var(--ease), transform .2s var(--ease) !important;
}
.metric-card.main-metric { background: var(--card-2) !important; border-color: var(--line) !important; }
.metric-card:hover { transform: translateY(-2px); border-color: var(--line-2) !important; box-shadow: none !important; }
.metric-card::after {
content: ""; position: absolute; top: -24px; right: -24px; width: 82px; height: 82px; border-radius: 50%;
background: radial-gradient(circle, rgba(149, 133, 241, 0.16), transparent 70%); pointer-events: none;
}
.metric-header { display: flex; align-items: center; gap: 8px; margin-bottom: 0.65rem; position: relative; }
.metric-icon { color: var(--accent-1) !important; }
.metric-title { color: var(--text-2) !important; font-size: 12px !important; font-weight: 500; opacity: 1 !important; }
.metric-value { color: var(--text-strong) !important; font-size: 1.7rem !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.2; position: relative; }
.metric-prefix { color: var(--text-3) !important; font-size: 0.9rem !important; margin-left: 4px; opacity: 1 !important; }
.secondary-metrics-section { margin-top: 1.3rem !important; }
.section-header {
color: var(--text-2) !important; font-size: 11px !important; font-weight: 600 !important;
text-transform: uppercase; letter-spacing: 0.07em;
border-bottom: 1px solid var(--line) !important; padding-bottom: 0.6rem !important; margin-bottom: 1rem !important;
}
.secondary-metrics-grid { gap: 10px !important; }
.compact-metric {
background: var(--card) !important; border: 1px solid var(--line) !important;
border-left: 3px solid var(--accent-blue) !important; border-radius: 10px !important;
padding: 0.7rem 0.95rem !important; transition: border-color .2s var(--ease);
}
.compact-metric:hover { border-color: var(--line-2) !important; border-left-color: var(--accent-1) !important; }
/* реальная структура: .compact-header (svg.compact-icon + span.compact-title) + .compact-value + .compact-prefix */
.compact-header { display: flex !important; align-items: center; gap: 8px; }
.compact-icon { color: var(--accent-blue) !important; }
.compact-title { color: var(--text-2) !important; font-size: 12px !important; font-weight: 500; }
.compact-value { color: var(--text-strong) !important; font-size: 1.05rem !important; font-weight: 700; }
.compact-prefix { color: var(--text-3) !important; font-size: 0.85rem !important; margin-left: 4px; opacity: 1 !important; }
/* --------------------------------------------------------- responsive ---- */
@media (min-width: 1600px) {
.user-item { display: grid; }
.user-info { display: grid; }
}
@media (max-width: 710px) {
.mud-main-content { margin: 0 !important; border-radius: 0 !important; border: none !important; padding: 0.6rem 0.9rem 1.2rem !important; }
.mud-layout .mud-drawer-fixed { display: none; position: fixed !important; height: 100vh !important; }
.mud-drawer-open-mini-md-left .mud-main-content { margin-left: unset !important; }
.header-menu { display: unset; }
.users-header { display: grid !important; margin-bottom: 1rem; }
.users-list .user-item { display: flex !important; flex-direction: column; }
.users-list .user-item .mud-avatar { margin-left: auto; margin-right: auto; }
.users-list .user-item .user-info { flex-direction: column; }
.users-list .user-item .user-action { margin-top: 1rem; }
.grid-list { grid-template-columns: unset !important; }
.reflective .header { display: grid !important; }
.reflective .settings { display: grid !important; }
.reflective .information { display: grid !important; }
.mud-table .mud-table-child-content .reflective { max-width: 100% !important; }
.mud-table-body .mud-paper { width: 100%; display: flex !important; flex-direction: column; }
.user-wallet { max-width: unset !important; }
.tab-head-item { flex-wrap: wrap; }
.tab-head-item .mud-picker-input-button { width: 100% !important; }
.reflective-invoice-data { flex-direction: column !important; }
.data-right { padding-left: unset !important; padding-right: unset !important; margin-top: 1rem !important; min-height: 700px; }
.not-found-base64 { margin-left: 0 !important; }
.profile-stats-grid { grid-template-columns: 1fr 1fr; }
}
/* ================= LIGHT THEME — html[data-theme="light"] ================= */
/* Тема переключается атрибутом data-theme на (кнопка в шапке).
Форс-дарк JS страниц его не трогает, а !important перебивает его переменные.
Почти всё построено на токенах — поэтому светлая = их переопределение. */
html[data-theme="light"] {
--bg: #eceff7; /* светлый бэкдроп */
--panel: #ffffff; /* окна: сайдбар + контент */
--card: #f7f8fc; /* карточки */
--card-2: #f0f2f8;
--card-3: #e6e9f2;
--line: rgba(18, 22, 48, 0.09);
--line-2: rgba(18, 22, 48, 0.16);
--text-1: #1a1d33;
--text-2: #5d6379;
--text-3: #8a90a6;
--text-strong: #0c0f20;
--active: #e8eafc; /* активный пункт меню — светлая лаванда */
--hover: rgba(18, 22, 48, 0.05);
--scroll-thumb: rgba(18, 22, 48, 0.18);
--scroll-thumb-hover: rgba(18, 22, 48, 0.30);
--track: rgba(18, 22, 48, 0.18);
--appbar-bg: rgba(255, 255, 255, 0.85);
--popover-bg: #ffffff;
--dialog-bg: #ffffff;
--scrim: rgba(20, 24, 50, 0.35);
--shadow-card: 0 8px 24px -16px rgba(20, 24, 50, 0.45);
--ok: #16a34a;
--ok-bg: rgba(22, 163, 74, 0.12);
}
/* тени и свечения мягче на светлом */
html[data-theme="light"] .mud-drawer { box-shadow: 0 20px 50px -30px rgba(20, 24, 50, 0.35) !important; }
html[data-theme="light"] .mud-dialog { box-shadow: 0 30px 80px -24px rgba(20, 24, 50, 0.40) !important; }
html[data-theme="light"] .mud-drawer::before { opacity: 0.35; }
html[data-theme="light"] .simple-stats::after,
html[data-theme="light"] .metric-card::after { opacity: 0.55; }
html[data-theme="light"] .not-found-base64 { background: var(--card) !important; }
html[data-theme="light"] .circles li { background: rgba(91, 157, 255, 0.16) !important; }
/* кнопка переключения темы (в шапке, рядом с выходом) */
.header .profile .theme-btn {
background: transparent !important; color: var(--text-2) !important; border: 1px solid transparent !important;
box-shadow: none !important; min-width: 38px !important; padding: 0.35rem !important; border-radius: 999px !important;
}
.header .profile .theme-btn:hover { background: var(--hover) !important; color: var(--text-1) !important; transform: none; }
/* кнопка «Помощь» в шапке (рядом с темой и выходом) */
.header .profile .help-btn {
background: transparent !important; color: var(--text-2) !important; border: 1px solid transparent !important;
box-shadow: none !important; min-width: 38px !important; padding: 0.35rem !important; border-radius: 999px !important;
}
.header .profile .help-btn:hover { background: var(--hover) !important; color: var(--accent-blue) !important; transform: none; }
/* ===================== Раздел «Поддержка» (тикеты) ====================== */
.tickets-page { padding-top: 0.5rem; }
.tickets-header h2 { margin-bottom: 0.25rem; }
.tickets-sub { color: var(--text-2); margin-bottom: 1rem; font-size: 13px; }
.tickets-empty { color: var(--text-3); padding: 2rem 1rem; text-align: center; }
.tickets-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; align-items: start; }
.tickets-list {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 0.5rem; max-height: calc(100vh - 220px); overflow-y: auto;
}
.ticket-item {
padding: 0.7rem 0.8rem; border-radius: var(--radius-sm); cursor: pointer;
border: 1px solid transparent; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ticket-item:hover { background: var(--hover); }
.ticket-item.active { background: var(--active); border-color: var(--line-2); }
.ticket-item.unread .ticket-topic::before {
content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-blue); margin-right: 6px; vertical-align: middle;
}
.ticket-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-topic { font-weight: 600; font-size: 13px; color: var(--text-1); }
.ticket-item-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-3); }
.ticket-status {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.ticket-status.open { background: rgba(91,157,255,.16); color: var(--accent-blue); }
.ticket-status.work { background: rgba(179,167,247,.18); color: var(--accent-1); }
.ticket-status.closed { background: var(--card-2); color: var(--text-3); }
.ticket-chat {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
display: flex; flex-direction: column; min-height: 420px;
}
.chat-head {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 1.1rem; border-bottom: 1px solid var(--line);
}
.chat-title { font-weight: 700; color: var(--text-strong); }
.chat-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.chat-actions { display: flex; gap: 8px; }
.chat-body { flex: 1; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; max-height: 46vh; }
.chat-msg { max-width: 78%; padding: 0.6rem 0.8rem; border-radius: 14px; border: 1px solid var(--line); }
.chat-msg.from-user { align-self: flex-start; background: var(--card-2); }
.chat-msg.from-support { align-self: flex-end; background: rgba(91,157,255,.12); border-color: rgba(91,157,255,.28); }
.chat-msg-head { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.chat-msg-text { font-size: 13px; color: var(--text-1); white-space: pre-wrap; word-break: break-word; }
.chat-reply { display: flex; gap: 10px; align-items: flex-end; padding: 0.9rem 1.1rem; border-top: 1px solid var(--line); }
.chat-reply .mud-input-control { flex: 1 !important; }
.chat-reply button { white-space: nowrap; }
@media (max-width: 900px) {
.tickets-layout { grid-template-columns: 1fr; }
.tickets-list { max-height: 260px; }
}
/* ================== Плавающий чат поддержки (справа снизу) ============== */
.support-fab {
position: fixed; right: 22px; bottom: 22px; z-index: 1200;
width: 54px; height: 54px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--accent-grad); color: var(--accent-ink);
box-shadow: 0 12px 30px -8px rgba(149,133,241,.65);
cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.support-fab:hover { transform: translateY(-2px) scale(1.04); }
.support-fab.has-unread::after {
content: ""; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
border-radius: 50%; background: #ff5a7a; border: 2px solid var(--panel);
}
.support-chat {
position: fixed; right: 22px; bottom: 88px; z-index: 1200;
width: 360px; max-width: calc(100vw - 32px);
height: 480px; max-height: calc(100vh - 130px);
display: flex; flex-direction: column;
background: var(--panel); border: 1px solid var(--line-2);
border-radius: var(--radius-lg); overflow: hidden;
box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
}
.support-chat-head { padding: .9rem 1rem; border-bottom: 1px solid var(--line); background: var(--card); }
.sc-title { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.sc-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.support-chat-body { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.sc-empty { color: var(--text-3); text-align: center; margin: auto; font-size: 13px; }
.sc-msg { max-width: 82%; padding: .5rem .7rem; border-radius: 14px; border: 1px solid var(--line); }
.sc-msg.mine { align-self: flex-end; background: rgba(91,157,255,.14); border-color: rgba(91,157,255,.3); }
.sc-msg.support { align-self: flex-start; background: var(--card-2); }
.sc-msg-text { font-size: 13px; color: var(--text-1); white-space: pre-wrap; word-break: break-word; }
.sc-msg-img, .chat-msg-img { display: block; max-width: 100%; border-radius: 10px; margin-top: 6px; cursor: zoom-in; }
.chat-msg-img { max-width: 260px; }
.sc-msg-time { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.sc-pending { display: flex; align-items: center; gap: 8px; padding: .5rem .9rem; border-top: 1px solid var(--line); }
.sc-pending img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.sc-pending-x { cursor: pointer; color: var(--text-3); font-size: 13px; }
.sc-pending-x:hover { color: #ff8faa; }
.sc-error { padding: .4rem .9rem; color: #ff8faa; font-size: 12px; }
.support-chat-foot { display: flex; align-items: center; gap: 6px; padding: .6rem .7rem; border-top: 1px solid var(--line); background: var(--card); }
/* ВАЖНО: MudFileUpload рендерится с тем же классом mud-input-control, что и
текстовое поле — без этого разделения оба растягивались и делили ширину. */
.support-chat-foot .mud-file-upload { flex: 0 0 auto !important; width: auto !important; }
.support-chat-foot .mud-input-control:not(.mud-file-upload) { flex: 1 1 auto !important; margin: 0 !important; min-width: 0; }
.support-chat-foot .mud-input { min-height: 40px !important; height: auto !important; line-height: normal !important; }
.sc-attach { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-2); cursor: pointer; flex: 0 0 auto; }
.sc-attach:hover { background: var(--hover); color: var(--accent-blue); }
.sc-send {
width: 38px; height: 38px; border-radius: 50% !important; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--accent-grad) !important; color: var(--accent-ink) !important;
border: none; cursor: pointer;
}
.sc-send:disabled { opacity: .5; cursor: default; }
@media (max-width: 710px) { .support-chat { right: 12px; left: 12px; width: auto; } }
/* ============ ГЕОМЕТРИЯ ИНПУТОВ (фикс «текст выше поля») =================
Было две беды:
1) line-height:40px наследовался внутрь .
Браузер сам центрирует текст по вертикали только внутри , т.е. «выреза» под метку нет, поэтому
подкладываем метке фон поверхности (--input-label-bg), иначе линия рамки
перечёркивает текст. */
.mud-input-label-outlined,
.mud-input-label-outlined.mud-input-label-margin-dense {
transform: translate(14px, 10px) scale(1);
}
.mud-input.mud-shrink ~ label.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label-outlined {
transform: translate(12px, -9px) scale(0.75) !important;
background-color: var(--input-label-bg) !important;
padding: 0 5px !important;
border-radius: 4px;
z-index: 2 !important;
max-width: calc(100% - 24px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- бейдж «новые обращения» в меню + закрытие обращения в чате --- */
.nav-badge-new {
margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; border-radius: 999px;
background: #ff5a7a; color: #fff; flex: 0 0 auto;
}
.support-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-close-ticket {
flex: 0 0 auto; border: 1px solid var(--line-2); background: transparent;
color: var(--text-2); font-size: 11px; padding: 4px 9px; border-radius: 999px !important;
cursor: pointer; white-space: nowrap;
}
.sc-close-ticket:hover { background: var(--hover); color: var(--text-1); border-color: var(--line-strong); }
/* новые сообщения у саппорта — заметнее */
.ticket-item.unread { background: rgba(91, 157, 255, .07); }
.ticket-item.unread .ticket-topic { color: var(--text-strong); }
/* ====== СТРАНИЦА СПИСКА ПОЛЬЗОВАТЕЛЕЙ/ТРЕЙДЕРОВ (.users-modern-page) ======
Этот раздел остался от старой темы: серые градиенты (#1a1a1a → #0d0d0d),
серебристые рамки rgba(192,192,192,…) и серый текст #b8b8b8/#a8a8a8.
Переводим на токены темы. Всё строго внутри .users-modern-page —
те же имена классов (.page-header, .card-actions) встречаются на других
страницах, и мы их не задеваем. */
.users-modern-page { background: transparent !important; }
.users-modern-page .page-header {
background: var(--card) !important;
border: 1px solid var(--line) !important;
box-shadow: var(--shadow-card) !important;
}
.users-modern-page .page-title { color: var(--text-strong) !important; }
/* карточка пользователя */
.users-modern-page .user-card {
background: var(--card) !important;
border: 1px solid var(--line) !important;
box-shadow: var(--shadow-card) !important;
}
.users-modern-page .user-card::before { display: none !important; } /* серебристый блик старой темы */
.users-modern-page .user-card:hover {
background: var(--card-2) !important;
border-color: var(--line-2) !important;
box-shadow: 0 16px 40px -22px rgba(0,0,0,.9) !important;
}
/* шапка карточки и её разделитель */
.users-modern-page .card-header {
background: transparent !important;
border-bottom: 1px solid var(--line) !important;
}
.users-modern-page .card-header::after {
background: linear-gradient(90deg, transparent, var(--line-2), transparent) !important;
}
.users-modern-page .card-content { background: transparent !important; }
.users-modern-page .card-actions {
background: transparent !important;
border-top: 1px solid var(--line) !important;
}
/* логин и «тип» пользователя */
.users-modern-page .user-login { color: var(--text-strong) !important; }
.users-modern-page .user-type {
color: var(--text-2) !important;
background: var(--card-2) !important;
border: 1px solid var(--line-2) !important;
}
/* строки «поле — значение» */
.users-modern-page .user-detail { border-bottom: 1px solid var(--line) !important; }
.users-modern-page .detail-label { color: var(--text-3) !important; }
.users-modern-page .detail-value { color: var(--text-1) !important; }
/* статусы: цвета оставляем смысловыми, но приглушаем под тёмную тему */
.users-modern-page .status-success {
background: rgba(64, 200, 140, 0.14) !important;
color: #4ecfa0 !important; border: 1px solid rgba(78, 207, 160, 0.45) !important;
}
.users-modern-page .status-error {
background: rgba(240, 90, 100, 0.14) !important;
color: #f2707a !important; border: 1px solid rgba(242, 112, 122, 0.45) !important;
}
.users-modern-page .status-warning {
background: rgba(235, 155, 60, 0.14) !important;
color: #eda54a !important; border: 1px solid rgba(237, 165, 74, 0.45) !important;
}
/* кнопка копирования id */
.users-modern-page .copy-button {
background: transparent !important;
color: var(--accent-1) !important;
border: 1px solid var(--line-2) !important;
}
.users-modern-page .copy-button:hover { background: var(--hover) !important; }
/* ====== ОСТАТКИ СТАРОЙ ТЕМЫ НА ПРОЧИХ СТРАНИЦАХ ======
Список получен сканированием всех страниц: искали серые заливки (R≈G≈B)
и серебристые рамки rgba(192,192,192,…) из new.css. Ниже — ровно эти классы,
переведённые на токены темы. Ничего «про запас» не трогаем. */
/* панель вкладок (Статистика, Pay Out, Апелляции, Реквизиты, История и др.) */
.mud-tabs-tabbar { background-color: transparent !important; border-color: var(--line) !important; }
/* карточка сущности (Трейдеры, Партнёры, Терминалы, Мерчанты) */
.reflective {
background: var(--card) !important;
border: 1px solid var(--line) !important;
box-shadow: var(--shadow-card) !important;
}
.reflective .line {
background: transparent !important;
border-bottom: 1px solid var(--line) !important;
}
.reflective .line:last-child { border-bottom: none !important; }
.reflective .copy-btn, .copy-btn {
background: transparent !important;
color: var(--accent-1) !important;
border: 1px solid var(--line-2) !important;
}
.reflective .copy-btn:hover, .copy-btn:hover { background: var(--hover) !important; }
/* кнопка «Показать фильтры» на Pay In */
.toggle-filters-btn {
background: var(--card-2) !important;
background-image: none !important;
color: var(--text-1) !important;
border: 1px solid var(--line-2) !important;
}
.toggle-filters-btn:hover { background: var(--card-3) !important; }
/* Кошельки */
.user-wallet {
background: var(--card) !important;
border: 1px solid var(--line) !important;
}
.pagination, .pagination * { border-color: var(--line) !important; }
/* карточка со счётчиком на странице API-ключей */
.stat-card {
background: var(--card) !important;
border: 1px solid var(--line) !important;
}
/* --- те же селекторы, что в new.css, но на токенах ---
Старая тема красит карточку сущности вложенными правилами
(.grid-item .reflective, .mud-paper .reflective .settings .settings-item и т.д.).
Одноклассовый селектор их не перебивает, поэтому повторяем ту же вложенность. */
.grid-item .reflective,
.mud-paper .reflective {
background-color: var(--card) !important;
color: var(--text-1) !important;
border-color: var(--line) !important;
}
.grid-item .reflective .settings .settings-item,
.mud-paper .reflective .settings .settings-item,
.reflective .settings-item {
background-color: var(--card-2) !important;
border-color: var(--line) !important;
}
.grid-item .reflective .list,
.reflective .list {
background-color: transparent !important;
}
.reflective .action button {
background-color: var(--card-2) !important;
color: var(--text-1) !important;
}
.reflective .action button:hover { background-color: var(--card-3) !important; }
/* строки параметров внутри карточки (были серым градиентом) */
.settings-item .param, .reflective .param {
background: var(--card) !important;
background-image: none !important;
border: 1px solid var(--line) !important;
}
/* элементы списков старой темы */
.user-item {
background-color: var(--card) !important;
border: 1px solid var(--line) !important;
}
.user-action .mud-button-filled { background-color: var(--card-2) !important; }
/* кошелёк */
.user-wallet-action .mud-button-filled { background-color: var(--card-2) !important; }
.wallet-list .user-wallet,
.user-wallet, .grid-item .user-wallet, .mud-paper .user-wallet {
background-color: var(--card) !important;
border-color: var(--line) !important;
}