/* * player-v2.css — New Design System for CRM20evBB * * Uses CSS custom properties for theming (light/dark). * Dark mode activates automatically via .dark class on . * No Tailwind dependency — self-contained design tokens + components. * * Source: prototype-v2.html (2026-03-21) */ /* ═══════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════ */ :root { --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Потолок ширины страницы и навбара (Trello #86): страница тянется на 100% ширины монитора, но на 2K/4K не разъезжается шире, чем нужно данным. */ --page-max: 1920px; --bg-root: #f0f0ec; --bg-surface: #ffffff; --bg-surface-alt: #f7f7f5; /* Алиас: страницы (rakeback, gg-*) используют --bg-elev для хаверов/подложек. Резолвится в месте использования, поэтому в .dark подхватывает тёмное значение. */ --bg-elev: var(--bg-surface-alt); --bg-inset: #eaeae6; --border: #d8d8d2; --border-subtle: #e8e8e3; --text-primary: #1a1a18; --text-secondary: #6b6b63; --text-tertiary: #9c9c93; --text-inverse: #ffffff; --accent: #10b981; --accent-soft: #d1fae5; --accent-text: #065f46; --danger: #ef4444; --danger-soft: #fee2e2; --warning: #f59e0b; --warning-soft: #fef3c7; --info: #6366f1; --info-soft: #e0e7ff; --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.06); --shadow-lg: 0 12px 32px rgba(0,0,0,.08); --shadow-glow: 0 0 20px rgba(16,185,129,.15); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; } .dark { --font-ui: 'Inter', 'Segoe UI', Arial, sans-serif; --bg-root: #2c2d32; --bg-surface: #323339; --bg-surface-alt: #393a3f; --bg-elev: #414248; --bg-hover: #414248; --bg-inset: #2e2f35; --border: #414248; --border-subtle: #3a3b42; --text-primary: #f2f3f5; --text-secondary: #b5bac1; --text-tertiary: #949ba4; --text-inverse: #0f0f0f; --accent-soft: rgba(16,185,129,.12); --accent-text: #6ee7b7; --danger-soft: rgba(239,68,68,.12); --warning-soft: rgba(245,158,11,.12); --info-soft: rgba(99,102,241,.12); --shadow-sm: 0 1px 2px rgba(0,0,0,.18); --shadow-md: 0 4px 12px rgba(0,0,0,.24); --shadow-lg: 0 12px 32px rgba(0,0,0,.32); --shadow-glow: 0 0 30px rgba(16,185,129,.1); } .dark body.v2 { font-family: var(--font-ui) !important; } /* Discord's gg sans is proprietary. Inter provides the closest available proportions and Cyrillic coverage; keep code/pre blocks untouched. */ .dark body.v2 *:not(code):not(pre) { font-family: var(--font-ui) !important; } .dark .nav-link.active, .dark .nav-mobile-link.active, .dark .page-tab.active, .dark .admin-subnav-link.active { color: var(--text-primary); } /* Базовые стили страниц v2 — раньше дублировались инлайном в каждой страницы; теперь класс ставит layout (body_class). */ body.v2 { background: var(--bg-root); color: var(--text-primary); font-family: 'Outfit', sans-serif; margin: 0; } /* ═══════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); } .nav-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; height: 56px; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; letter-spacing: -0.5px; color: var(--accent); text-decoration: none; flex-shrink: 0; } .nav-brand svg { width: 26px; height: 26px; } .nav-links-wrap { position: relative; display: flex; align-items: center; min-width: 0; flex: 1; } .nav-links { display: flex; gap: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; min-width: 0; width: 100%; } .nav-links::-webkit-scrollbar { display: none; } /* Стрелки прокрутки меню — видны только когда за краем есть пункты */ .nav-scroll-arrow { position: absolute; top: 0; bottom: 0; width: 30px; display: none; align-items: center; justify-content: center; border: none; padding: 0; cursor: pointer; z-index: 1; color: var(--text-secondary); transition: color .15s; } .nav-scroll-arrow:hover { color: var(--accent); } .nav-scroll-arrow.visible { display: flex; } .nav-scroll-arrow--left { left: 0; background: linear-gradient(to right, var(--bg-surface) 60%, transparent); } .nav-scroll-arrow--right { right: 0; background: linear-gradient(to left, var(--bg-surface) 60%, transparent); } .nav-link { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: all .15s; cursor: pointer; } .nav-link:hover { color: var(--text-primary); background: var(--bg-hover, var(--bg-surface-alt)); } .nav-link.active { color: var(--accent-text); background: var(--accent-soft); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-user { font-size: 12px; font-weight: 500; color: var(--text-secondary); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: none; background: none; color: var(--text-secondary); cursor: pointer; font-size: 18px; transition: all .15s; position: relative; } .nav-btn:hover { background: var(--bg-hover, var(--bg-surface-alt)); color: var(--text-primary); } .nav-badge { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--danger); border-radius: 50%; border: 2px solid var(--bg-surface); } .nav-badge.hidden { display: none; } .theme-toggle { width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-surface-alt); color: var(--text-secondary); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* Обе иконки темы в разметке (сервер не знает тему), CSS показывает нужную. */ .theme-toggle .theme-icon--moon { display: none; } html.dark .theme-toggle .theme-icon--sun { display: none; } html.dark .theme-toggle .theme-icon--moon { display: block; } /* Logout button — matches theme-toggle style but danger-colored on hover */ .nav-logout { width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-surface-alt); color: var(--text-secondary); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s; } .nav-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); } /* Role switcher — small icon toggle for ADMIN/MANAGER roles */ .role-switch-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--text-tertiary); cursor: pointer; opacity: .4; transition: all .2s; flex-shrink: 0; } .role-switch-icon:hover { opacity: .8; color: var(--text-secondary); } .role-switch-icon--admin { opacity: .55; color: var(--text-secondary); } /* Mobile hamburger */ .nav-hamburger { display: none; width: 34px; height: 34px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-md); align-items: center; justify-content: center; transition: all .15s; } .nav-hamburger:hover { background: var(--bg-hover, var(--bg-surface-alt)); color: var(--text-primary); } /* Mobile menu */ .nav-mobile-menu { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: var(--bg-surface); z-index: 99; padding: 16px; border-top: 1px solid var(--border); overflow-y: auto; } .nav-mobile-menu.open { display: block; } .nav-mobile-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); font-size: 17px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: all .15s; } .nav-mobile-link:hover { background: var(--bg-hover, var(--bg-surface-alt)); color: var(--text-primary); } .nav-mobile-link.active { color: var(--accent-text); background: var(--accent-soft); } .nav-mobile-divider { height: 1px; background: var(--border-subtle); margin: 12px 0; } .nav-mobile-section { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text-tertiary); padding: 8px 16px; } /* Второй уровень админской навигации: объединённые рабочие разделы. */ .admin-subnav { border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); } .admin-subnav-inner { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; box-sizing: border-box; } .admin-subnav-inner::-webkit-scrollbar { display: none; } .admin-subnav-link { flex: 0 0 auto; padding: 11px 14px 10px; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; } .admin-subnav-link:hover { color: var(--text-primary); } .admin-subnav-link.active { border-bottom-color: var(--accent); color: var(--accent-text); } /* ═══════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════ */ .page { max-width: var(--page-max); margin: 0 auto; padding: 24px; } /* Совсем без потолка (менеджерские списки rakeback*): max-width: none. body.wide расширяет и навбар — нав рендерится через navigation.js вне .page. */ .page--wide { max-width: none; } body.wide .nav-inner { max-width: none; } /* Единая рабочая ширина админки. Ограничение сохраняет читаемую длину строк на 4K, а на 2K отдаёт таблицам почти всю доступную площадь. */ body.admin-wide .nav-inner, body.admin-wide .page, body.admin-wide .page--wide, .admin-shell { width: 100%; max-width: var(--page-max); margin-left: auto; margin-right: auto; box-sizing: border-box; } body.admin-wide .nav-inner { padding-left: 32px; padding-right: 32px; } .admin-shell { padding: 24px 32px; } .page-header { margin-bottom: 20px; } .page-title { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; } .page-subtitle { font-size: 14px; color: var(--text-tertiary); margin-top: 2px; } .section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary); margin-bottom: 12px; } /* ═══════════════════════════════════════════ CARDS ═══════════════════════════════════════════ */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; } .card-body { padding: 20px; } .card-footer { padding: 10px 20px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface-alt); } /* ═══════════════════════════════════════════ BALANCE SUMMARY ═══════════════════════════════════════════ */ .balance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .balance-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; position: relative; overflow: hidden; transition: all .2s; } .balance-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; } .balance-card--total::before { background: var(--accent); } .balance-card--usd::before { background: #6366f1; } .balance-card--eur::before { background: #f59e0b; } .balance-card--updated::before { background: var(--text-tertiary); } .balance-card:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); } .balance-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text-tertiary); margin-bottom: 4px; } .balance-value { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; } .balance-sub { font-size: 13px; color: var(--text-tertiary); margin-top: 3px; } .balance-split { display: flex; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .balance-split-item { font-size: 12px; color: var(--text-secondary); } .balance-split-item span { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 14px; display: block; margin-top: 1px; } /* ═══════════════════════════════════════════ CHART ═══════════════════════════════════════════ */ .chart-container { position: relative; height: 220px; } .chart-filters { display: flex; gap: 4px; } .chart-filter { padding: 4px 12px; border-radius: 100px; border: 1px solid var(--border); background: none; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: inherit; } .chart-filter:hover { border-color: var(--accent); color: var(--accent); } .chart-filter.active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); } /* ═══════════════════════════════════════════ CURRENCY TOGGLE ═══════════════════════════════════════════ */ .currency-toggle { display: inline-flex; border-radius: 100px; border: 1px solid var(--border); overflow: hidden; } .currency-btn { padding: 4px 14px; border: none; background: none; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; } .currency-btn:hover { color: var(--text-primary); } .currency-btn.active { background: var(--accent); color: var(--text-inverse); } /* ═══════════════════════════════════════════ TABLE ═══════════════════════════════════════════ */ .room-table { width: 100%; border-collapse: separate; border-spacing: 0; } .room-table thead th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text-tertiary); text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface); } .room-table tbody tr { transition: background .1s; } .room-table tbody tr:hover { background: var(--bg-hover, var(--bg-surface-alt)); } .room-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 16px; } .room-info { display: flex; align-items: center; gap: 10px; } .room-logo { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-inset); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; border: 1px solid var(--border); } .room-name { font-weight: 600; font-size: 16px; } .room-nick { font-size: 13px; color: var(--text-tertiary); } .currency-tag { display: inline-flex; padding: 1px 7px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .3px; } .currency-tag--usd { background: var(--accent-soft); color: var(--accent); } .currency-tag--eur { background: var(--info-soft); color: #818cf8; } .mono { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-variant-numeric: tabular-nums; } .v2 .text-right { text-align: right; } .v2 .text-center { text-align: center; } .text-positive { color: var(--accent); } .text-negative { color: var(--danger); } .text-neutral { color: var(--text-secondary); } /* Action button & menu */ .action-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-surface-alt); color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: all .2s; position: relative; } .action-btn:hover { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); transform: scale(1.1); } .action-menu { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 210px; } .action-menu-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: all .1s; border: none; background: none; width: 100%; text-align: left; font-family: inherit; } .action-menu-item:hover { background: var(--bg-hover, var(--bg-surface-alt)); color: var(--text-primary); } .action-menu-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; } .action-menu-item:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); } .action-icon { width: 22px; height: 22px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .action-menu--sheet { background: var(--bg-surface); border-top: 1px solid var(--border); min-width: auto; } .action-menu-item--mobile { padding: 14px 16px; font-size: 18px; } .balance-main { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 17px; } .balance-detail { font-size: 14px; color: var(--text-tertiary); } .balance-detail span { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ═══════════════════════════════════════════ SESSION REPORT (mobile-friendly) ═══════════════════════════════════════════ */ .report-list { display: flex; flex-direction: column; gap: 12px; } .report-room { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; transition: all .2s; cursor: default; } .report-room:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .report-room.has-changes { border-color: var(--accent); box-shadow: var(--shadow-glow); } .report-room-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .report-room-info { display: flex; align-items: center; gap: 10px; } /* Drag handle */ .drag-handle { width: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: grab; padding: 4px 0; color: var(--text-tertiary); flex-shrink: 0; touch-action: none; user-select: none; -webkit-user-select: none; } .drag-handle:active { cursor: grabbing; } .drag-handle span { display: block; width: 12px; height: 2px; border-radius: 1px; background: currentColor; opacity: .5; } .report-room.dragging { opacity: .4; border-style: dashed; transform: scale(.98); } .report-room.drag-over { border-color: var(--accent); box-shadow: 0 -3px 0 0 var(--accent); } .drag-hint { font-size: 13px; color: var(--text-tertiary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .drag-hint svg { flex-shrink: 0; opacity: .5; } .report-prev-balance { font-size: 13px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-tertiary); padding: 2px 10px; background: var(--bg-inset); border-radius: 100px; } .report-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .report-field { display: flex; flex-direction: column; gap: 3px; } .report-field label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-tertiary); } .report-field input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--text-primary); font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 17px; font-weight: 500; outline: none; transition: all .15s; } .report-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-surface); } .report-field input::placeholder { color: var(--text-tertiary); font-weight: 400; } /* Session summary bar */ .session-bar { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 28px; z-index: 100; backdrop-filter: blur(16px); background: color-mix(in srgb, var(--bg-surface) 92%, transparent); transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); } .session-bar.visible { transform: translateY(0); } .session-stat { display: flex; flex-direction: column; align-items: center; } .session-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text-tertiary); } .session-stat-value { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 20px; font-weight: 700; } .submit-btn { padding: 9px 28px; border-radius: 100px; border: none; background: var(--accent); color: var(--text-inverse); font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; letter-spacing: -0.3px; } .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16,185,129,.3); } .submit-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } /* ═══════════════════════════════════════════ TRANSACTIONS ═══════════════════════════════════════════ */ .tx-create-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .tx-btn { padding: 8px 18px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; } .tx-btn:hover { border-color: var(--accent); color: var(--accent); } .tx-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); font-weight: 600; } .tx-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,.25); color: var(--text-inverse); } .tx-btn--danger { border-color: var(--danger); color: var(--danger); } .tx-btn--danger:hover { background: var(--danger-soft); color: var(--danger); } .status-badge { display: inline-flex; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: .3px; } .status-badge--active { background: var(--accent-soft); color: var(--accent-text); } .status-badge--pending { background: var(--warning-soft); color: #d97706; } .status-badge--completed { background: var(--info-soft); color: #818cf8; } .status-badge--inactive { background: var(--danger-soft); color: var(--danger); } .status-badge--blocked { background: var(--danger-soft); color: var(--danger); } .status-badge--cancelled { background: var(--danger-soft); color: var(--danger); } /* Session-history popup (rendered by player/session_history_popup fragment). */ .session-popup-title { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-tertiary); } .session-popup-list { max-height: 240px; overflow-y: auto; } .session-popup-row { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .session-popup-date { font-weight: 500; } .session-popup-meta { color: var(--text-tertiary); font-size: 11px; } .session-popup-balance { color: var(--text-tertiary); font-size: 11px; } .session-popup-loading { padding: 12px; text-align: center; color: var(--text-tertiary); font-size: 12px; } .session-popup-error { padding: 12px; text-align: center; color: var(--danger); font-size: 12px; } /* Empty-state panel — used by emptyBlock partial. Compact variant trims padding and font-size for inline cells / sub-blocks. */ .empty-state { padding: 48px 24px; text-align: center; color: var(--text-tertiary); } .empty-state--compact { padding: 24px 16px; } .empty-state__icon { font-size: 32px; margin-bottom: 8px; } .empty-state__title { font-size: 14px; font-weight: 500; } .empty-state--compact .empty-state__title { font-size: 13px; font-weight: 400; } .empty-state__subtitle { font-size: 12px; margin-top: 4px; } /* ═══════════════════════════════════════════ PACKAGE ═══════════════════════════════════════════ */ .pkg-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .pkg-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; } .pkg-level { display: inline-flex; padding: 3px 12px; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-text); } /* Stats row inside package card */ .pkg-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .pkg-stat-label { font-size: 11px; font-weight: 500; color: var(--text-tertiary); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .5px; } .pkg-stat-value { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; } /* Player share banner */ .pkg-share-banner { margin-top: 14px; padding: 10px 14px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); border-radius: var(--radius-md); } .pkg-share-row { display: flex; justify-content: space-between; align-items: center; } .pkg-share-label { font-size: 12px; color: var(--text-tertiary); } .pkg-share-amount { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 700; color: var(--accent); } .pkg-share-breakdown { margin-top: 4px; font-size: 11px; color: var(--text-tertiary); } /* Contract two-column layout */ .pkg-contract-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .pkg-contract-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); } .pkg-contract-row:last-child { border-bottom: none; } .pkg-contract-label { font-size: 13px; color: var(--text-secondary); } .pkg-contract-value { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 600; } /* Level badge (pill) */ .pkg-level-badge { display: inline-flex; padding: 3px 14px; border-radius: 100px; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .5px; } .pkg-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .pkg-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 5px; } .pkg-divider { height: 1px; background: var(--border-subtle); margin: 12px 0; } .progress-track { width: 100%; height: 5px; background: var(--bg-inset); border-radius: 3px; margin-top: 14px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #34d399); border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1); } .progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-tertiary); margin-top: 5px; } /* Пояснение к счётчику шкалы: он нарастающий, в отличие от плитки «Турниры». */ .progress-hint { font-size: 11px; opacity: .75; } /* Notification dropdown */ .notif-dropdown { position: fixed; top: 60px; right: 16px; width: 380px; max-height: 440px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 300; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: all .2s; } .notif-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .notif-header { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg-surface); z-index: 1; } .notif-header-title { font-size: 17px; font-weight: 700; } .notif-mark-read { font-size: 13px; color: var(--accent); cursor: pointer; border: none; background: none; font-family: inherit; } .notif-mark-read:hover { text-decoration: underline; } .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); transition: background .1s; cursor: default; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--bg-hover, var(--bg-surface-alt)); } .notif-item.unread { background: var(--accent-soft); } .notif-item.unread:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--bg-surface-alt)); } .notif-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .notif-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 1px 6px; border-radius: 3px; } .notif-type--transaction { background: var(--accent-soft); color: var(--accent-text); } .notif-type--notice { background: var(--info-soft); color: #818cf8; } .notif-type--surplus { background: var(--warning-soft); color: #d97706; } .notif-type--training { background: color-mix(in srgb, #a78bfa 15%, transparent); color: #a78bfa; } .notif-date { font-size: 12px; color: var(--text-tertiary); } .notif-msg { font-size: 14px; color: var(--text-secondary); line-height: 1.5; } .notif-empty { padding: 32px 16px; text-align: center; color: var(--text-tertiary); font-size: 16px; } .notif-severity { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .notif-severity--critical { background: var(--danger); } .notif-severity--major { background: var(--warning); } .notif-severity--minor { background: var(--accent); } .notif-severity--trivial { background: var(--text-tertiary); } /* Package history totals row */ .room-table tfoot td { padding: 12px 16px; border-top: 2px solid var(--border); font-weight: 700; font-size: 16px; background: var(--bg-surface-alt); } .room-table tfoot .player-share-total { color: var(--accent); font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px; font-weight: 800; } /* ═══════════════════════════════════════════ REPORT / SESSION ═══════════════════════════════════════════ */ .report-list { display: flex; flex-direction: column; gap: 12px; } .report-room { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; transition: all .2s; } .report-room:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .report-room.has-changes { border-color: var(--accent); box-shadow: var(--shadow-glow); } .report-room-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .report-room-info { display: flex; align-items: center; gap: 10px; } .drag-handle { width: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: grab; padding: 4px 0; color: var(--text-tertiary); flex-shrink: 0; touch-action: none; user-select: none; -webkit-user-select: none; } .drag-handle:active { cursor: grabbing; } .drag-handle span { display: block; width: 12px; height: 2px; border-radius: 1px; background: currentColor; opacity: .5; } .report-room.dragging { opacity: .4; border-style: dashed; transform: scale(.98); } .report-room.drag-over { border-color: var(--accent); box-shadow: 0 -3px 0 0 var(--accent); } .report-room { cursor: default; } .drag-hint { font-size: 13px; color: var(--text-tertiary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .drag-hint svg { flex-shrink: 0; opacity: .5; } .report-prev-balance { font-size: 13px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-tertiary); padding: 2px 10px; background: var(--bg-inset); border-radius: 100px; } .report-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .report-field { display: flex; flex-direction: column; gap: 3px; } .report-field label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-tertiary); } .report-field input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--text-primary); font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 17px; font-weight: 500; outline: none; transition: all .15s; } .report-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-surface); } .report-field input::placeholder { color: var(--text-tertiary); font-weight: 400; } /* Session summary bar */ .session-bar { position: fixed; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--bg-surface) 92%, transparent); border-top: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 28px; z-index: 100; backdrop-filter: blur(16px); transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); } .session-bar.visible { transform: translateY(0); } .session-stat { display: flex; flex-direction: column; align-items: center; } .session-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text-tertiary); } .session-stat-value { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 20px; font-weight: 700; } .submit-btn { padding: 9px 28px; border-radius: 100px; border: none; background: var(--accent); color: var(--text-inverse); font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; letter-spacing: -0.3px; } .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16,185,129,.3); } .submit-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } /* Package history chart */ .pkg-history-chart { position: relative; height: 200px; margin-bottom: 20px; } /* Session correction modal */ .correction-room-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-inset); border-radius: var(--radius-md); margin-bottom: 16px; } .correction-current { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px; background: var(--bg-inset); border-radius: var(--radius-md); margin-bottom: 16px; } .correction-current-item { text-align: center; } .correction-current-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-tertiary); margin-bottom: 2px; } .correction-current-value { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 17px; font-weight: 600; } /* Tabs within page */ .page-tabs { display: flex; gap: 2px; margin-bottom: 20px; } .page-tab { padding: 7px 16px; border-radius: var(--radius-md); border: none; background: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; } .page-tab:hover { color: var(--text-primary); background: var(--bg-hover, var(--bg-surface-alt)); } .page-tab.active { color: var(--accent-text); background: var(--accent-soft); } /* ═══════════════════════════════════════════ PROFILE ═══════════════════════════════════════════ */ .profile-section { margin-bottom: 20px; } .account-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); } .account-row:last-child { border-bottom: none; } /* ═══════════════════════════════════════════ MODAL ═══════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 90%; max-width: 520px; max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,.35); transform: translateY(12px) scale(.97); transition: transform .25s cubic-bezier(.4,0,.2,1); } .modal-overlay.open .modal { transform: translateY(0) scale(1); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); } .modal-title { font-size: 19px; font-weight: 700; letter-spacing: -.3px; } .modal-close { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-surface-alt); color: var(--text-secondary); cursor: pointer; font-size: 19px; display: flex; align-items: center; justify-content: center; transition: all .15s; } .modal-close:hover { border-color: var(--danger); color: var(--danger); } .modal-body { padding: 22px; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; gap: 8px; } /* Form elements */ .form-group { margin-bottom: 16px; } .form-group:last-child { margin-bottom: 0; } .form-label { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-tertiary); margin-bottom: 5px; } .form-input, .form-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--text-primary); font-family: 'Outfit', sans-serif; font-size: 17px; outline: none; transition: all .15s; } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-surface); } .form-input::placeholder { color: var(--text-tertiary); } .form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a80' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .form-input--mono { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-variant-numeric: tabular-nums; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-hint { font-size: 13px; color: var(--text-tertiary); margin-top: 4px; } .form-file-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 16px; text-align: center; cursor: pointer; transition: all .15s; color: var(--text-tertiary); font-size: 14px; } .form-file-zone:hover { border-color: var(--accent); color: var(--accent); } /* Transaction type selector in modal */ .tx-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; } .tx-type-btn { padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-surface-alt); cursor: pointer; text-align: center; transition: all .15s; font-family: inherit; } .tx-type-btn:hover { border-color: var(--accent); } .tx-type-btn.active { border-color: var(--accent); background: var(--accent-soft); } .tx-type-icon { font-size: 18px; margin-bottom: 4px; display: block; } .tx-type-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .tx-type-btn.active .tx-type-label { color: var(--accent-text); } /* History modal — wider */ .modal--wide { max-width: 780px; } .history-filters { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 16px; } .history-filters .form-group { margin-bottom: 0; flex: 1; } /* ═══════════════════════════════════════════ UTILITIES & ANIMATIONS ═══════════════════════════════════════════ */ .v2 .flex { display: flex; } .v2 .items-center { align-items: center; } .v2 .justify-between { justify-content: space-between; } .v2 .gap-8 { gap: 8px; } .v2 .gap-12 { gap: 12px; } .v2 .gap-16 { gap: 16px; } /* Под .v2, как и утилиты выше: у Tailwind (static/vendor/tailwind.js) есть свой mb-20 = 5rem, его inline-