:root { --bg: #0f1419; --surface: #1a2028; --surface-2: #232b35; --surface-selected: #1e2a36; --border: #2d3744; --text: #d8dde3; --text-dim: #8a95a3; --accent: #4fc3f7; --accent-dim: #2a8db8; --good: #69dd87; --warn: #ffb955; --bad: #ff7373; } /* v0.45.16: светлая тема — переопределение тех же переменных. Переключается через атрибут [data-theme="light"] на , сохраняется в localStorage ('df-theme'). По умолчанию — dark. JS в app.js применяет тему до первого рендера, чтобы не было мигания. */ html[data-theme="light"] { --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eef1f6; --surface-selected: #dfecfa; --border: #d4dae3; --text: #1a2028; --text-dim: #5d6773; --accent: #0d8acb; --accent-dim: #4fc3f7; --good: #2c9d4d; --warn: #c4831a; --bad: #c43838; } /* Theme toggle pill — солнце/луна как iOS-switch. Показывает обе иконки всегда (☀ и ☾), активная тема выделена brand-цветом, неактивная dim'нута. Между ними плавающий «slider» с тенью. Сделан крупным и заметным — юзер жаловался что «слишком запрятан». */ .theme-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; cursor: pointer; line-height: 1; transition: border-color 120ms, background 120ms; min-width: 76px; height: 34px; font-family: inherit; } .theme-toggle-btn:hover { border-color: var(--accent); background: var(--surface); } .theme-toggle-btn .ico-sun, .theme-toggle-btn .ico-moon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 16px; border-radius: 50%; transition: color 180ms, background 180ms, transform 180ms, box-shadow 180ms; z-index: 1; color: var(--text-dim); } html:not([data-theme="light"]) .theme-toggle-btn .ico-moon { background: linear-gradient(180deg, #6f8ad1 0%, #2f4d8e 100%); color: #f1f4ff; box-shadow: 0 2px 6px rgba(50, 80, 160, 0.5); transform: scale(1.04); } html:not([data-theme="light"]) .theme-toggle-btn .ico-sun { opacity: 0.55; } html[data-theme="light"] .theme-toggle-btn .ico-sun { background: linear-gradient(180deg, #ffd25a 0%, #f0a020 100%); color: #4a2f08; box-shadow: 0 2px 6px rgba(240, 160, 32, 0.55); transform: scale(1.04); } html[data-theme="light"] .theme-toggle-btn .ico-moon { opacity: 0.55; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; min-height: 100vh; } body { display: flex; flex-direction: column; min-height: 100vh; } button { font-family: inherit; } .hidden { display: none !important; } /* ============================================================================ LOGIN SCREEN ============================================================================ */ .screen-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); } /* .login-brand removed in v0.31.3 — login is now a bare form, no branding above the inputs (the title/logo bleeding through to whatever the user was doing next was distracting). */ .login-form { display: flex; flex-direction: column; gap: 14px; } .login-field { display: flex; flex-direction: column; gap: 6px; } .login-field span { font-size: 12px; color: var(--text-dim); } .login-field input { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; font-size: 14px; transition: border-color 120ms, background 120ms; } .login-field input:focus { outline: none; border-color: var(--accent); background: #1e2a36; } #loginBtn { background: var(--accent); color: #08151c; border: 0; border-radius: 8px; padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 6px; transition: filter 120ms, opacity 120ms; } #loginBtn:hover:not(:disabled) { filter: brightness(1.1); } #loginBtn:disabled { opacity: 0.6; cursor: progress; } #loginErr { color: var(--bad); font-size: 13px; min-height: 18px; margin: 4px 0 0; text-align: center; } /* ============================================================================ FLOORBALL BALL ============================================================================ */ .ball { display: block; user-select: none; -webkit-user-drag: none; } .ball-lg { width: 64px; height: 64px; margin: 0 auto 6px; } .ball-sm { width: 36px; height: 36px; flex-shrink: 0; } /* ============================================================================ APP SHELL ============================================================================ */ .screen-app { display: flex; flex-direction: column; min-height: 100vh; } .app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .brand-text { min-width: 0; } .brand-text h1 { margin: 0; font-size: 20px; letter-spacing: 0.3px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .version-tag { display: inline-block; margin-left: 10px; padding: 2px 8px; font-size: 11px; font-weight: 500; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; vertical-align: middle; font-feature-settings: "tnum"; } .brand-text .tag { margin: 2px 0 0; color: var(--text-dim); font-size: 12px; } .header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .user-chip { font-size: 12px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; } .logout-btn { background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: color 120ms, border-color 120ms; } .logout-btn:hover { color: var(--bad); border-color: var(--bad); } .app-body { flex: 1; display: flex; align-items: stretch; min-height: 0; } /* Admin-only «Сейчас онлайн» — встроен в левый sidebar, под табами. Компактнее правой версии: уже, мельче шрифт, дотт меньше. Шорится JS-ом при isAdmin=false. */ .admin-online-block { margin-top: 14px; padding: 10px 12px; border-top: 1px solid var(--border); } .admin-online-head { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); } .admin-online-list { display: flex; flex-direction: column; gap: 4px; } .admin-online-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--surface-2); border-radius: 5px; font-size: 12px; } .admin-online-row .dot { width: 7px; height: 7px; border-radius: 50%; background: #69dd87; flex: 0 0 auto; box-shadow: 0 0 5px rgba(105, 221, 135, 0.55); } .admin-online-row.is-idle .dot { background: #a8b1bd; box-shadow: none; } .admin-online-row.is-stale .dot { background: #ffb955; box-shadow: none; } .admin-online-row .login { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .admin-online-row .login .admin-badge { display: inline-block; margin-left: 3px; padding: 0 4px; font-size: 9px; font-weight: 700; color: #08151c; background: #ffb955; border-radius: 3px; vertical-align: 1px; } .admin-online-row .ago { color: var(--text-dim); font-size: 10.5px; } .admin-online-empty { padding: 6px; font-size: 11px; color: var(--text-dim); font-style: italic; text-align: center; } .admin-online-footer { margin-top: 6px; font-size: 10px; color: var(--text-dim); text-align: center; } .sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: flex-start; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .sidebar-logo { display: block; margin: 0 auto 14px; padding: 4px; text-align: center; text-decoration: none; border-radius: 8px; transition: transform 160ms ease, filter 160ms ease; } .sidebar-logo:hover { transform: scale(1.03); filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.4)); } .sidebar-logo img { display: block; width: 100%; max-width: 180px; height: auto; } .sidebar-user { display: flex; flex-direction: column; gap: 8px; padding: 10px 6px 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; align-items: center; text-align: center; } .sidebar-user .user-chip { font-size: 13px; color: var(--text); font-weight: 600; } .sidebar-user-actions { display: flex; align-items: center; gap: 8px; } .tabs { display: flex; flex-direction: column; gap: 6px; } .tab-group { display: flex; flex-direction: column; gap: 4px; } .tab-group-head { display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: var(--text-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 8px 14px 6px; cursor: pointer; border-radius: 6px; transition: color 120ms ease, background 120ms ease; } .tab-group-head:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); } .tab-group-head .tab-ico { font-size: 14px; color: var(--accent-dim); } .tab-group-name { flex: 1; text-align: left; } .tab-group-arrow { font-size: 11px; color: var(--text-dim); transition: transform 160ms ease; } .tab-group.is-collapsed .tab-group-arrow { transform: rotate(-90deg); } .tab-group-items { display: flex; flex-direction: column; gap: 4px; overflow: hidden; max-height: 600px; opacity: 1; transition: max-height 200ms ease, opacity 140ms ease; } .tab-group.is-collapsed .tab-group-items { max-height: 0; opacity: 0; } .tab-group .tab-btn { padding-left: 22px; } .tab-utility { margin-top: 16px; font-size: 12px !important; opacity: 0.75; padding: 8px 14px !important; } .tab-utility:hover { opacity: 1; } .tab-btn { display: flex; align-items: center; gap: 10px; background: transparent; color: var(--text-dim); border: 1px solid transparent; border-radius: 8px; padding: 11px 14px; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms; } .tab-btn:hover { background: var(--surface-2); color: var(--text); } .tab-btn.active { background: var(--surface-2); color: var(--accent); border-color: var(--accent-dim); } /* v0.34.3: моноцветные unicode-символы вместо цветных emoji. font-variant-emoji подсказывает браузеру брать text-presentation глифа (а не emoji-вариант) — иначе Chrome для некоторых символов вроде ✦/❍ всё равно может подложить цветной emoji-glyph. font-feature-settings 'cv01' добавлена для тех же целей в Firefox. Symbola/Noto Sans Symbols 2 — fallback fonts с полным моно-набором, если системные не имеют нужных глифов. */ .tab-ico { font-size: 16px; opacity: 0.9; font-variant-emoji: text; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Symbola', system-ui, sans-serif; color: inherit; } /* v0.34.4: exception для tabs которые остаются цветными emoji (карма). Юзер запросил оставить будду 🧘 в цвете — снимает text-presentation override и emoji-presentation font, чтобы Chrome подсунул color glyph. */ .tab-ico.tab-ico-emoji { font-variant-emoji: emoji; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui; } /* v0.34.10: плашка-памятка «Обязательно проверь раздел Синхронизация» в шапке Лиги и сезона. Кликабельная — переключает на таб «Синхронизация». Желтоватый accent (как warning), без кричащего цвета — это reminder, не error. На hover слегка ярче + transform для тактильной обратной связи. */ .sync-reminder { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 14px; background: rgba(255, 185, 85, 0.08); border: 1px solid rgba(255, 185, 85, 0.32); border-radius: 8px; color: var(--text); cursor: pointer; user-select: none; transition: background 120ms, border-color 120ms, transform 80ms; } .sync-reminder:hover { background: rgba(255, 185, 85, 0.13); border-color: rgba(255, 185, 85, 0.5); } .sync-reminder:active { transform: translateY(1px); } .sync-reminder:focus-visible { outline: 2px solid rgba(255, 185, 85, 0.55); outline-offset: 2px; } .sync-reminder-icon { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 185, 85, 0.18); color: #ffb955; border-radius: 50%; font-size: 15px; font-weight: 600; } .sync-reminder-text { flex: 1 1 auto; font-size: 12.5px; line-height: 1.4; } .sync-reminder-text strong { color: #ffb955; font-weight: 600; } .sync-reminder-arrow { flex-shrink: 0; color: #ffb955; font-size: 16px; opacity: 0.7; transition: transform 160ms, opacity 120ms; } .sync-reminder:hover .sync-reminder-arrow { transform: translateX(3px); opacity: 1; } /* v0.34.6: «Очистить» кнопка в шапке плашки «Категория матча». Тонкая нейтральная кнопка справа от заголовка — не должна перетягивать взгляд с основной формы; hover подсвечивает в красноватый, чтобы было ясно что действие деструктивное. */ .card-head-with-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .card-head-with-action h2 { margin: 0; } .btn-clear-form { background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms; } .btn-clear-form:hover { color: var(--bad); border-color: var(--bad); background: rgba(255, 115, 115, 0.08); } .btn-clear-form:active { transform: translateY(1px); } .tab-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tab-pane { width: 100%; max-width: 1400px; margin: 0 auto; padding: 18px 24px 36px; display: flex; flex-direction: column; gap: 8px; } .tab-pane.hidden { display: none; } .calc-form { display: flex; flex-direction: column; gap: 8px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; } .card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--accent); } .card h2 .hint { color: var(--text-dim); font-weight: 400; font-size: 12px; margin-left: 8px; } /* Category 3-pack */ .radio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .radio-row label { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color 120ms, background 120ms; } .radio-row label:hover { border-color: var(--accent-dim); } .radio-row input[type=radio] { display: none; } .radio-row input[type=radio]:checked + strong { color: var(--accent); } .radio-row label:has(input:checked) { border-color: var(--accent); background: var(--surface-selected); } .radio-row strong { font-size: 14px; } .radio-row .cat-hint { font-size: 11px; color: var(--text-dim); line-height: 1.35; } /* ============================================================================ PICKER GRID — country / division / league / season / prev toggle / prev season ============================================================================ */ .picker-card { padding: 16px 18px; } .picker-grid { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(160px, 0.9fr) minmax(280px, 2.4fr) minmax(180px, 1fr) minmax(220px, 1.1fr) minmax(180px, 1fr); gap: 12px 14px; align-items: end; } /* v0.31.1: sport switcher lives ABOVE the picker-grid, full-width pill bar. Trying to fit it inside the grid was cramping every other column on small viewports. The label sits to the left, the seg-control pill takes whatever's left over (max-width caps it so on huge screens it doesn't stretch comically wide). */ .sport-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); } .sport-row .lbl-text { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .sport-row .sport-seg { flex: 0 0 auto; width: auto; max-width: 320px; } .sport-seg .seg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-left: 14px; padding-right: 14px; } .sport-seg .seg .sport-ico { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .sport-seg .seg[data-sport="floorball"] .sport-ico { -webkit-mask-image: url(sports/floorball.svg); mask-image: url(sports/floorball.svg); } .sport-seg .seg[data-sport="hockeyball"] .sport-ico { -webkit-mask-image: url(sports/hockeyball.svg); mask-image: url(sports/hockeyball.svg); } /* v0.31.6: matchup picker. Lives as a full-width row under the picker-grid inside picker-card. Hidden by default (`[hidden]`); the JS unhides it when the active league has upcoming matches in its cache. */ .schedule-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 5px; } .schedule-row[hidden] { display: none; } .schedule-controls { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .schedule-row .schedule-date { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; flex: 0 0 150px; color-scheme: dark; } .schedule-row .schedule-date:hover { border-color: var(--accent-dim); } .schedule-row .schedule-date:focus { outline: none; border-color: var(--accent); } .schedule-row .schedule-select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; cursor: pointer; flex: 1 1 auto; min-width: 0; } .schedule-row .schedule-select:hover { border-color: var(--accent-dim); } .schedule-row .schedule-select:focus { outline: none; border-color: var(--accent); } .schedule-row .schedule-select:disabled { opacity: 0.5; cursor: default; } .schedule-clear-date { flex: 0 0 auto; font-size: 14px; padding: 0 10px; } .schedule-status { font-size: 11px; color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; } .lbl { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .lbl-text { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; } .lbl > select, .lbl > .league-pickline, .lbl > .seg-control, .lbl > .flag-select { width: 100%; } .lbl select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; cursor: pointer; min-width: 0; } .lbl select:hover { border-color: var(--accent-dim); } .lbl select:focus { outline: none; border-color: var(--accent); } .lbl select:disabled { opacity: 0.5; cursor: default; } .league-status { font-size: 11px; color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; } .league-pickline { display: flex; align-items: stretch; gap: 8px; min-width: 0; } .league-pickline .league-select { flex: 1 1 auto; min-width: 0; } .icon-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0 12px; font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: border-color 120ms, color 120ms; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } .icon-btn:disabled { opacity: 0.5; cursor: progress; } .icon-btn.spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* Segmented control */ .seg-control { display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; width: 100%; } .seg { flex: 1; background: transparent; color: var(--text-dim); border: 0; border-radius: 4px; padding: 6px 10px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 120ms, color 120ms; } .seg:hover { color: var(--text); } .seg.active { background: var(--accent); color: #08151c; } /* "учитывать прошлый" — tappable pill that lives in the same picker-grid row */ .prev-toggle-cell { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; height: 36px; transition: border-color 120ms; } .prev-toggle-cell:hover { border-color: var(--accent-dim); } .prev-toggle-cell input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; } .prev-season-cell[hidden] { display: none; } /* ============================================================================ CUSTOM FLAG DROPDOWN (Страна filter) ============================================================================ */ .flag-select { position: relative; font-size: 13px; } .flag-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; cursor: pointer; transition: border-color 120ms; } .flag-select-trigger:hover { border-color: var(--accent-dim); } .flag-select-trigger[aria-expanded="true"] { border-color: var(--accent); } .flag-trigger-content { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .flag-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 16px; flex-shrink: 0; font-size: 14px; /* size for 🌐 fallback glyph */ } .flag-img { width: 22px; height: 16px; object-fit: cover; border: 1px solid var(--border); border-radius: 2px; display: block; } .flag-img-placeholder { width: 22px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .flag-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flag-trigger-arrow { font-size: 11px; color: var(--text-dim); } .flag-select-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--accent-dim); border-radius: 6px; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.45); } .flag-select-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; cursor: pointer; transition: background 100ms; } .flag-select-option:hover { background: var(--surface-2); } .flag-select-label { font-size: 13px; color: var(--text); } /* ============================================================================ TWO-COL current/prev — collapses to single column when prev is hidden ============================================================================ */ .cur-prev-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .cur-prev-grid:has(.prev-card:not(.hidden)) { grid-template-columns: 1fr 1fr; } .block { display: flex; flex-direction: column; gap: 6px; } .team-picker-row { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 10px; align-items: center; margin-bottom: 4px; } .team-picker-row label { color: var(--text-dim); font-size: 13px; } .team-picker-row .team-select, .team-picker-row .team-select-prev { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13px; cursor: pointer; width: 100%; } .team-picker-row .team-select:hover, .team-picker-row .team-select-prev:hover { border-color: var(--accent-dim); } .team-picker-row .team-select:focus, .team-picker-row .team-select-prev:focus { outline: none; border-color: var(--accent); } .team-picker-row + .row.header { margin-top: 8px; } .row { display: grid; grid-template-columns: minmax(60px, 1fr) 78px 78px 78px; gap: 10px; align-items: center; } .row.header span { color: var(--text-dim); font-size: 11px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; } .row label { color: var(--text-dim); font-size: 13px; } .row input[type=number] { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 8px; font-size: 14px; text-align: center; font-feature-settings: "tnum"; width: 100%; min-width: 0; transition: border-color 120ms, background 120ms; } .row input[type=number]::placeholder { color: var(--text-dim); opacity: 0.55; } .row input[type=number]:hover { border-color: var(--accent-dim); } .row input[type=number]:focus { outline: none; border-color: var(--accent); background: #1e2a36; } .krk-row { grid-template-columns: minmax(60px, 1fr) 220px; margin-top: 6px; gap: 10px; } .krk-row select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13px; width: 100%; cursor: pointer; } .krk-row select:hover { border-color: var(--accent-dim); } .krk-row select:focus { outline: none; border-color: var(--accent); } .krk-hint { grid-column: 1 / -1; font-size: 11px; color: var(--text-dim); text-align: right; margin-top: -2px; } .krk-hint:empty { display: none; } .actions { margin-top: 4px; display: flex; align-items: center; gap: 16px; } .calc-btn { background: var(--accent); color: #08151c; border: 0; border-radius: 8px; padding: 11px 28px; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter 120ms; } .calc-btn:hover { filter: brightness(1.1); } .err { color: var(--bad); font-size: 13px; min-height: 18px; margin: 0; } /* ============================================================================ COMPACT RESULT ============================================================================ */ .results h2 { color: var(--good); } .result-section { padding: 12px 0; border-top: 1px solid var(--border); } .result-section:first-child { border-top: none; padding-top: 0; } /* v0.29.0: yellow accent for playoff-only sub-result. Same structure as a regular block, just visually distinct so the user instantly sees which numbers come from the playoff sample vs the combined sample. */ .result-section-playoff { background: rgba(255, 185, 85, 0.05); border-left: 3px solid #ffb955; padding-left: 10px; margin-left: -10px; } .result-section-playoff h3 { color: #ffb955; } /* v0.31.5: «Среднее» block — bordered look reverted per user request. Block now renders exactly like the rest (border-top only). The `result-section-main` class is still produced by JS for forward compatibility but is intentionally a no-op. */ .result-section-main { /* no-op — keep block flush with the others */ } /* v0.31.8: collapsible result section. Header is the toggle target; the whole body (intermediate pills + headline Ф1/Тотал) hides under a max-height transition. Only «Среднее» (variant=main) is always open, per user request — it should be the headline result you see without any interaction. */ .r-head-toggle { cursor: pointer; user-select: none; } .r-head-right { display: inline-flex; align-items: center; gap: 12px; } .r-toggle-arrow { display: inline-block; color: var(--text-dim); font-size: 11px; transition: transform 160ms ease; transform: rotate(0deg); } .result-section.is-collapsed .r-toggle-arrow { transform: rotate(-90deg); } .r-body { overflow: hidden; max-height: 600px; opacity: 1; transition: max-height 220ms ease, opacity 160ms ease, margin 200ms ease; } .result-section.is-collapsed .r-body { max-height: 0; opacity: 0; margin: 0; padding: 0; border: none; } .r-partial-note { padding: 14px 16px; background: rgba(255, 185, 85, 0.06); border: 1px solid rgba(255, 185, 85, 0.30); border-radius: 6px; margin: 8px 0; font-size: 13px; line-height: 1.55; color: var(--text); } .r-partial-note p { margin: 0 0 8px; } .r-partial-note p:last-child { margin-bottom: 0; } .r-partial-note strong { color: var(--accent); } .r-partial-hint { font-size: 12px; color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 8px !important; } .r-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .r-head h3 { margin: 0; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; } .r-krk-control { display: inline-flex; align-items: center; gap: 6px; } .r-krk-control .lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; } /* v0.34.0: «Исключить из среднего» чекбокс в шапке каждой плашки результата. Когда отмечен — блок остаётся виден (для справки), но не попадает в расчёт «Среднее». Сам блок dimится через .is-excluded класс ниже. */ .r-exclude-control { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .r-exclude-control input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--bad); cursor: pointer; } .r-exclude-control .lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; } .r-exclude-control:hover .lbl { color: var(--text); } .result-section.is-excluded { opacity: 0.45; } .result-section.is-excluded .r-exclude-control { opacity: 1; } .result-section.is-excluded .r-exclude-control .lbl { color: var(--bad); } .result-section.is-excluded h3 { text-decoration: line-through; } .krk-edit { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; min-width: 150px; transition: border-color 120ms; } .krk-edit:hover { border-color: var(--accent-dim); } .krk-edit:focus { outline: none; border-color: var(--accent); } .krk-edit.recalculating { opacity: 0.5; pointer-events: none; } /* Pill-row of intermediate values. */ .r-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; } .r-stat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .r-stat .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } .r-stat .val { font-size: 13px; color: var(--text); } .r-sep { display: inline-block; width: 1px; height: 18px; background: var(--border); margin: 0 4px; } /* "Возможный технарь" warning — sits above the result sections when the forfeit-scan finds 5:0 / 0:5 matches involving the picked teams. */ .result-forfeit-warning { padding: 10px 14px; margin-bottom: 12px; background: rgba(255, 185, 85, 0.08); border: 1px solid var(--warn); border-radius: 8px; } .r-forfeit-title { font-size: 13px; font-weight: 600; color: var(--warn); margin-bottom: 6px; letter-spacing: 0.3px; } .result-forfeit-warning.recalculating { opacity: 0.55; transition: opacity 120ms; } .r-forfeit-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .r-forfeit-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255, 185, 85, 0.3); } .r-forfeit-item:last-child { border-bottom: none; padding-bottom: 0; } .r-forfeit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; } .r-forfeit-line a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--warn); padding-bottom: 1px; } .r-forfeit-line a:hover { color: var(--warn); border-bottom-style: solid; } .r-forfeit-season { font-size: 11px; font-weight: 600; color: var(--warn); background: rgba(255, 185, 85, 0.15); border: 1px solid rgba(255, 185, 85, 0.45); border-radius: 4px; padding: 1px 6px; letter-spacing: 0.3px; text-transform: uppercase; } .r-forfeit-teams { font-weight: 500; } .r-forfeit-score { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--warn); padding: 1px 6px; background: rgba(255, 185, 85, 0.12); border-radius: 4px; } .r-forfeit-meta { font-size: 11px; color: var(--text-dim); margin-left: auto; } .r-forfeit-date { color: var(--text-dim); } /* Inline radio group for exclusion options. */ .r-forfeit-controls { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; padding-left: 2px; } .r-forfeit-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-dim); padding: 2px 4px; border-radius: 4px; transition: color 120ms, background 120ms; } .r-forfeit-opt:hover { color: var(--text); } .r-forfeit-opt input[type=radio] { margin: 0; accent-color: var(--warn); cursor: pointer; } .r-forfeit-opt:has(input:checked) { color: var(--warn); font-weight: 500; } /* ============================================================================ EXCLUSIONS CARD (в форме, ДО кнопки «Рассчитать») — v0.16.0 Появляется когда выбраны обе команды. Содержит per-section блоки: • авто-найденные технари (5:0/0:5) с radio-выбором • чип-лист всех команд, против которых играли наши пики; клик по чипу = «исключить все матчи с этой командой» ============================================================================ */ /* v0.33.8: «Технари и исключения» — full-width band-style plashka in site accent (blue). Card-обёртка прозрачная; header растягивается на всю ширину как полоса. Body разворачивается под ней card-style. */ .exclusions-card { padding: 0; background: none; border: none; box-shadow: none; } .exclusions-card h2 { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); } .exclusions-card-header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 10px 16px; background: linear-gradient(90deg, rgba(79, 195, 247, 0.15), rgba(79, 195, 247, 0.06)); border: 1px solid rgba(79, 195, 247, 0.4); border-radius: 8px; color: var(--text); font-size: 13px; cursor: pointer; user-select: none; transition: border-color 120ms, background 120ms; box-sizing: border-box; } .exclusions-card-header:hover { border-color: rgba(79, 195, 247, 0.7); background: linear-gradient(90deg, rgba(79, 195, 247, 0.22), rgba(79, 195, 247, 0.10)); } .exclusions-card-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .exclusions-card-header .exc-arrow { font-size: 14px; color: var(--text-dim); transition: transform 160ms ease-out; } .exclusions-card-header[aria-expanded="true"] .exc-arrow { transform: rotate(180deg); } .exclusions-card-body { margin-top: 8px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } .exclusions-card-body[hidden] { display: none; } /* Row of "open …" buttons inside one exclusion-subsection (used when we need to show «Открыть список команд» AND «Результаты матчей» side-by-side). Wraps on narrow screens. */ .exclusion-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .exclusions-help { color: var(--text-dim); font-size: 12px; margin: 0 0 14px; line-height: 1.5; } .exclusions-section { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); } .exclusions-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .exclusions-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .exclusions-section-header h3 { margin: 0; font-size: 14px; font-weight: 600; } .exclusions-section-header .season-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; padding: 2px 8px; color: var(--accent); background: rgba(79, 195, 247, 0.12); border: 1px solid rgba(79, 195, 247, 0.3); border-radius: 4px; text-transform: uppercase; } .exclusion-subsection { margin-top: 10px; } .exclusion-subsection.forfeits { padding: 10px 14px; margin: 0 0 10px 0; background: rgba(255, 185, 85, 0.07); border: 1px solid rgba(255, 185, 85, 0.35); border-radius: 8px; } .exclusion-subsection.forfeits .r-forfeit-list { margin-top: 8px; } .exclusion-label { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; } .exclusion-empty { font-size: 12px; color: var(--text-dim); font-style: italic; margin: 4px 0 0; } .team-chip-list { display: flex; flex-wrap: wrap; gap: 6px; } .team-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms, text-decoration-color 120ms; font-family: inherit; } .team-chip:hover { border-color: var(--accent); color: var(--accent); } .team-chip.excluded { color: #ff8c8c; background: rgba(255, 100, 100, 0.12); border-color: rgba(255, 100, 100, 0.4); text-decoration: line-through; text-decoration-color: rgba(255, 100, 100, 0.6); text-decoration-thickness: 1.5px; } .team-chip .chip-count { font-size: 10px; padding: 0 5px; background: rgba(255, 255, 255, 0.06); border-radius: 8px; font-variant-numeric: tabular-nums; color: var(--text-dim); } .team-chip.excluded .chip-count { background: rgba(255, 100, 100, 0.25); color: #ff8c8c; } .exclusions-card.recalculating { opacity: 0.55; transition: opacity 120ms; } /* Compact summary chips of excluded teams (shown inside .exclusions-card, each clickable to remove). Less visually busy than the v0.16.0 chip list was — only the actually-excluded teams appear here; full team selection happens in the modal. */ .excluded-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .excluded-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; font-size: 12px; color: #ff8c8c; background: rgba(255, 100, 100, 0.12); border: 1px solid rgba(255, 100, 100, 0.4); border-radius: 12px; text-decoration: line-through; text-decoration-color: rgba(255, 100, 100, 0.5); } .excluded-chip .remove-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: rgba(255, 100, 100, 0.2); color: #ff8c8c; border: none; border-radius: 50%; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; } .excluded-chip .remove-x:hover { background: rgba(255, 100, 100, 0.4); color: #fff; } .open-modal-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; background: rgba(79, 195, 247, 0.12); color: var(--accent); border: 1px solid rgba(79, 195, 247, 0.4); border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 120ms, border-color 120ms; } .open-modal-btn:hover { background: rgba(79, 195, 247, 0.22); border-color: var(--accent); } .open-modal-btn .modal-count { font-size: 11px; padding: 1px 7px; background: var(--accent); color: #061018; border-radius: 10px; font-weight: 600; } /* «Результаты матчей» button — sits next to «Открыть список команд». Same shape, slightly different colour (green tint) so the two are visually distinguishable at a glance. */ .open-results-modal-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; background: rgba(64, 200, 128, 0.10); color: #40c880; border: 1px solid rgba(64, 200, 128, 0.35); border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 120ms, border-color 120ms; } .open-results-modal-btn:hover { background: rgba(64, 200, 128, 0.20); border-color: #40c880; } /* Match-results modal — opens from «Результаты матчей». Lets the user check any non-h2h match to add its opponent to manualOpponents (mirrored across both picked teams). */ .results-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; } .results-modal { width: min(820px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .results-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .results-modal-head h3 { margin: 0; font-size: 15px; color: var(--text); } .results-modal-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; } .results-modal-close { background: none; border: none; color: var(--text-dim); font-size: 24px; line-height: 1; cursor: pointer; } .results-modal-close:hover { color: var(--text); } .results-modal-hint { padding: 10px 18px; font-size: 12px; color: var(--text-dim); line-height: 1.45; border-bottom: 1px solid var(--border); background: rgba(64, 200, 128, 0.04); } /* v0.34.8: «Выбрать все» в шапке modal body — узкая полоска под hint'ом с одним labeled checkbox. Tri-state — visible через :indeterminate. */ .results-modal-bulk { padding: 8px 18px; border-bottom: 1px solid var(--border); background: var(--surface); } .results-modal-bulk label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .results-modal-bulk input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); } .results-modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 4px 0; } /* v0.33.8: split into two team sections, наша home команда сверху, away снизу. Каждая секция со своим header — имя команды + count. */ .res-team-section + .res-team-section { margin-top: 4px; } .res-team-header { padding: 10px 18px 6px; font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; border-top: 1px solid var(--border); background: rgba(79, 195, 247, 0.04); } .res-team-section:first-child .res-team-header { border-top: none; } .res-team-count { color: var(--text-dim); font-weight: 400; text-transform: none; } .res-row { display: grid; /* v0.33.17: column-aligned grid — chk | date | team1 | score | team2 | tags. teams flex to fit but stay in their lane, score is fixed-width and monospaced so all the «X:Y» line up between rows. */ grid-template-columns: 24px 80px minmax(0, 1fr) 70px minmax(0, 1fr) 70px; gap: 8px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 100ms; } .res-row:hover { background: rgba(79, 195, 247, 0.05); } .res-row.is-h2h { cursor: default; background: rgba(79, 195, 247, 0.05); } .res-row.is-h2h:hover { background: rgba(79, 195, 247, 0.05); } .res-row.is-checked { background: rgba(64, 200, 128, 0.10); } .res-row.is-checked:hover { background: rgba(64, 200, 128, 0.16); } .res-row-check { display: flex; align-items: center; justify-content: center; } .res-row-check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: #40c880; } .res-row-check input[type=checkbox]:disabled { opacity: 0.35; cursor: not-allowed; } .res-row-date { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; } /* v0.33.17: each side of the matchup gets its own grid column. Team1 cell hugs the right edge so the name flows toward the centre score; team2 cell hugs the left edge so it flows away from the score. The score itself is in its own fixed-width column, monospaced, centered. */ .res-row-team-home { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; min-width: 0; text-align: right; } .res-row-team-away { display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 13px; min-width: 0; text-align: left; } .res-row-team-home .team-name, .res-row-team-away .team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res-row-teams { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; } /* v0.33.15: team-logo + name pairing used in match-results modal. Logo is 18×18, lazy-loaded, hidden on 404 via inline onerror. */ .team-with-logo { display: inline-flex; align-items: center; gap: 5px; } .team-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } /* v0.33.8: highlight OUR teams (picks.home / picks.away) inside the results modal so юзер с одного взгляда видит «вот наша команда». Accent-blue + bold; opponent — обычный text-dim. На h2h-строках оба participant'а считаются нашими — обе подсвечены. */ .res-our-team { color: var(--accent); font-weight: 700; } .res-opp-team { color: var(--text); } .res-row-score { background: var(--surface-2); padding: 2px 8px; border-radius: 4px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: center; justify-self: center; min-width: 50px; } .res-tag { display: inline-block; margin-left: 4px; padding: 2px 7px; font-size: 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; } .res-tag.h2h { background: rgba(79, 195, 247, 0.18); color: var(--accent); } .res-tag.po { background: rgba(255, 185, 85, 0.18); color: #ffb955; } .results-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); } .results-modal-cancel { padding: 8px 16px; font-size: 13px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-family: inherit; } .results-modal-cancel:hover { color: var(--text); border-color: var(--accent); } .results-modal-apply { padding: 8px 18px; font-size: 13px; background: #ffb955; color: #08151c; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-family: inherit; } .results-modal-apply:hover:not(:disabled) { background: #ffc97a; } .results-modal-apply:disabled { opacity: 0.4; cursor: not-allowed; } /* ============================================================================ AI-ANALYSIS — v0.35.0. Pre-match analysis button + streaming modal that reuses the .results-modal-* shell for visual consistency. Five section frames fill in as the SSE stream arrives; the section currently being written pulses a brand-blue border, completed sections turn green. ============================================================================ */ .results-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .results-card-head h2 { margin: 0; } .btn-ai-analysis { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #4fc3f7 0%, #1b3486 100%); border: 1px solid rgba(79, 195, 247, 0.4); border-radius: 8px; cursor: pointer; font-family: inherit; transition: transform 80ms ease, box-shadow 120ms ease; } .btn-ai-analysis:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79, 195, 247, 0.25); } .btn-ai-analysis:active { transform: translateY(0); } /* Important: explicit display above overrides the browser-default `hidden` attribute. Re-state it so `btn.hidden = true` actually hides the button. */ .btn-ai-analysis[hidden] { display: none !important; } .btn-ai-analysis:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.4); box-shadow: none; } .btn-ai-analysis:disabled:hover { transform: none; box-shadow: none; } /* v0.43.0: ai-precheck block — lineup-availability gate сидит под результатом расчёта и держит AI-кнопку disabled, пока юзер не нажмёт «Проверить» и сканер не подтвердит что состав опубликован. */ .ai-precheck { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-top: 12px; background: rgba(79, 195, 247, .06); border: 1px solid rgba(79, 195, 247, .18); border-radius: 10px; } .ai-precheck.hidden { display: none; } .ai-precheck-hint { margin: 0; font-size: 13px; color: var(--text-dim); } .ai-precheck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ai-precheck-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; cursor: pointer; font-family: inherit; transition: transform 80ms ease, background-color 120ms ease; } .ai-precheck-btn:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); } .ai-precheck-btn:active { transform: translateY(0); } .ai-precheck-btn:disabled { cursor: not-allowed; opacity: .55; transform: none; } .ai-precheck-status { font-size: 12px; color: var(--text-dim); min-height: 16px; } .ai-precheck-status.is-ok { color: #6bd37c; } .ai-precheck-status.is-warn { color: #f0b67f; } .ai-precheck-status.is-error { color: #f08e8e; } .ai-precheck-status.is-busy { color: var(--text-dim); } /* v0.45.21: manual matchUrl fallback внутри .ai-precheck. */ .ai-manual-url { margin-top: 8px; padding: 10px 12px; background: var(--surface); border: 1px dashed var(--border); border-radius: 6px; } .ai-manual-url.hidden { display: none; } .ai-manual-url-hint { margin: 0 0 8px; font-size: 12px; color: var(--text-dim); line-height: 1.4; } .ai-manual-url-row { display: flex; gap: 8px; align-items: center; } .ai-manual-url-input { flex: 1; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 12px; font-family: inherit; } .ai-manual-url-input:focus { outline: none; border-color: var(--accent); } .ai-manual-url-btn { background: var(--accent); color: #08151c; border: 0; border-radius: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; } .ai-manual-url-btn:hover { filter: brightness(1.08); } .ai-modal { width: min(720px, 94vw); } .ai-modal-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .ai-modal-hint { font-size: 12px; color: var(--text-dim); margin: 8px 18px 12px; line-height: 1.5; } .ai-modal-bm-row { display: flex; gap: 12px; padding: 4px 18px 8px; flex-wrap: wrap; } .ai-modal-bm-cell { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); } .ai-modal-bm-cell input, .ai-modal-bm-cell select { padding: 7px 10px; font-size: 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; } .ai-modal-bm-cell input:focus, .ai-modal-bm-cell select:focus { outline: none; border-color: #4fc3f7; } .ai-modal-bm-actions { display: flex; justify-content: flex-end; padding: 8px 18px 12px; } .ai-modal-bm-toggle { padding-top: 2px; padding-bottom: 4px; } .ai-modal-bm-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .ai-modal-bm-check input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: #4fc3f7; cursor: pointer; } .ai-cost-line { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 18px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); background: rgba(79, 195, 247, .05); } .ai-cost-line b { color: var(--text); font-weight: 600; } .ai-cost-line .ai-cost-detail { color: var(--text-dim); font-size: 11px; opacity: .8; } .ai-modal-status { padding: 14px 18px; font-size: 13px; color: var(--text-dim); font-style: italic; } .ai-modal-status::after { content: ''; display: inline-block; width: 10px; text-align: left; animation: ai-dots 1.4s steps(4, end) infinite; } @keyframes ai-dots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } } /* v0.45.19: Rosters tab — paste match URL, get both teams' lineups. */ .rosters-card .rosters-hint { font-size: 13px; color: var(--text-dim); margin: 4px 0 8px; line-height: 1.5; } /* v0.45.36: список поддерживаемых источников/лиг с флажками. */ .rosters-supported { margin: 8px 0 14px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .rs-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin-bottom: 6px; } .rs-list { list-style: none; margin: 0; padding: 0; } .rs-list li { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text); padding: 3px 0; line-height: 1.5; } .rs-flag img { width: 18px; height: 13px; object-fit: cover; border: 1px solid var(--border); border-radius: 2px; vertical-align: middle; position: relative; top: 1px; } .rs-host { font-weight: 600; color: var(--accent); font-family: ui-monospace, "SF Mono", Menlo, monospace; } .rs-leagues { color: var(--text-dim); flex: 1; } /* v0.45.59: упрощённый список стран — horizontal flag-chips */ .rs-list-countries { display: flex; flex-wrap: wrap; gap: 14px; } .rs-list-countries li { padding: 0; } .rs-country { color: var(--text); font-size: 13px; } .rs-note { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--text-dim); font-style: italic; } .rosters-form { display: flex; gap: 10px; margin-bottom: 12px; } .rosters-url-input { flex: 1; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; } .rosters-url-input:focus { outline: none; border-color: var(--accent); } .rosters-submit-btn { background: var(--accent); color: #08151c; border: 0; border-radius: 8px; padding: 10px 22px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter 120ms; white-space: nowrap; } .rosters-submit-btn:hover:not(:disabled) { filter: brightness(1.08); } .rosters-submit-btn:disabled { opacity: 0.6; cursor: progress; } .rosters-status { min-height: 18px; margin-bottom: 12px; font-size: 13px; } .rosters-status .rosters-ok { color: var(--good); } .rosters-status .rosters-err { color: var(--bad); } .rosters-status .rosters-info { color: var(--text-dim); font-style: italic; } .rosters-result { min-height: 20px; } .rosters-warn-note { margin-top: 14px; padding: 10px 14px; background: rgba(220, 165, 50, 0.10); border-left: 3px solid rgba(220, 165, 50, 0.55); border-radius: 4px; color: var(--text-dim); font-size: 13px; line-height: 1.4; } .rosters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; /* v0.45.28: явно row1=auto и row2=auto. row1 ячейки растягиваются на одну высоту → suммарные плашки обеих команд выравниваются по нижнему краю. */ grid-auto-rows: auto; align-items: stretch; } /* v0.46.8: single-team mode (ostravskehry team-page) — одна колонка, во всю ширину. */ .rosters-grid--single { grid-template-columns: 1fr; } .roster-top-missing-empty { /* placeholder для пустых cells в row 2 */ min-height: 0; } @media (max-width: 760px) { .rosters-grid { grid-template-columns: 1fr; } .rosters-form { flex-direction: column; } /* v0.45.66: на мобильном breakpoint каждый topMissing должен идти сразу ПОД своей team-card, а не оба внизу. DOM-порядок [home-team, away-team, home-missing, away-missing] → order'им в [home-team, home-missing, away-team, away-missing]. CSS Grid поддерживает property `order`. */ .rosters-grid > :nth-child(1) { order: 1; } /* home team-card */ .rosters-grid > :nth-child(3) { order: 2; } /* home topMissing */ .rosters-grid > :nth-child(2) { order: 3; } /* away team-card */ .rosters-grid > :nth-child(4) { order: 4; } /* away topMissing */ } .roster-team { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; /* v0.45.27: flex column + margin-top:auto на team-totals → плашка суммарной информации обеих команд встаёт на одну вертикаль независимо от того у кого роста длиннее. grid-template parent (rosters-grid 1fr 1fr) уже вытягивает обе колонки на высоту самой длинной. */ display: flex; flex-direction: column; } .roster-team > .roster-team-totals { margin-top: auto; } .roster-team-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .roster-team-name { font-size: 15px; font-weight: 700; color: var(--text); } .roster-team-count { font-size: 11px; color: var(--text-dim); } .roster-line { margin-bottom: 10px; } .roster-line:last-child { margin-bottom: 0; } .roster-line-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent); font-weight: 600; margin-bottom: 4px; } .roster-line-goalies .roster-line-head { color: var(--warn); } .roster-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .roster-players li { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text); padding: 5px 6px; border-radius: 4px; border-bottom: 1px dotted var(--border); } .roster-players li:last-child { border-bottom: 0; } .roster-players li:hover { background: var(--surface); } .rp-main { display: flex; align-items: baseline; gap: 8px; } .rp-stats { font-size: 11px; color: var(--text-dim); padding-left: 36px; line-height: 1.4; } .rp-comp { color: var(--text-dim); font-feature-settings: "tnum"; } /* v0.45.24: подсветка «основной» лиги игрока — той где он отыграл ≥50% всех матчей сезона. Делает явно видимым «вышел из основы как гость» (нет подсветки) vs «играет постоянно в этой лиге» (подсветка). */ .rp-comp-main { color: var(--accent); font-weight: 700; padding: 0 4px; background: var(--surface-selected); border-radius: 3px; } /* v0.45.26: «продуктивный» — мало матчей, но ≥1 гол в среднем. Тёплый оранжевый, отличается от brand-blue main. */ .rp-comp-prod { color: var(--warn); font-weight: 700; padding: 0 4px; background: rgba(255, 185, 85, 0.13); border-radius: 3px; } .rp-low-games { display: inline-block; margin-left: 4px; padding: 1px 7px; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--warn); background: rgba(255, 185, 85, 0.12); border: 1px solid rgba(255, 185, 85, 0.35); border-radius: 4px; } .rp-stats-na { font-style: italic; opacity: 0.6; } .roster-team-totals { margin-top: 12px; padding: 10px 12px; background: var(--surface-selected); border: 1px solid var(--accent-dim); border-radius: 8px; font-size: 12px; color: var(--text); display: flex; flex-direction: column; gap: 3px; } .roster-team-totals b { color: var(--accent); font-feature-settings: "tnum"; } .roster-team-totals .rt-note { margin-top: 4px; font-size: 11px; color: var(--text-dim); font-style: italic; } /* v0.45.28: кнопка «Копировать» внутри суммарной плашки. */ .roster-team-totals .rt-copy { align-self: flex-start; margin-top: 6px; padding: 4px 10px; font-size: 11px; font-family: inherit; font-weight: 600; color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; } .roster-team-totals .rt-copy:hover { border-color: var(--accent); background: var(--surface-selected); } .roster-team-totals .rt-copy:active { transform: translateY(1px); } /* v0.45.27: «отсутствующие из топ-5» — рендерится после summary plashka. Маленький список с warm-orange тоном, чтобы привлекал внимание (потеря ключевого игрока — важная новость). */ .roster-top-missing { margin-top: 10px; padding: 8px 12px; background: rgba(255, 185, 85, 0.08); border: 1px solid rgba(255, 185, 85, 0.35); border-radius: 6px; } .rtm-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--warn); margin-bottom: 5px; } .rtm-list { list-style: none; margin: 0; padding: 0; } .rtm-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; padding: 2px 0; } .rtm-name { color: var(--text); font-weight: 500; } .rtm-stats { color: var(--text-dim); font-size: 11px; font-feature-settings: "tnum"; } .rp-num { display: inline-block; min-width: 28px; font-feature-settings: "tnum"; font-size: 11px; color: var(--text-dim); text-align: right; font-weight: 600; } .rp-name { flex: 1; } .rp-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-dim); cursor: pointer; } .rp-link:hover { color: var(--brand); border-bottom-color: var(--brand); } .rp-pos { font-size: 11px; color: var(--text-dim); padding: 1px 6px; background: var(--surface); border-radius: 3px; } /* v0.46.3: «(КЛУБ)» рядом с именем — только для ostravskehry-турнира. Серый, маленький шрифт, моноспэйс — чтобы визуально не конкурировал с именем игрока, но был читаемый. v0.46.6: название клуба внутри скобок — кликабельная ссылка на overview команды. */ .rp-cesky-club { font-size: 11px; color: var(--text-dim); white-space: nowrap; } .rp-cesky-club-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-dim); } .rp-cesky-club-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .roster-empty, .roster-team-empty { padding: 14px 8px; text-align: center; color: var(--text-dim); font-size: 12px; font-style: italic; } /* v0.45.5: AI reports tab + report indicators in calc/lines tabs. */ .ai-reports-card .ai-reports-hint { font-size: 12px; color: var(--text-dim); margin: 4px 0 14px; } .ai-reports-list { display: flex; flex-direction: column; gap: 8px; } .ai-reports-empty { padding: 24px 12px; text-align: center; color: var(--text-dim); font-size: 13px; font-style: italic; } .ai-report-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .ai-report-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ai-report-card-teams { font-size: 13px; font-weight: 600; line-height: 1.25; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ai-report-card-teams .team-logo { width: 16px; height: 16px; object-fit: contain; } .ai-report-card-sub { font-size: 11px; color: var(--text-dim); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; } .ai-report-card-sub .lr-badge { font-size: 10px; } .ai-report-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ai-report-card-view, .ai-view-report-btn, .lr-ai-report-btn { padding: 5px 10px; font-size: 12px; border-radius: 5px; background: rgba(79, 195, 247, .15); border: 1px solid rgba(79, 195, 247, .4); color: var(--text); cursor: pointer; } .ai-report-card-view:hover, .ai-view-report-btn:hover, .lr-ai-report-btn:hover { background: rgba(79, 195, 247, .25); } .ai-report-card-delete { padding: 5px 10px; font-size: 11px; border-radius: 5px; background: rgba(255, 100, 100, .1); border: 1px solid rgba(255, 100, 100, .35); color: #ff8888; cursor: pointer; } .ai-report-card-delete:hover { background: rgba(255, 100, 100, .2); } /* "AI-отчёт уже сформирован" hint in calc-tab precheck — replaces the AI button. */ .ai-precheck-status.ai-report-exists { color: var(--text); padding: 8px 0 0; font-size: 13px; } .ai-precheck-status.ai-report-exists::before { content: '📄 '; } .ai-sections { padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 14px; } .ai-section { position: relative; padding: 12px 14px 12px 18px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 6px; transition: border-color 200ms ease; } .ai-section h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; } .ai-section-body, .ai-section-list { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; } .ai-section-list { padding-left: 18px; } .ai-section-list li { margin: 2px 0; } .ai-section .ai-pending { color: var(--text-dim); font-style: italic; } .ai-section.is-streaming { border-left-color: #4fc3f7; animation: ai-pulse 1.4s ease-in-out infinite; } .ai-section.is-done { border-left-color: #69dd87; } .ai-section.is-empty { opacity: 0.6; } @keyframes ai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 195, 247, 0); } 50% { box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.18); } } .ai-modal-error { margin: 12px 18px; padding: 10px 12px; background: rgba(255, 115, 115, 0.08); border: 1px solid rgba(255, 115, 115, 0.35); border-radius: 6px; color: #ff9090; font-size: 12px; line-height: 1.5; } .ai-required { color: #ffb955; font-weight: 700; margin-left: 2px; } .la-row { margin: 6px 0; } .la-head { display: flex; align-items: center; gap: 8px; } .la-label { font-weight: 600; } .la-verdict { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .la-verdict.la-ok { background: rgba(105, 221, 135, 0.15); color: #6abf78; border: 1px solid rgba(105, 221, 135, 0.35); } .la-verdict.la-bad { background: rgba(255, 185, 85, 0.12); color: #ffb955; border: 1px solid rgba(255, 185, 85, 0.35); } .la-verdict.la-neutral { background: rgba(138, 149, 163, 0.12); color: #a8b1bd; border: 1px solid rgba(138, 149, 163, 0.30); } .la-note { color: var(--text-dim); margin-top: 3px; font-size: 12px; line-height: 1.5; } .news-ctx { margin-bottom: 8px; line-height: 1.5; } .news-list { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.55; } .news-list li { margin: 3px 0; } .news-date { display: inline-block; padding: 0 6px; margin-right: 4px; font-size: 11px; font-weight: 600; color: var(--text-dim); background: rgba(138, 149, 163, 0.12); border-radius: 4px; vertical-align: 1px; } .la-math { margin: 4px 0 8px; padding: 8px 10px; background: rgba(79, 195, 247, 0.06); border-left: 2px solid rgba(79, 195, 247, 0.5); border-radius: 4px; font-size: 12.5px; line-height: 1.5; } .la-math .la-label { color: #4fc3f7; } .la-math.la-math-warn { background: rgba(255, 185, 85, 0.08); border-left-color: rgba(255, 185, 85, 0.55); } .la-math.la-math-warn .la-label { color: #ffb955; } .ai-impact-list { padding-left: 18px; margin: 4px 0 8px; } .ai-impact-list li { margin: 3px 0; } .impact-team { margin: 6px 0 2px; font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.02em; text-transform: uppercase; } .ai-stat-pill { display: inline-block; padding: 0 6px; font-size: 11px; font-weight: 600; border-radius: 4px; background: rgba(255, 185, 85, 0.12); color: #ffb955; border: 1px solid rgba(255, 185, 85, 0.35); margin-left: 4px; } .ai-stat-pill.la-bad { background: rgba(255, 185, 85, 0.12); color: #ffb955; } .ai-stat-pill.la-neutral { background: rgba(138, 149, 163, 0.12); color: #a8b1bd; } .no-forfeit-msg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; color: #6abf78; background: rgba(105, 221, 135, 0.08); border: 1px dashed rgba(105, 221, 135, 0.35); border-radius: 6px; margin-bottom: 8px; } /* ============================================================================ EXCLUSIONS MODAL — opens from the «Открыть список команд» button. ============================================================================ */ .exclusions-modal { padding: 0; border: none; border-radius: 12px; background: transparent; max-width: 920px; width: 92vw; max-height: 88vh; color: var(--text); } .exclusions-modal::backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(2px); } .exclusions-modal .modal-card { display: flex; flex-direction: column; max-height: 88vh; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .exclusions-modal .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .exclusions-modal .modal-head h2 { margin: 0; font-size: 16px; } .exclusions-modal .modal-close { width: 32px; height: 32px; font-size: 16px; } .exclusions-modal .modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; } .exclusions-modal .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); } .exclusions-modal .modal-clear, .exclusions-modal .modal-done { padding: 8px 18px; font-size: 13px; border-radius: 6px; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: background 120ms; } .exclusions-modal .modal-clear:hover { background: rgba(255, 100, 100, 0.15); border-color: rgba(255, 100, 100, 0.4); color: #ff8c8c; } .exclusions-modal .modal-done { background: var(--accent); color: #061018; border-color: var(--accent); font-weight: 600; } .exclusions-modal .modal-done:hover { filter: brightness(1.1); } .modal-section { margin-bottom: 20px; } .modal-section:last-child { margin-bottom: 0; } .modal-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .modal-section-head h3 { margin: 0; font-size: 14px; } .modal-section-head .season-tag { font-size: 11px; padding: 2px 8px; background: rgba(79, 195, 247, 0.12); color: var(--accent); border: 1px solid rgba(79, 195, 247, 0.3); border-radius: 4px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } .modal-section-head .modal-picks { font-size: 12px; color: var(--text-dim); margin-left: auto; } .modal-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .modal-table th { text-align: left; font-weight: 500; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.3px; font-size: 11px; } .modal-table th.num, .modal-table td.num { text-align: right; } .modal-table th.check, .modal-table td.check { text-align: center; width: 60px; } .modal-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .modal-table tr:hover td { background: rgba(255, 255, 255, 0.025); } .modal-table tr.row-picked td { background: rgba(79, 195, 247, 0.05); color: var(--text-dim); font-style: italic; } .modal-table tr.row-picked td .pick-tag { display: inline-block; font-size: 10px; padding: 1px 6px; background: rgba(79, 195, 247, 0.18); color: var(--accent); border-radius: 3px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; } .modal-table tr.row-excluded td:not(.check) { color: #ff8c8c; text-decoration: line-through; text-decoration-color: rgba(255, 100, 100, 0.5); } .modal-table td .matches-pill { display: inline-block; padding: 1px 7px; font-size: 11px; background: rgba(255, 255, 255, 0.06); color: var(--text); border-radius: 8px; font-weight: 500; } .modal-table td .matches-pill.zero { color: var(--text-dim); } .modal-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .modal-empty { padding: 20px; text-align: center; color: var(--text-dim); font-style: italic; } /* ============================================================================ FLASHSCORE ODDS CARD (v0.19.0) — compact one-row-per-match table. Columns: 1 / X / 2 / 1X / 12 / X2 / Фора1 / Фора2 / Тотал / Б / М ============================================================================ */ .odds-card { padding: 14px 18px; } .odds-card h2 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 10px; } .odds-card h2 .fs-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 4px; background: rgba(79, 195, 247, 0.12); color: var(--accent); border: 1px solid rgba(79, 195, 247, 0.3); text-transform: uppercase; } .odds-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; } .odds-season-pills { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; } .odds-season-pill { padding: 4px 12px; font-size: 12px; border-radius: 4px; cursor: pointer; background: transparent; color: var(--text-dim); border: none; font-family: inherit; } .odds-season-pill.active { background: var(--accent); color: #061018; font-weight: 600; } .odds-season-pill:hover:not(.active) { color: var(--text); } /* "Add Play-Off matches" CTA in the odds card header. Pulls right when the season-pills group is on the left. The count badge dims to neutral when nothing is selected and brightens on opt-in. */ .odds-playoff-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; font-family: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .odds-playoff-btn:hover { border-color: var(--accent); color: var(--accent); } .odds-playoff-btn.has-selected { border-color: var(--accent); color: var(--accent); } .odds-playoff-count { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: rgba(79,195,247,0.12); color: var(--accent); } /* Play-Off modal — full-screen overlay + centered card. Plain CSS so we don't pull in a modal library. */ .odds-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; } .odds-modal { width: min(720px, 92vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,0.5); } .odds-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); } .odds-modal-head h3 { margin: 0; font-size: 15px; } .odds-modal-close { border: none; background: transparent; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; } .odds-modal-close:hover { color: var(--text); } .odds-modal-hint { margin: 10px 16px 6px; font-size: 12px; color: var(--text-dim); } .odds-modal-actions { margin: 6px 16px 10px; font-size: 13px; } .odds-modal-checkbox-all { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .odds-modal-list { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; flex: 1; border-top: 1px solid var(--border); } .odds-modal-list li { border-bottom: 1px solid var(--border); } .odds-modal-list li:last-child { border-bottom: none; } .odds-modal-list label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 16px; cursor: pointer; align-items: center; } .odds-modal-list label:hover { background: var(--surface-2); } .odds-modal-teams { font-size: 13px; } .odds-modal-meta { font-size: 11px; color: var(--text-dim); } .odds-modal-phase { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; background: rgba(255,185,85,0.12); color: #ffb955; border-radius: 4px; } .odds-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); } .odds-modal-cancel, .odds-modal-apply { padding: 6px 14px; font-size: 12px; font-family: inherit; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; } .odds-modal-apply { border-color: var(--accent); color: var(--accent); } .odds-modal-apply:hover { background: rgba(79,195,247,0.10); } /* v0.28.0: Play-Off trigger row sits inside the team-picker block, below КРК. Empty by default; .open-playoff-modal-btn injected by JS when the pair has playoff games. */ .playoff-trigger-row { margin-top: 10px; padding: 0; } .playoff-trigger-row:empty { display: none; } .open-playoff-modal-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; font-family: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .open-playoff-modal-btn:hover { border-color: #ffb955; color: #ffb955; } .open-playoff-modal-btn .modal-count { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: rgba(255,185,85,0.18); color: #ffb955; } /* v0.34.7: «Добавить матчи Play-Off» теперь использует тот же modal shell что и Результаты матчей (.results-modal-*), CSS-правила .po-modal-* удалены как мёртвый код. Чтобы визуально отличать «добавляем» vs «убираем», у тэга стадии плей-офф (.res-tag.po) сохранён жёлтый акцент. */ /* ============================================================================ v0.33.0 — БОЖЕСТВЕННЫЕ ЛИНИИ Save-line form + lines tab + existing-lines plashka. ============================================================================ */ /* "Existing lines" plashka — sits directly under the Технари plashka in the form. v0.33.8: full-width band-style (matches Технари layout shape) — `.existing-lines-trigger` растягивается на 100%. */ .existing-lines-hint { margin: 0; } .existing-lines-hint.hidden { display: none; } .existing-lines-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 10px 16px; background: linear-gradient(90deg, rgba(255,185,85,0.15), rgba(64,200,128,0.12)); border: 1px solid rgba(255,185,85,0.4); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 120ms, background 120ms; box-sizing: border-box; font-family: inherit; } .existing-lines-trigger:hover { border-color: rgba(255,185,85,0.7); background: linear-gradient(90deg, rgba(255,185,85,0.22), rgba(64,200,128,0.18)); } .existing-lines-trigger .elh-text { flex: 1; text-align: left; } .elh-spark { font-size: 16px; } .elh-count { color: #ffb955; font-weight: 700; } .elh-arrow { color: var(--text-dim); font-size: 14px; line-height: 1; transition: transform 160ms ease-out; } .existing-lines-trigger[aria-expanded="true"] .elh-arrow { transform: rotate(180deg); } .existing-lines-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .existing-lines-list[hidden] { display: none; } /* Save-line form sits inside the .results card, after the result blocks. Shown only when the user picked a match from the upcoming schedule AND no line for that exact match (matchId) already exists. */ .save-line-card { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); } .save-line-card.hidden { display: none; } .save-line-head { margin: 0 0 4px; font-size: 14px; color: #ffb955; } .save-line-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; } .save-line-meta b { color: var(--text); } .save-line-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .sl-save { padding: 8px 18px; background: #ffb955; color: #08151c; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 13px; } .sl-save:hover { background: #ffc97a; } .sl-save:disabled { opacity: 0.5; cursor: progress; } .sl-status { font-size: 12px; color: var(--text-dim); } .sl-status.success { color: #40c880; } .sl-status.error { color: #ff6b6b; } /* Shared bookmaker-feed strip used by: 1. The save-line form (inputs inside .ls-row) 2. Each saved-line row (read-only values inside .ls-row) Columns: ФОРА 1 | ФОРА 2 | ТОТАЛ | Б | М. v0.33.4: compact (auto-sized columns, no stretching) and pushed to the right edge of its parent via margin-left:auto. Result of a played match lives in a separate `.lr-result-block` on the LEFT — see .line-row-body below. */ .line-strip { display: grid; grid-auto-flow: column; /* v0.45.14: фиксированная min-width у колонок strip'а. Раньше было `auto`, и при содержимом «—» (когда derived П1/Х/П2 спрятан как нерентабельный) колонка ужималась — итоговая ширина strip'а у разных строк отличалась на 30-50 px, и плашка СЫГРАН плавала по x-координате. Фиксированный min-width 44px гарантирует одинаковую ширину strip'а у всех строк. */ grid-auto-columns: minmax(44px, auto); gap: 4px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; width: max-content; max-width: 100%; overflow-x: auto; } .ls-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .ls-head { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; } .ls-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-height: 28px; } /* Form inputs inside .line-strip: compact, mono-spaced numbers feel. */ .ls-row select, .ls-row input { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 12px; min-width: 0; text-align: center; font-family: inherit; } .ls-row input[type=number] { width: 54px; } .ls-row select { width: 64px; } .ls-row select:focus, .ls-row input:focus { outline: none; border-color: var(--accent); } .ls-row .sl-f2-base, .ls-row .ls-val, .ls-row .ls-val-base { display: inline-block; font-size: 12px; padding: 0 4px; color: var(--text); } .ls-row .ls-val-base { color: var(--text-dim); min-width: 30px; text-align: right; } .ls-row .ls-val-kf { display: inline-block; background: var(--surface-2); border-radius: 4px; padding: 3px 8px; font-weight: 600; font-size: 12px; min-width: 36px; text-align: center; } /* Strip placement inside the save-line-card: push right, don't stretch. */ .save-line-card .line-strip { margin-left: auto; } /* v0.33.8: derived cells (П1/Х/П2/1Х/12/Х2) выглядят как остальные — юзер не хочет чтобы зелёные превалировали и перетягивали взгляд. Никакого специального тона; стандартные .ls-head и .ls-val-kf. */ /* v0.33.14: strip lives directly inside .line-row-main, no .line-row-body wrapper. main row is a flex with info-left, optional result-block, strip-right. Strip auto-aligns to the top of the row alongside team info — matches the bookmaker fid layout the user referenced. */ .line-row-main .line-strip { margin-left: auto; padding: 4px 8px; gap: 2px 10px; } /* v0.45.16: explicit fixed-width grid для display-strip'а (не для save/edit режимов). Раньше каждая колонка распухала под содержимое (ФОРА «−11,5 1,85» шире чем «0 1,65»), и колонки между строками не выравнивались по x. Теперь все 11 колонок одной строки имеют одинаковую ширину для всех строк, и плашки СЫГРАН + сами столбцы стоят чётким столбиком. lr-edit-strip (inline edit-form, 5 ячеек) и .save-line-card .line-strip продолжают использовать старое auto-sizing — там колонок меньше и они растут под input'ы. */ .line-row-main > .line-strip:not(.lr-edit-strip) { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(6, 50px) 86px 86px 50px 50px 50px; } .lr-result-block { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 10px; background: rgba(64, 200, 128, 0.12); border: 1px solid rgba(64, 200, 128, 0.4); border-radius: 5px; /* v0.45.16: фиксированная ширина — для одинаковых плашек СЫГРАН N:M по всем строкам. Контент центрирован. */ width: 92px; flex-shrink: 0; box-sizing: border-box; } /* v0.45.16: пустой placeholder для строк без результата — занимает то же место в grid, но невидимый. Это гарантирует, что strip всегда в 3-й колонке .line-row-main, а не во 2-й (без этого upcoming-матчи имели бы strip в другой x-координате чем сыгранные). */ .lr-result-block--empty { background: transparent; border-color: transparent; } /* v0.45.13: на десктопе строки сохранённых линий идут как 3-колоночный grid — info (растягивается), result-block (фиксированный размер, позиция справа от info), strip (фиксированной ширины справа). Раньше результат рендерился внутри flex'а с auto-margin'ами, что давало плавающую x-координату плашки (info с разной длиной имён → разный gap до result-block). Теперь все «СЫГРАН N:M» строго на одной вертикали, приклеены слева к strip'у. На мобильной верстке (max-width 760) .line-row-main = column, эти правила игнорируются (grid не наследуется, override через старое flex-column правило). */ @media (min-width: 761px) { .line-row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 12px; } .line-row-main > .lr-result-block { margin: 0; align-self: start; } .line-row-main > .line-strip { margin-left: 0; } } .lr-result-label { font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; } .lr-result-score { font-size: 16px; font-weight: 700; color: #40c880; line-height: 1.05; display: flex; align-items: baseline; gap: 4px; } .lr-result-suffix { font-size: 11px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; } @media (max-width: 760px) { /* v0.43.2: на узких экранах разворачиваем .line-row-main в столбец — info сверху, strip отдельной строкой во всю ширину карточки с горизонтальным скроллом. Раньше strip пытался жить справа от info, ужимался под grid auto-columns и колонки наезжали друг на друга (ФОРА 1 / ФОРА 2 / ТОТАЛ слиплись). Force column layout + явный max-content на колонках лечит. */ .line-row-main { flex-direction: column; align-items: stretch; gap: 8px; } .line-row-main .line-strip { margin-left: 0; width: 100%; max-width: 100%; overflow-x: auto; /* На мобиле колонки strip получают min-width: max-content так что они не сжимаются, и весь strip скроллится горизонтально внутри своей строки. */ grid-auto-columns: max-content; } .save-line-card .line-strip { margin-left: 0; width: 100%; max-width: 100%; overflow-x: auto; grid-auto-columns: max-content; } .ls-col { min-width: max-content; } } /* Lines tab — filter row + list. Each row shows match info + line values + action buttons. Cross-league entries flagged with a yellow warning chip. */ .lines-card { padding: 16px 18px; } .lines-filter { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); } /* v0.33.17 — USERS TAB */ .users-card { padding: 16px 18px; } .users-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--border); } .users-add-row input[type=text] { padding: 7px 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; } .user-add-login { min-width: 140px; } .user-add-pass { min-width: 220px; } .user-add-admin-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); } .user-add-btn, .user-add-genpass { padding: 7px 14px; font-size: 13px; background: var(--accent); color: #061018; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-family: inherit; } .user-add-genpass { background: var(--surface-2); color: var(--text); padding: 7px 10px; } .user-add-genpass:hover { background: var(--surface); } .user-add-btn:hover { filter: brightness(1.1); } .user-add-status { font-size: 12px; color: var(--text-dim); } .user-add-status.success { color: #40c880; } .user-add-status.error { color: #ff6b6b; } .users-list { display: flex; flex-direction: column; gap: 6px; } .users-empty, .users-loading { padding: 14px; text-align: center; color: var(--text-dim); font-size: 13px; } .user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; } .user-row-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .user-row-login { font-weight: 600; font-size: 13px; } .user-row-badge { padding: 1px 7px; font-size: 10px; background: rgba(255, 185, 85, 0.18); color: #ffb955; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; } .user-row-meta { font-size: 11px; color: var(--text-dim); } .user-row-meta.dim { opacity: 0.6; } .user-row-lastseen-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; border-radius: 4px; border: 1px solid transparent; } .user-row-lastseen-pill.fresh { background: rgba(105, 221, 135, 0.14); color: #6abf78; border-color: rgba(105, 221, 135, 0.35); } .user-row-lastseen-pill.recent { background: rgba(79, 195, 247, 0.12); color: #4fc3f7; border-color: rgba(79, 195, 247, 0.32); } .user-row-lastseen-pill.idle { background: rgba(138, 149, 163, 0.12); color: #a8b1bd; border-color: rgba(138, 149, 163, 0.28); } .user-row-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .user-pass-input { padding: 5px 8px; font-size: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-family: inherit; min-width: 200px; } .user-row-actions button { padding: 4px 10px; font-size: 11px; background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-family: inherit; } .user-row-actions button:hover { color: var(--text); border-color: var(--accent); } .user-row-actions .user-delete:hover { color: #ff6b6b; border-color: #ff6b6b; } .user-row-actions .user-pass-save { background: var(--accent); color: #061018; border-color: var(--accent); font-weight: 600; } .user-row-actions .user-pass-save:hover { filter: brightness(1.1); color: #061018; } /* Own-password dialog — small modal opened by «Сменить пароль» button. */ .own-password-dialog { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 0; color: var(--text); width: min(360px, 90vw); } .own-password-dialog::backdrop { background: rgba(0,0,0,0.55); } .own-pass-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .own-pass-form h3 { margin: 0 0 4px; font-size: 15px; } .own-pass-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); } .own-pass-label input { padding: 8px 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; } .own-pass-status { margin: 0; font-size: 12px; color: var(--text-dim); min-height: 16px; } .own-pass-status.success { color: #40c880; } .own-pass-status.error { color: #ff6b6b; } .own-pass-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .own-pass-cancel, .own-pass-save { padding: 6px 14px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-family: inherit; } .own-pass-cancel { background: var(--surface-2); color: var(--text-dim); } .own-pass-save { background: var(--accent); color: #061018; border-color: var(--accent); font-weight: 600; } /* v0.33.18: enhanced team-select widget. Native because Windows Chrome doesn't render flag emoji and