/* ===== Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0d1117; --sidebar-bg: #161b22; --card-bg: #161b22; --card-hover: #1c2128; --border: #30363d; --border-strong: #484f58; --text: #e6edf3; --text-muted: #8b949e; --green: #238636; --green-light: #2ea043; --orange: #f78166; --red: #f85149; --yellow: #d29922; --blue: #58a6ff; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); --radius: 8px; --sidebar-width: 260px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'SF Mono', 'Fira Code', 'Courier New', monospace; color-scheme: dark; } /* ===== Light theme override ===== Applied when . All UI reads from these variables, so no component-level rules need to know about themes. */ :root[data-theme="light"] { --bg: #ffffff; --sidebar-bg: #f6f8fa; --card-bg: #ffffff; --card-hover: #f6f8fa; --border: #d0d7de; --border-strong: #afb8c1; --text: #1f2328; --text-muted: #656d76; --green: #1a7f37; --green-light: #2da44e; --orange: #bc4c00; --red: #cf222e; --yellow: #9a6700; --blue: #0969da; --shadow-sm: 0 1px 2px rgba(31,35,40,0.08); --shadow-md: 0 3px 10px rgba(31,35,40,0.10); --shadow-lg: 0 8px 24px rgba(140,149,159,0.20); color-scheme: light; } /* ─── Light theme overrides for hardcoded dark values ─── */ /* Banner (top notification bar) */ :root[data-theme="light"] .banner { background: linear-gradient(90deg, #f0f3f6, #f6f8fa); } /* Tour tip — force correct colors per theme (inline styles don't respond to theme) */ :root[data-theme="light"] .tour-tip { background: #fff !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: 0 12px 32px rgba(31,35,40,0.12) !important; } /* Tooltip */ :root[data-theme="light"] .tooltip { background: var(--card-bg); box-shadow: var(--shadow-md); color: var(--text); border-color: var(--border); } /* Toasts */ /* Toast light overrides moved to comprehensive block below */ /* Dialog */ :root[data-theme="light"] .ui-dialog { background: var(--card-bg); border-color: var(--border); box-shadow: var(--shadow-lg); } :root[data-theme="light"] .ui-dialog__head { border-bottom-color: var(--border); } :root[data-theme="light"] .ui-dialog__title { color: var(--text); } :root[data-theme="light"] .ui-dialog__close { color: var(--text-muted); } :root[data-theme="light"] .ui-dialog__close:hover { color: var(--text); } :root[data-theme="light"] .ui-dialog__body { color: var(--text); } :root[data-theme="light"] .ui-dialog__foot { border-top-color: var(--border); background: var(--sidebar-bg); } :root[data-theme="light"] .ui-dialog-backdrop { background: rgba(31, 35, 40, 0.4); } /* Noscript */ :root[data-theme="light"] .noscript-notice { background: var(--bg); } :root[data-theme="light"] .noscript-inner { background: var(--card-bg); border-color: var(--border); color: var(--text-muted); box-shadow: var(--shadow-lg); } :root[data-theme="light"] .noscript-inner strong { color: var(--text); } /* Initial skeleton */ :root[data-theme="light"] .initial-skeleton { background: var(--bg); } :root[data-theme="light"] .skeleton-sidebar { border-right-color: var(--border); } :root[data-theme="light"] .skel { background: linear-gradient(90deg, var(--sidebar-bg) 25%, var(--card-hover) 50%, var(--sidebar-bg) 75%); background-size: 200% 100%; } /* Player modal */ :root[data-theme="light"] .player-modal-close:hover { background: rgba(0,0,0,0.06); } :root[data-theme="light"] .player-modal-body { box-shadow: var(--shadow-lg); } :root[data-theme="light"] .player-modal-backdrop { background: rgba(0, 0, 0, 0.3); } /* Hero section */ :root[data-theme="light"] .hero { background: linear-gradient(180deg, #f0f3f6 0%, var(--bg) 100%); } :root[data-theme="light"] .hero-dismiss:hover { background: rgba(0,0,0,0.06); } :root[data-theme="light"] .hero-eyebrow { background: rgba(255,255,255,0.7); border-color: var(--border); color: var(--text-muted); } :root[data-theme="light"] .hero-chip { background: rgba(255,255,255,0.75); border-color: var(--border); color: var(--text); } :root[data-theme="light"] .hero-chip svg { color: var(--green); } :root[data-theme="light"] .hero-cta--primary { background: var(--green); color: #fff; border-color: var(--green); } :root[data-theme="light"] .hero-cta--ghost { background: rgba(255,255,255,0.7); color: var(--text); border-color: var(--border); } :root[data-theme="light"] .hero-cta--ghost:hover { background: rgba(0,0,0,0.04); border-color: #9ca3af; } /* Topbar breadcrumb */ :root[data-theme="light"] .topbar-breadcrumb { background: linear-gradient(90deg, var(--sidebar-bg), var(--bg)); } /* ── Comprehensive light theme overrides ── */ :root[data-theme="light"] .sidebar { color: var(--text); } /* Sidebar nav items */ :root[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.06); } :root[data-theme="light"] .nav-item.active { background: rgba(26,127,55,0.1); } :root[data-theme="light"] .club-card { background: rgba(0,0,0,0.02); } /* Toast / "Update available" popup */ :root[data-theme="light"] .ui-toast { background: #fff; border-color: var(--border); box-shadow: 0 8px 24px rgba(31,35,40,0.12); } :root[data-theme="light"] .ui-toast__body, :root[data-theme="light"] .ui-toast__title { color: var(--text); } :root[data-theme="light"] .ui-toast__msg { color: var(--text-muted); } :root[data-theme="light"] .ui-toast__close { color: var(--text-muted); } :root[data-theme="light"] .ui-toast__action { color: var(--blue); border-color: var(--border); } :root[data-theme="light"] .ui-toast__action:hover { background: var(--blue); color: #fff; border-color: var(--blue); } :root[data-theme="light"] .ui-toast__action--primary { background: var(--blue); color: #fff; border-color: var(--blue); } :root[data-theme="light"] .ui-toast__action--primary:hover { filter: brightness(1.1); } :root[data-theme="light"] .ui-toast__close:hover { color: var(--text); } /* Data tables — text must be dark */ :root[data-theme="light"] .data-table td { color: var(--text); } :root[data-theme="light"] .data-table tbody tr:hover { background: rgba(0,0,0,0.03); } :root[data-theme="light"] .rating-high { color: var(--green); } :root[data-theme="light"] .rating-mid { color: var(--yellow); } :root[data-theme="light"] .rating-low { color: var(--red); } /* Card text and backgrounds */ :root[data-theme="light"] .card { color: var(--text); } :root[data-theme="light"] .card-header h2 { color: var(--text); } :root[data-theme="light"] .proof-card { color: var(--text); } :root[data-theme="light"] .proof-card h3 { color: var(--text); } :root[data-theme="light"] .proof-card-hint { color: var(--text-muted); } /* Match timeline */ :root[data-theme="light"] .match-row { color: var(--text); } :root[data-theme="light"] .match-row:hover { background: rgba(0,0,0,0.03); } /* Chat bubbles */ :root[data-theme="light"] .chat-bubble { color: var(--text); } :root[data-theme="light"] .chat-msg.assistant .chat-bubble { background: rgba(0,0,0,0.04); color: var(--text); } :root[data-theme="light"] .chat-msg.user .chat-bubble { background: var(--green); color: #fff; } /* Player cards */ :root[data-theme="light"] .player-card { color: var(--text); } :root[data-theme="light"] .player-card:hover { background: rgba(0,0,0,0.04); } /* Suggestions */ :root[data-theme="light"] .suggestion-card { color: var(--text); } /* Pipeline steps */ :root[data-theme="light"] .pipeline-name { color: var(--green); } /* E2E badge, routing indicator */ :root[data-theme="light"] .chat-routing-indicator { color: var(--text-muted); } :root[data-theme="light"] .chat-e2e-indicator { color: var(--green); } /* Marketplace light */ :root[data-theme="light"] .marketplace-wallet { background: rgba(0,0,0,0.02); } :root[data-theme="light"] .marketplace-sell-section { background: rgba(0,0,0,0.01); } :root[data-theme="light"] .marketplace-honest-note code { background: rgba(0,0,0,0.06); } /* Distribute cards */ :root[data-theme="light"] .distribute-card, :root[data-theme="light"] .collab-card { color: var(--text); } /* Compare panel */ :root[data-theme="light"] .compare-label { color: var(--text); } :root[data-theme="light"] .compare-text { color: var(--text); } /* Delegate, crypto, sync */ :root[data-theme="light"] .delegate-label, :root[data-theme="light"] .crypto-label, :root[data-theme="light"] .sync-time { color: var(--text-muted); } :root[data-theme="light"] .delegate-value, :root[data-theme="light"] .crypto-value { color: var(--text); } :root[data-theme="light"] .sync-item { color: var(--text); } /* OCR/Footage cards */ :root[data-theme="light"] .ocr-drop-zone, :root[data-theme="light"] .footage-upload { border-color: var(--border); color: var(--text-muted); } :root[data-theme="light"] .ocr-result { background: rgba(0,0,0,0.03); } :root[data-theme="light"] .ocr-text { color: var(--text); } /* All selectboxes/dropdowns unified */ :root[data-theme="light"] select, :root[data-theme="light"] .role-dropdown, :root[data-theme="light"] .config-dropdown, :root[data-theme="light"] .chat-lang-select { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 6px; appearance: auto; } :root[data-theme="light"] select:hover, :root[data-theme="light"] .role-dropdown:hover, :root[data-theme="light"] .config-dropdown:hover { border-color: var(--border-strong); } /* Role/config selectors */ :root[data-theme="light"] .role-selector, :root[data-theme="light"] .config-selector { background: rgba(0,0,0,0.03); } /* Tooltips in light */ :root[data-theme="light"] [data-tooltip]:hover::after { color: #fff; } /* Generic rgba(255,255,255,...) backgrounds become rgba(0,0,0,...) */ :root[data-theme="light"] .voice-btn:hover { background: rgba(26,127,55,0.08); } /* Kbd help modal */ :root[data-theme="light"] .kbd-help-content { background: #fff; color: var(--text); } /* Scrollbar */ :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); } :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); } /* Catch-all: any element with rgba(255,255,255,…) background needs inversion */ :root[data-theme="light"] .player-card, :root[data-theme="light"] .opponent-card, :root[data-theme="light"] .suggestion-card, :root[data-theme="light"] .season-metric, :root[data-theme="light"] .loss-scrubber-bar, :root[data-theme="light"] .hypercore-card, :root[data-theme="light"] .chart-bar-inner, :root[data-theme="light"] .player-modal-close:hover, :root[data-theme="light"] .bottom-nav .nav-item:hover, :root[data-theme="light"] .match-row:hover, :root[data-theme="light"] .player-modal-stat, :root[data-theme="light"] .proof-card { background: rgba(0,0,0,0.03); } :root[data-theme="light"] .player-card:hover, :root[data-theme="light"] .opponent-card:hover, :root[data-theme="light"] .suggestion-card:hover, :root[data-theme="light"] .hypercore-card:hover { background: rgba(0,0,0,0.06); } /* Hardcoded dark text colors → dark theme vars */ :root[data-theme="light"] .season-metric-label { color: var(--text-muted); } :root[data-theme="light"] .season-metric-value { color: var(--text); } :root[data-theme="light"] .player-card-name { color: var(--text); } :root[data-theme="light"] .player-card-pos { color: var(--text-muted); } :root[data-theme="light"] .opponent-name { color: var(--text); } :root[data-theme="light"] .opponent-formation { color: var(--text-muted); } :root[data-theme="light"] .suggestion-title { color: var(--text); } :root[data-theme="light"] .suggestion-detail { color: var(--text-muted); } :root[data-theme="light"] .match-opponent { color: var(--text); } :root[data-theme="light"] .match-result { color: var(--text); } :root[data-theme="light"] .match-stat { color: var(--text-muted); } :root[data-theme="light"] .hypercore-meta-item { color: var(--text-muted); } :root[data-theme="light"] .hypercore-type { color: var(--text-muted); } :root[data-theme="light"] .chart-label { color: var(--text-muted); } :root[data-theme="light"] .loss-value { color: var(--text); } :root[data-theme="light"] .kaggle-chip-label { color: var(--text-muted); } :root[data-theme="light"] .data-badge { color: var(--green); } :root[data-theme="light"] .data-badge--honest { color: var(--yellow); } :root[data-theme="light"] .proof-card h3 { color: var(--text); } /* Player modal */ :root[data-theme="light"] .player-modal-body { background: #fff; color: var(--text); } :root[data-theme="light"] .player-modal-name { color: var(--text); } :root[data-theme="light"] .player-modal-pos { color: var(--text-muted); } :root[data-theme="light"] .player-modal-stat-label { color: var(--text-muted); } :root[data-theme="light"] .player-modal-stat-value { color: var(--text); } :root[data-theme="light"] .player-modal-stat { background: rgba(0,0,0,0.03); border-color: var(--border); } /* Chat input */ :root[data-theme="light"] .chat-input-wrap { background: #fff; border-color: var(--border); } :root[data-theme="light"] .chat-input { color: var(--text); } :root[data-theme="light"] .chat-send-btn { color: #fff; background: var(--green); } /* Chat page — buttons and badges */ :root[data-theme="light"] .chat-suggestion-btn { background: rgba(0,0,0,0.03); color: var(--text-muted); border-color: var(--border); } :root[data-theme="light"] .chat-suggestion-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); } :root[data-theme="light"] .chat-compare-btn { color: var(--text-muted); border-color: var(--border); } :root[data-theme="light"] .chat-compare-btn:hover { background: rgba(35,134,54,0.06); } :root[data-theme="light"] .voice-btn { color: var(--text-muted); } :root[data-theme="light"] .chat-sig-badge { background: rgba(35,134,54,0.08); color: var(--green); } :root[data-theme="light"] .chat-sig-badge:hover { background: rgba(35,134,54,0.14); } :root[data-theme="light"] .chat-sig-panel { background: #fff; border-color: var(--border); box-shadow: 0 12px 32px rgba(31,35,40,0.12); color: var(--text); } :root[data-theme="light"] .data-badge { border-color: rgba(46,160,67,0.25); } :root[data-theme="light"] .data-badge--real { color: var(--green); background: rgba(46,160,67,0.08); } :root[data-theme="light"] .data-badge--example, :root[data-theme="light"] .data-badge--mock, :root[data-theme="light"] .data-badge--preview { color: #9a6700; background: rgba(154,103,0,0.08); border-color: rgba(154,103,0,0.25); } :root[data-theme="light"] .priority-badge.high { background: rgba(248,81,73,0.08); } :root[data-theme="light"] .priority-badge.medium { background: rgba(210,153,34,0.08); } :root[data-theme="light"] .priority-badge.low { background: rgba(35,134,54,0.08); } /* Sidebar footer, club card */ :root[data-theme="light"] .sidebar-footer { border-top-color: var(--border); } :root[data-theme="light"] .club-info { color: var(--text); } :root[data-theme="light"] .club-stat { color: var(--text-muted); } /* Team switcher */ :root[data-theme="light"] .team-switcher-trigger { background: #fff; border-color: var(--border); } :root[data-theme="light"] .team-switcher-trigger:hover { background: rgba(0,0,0,0.03); } :root[data-theme="light"] .team-switcher-root.is-open .team-switcher-trigger { background: rgba(0,0,0,0.03); } :root[data-theme="light"] .team-switcher-name { color: var(--text); } :root[data-theme="light"] .team-switcher-meta { color: var(--text-muted); } :root[data-theme="light"] .team-switcher-role { color: var(--text-muted); } :root[data-theme="light"] .team-switcher-menu { background: #fff; border-color: var(--border); box-shadow: 0 12px 32px rgba(31,35,40,0.12); } :root[data-theme="light"] .team-switcher-item:hover, :root[data-theme="light"] .team-switcher-item.is-active { background: rgba(0,0,0,0.04); } :root[data-theme="light"] .team-switcher-divider { background: var(--border); } :root[data-theme="light"] .team-switcher-action { color: var(--text); } :root[data-theme="light"] .team-switcher-action:hover { background: rgba(0,0,0,0.04); color: var(--green); } :root[data-theme="light"] .team-switcher-info { color: var(--text); } /* Hypercore log */ :root[data-theme="light"] .hypercore-log { background: #fafbfc; border-color: var(--border); } :root[data-theme="light"] .hypercore-entry { border-top-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .hypercore-entry:hover { background: rgba(0,0,0,0.03); } :root[data-theme="light"] .hypercore-entry--head { background: linear-gradient(90deg, rgba(88,166,255,0.08), transparent); border-left-color: rgba(88,166,255,0.5); } :root[data-theme="light"] .hypercore-entry-content { color: var(--text); } :root[data-theme="light"] .hypercore-entry-head { color: var(--text); } :root[data-theme="light"] .hypercore-seq { color: var(--text-muted); } :root[data-theme="light"] .hypercore-role { color: var(--text-muted); } :root[data-theme="light"] .hypercore-time { color: var(--text-muted); } :root[data-theme="light"] .hypercore-type { background: rgba(0,0,0,0.04); color: var(--text-muted); border-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .hypercore-type--init { color: #7c3aed; background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.25); } :root[data-theme="light"] .hypercore-type--ingest { color: #059669; background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.25); } :root[data-theme="light"] .hypercore-type--decision { color: #2563eb; background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.25); } :root[data-theme="light"] .hypercore-type--observation { color: #d97706; background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.25); } :root[data-theme="light"] .hypercore-type--revert { color: #dc2626; background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.25); } :root[data-theme="light"] .hypercore-entry-meta { color: var(--text-muted); } :root[data-theme="light"] .hypercore-meta-item code { color: var(--text); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .hypercore-entry-marker { color: var(--text-muted); } :root[data-theme="light"] .hypercore-dot { background: var(--text-muted); } :root[data-theme="light"] .hypercore-entry--head .hypercore-dot { background: var(--blue); } :root[data-theme="light"] .hypercore-legend { color: var(--text-muted); } /* Loss scrubber */ :root[data-theme="light"] .loss-scrubber { background: linear-gradient(135deg, rgba(88,166,255,0.04), rgba(63,185,80,0.03)); } :root[data-theme="light"] .loss-scrubber::before { background: radial-gradient(circle at 20% 30%, rgba(88,166,255,0.04), transparent 50%); } :root[data-theme="light"] .loss-scrubber-header { color: var(--text-muted); } :root[data-theme="light"] .loss-value { color: var(--text); } :root[data-theme="light"] .loss-scrubber-bar { background: rgba(0,0,0,0.06); } /* Marketplace indent fix */ :root[data-theme="light"] .marketplace-wallet { padding-left: 20px; } /* Match history — constrain width (both themes) */ /* UI Dialog (modals) */ :root[data-theme="light"] .ui-dialog__panel { background: #fff; border-color: var(--border); box-shadow: 0 8px 24px rgba(31,35,40,0.15); } :root[data-theme="light"] .ui-dialog__head { border-bottom-color: var(--border); } :root[data-theme="light"] .ui-dialog__title { color: var(--text); } :root[data-theme="light"] .ui-dialog__close { color: var(--text-muted); } :root[data-theme="light"] .ui-dialog__close:hover { color: var(--text); } :root[data-theme="light"] .ui-dialog__body { color: var(--text); } :root[data-theme="light"] .ui-dialog__footer { border-top-color: var(--border); } :root[data-theme="light"] .ui-dialog__btn { background: #fff; color: var(--text); border-color: var(--border); } :root[data-theme="light"] .ui-dialog__btn:hover { background: var(--card-hover); } :root[data-theme="light"] .ui-dialog__btn--primary { background: var(--green); color: #fff; border-color: var(--green); } :root[data-theme="light"] .ui-dialog__btn--primary:hover { filter: brightness(1.1); } /* Kbd shortcuts help */ :root[data-theme="light"] .kbd-help-content { background: #fff; color: var(--text); border-color: var(--border); } :root[data-theme="light"] .kbd-help-content h2, :root[data-theme="light"] .kbd-help-content td { color: var(--text); } :root[data-theme="light"] .kbd-help-content th { color: var(--text-muted); } /* Hypercore log sections */ :root[data-theme="light"] .hypercore-head { color: var(--text); } :root[data-theme="light"] .hypercore-head-meta code { color: var(--text); } /* Loss scrubber, charts */ :root[data-theme="light"] .loss-scrubber { color: var(--text); } /* Sortable table headers */ :root[data-theme="light"] .data-table thead th.sortable-th { color: var(--text-muted); } :root[data-theme="light"] .data-table thead th.sortable-th:hover { color: var(--text); } /* Noscript */ :root[data-theme="light"] .noscript-inner { color: var(--text); } :root[data-theme="light"] .noscript-inner strong { color: var(--text); } /* Bottom nav (mobile) */ :root[data-theme="light"] .bottom-nav { background: #fff; border-top-color: var(--border); } :root[data-theme="light"] .bottom-nav .nav-item { color: var(--text-muted); } :root[data-theme="light"] .bottom-nav .nav-item.active { color: var(--green); } /* ── Marketplace ── */ .marketplace-wallet { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; } .marketplace-wallet-header { display: flex; align-items: center; gap: 12px; } .marketplace-wallet-icon { font-size: 28px; } .marketplace-wallet-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .marketplace-wallet-addr { font-family: ui-monospace, monospace; font-size: 13px; color: var(--text); } .marketplace-wallet-balance { margin-left: auto; font-size: 20px; font-weight: 700; color: var(--green); } .marketplace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; } .marketplace-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: border-color 0.15s, transform 0.15s; } .marketplace-card:hover { border-color: var(--green); transform: translateY(-2px); } .marketplace-card-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px; background: rgba(35,134,54,0.12); color: var(--green); margin-bottom: 8px; } .marketplace-card-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .marketplace-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; } .marketplace-card-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 12px; } .marketplace-card-footer { display: flex; align-items: center; justify-content: space-between; } .marketplace-price { font-size: 18px; font-weight: 700; color: var(--orange); } .marketplace-buy-btn { background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-weight: 600; cursor: pointer; transition: filter 0.15s; } .marketplace-buy-btn:hover { filter: brightness(1.1); } .marketplace-sell-section { background: rgba(255,255,255,0.02); border: 1px dashed var(--border); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 20px; } .marketplace-sell-section h3 { color: var(--text); margin-bottom: 6px; } .marketplace-sell-section p { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .marketplace-sell-btn { background: transparent; border: 1px solid var(--green); color: var(--green); border-radius: 8px; padding: 8px 24px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .marketplace-sell-btn:hover { background: var(--green); color: #fff; } .marketplace-honest-note { font-size: 12px; color: var(--text-muted); background: rgba(210,153,34,0.06); border: 1px solid rgba(210,153,34,0.2); border-radius: 8px; padding: 12px 16px; line-height: 1.5; } .marketplace-honest-note strong { color: var(--yellow); } .marketplace-honest-note code { font-size: 11px; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; } /* ── Voice button ── */ .voice-btn { background: none; border: none; color: var(--text-secondary, #8b949e); cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: all 0.15s; display: flex; align-items: center; } .voice-btn:hover { color: var(--green); background: rgba(35,134,54,0.1); } .voice-btn.listening { color: #f85149; animation: voicePulse 1s infinite; } @keyframes voicePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* ── Role selector ── */ .role-selector { margin: 8px 0; padding: 6px 8px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center; gap: 8px; overflow: hidden; min-width: 0; } .role-label { font-size: 0.8rem; color: var(--text-secondary, #8b949e); white-space: nowrap; } #role-badge { color: var(--green); font-weight: 600; text-transform: capitalize; } .role-dropdown { background: var(--bg-card, #161b22); color: var(--text-primary, #f0f6fc); border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 3px 6px; font-size: 0.78rem; cursor: pointer; flex: 1; min-width: 0; max-width: 100%; } [data-theme="light"] .role-selector { background: rgba(0,0,0,0.04); } [data-theme="light"] .role-dropdown { background: #fff; color: #1f2328; border-color: #d0d7de; } /* ── Streaming cursor ── */ .streaming-cursor { animation: blink 0.6s infinite; color: var(--green); } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* ── Tab transitions ── */ .tab-content { animation: tabFadeIn 0.25s ease-out; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Mobile responsive ── */ @media (max-width: 768px) { .sidebar { display: none; } .main-content { margin-left: 0 !important; } .compare-split { flex-direction: column; } .marketplace-grid { grid-template-columns: 1fr; } .tab-header h2 { font-size: 1.2rem; } .chat-bubble { max-width: 95%; } } /* ── Chat routing + E2E indicators ── */ .chat-routing-indicator, .chat-e2e-indicator { font-size: 0.72rem; color: var(--text-secondary, #8b949e); display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; } .chat-e2e-indicator { color: var(--green); } /* ── Language selector ── */ .chat-lang-select { background: var(--bg-card, #161b22); color: var(--text-secondary, #8b949e); border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 2px 4px; font-size: 0.75rem; cursor: pointer; } [data-theme="light"] .chat-lang-select { background: #fff; color: #1f2328; border-color: #d0d7de; } /* ── OCR + Footage cards ── */ .ocr-drop-zone, .footage-upload { border: 2px dashed var(--border, #30363d); border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-secondary, #8b949e); } .ocr-drop-zone:hover, .footage-upload:hover { border-color: var(--green); } .ocr-result { margin-top: 12px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; } .ocr-text { font-family: monospace; font-size: 0.85rem; white-space: pre-wrap; margin-bottom: 8px; } /* ── Team Sync ── */ .sync-status-grid { display: flex; flex-direction: column; gap: 8px; } .sync-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; } .sync-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sync-dot--ok { background: var(--green); } .sync-dot--pending { background: var(--orange, #f78166); animation: voicePulse 1.5s infinite; } .sync-time { margin-left: auto; color: var(--text-secondary, #8b949e); font-size: 0.75rem; } /* ── Delegate ── */ .delegate-status { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .delegate-row { display: flex; justify-content: space-between; font-size: 0.85rem; } .delegate-label { color: var(--text-secondary, #8b949e); } .delegate-toggle { width: 100%; } /* ── Crypto card ── */ .crypto-details { display: flex; flex-direction: column; gap: 6px; } .crypto-row { display: flex; justify-content: space-between; font-size: 0.85rem; } .crypto-label { color: var(--text-secondary, #8b949e); } /* ── Pipeline flow ── */ .pipeline-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; } .pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 8px; min-width: 100px; } .pipeline-icon { font-size: 1.2rem; } .pipeline-name { font-size: 0.78rem; font-weight: 600; color: var(--green); } .pipeline-desc { font-size: 0.7rem; color: var(--text-secondary, #8b949e); } .pipeline-arrow { font-size: 1.2rem; color: var(--text-secondary, #8b949e); } [data-theme="light"] .pipeline-step { background: rgba(0,0,0,0.04); } /* ── Config selector ── */ .config-selector { margin: 4px 0; padding: 4px 8px; display: flex; align-items: center; gap: 8px; } .config-label { font-size: 0.8rem; color: var(--text-secondary, #8b949e); white-space: nowrap; } .config-dropdown { background: var(--bg-card, #161b22); color: var(--text-primary, #f0f6fc); border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 3px 6px; font-size: 0.78rem; cursor: pointer; flex: 1; } [data-theme="light"] .config-dropdown { background: #fff; color: #1f2328; border-color: #d0d7de; } /* ── Eval table ── */ .eval-table td:last-child { color: var(--green); font-weight: 600; } /* ── SVG Tactical Pitch ── */ .pitch-wrapper { overflow: hidden; border-radius: 8px; max-width: 680px; margin: 0 auto; } .pitch-svg { width: 100%; height: auto; display: block; } .pitch-player { cursor: pointer; transition: transform 0.2s; } .pitch-player:hover { transform: scale(1.15); } .pitch-player-circle { stroke-width: 2; } .pitch-player-label { font-size: 10px; fill: #fff; text-anchor: middle; dominant-baseline: central; font-weight: 600; pointer-events: none; } .pitch-player-name { font-size: 8px; fill: rgba(255,255,255,0.7); text-anchor: middle; pointer-events: none; } .pitch-legend { display: flex; gap: 12px; justify-content: center; margin-top: 8px; } .pitch-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--text-secondary, #8b949e); } .pitch-dot { width: 10px; height: 10px; border-radius: 50%; } .pitch-dot--gk { background: #f78166; } .pitch-dot--def { background: #58a6ff; } .pitch-dot--mid { background: #238636; } .pitch-dot--fwd { background: #d29922; } .pitch-arrow { stroke: rgba(255,255,255,0.15); stroke-width: 1.5; fill: none; marker-end: url(#arrowhead); } /* ── Before/After Compare ── */ .compare-split { display: flex; gap: 12px; width: 100%; } .compare-col { flex: 1; padding: 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); } .compare-vanilla { border-color: #f85149; } .compare-tuned { border-color: var(--green); } .compare-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .compare-vanilla .compare-label { color: #f85149; } .compare-tuned .compare-label { color: var(--green); } .compare-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: var(--text); } .chat-compare-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 16px; transition: all 0.15s; margin-right: 4px; } .chat-compare-btn:hover { border-color: var(--green); color: var(--green); background: rgba(35,134,54,0.08); } :root[data-theme="light"] .compare-col { background: rgba(0,0,0,0.02); } /* Dialog buttons */ :root[data-theme="light"] .ui-dialog__btn { background: var(--sidebar-bg); color: var(--text); border-color: var(--border); } :root[data-theme="light"] .ui-dialog__btn:hover { background: var(--card-hover); } :root[data-theme="light"] .ui-dialog__foot { border-top-color: var(--border); background: var(--sidebar-bg); } /* Data table */ :root[data-theme="light"] .data-table thead th.sortable-th:hover { color: var(--text); } /* Kaggle / proof chips */ :root[data-theme="light"] .kaggle-chip { background: var(--sidebar-bg); border-color: var(--border); } :root[data-theme="light"] .kaggle-chip:hover { border-color: var(--border-strong); } :root[data-theme="light"] .kaggle-chip-value { color: var(--text); } /* Hypercore type badges */ :root[data-theme="light"] .hypercore-type { color: var(--text-muted); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .hypercore-meta-item code { color: var(--text); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); } /* Banner text contrast */ :root[data-theme="light"] .banner a { color: var(--blue); } :root[data-theme="light"] .banner code { background: rgba(0,0,0,0.06); color: var(--text); } /* Respect reduced-motion — disables all transitions/animations globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html { font-size: 15px; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.25s ease, color 0.25s ease; } /* Smooth colour transitions on theme swap for surfaces & borders */ .sidebar, .topbar, .card, .chip, .match-card, .report-card, .chat-panel, .chat-input-row, .chat-input, input, select, textarea, button, .stat-chip, .badge { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.2s ease; } /* ===== Entrance animations ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } /* Apply entrance animation to freshly-mounted view containers */ .view.enter, .tab-content.enter { animation: fadeInUp 0.28s ease-out both; } .card.enter, .stat-chip.enter { animation: fadeInUp 0.32s ease-out both; } /* Chip/badge hover polish */ .hero-chip, .chip, .stat-chip, .badge, .data-badge { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .hero-chip:hover, .chip:hover { transform: translateY(-1px); } /* Sidebar nav items */ .nav-item { transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease; } .nav-item:hover { transform: translateX(2px); } /* Stagger children by adding CSS custom property --delay (px → ms) */ .enter-stagger > * { animation: fadeInUp 0.4s ease-out both; animation-delay: calc(var(--i, 0) * 50ms); } /* ===== Theme toggle button ===== */ .sidebar-header-actions { display: flex; align-items: center; gap: 4px; } .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-muted); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; padding: 0; flex-shrink: 0; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--card-hover); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.96); } .theme-toggle .theme-icon-light, .theme-toggle .theme-icon-dark { transition: transform 0.3s ease, opacity 0.2s ease; } :root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } :root[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; } .theme-toggle--mobile { border: none; background: transparent; } .theme-toggle--mobile:hover { background: var(--card-hover); } /* ===== Keyboard-shortcuts help modal ===== */ .kbd-help-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .kbd-help-backdrop.open { opacity: 1; pointer-events: auto; } :root[data-theme="light"] .kbd-help-backdrop { background: rgba(31, 35, 40, 0.35); } .kbd-help-inner { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px; min-width: 320px; max-width: 480px; box-shadow: var(--shadow-lg); animation: fadeInUp 0.22s ease-out both; position: relative; } .kbd-help-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .kbd-help-close:hover { color: var(--text); background: rgba(128,128,128,0.15); } .kbd-help-title { font-size: 1.15rem; margin: 0 0 16px 0; color: var(--text); } .kbd-help-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .kbd-help-table td { padding: 7px 4px; vertical-align: middle; border-bottom: 1px solid var(--border); } .kbd-help-table tr:last-child td { border-bottom: none; } .kbd-help-table td:first-child { width: 130px; white-space: nowrap; } .kbd-help-table td:last-child { color: var(--text-muted); } .kbd-help-footnote { margin-top: 14px; font-size: 0.78rem; color: var(--text-muted); } kbd { display: inline-block; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border); background: var(--card-hover); color: var(--text); font-family: var(--mono); font-size: 0.78rem; line-height: 1.4; box-shadow: 0 1px 0 var(--border); min-width: 20px; text-align: center; } :root[data-theme="light"] kbd { background: #f6f8fa; color: #1f2328; } .kbd-help-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 8px 12px; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 0.82rem; cursor: pointer; transition: all 0.2s ease; } .kbd-help-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--card-hover); } /* ===== Banner ===== */ .banner { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(90deg, #1a1f2e, #161b22); border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--text-muted); position: sticky; top: 0; z-index: 100; } .banner-icon { color: var(--orange); flex-shrink: 0; } .banner span { flex: 1; } .banner strong { color: var(--text); } .banner-link { display: flex; align-items: center; gap: 4px; color: var(--blue); text-decoration: none; white-space: nowrap; transition: color 0.15s; } .banner-link:hover { color: var(--orange); } .banner-close { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 0 4px; line-height: 1; } .banner-close:hover { color: var(--text); } /* ===== App Shell ===== --banner-height tracks the sticky banner at the top of the page. JS sets it to 0px when the user closes the banner, which lets the sidebar and topbar snap flush to the viewport edge instead of leaving a phantom 37px gap. */ :root { --banner-height: 37px; --topbar-height: 52px; } .app-shell { display: flex; min-height: calc(100vh - var(--banner-height)); } /* ===== Sidebar ===== */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: var(--banner-height); height: calc(100vh - var(--banner-height)); overflow-y: auto; transition: transform 0.25s ease; z-index: 50; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); } .logo { display: flex; align-items: center; gap: 10px; cursor: pointer; } .logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.5px; } .sidebar-close-mobile { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; } .nav-list { display: flex; flex-direction: column; padding: 8px; gap: 2px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; transition: all 0.15s; text-decoration: none; font-size: 0.9rem; font-weight: 500; } .nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text); } .nav-item.active { background: rgba(35, 134, 54, 0.15); color: var(--green-light); } .nav-item svg { flex-shrink: 0; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border); } .club-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; } .club-name { font-weight: 700; font-size: 0.95rem; } .club-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; } .coach-name { font-size: 0.8rem; color: var(--orange); margin-top: 4px; } .status-row { display: flex; flex-direction: column; gap: 6px; } .status-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-muted); } .status-item svg { flex-shrink: 0; } /* ===== Overlay ===== */ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 40; } .overlay.active { display: block; } /* ===== Main Content ===== */ .main-content { flex: 1; min-width: 0; padding: 24px; padding-bottom: 80px; overflow-x: hidden; } /* Cap over-wide layouts on ultra-wide monitors while still filling the frame. */ .tab-content { max-width: 1600px; margin: 0 auto; } .mobile-topbar { display: none; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(22, 27, 34, 0.92); border-bottom: 1px solid var(--border); /* Fixed positioning (rather than sticky-in-flex-child) so the topbar genuinely pins to the viewport edge on scroll instead of scrolling away with .main-content. Offset by --banner-height so it sits directly below the announcement banner when present, and flush to the top when the user closes it. */ position: fixed; top: var(--banner-height); left: 0; right: 0; z-index: 90; /* Slight blur so tab content shows through subtly on scroll. */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hamburger { background: none; border: none; color: var(--text); cursor: pointer; padding: 4px; } .mobile-logo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1rem; } /* ===== Tab Content ===== */ .tab-content { display: none; } .tab-content.active { display: block; animation: fadeIn 0.2s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .tab-header { margin-bottom: 20px; } .tab-title { display: flex; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 700; } .title-icon { color: var(--orange); } .tab-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; margin-left: 0; } /* ===== Cards ===== */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; /* CSS Grid/Flex items default to min-width:auto, which lets a card's content (long text rows, SVGs, etc.) force it wider than its track and overflow the viewport on narrow screens. min-width:0 lets it shrink and wrap/scroll internally instead. */ min-width: 0; } .card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .card-header svg { color: var(--orange); flex-shrink: 0; } .card-header h2 { font-size: 1rem; font-weight: 600; } /* ===== Analytics Grid ===== */ .analytics-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* ===== Season Summary ===== */ .season-record { display: flex; gap: 12px; margin-bottom: 16px; } .record-item { flex: 1; text-align: center; padding: 12px 8px; border-radius: var(--radius); border: 1px solid var(--border); } .record-item.win { border-color: rgba(35,134,54,0.4); background: rgba(35,134,54,0.08); } .record-item.draw { border-color: rgba(210,153,34,0.4); background: rgba(210,153,34,0.08); } .record-item.loss { border-color: rgba(248,81,73,0.4); background: rgba(248,81,73,0.08); } .record-num { display: block; font-size: 1.8rem; font-weight: 800; } .record-item.win .record-num { color: var(--green-light); } .record-item.draw .record-num { color: var(--yellow); } .record-item.loss .record-num { color: var(--red); } .record-label { font-size: 0.75rem; color: var(--text-muted); } .season-goals { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: var(--radius); } .goals-for, .goals-against { text-align: center; } .goals-num { display: block; font-size: 1.6rem; font-weight: 800; } .goals-for .goals-num { color: var(--green-light); } .goals-against .goals-num { color: var(--red); } .goals-label { font-size: 0.75rem; color: var(--text-muted); } .goals-divider { color: var(--text-muted); font-size: 1.2rem; } .trend-list { display: flex; flex-direction: column; gap: 8px; } .trend-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; } .trend-label { font-size: 0.85rem; color: var(--text-muted); } .trend-value { font-weight: 700; font-size: 0.85rem; } .trend-value.positive { color: var(--green-light); } .trend-value.negative { color: var(--red); } /* ===== Chart ===== */ .chart-container { width: 100%; overflow-x: auto; } .chart-container svg { display: block; width: 100%; height: auto; } /* ===== Match Timeline ===== */ .match-timeline { display: flex; flex-direction: column; gap: 8px; } .match-history-card { max-width: 720px; } .match-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; border-left: 3px solid var(--border); cursor: pointer; transition: background 0.15s; } .match-row:hover { background: rgba(255,255,255,0.06); } .match-row.result-w { border-left-color: var(--green); } .match-row.result-d { border-left-color: var(--yellow); } .match-row.result-l { border-left-color: var(--red); } .match-date { font-size: 0.75rem; color: var(--text-muted); width: 80px; flex-shrink: 0; } .match-vs { flex: 1; min-width: 0; } .match-opponent { font-size: 0.85rem; font-weight: 600; } .match-venue { font-size: 0.7rem; color: var(--text-muted); } .match-score { font-weight: 800; font-size: 0.9rem; font-family: var(--mono); padding: 2px 8px; border-radius: 4px; } .result-w .match-score { color: var(--green-light); } .result-d .match-score { color: var(--yellow); } .result-l .match-score { color: var(--red); } .match-stats-mini { display: flex; gap: 10px; font-size: 0.7rem; color: var(--text-muted); font-family: var(--mono); } .match-stat-mini { white-space: nowrap; } /* ===== Data Table ===== */ .table-wrapper { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .data-table th, .data-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table th { font-weight: 600; color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; background: var(--card-bg); } .data-table td:first-child, .data-table th:first-child { text-align: left; } .data-table tbody tr:hover { background: rgba(255,255,255,0.03); } .player-name-cell { font-weight: 600; } .player-pos { color: var(--text-muted); font-size: 0.7rem; } .rating-cell { font-family: var(--mono); font-weight: 600; } .rating-high { color: var(--green-light); } .rating-mid { color: var(--yellow); } .rating-low { color: var(--red); } /* ===== Opponent Records ===== */ .opponent-records { display: flex; flex-direction: column; gap: 12px; } .opponent-item { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 12px; border-left: 3px solid var(--orange); } .opponent-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; } .opponent-formation { font-size: 0.75rem; color: var(--blue); margin-bottom: 8px; } .opponent-weaknesses { display: flex; flex-wrap: wrap; gap: 6px; } .weakness-tag { font-size: 0.7rem; padding: 3px 8px; border-radius: 12px; background: rgba(248,81,73,0.12); color: var(--red); border: 1px solid rgba(248,81,73,0.2); } /* ===== Suggestions ===== */ .suggestions-list { display: flex; flex-direction: column; gap: 16px; } .suggestion-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; border-left: 4px solid var(--border); } .suggestion-card.priority-high { border-left-color: var(--red); } .suggestion-card.priority-medium { border-left-color: var(--yellow); } .suggestion-card.priority-low { border-left-color: var(--green); } .suggestion-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .priority-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .priority-badge.high { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid rgba(248,81,73,0.3); } .priority-badge.medium { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid rgba(210,153,34,0.3); } .priority-badge.low { background: rgba(35,134,54,0.15); color: var(--green-light); border: 1px solid rgba(35,134,54,0.3); } .category-tag { font-size: 0.7rem; padding: 3px 8px; border-radius: 12px; background: rgba(88,166,255,0.12); color: var(--blue); border: 1px solid rgba(88,166,255,0.2); } .suggestion-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; } .suggestion-detail { font-size: 0.85rem; color: var(--text); margin-bottom: 10px; } .suggestion-evidence { font-size: 0.8rem; color: var(--text-muted); background: rgba(255,255,255,0.03); border-radius: 6px; padding: 10px; margin-bottom: 12px; border-left: 2px solid var(--orange); } .suggestion-evidence strong { color: var(--orange); } .suggestion-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--green); color: #fff; border: none; border-radius: var(--radius); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .suggestion-action:hover { background: var(--green-light); } /* ===== Reports ===== */ .report-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .report-selector { display: flex; align-items: center; gap: 8px; } .report-selector label { font-size: 0.85rem; color: var(--text-muted); } .report-select { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 0.85rem; cursor: pointer; font-family: var(--font); } .report-select:focus { outline: none; border-color: var(--green); } .btn-secondary, .btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-size: 0.8rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: all 0.15s; font-family: var(--font); } .btn-secondary { background: var(--card-bg); color: var(--text); } .btn-secondary:hover { border-color: var(--text-muted); } .btn-primary { background: var(--green); color: #fff; border-color: var(--green); } .btn-primary:hover { background: var(--green-light); } .report-content { display: flex; flex-direction: column; gap: 16px; } .report-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .report-section h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; margin-bottom: 10px; } .report-section h3 svg { color: var(--orange); } .report-tactical { font-size: 0.85rem; line-height: 1.6; } .report-performers { display: flex; gap: 12px; flex-wrap: wrap; } .performer-card { flex: 1; min-width: 180px; padding: 12px; border-radius: 6px; background: rgba(255,255,255,0.03); } .performer-card.top { border: 1px solid rgba(35,134,54,0.3); } .performer-card.weak { border: 1px solid rgba(248,81,73,0.3); } .performer-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .performer-name { font-size: 1rem; font-weight: 700; margin: 4px 0; } .performer-score { font-family: var(--mono); font-size: 1.2rem; font-weight: 800; } .performer-card.top .performer-score { color: var(--green-light); } .performer-card.weak .performer-score { color: var(--red); } .performer-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; } .report-recommendations { display: flex; flex-direction: column; gap: 8px; } .rec-item { display: flex; gap: 8px; font-size: 0.85rem; padding: 8px; background: rgba(255,255,255,0.03); border-radius: 6px; } .rec-bullet { color: var(--orange); flex-shrink: 0; } .season-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .stat-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 12px; text-align: center; } .stat-box-value { font-size: 1.5rem; font-weight: 800; font-family: var(--mono); } .stat-box-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; } /* ===== Chat ===== */ .chat-container { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 180px); min-height: 400px; } .chat-messages { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; gap: 12px; } .chat-msg { display: flex; gap: 10px; max-width: min(85%, 78ch); } .chat-msg.user { align-self: flex-end; flex-direction: row-reverse; } .chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(35,134,54,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green-light); } .chat-msg.user .chat-avatar { background: rgba(88,166,255,0.15); color: var(--blue); } .chat-bubble { background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 12px 16px; font-size: 0.85rem; line-height: 1.6; } .chat-msg.user .chat-bubble { background: rgba(35,134,54,0.12); } .chat-bubble p { margin-bottom: 8px; } .chat-bubble p:last-child { margin-bottom: 0; } .chat-bubble strong { color: var(--orange); } .chat-bubble .tactical-point { display: flex; gap: 6px; margin-top: 6px; padding: 6px 10px; background: rgba(255,255,255,0.04); border-radius: 6px; font-size: 0.8rem; } .chat-bubble .tactical-point svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; } .chat-suggestions { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0; } .chat-suggestion-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 20px; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; font-family: var(--font); } .chat-suggestion-btn:hover { border-color: var(--orange); color: var(--text); } .chat-suggestion-btn svg { color: var(--orange); flex-shrink: 0; } .chat-input-area { padding-top: 8px; } .chat-input-wrapper { display: flex; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; transition: border-color 0.15s; } .chat-input-wrapper:focus-within { border-color: var(--green); } .chat-input { flex: 1; background: none; border: none; color: var(--text); padding: 10px 12px; font-size: 0.85rem; font-family: var(--font); } .chat-input:focus { outline: none; } .chat-send-btn { background: var(--green); border: none; border-radius: 6px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .chat-send-btn:hover { background: var(--green-light); } .chat-meta { margin-top: 6px; } .chat-pipeline-indicator { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); } .chat-pipeline-indicator svg { color: var(--green); } .typing-indicator { display: flex; gap: 4px; padding: 4px 0; } .typing-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.4s infinite; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } } /* ===== Proof ===== */ .proof-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; } .proof-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .proof-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; } .proof-card p { color: var(--text-secondary, #8b949e); line-height: 1.6; font-size: 0.92rem; word-wrap: break-word; overflow-wrap: break-word; } .proof-card code { background: rgba(110,118,129,0.15); padding: 1px 5px; border-radius: 4px; font-size: 0.88em; word-break: break-word; } .proof-table { margin-top: 4px; } .proof-card-hint { color: var(--muted); font-size: 0.88rem; margin-top: 4px; margin-bottom: 16px; } /* Loss scrubber — interactive BEFORE/AFTER slider */ .loss-scrubber { background: linear-gradient(135deg, rgba(88, 166, 255, 0.06), rgba(63, 185, 80, 0.04)); border: 1px solid var(--border); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; } .loss-scrubber::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(88, 166, 255, 0.08), transparent 50%); pointer-events: none; } .loss-scrubber-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.82rem; color: var(--muted); font-family: 'SF Mono', ui-monospace, Consolas, monospace; letter-spacing: 0.4px; position: relative; } .loss-scrubber-run { background: rgba(88, 166, 255, 0.15); color: var(--accent); padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.6px; text-transform: uppercase; } .loss-scrubber-step { text-transform: uppercase; font-size: 0.75rem; } .loss-scrubber-value { font-size: 2.6rem; font-weight: 700; font-family: 'SF Mono', ui-monospace, Consolas, monospace; background: linear-gradient(135deg, var(--accent), var(--green-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin: 4px 0 6px; position: relative; display: inline-block; transform-origin: center center; will-change: transform, filter; } .loss-scrubber-value.pulse { animation: loss-scrubber-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes loss-scrubber-pulse { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 12px rgba(52, 211, 153, 0.6)); } 60% { transform: scale(0.97); filter: brightness(1.1); } 100% { transform: scale(1); filter: brightness(1); } } .loss-scrubber-delta { transition: color 0.25s ease; } .loss-scrubber-delta.up, .loss-scrubber-delta.down { animation: loss-scrubber-delta-pop 0.4s ease-out; } @keyframes loss-scrubber-delta-pop { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .loss-scrubber-delta { font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; min-height: 1.2em; position: relative; } .loss-scrubber-delta.up { color: var(--red); } .loss-scrubber-delta.down { color: var(--green-light); } .loss-scrubber-arrow { display: inline-block; font-weight: 700; will-change: transform; transform-origin: center; } .loss-scrubber-arrow.arrow-down { animation: loss-arrow-bounce-down 1.2s ease-in-out infinite; } .loss-scrubber-arrow.arrow-up { animation: loss-arrow-bounce-up 1.2s ease-in-out infinite; } @keyframes loss-arrow-bounce-down { 0% { transform: translateY(-6px); opacity: 0.55; } 50% { transform: translateY(4px); opacity: 1; } 100% { transform: translateY(-6px); opacity: 0.55; } } @keyframes loss-arrow-bounce-up { 0% { transform: translateY(4px); opacity: 0.55; } 50% { transform: translateY(-6px); opacity: 1; } 100% { transform: translateY(4px); opacity: 0.55; } } .loss-scrubber-slider { position: relative; height: 32px; margin: 4px 0 14px; } .loss-scrubber-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 8px; background: rgba(139, 148, 158, 0.15); border-radius: 999px; overflow: hidden; } .loss-scrubber-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent), var(--green-light)); border-radius: 999px; width: 0%; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .loss-scrubber-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 2px; pointer-events: none; } .loss-scrubber-ticks .tick { width: 2px; height: 8px; background: rgba(230, 237, 243, 0.35); border-radius: 1px; } .loss-scrubber input[type="range"] { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 32px; margin: 0; z-index: 2; cursor: grab; } .loss-scrubber input[type="range"]:active { cursor: grabbing; } .loss-scrubber input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(88, 166, 255, 0.15); cursor: grab; transition: transform 0.15s ease, box-shadow 0.15s ease; } .loss-scrubber input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(88, 166, 255, 0.2); } .loss-scrubber input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(88, 166, 255, 0.15); cursor: grab; } .loss-scrubber-artifact { font-family: 'SF Mono', ui-monospace, Consolas, monospace; font-size: 0.78rem; color: var(--muted); background: rgba(13, 17, 23, 0.4); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); word-break: break-all; position: relative; } @media (max-width: 640px) { .loss-scrubber-value { font-size: 2.1rem; } .loss-scrubber { padding: 16px; } } /* ===== Distribute ===== */ .distribute-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; } .distribute-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .distribute-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; } .qr-card { text-align: center; } .qr-wrapper { display: flex; justify-content: center; margin-bottom: 16px; } .qr-code { background: #fff; padding: 16px; border-radius: var(--radius); display: inline-block; } .qr-code svg { display: block; } .qr-key-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .qr-key { font-family: var(--mono); font-size: 0.75rem; color: var(--green-light); background: rgba(35,134,54,0.08); border: 1px solid rgba(35,134,54,0.2); border-radius: 6px; padding: 8px 12px; word-break: break-all; margin-bottom: 12px; } .qr-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.75rem; color: var(--text-muted); } .qr-hint svg { color: var(--orange); } .peers-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .peer-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; } .peer-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(35,134,54,0.15); display: flex; align-items: center; justify-content: center; color: var(--green-light); flex-shrink: 0; } .peer-info { flex: 1; } .peer-name { font-size: 0.85rem; font-weight: 600; } .peer-status { font-size: 0.7rem; color: var(--green-light); } .peer-status.offline { color: var(--text-muted); } .distribute-actions { display: flex; gap: 8px; flex-wrap: wrap; } .plan-details { display: flex; flex-direction: column; gap: 10px; } .plan-item { display: flex; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; } .plan-label { font-size: 0.8rem; color: var(--text-muted); } .plan-value { font-size: 0.8rem; font-weight: 600; } /* ===== Tooltip ===== */ .tooltip { position: fixed; background: #1c2128; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-size: 0.75rem; color: var(--text); max-width: 280px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.4); line-height: 1.4; } .tooltip.visible { opacity: 1; } /* ===== Bottom Nav ===== */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--sidebar-bg); border-top: 1px solid var(--border); z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; color: var(--text-muted); cursor: pointer; text-decoration: none; font-size: 0.65rem; transition: color 0.15s; } .bottom-nav-item.active { color: var(--green-light); } .bottom-nav-item svg { flex-shrink: 0; } /* ===== Responsive ===== * Breakpoints: * <768px — phone: drawer sidebar + top hamburger + bottom nav * 768-1023px — tablet: drawer sidebar + top hamburger (content full width) * >=1024px — desktop: static sidebar, no top hamburger, no bottom nav */ /* Analytics grid (independent of sidebar) */ @media (min-width: 640px) { .analytics-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .season-summary-card, .trends-chart-card { grid-column: span 1; } .match-history-card, .player-ratings-card, .opponent-card { grid-column: span 2; } .distribute-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .qr-card { grid-column: span 1; } .peers-card { grid-column: span 1; } .plan-card { grid-column: span 2; } .proof-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1024px) { .analytics-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .season-summary-card { grid-column: span 1; } .trends-chart-card { grid-column: span 2; } .match-history-card { grid-column: span 3; } .player-ratings-card { grid-column: span 2; } .opponent-card { grid-column: span 1; } .distribute-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .qr-card, .peers-card, .plan-card { grid-column: span 1; } } /* Tablet (768-1023): sidebar becomes drawer with hamburger topbar, no bottom-nav. */ @media (min-width: 768px) and (max-width: 1023px) { .sidebar { position: fixed; top: 0; left: 0; transform: translateX(-100%); width: 260px; height: 100vh; box-shadow: 4px 0 24px rgba(0,0,0,0.5); z-index: 60; } .sidebar.open { transform: translateX(0); } .sidebar-close-mobile { display: block; } .mobile-topbar { display: flex; } .hamburger { display: block; } /* Push page content below the fixed topbar so nothing hides behind it. */ .main-content { padding-top: calc(24px + var(--topbar-height)); } } /* Phone (<768): sidebar hidden entirely — bottom-nav replaces it. No topbar. */ @media (max-width: 767px) { .sidebar { position: fixed; top: 0; left: 0; transform: translateX(-100%); width: 260px; height: 100vh; box-shadow: 4px 0 24px rgba(0,0,0,0.5); z-index: 60; } .sidebar.open { transform: translateX(0); } .sidebar-close-mobile { display: block; } .mobile-topbar { display: none; } .hamburger { display: none; } .bottom-nav { display: flex; } .main-content { padding: 16px; padding-bottom: 76px; } .tab-title { font-size: 1.15rem; } .tab-subtitle { margin-left: 0; } .chat-container { height: calc(100vh - 200px); } .season-record { gap: 8px; } .record-num { font-size: 1.4rem; } .match-stats-mini { display: none; } .data-table { font-size: 0.7rem; } .data-table th, .data-table td { padding: 6px 4px; } .report-controls { flex-direction: column; align-items: stretch; } .report-selector { justify-content: space-between; flex-wrap: wrap; gap: 6px; } .report-selector label { flex-shrink: 0; } .report-select { flex: 1 1 auto; min-width: 0; max-width: 100%; text-overflow: ellipsis; } .btn-secondary, .btn-primary { width: 100%; justify-content: center; } .banner { font-size: 0.7rem; padding: 6px 10px; } .banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 400px) { .match-date { width: 60px; font-size: 0.65rem; } .bottom-nav-item span { font-size: 0.6rem; } .report-select { font-size: 0.75rem; padding: 8px; } } /* ============================================================ */ /* No-JS fallback notice */ /* ============================================================ */ .noscript-notice { position: fixed; inset: 0; z-index: 9999; background: #0d1117; display: flex; align-items: center; justify-content: center; padding: 24px; } .noscript-inner { max-width: 560px; background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 28px 32px; display: flex; gap: 20px; align-items: flex-start; color: #c9d1d9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); } .noscript-inner strong { color: #f0f6fc; font-size: 1.15rem; display: block; margin-bottom: 8px; } .noscript-inner p { margin: 0 0 10px 0; font-size: 0.92rem; } .noscript-inner .noscript-links a { color: #58a6ff; text-decoration: none; } .noscript-inner .noscript-links a:hover { text-decoration: underline; } /* ============================================================ */ /* Initial paint skeleton (hidden once app.js boots) */ /* ============================================================ */ .initial-skeleton { position: fixed; inset: 0; z-index: 100; display: none; background: #0d1117; pointer-events: none; transition: opacity 0.25s ease; } html.js .initial-skeleton { display: flex; } .initial-skeleton.faded { opacity: 0; } .skeleton-sidebar { width: 260px; padding: 20px 16px; border-right: 1px solid #21262d; display: flex; flex-direction: column; gap: 14px; } .skeleton-main { flex: 1; padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; } .skel { background: linear-gradient(90deg, #161b22 25%, #21262d 50%, #161b22 75%); background-size: 200% 100%; border-radius: 6px; animation: skel-shimmer 1.4s infinite linear; } .skel-logo { height: 32px; width: 60%; margin-bottom: 12px; } .skel-nav { height: 34px; width: 100%; } .skel-title { height: 28px; width: 45%; } .skel-line { height: 14px; width: 70%; } .skel-block { height: 180px; width: 100%; } @keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 1023px) { .skeleton-sidebar { display: none; } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* ===== Player Cards (Squad grid + detail modal) ===== */ /* Squad grid needs the whole row — 16 cards look starved in 2/3 of the width. */ .player-cards-card { grid-column: 1 / -1; } .player-cards-card .card-header { flex-wrap: wrap; gap: 10px; } .player-filter { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; } .filter-chip { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .filter-chip:hover { color: var(--text); border-color: var(--text-muted); } .filter-chip.active { background: var(--green); color: #fff; border-color: var(--green); } .player-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .player-cards-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 0.85rem; } .player-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; text-align: left; color: var(--text); display: flex; flex-direction: column; gap: 8px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; font: inherit; animation: playerCardIn 0.35s var(--card-delay, 0ms) both; } .player-card:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 4px 16px rgba(35, 134, 54, 0.15); } .player-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .player-card-head { display: flex; align-items: center; gap: 10px; } .player-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #fff; flex-shrink: 0; background: var(--avatar-bg, #30363d); border: 1px solid var(--avatar-border, transparent); } .player-avatar.big { width: 64px; height: 64px; font-size: 1.2rem; } /* Position colour tokens applied on the card root — inherited by .player-avatar. */ .avatar-gk { --avatar-bg: linear-gradient(135deg, #d29922, #a67900); --avatar-border: rgba(210,153,34,0.5); } .avatar-def { --avatar-bg: linear-gradient(135deg, #1f6feb, #0d419d); --avatar-border: rgba(31,111,235,0.5); } .avatar-mid { --avatar-bg: linear-gradient(135deg, #238636, #196c2a); --avatar-border: rgba(35,134,54,0.5); } .avatar-fwd { --avatar-bg: linear-gradient(135deg, #f78166, #db6d51); --avatar-border: rgba(247,129,102,0.5); } .player-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .player-name { font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-sub { color: var(--text-muted); font-size: 0.7rem; } .player-avg { font-weight: 800; font-size: 1.15rem; padding: 4px 8px; border-radius: 6px; background: rgba(139, 148, 158, 0.08); line-height: 1; } .player-avg.big { font-size: 1.5rem; padding: 6px 12px; } .player-avg.rating-high { color: var(--green); } .player-avg.rating-mid { color: var(--orange); } .player-avg.rating-low { color: var(--red); } .player-strengths { display: flex; flex-wrap: wrap; gap: 4px; } .strength-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; background: rgba(35, 134, 54, 0.12); color: var(--green); border: 1px solid rgba(35, 134, 54, 0.3); font-weight: 600; } .player-spark-wrap { display: flex; align-items: center; gap: 8px; color: var(--green); } .player-spark { flex-shrink: 0; } .player-spark-label { font-size: 0.65rem; color: var(--text-muted); } @keyframes playerCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ===== Player detail modal ===== */ .player-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; } .player-modal.open { display: flex; animation: fadeIn 0.18s; } .player-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .player-modal-body { position: relative; background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); } .player-modal-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 4px; } .player-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.05); } .player-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .player-modal-meta { flex: 1; min-width: 0; } .player-modal-meta h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: baseline; gap: 6px; } .player-num { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; } .player-modal-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; } .radar-wrap { display: flex; justify-content: center; } .criteria-list { display: flex; flex-direction: column; gap: 8px; } .criteria-row { display: grid; grid-template-columns: 68px 1fr 32px; align-items: center; gap: 8px; font-size: 0.78rem; } .criteria-label { color: var(--text-muted); } .criteria-bar { height: 6px; background: rgba(139, 148, 158, 0.15); border-radius: 999px; overflow: hidden; } .criteria-fill { height: 100%; border-radius: 999px; transition: width 0.3s; } .criteria-fill.rating-high { background: var(--green); } .criteria-fill.rating-mid { background: var(--orange); } .criteria-fill.rating-low { background: var(--red); } .criteria-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .criteria-value.rating-high { color: var(--green); } .criteria-value.rating-mid { color: var(--orange); } .criteria-value.rating-low { color: var(--red); } .player-modal-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.7rem; text-align: center; } /* Responsive: fewer columns on narrower viewports, stacked modal body on mobile. */ @media (max-width: 1023px) { .player-cards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } @media (max-width: 640px) { .player-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .player-card { padding: 8px; } .player-avatar { width: 34px; height: 34px; font-size: 0.75rem; } .player-avg { font-size: 1rem; padding: 3px 6px; } .player-name { font-size: 0.78rem; } .player-modal-body { padding: 14px; } .player-modal-grid { grid-template-columns: 1fr; gap: 12px; } .radar-wrap svg { width: 180px; height: 180px; } .criteria-row { grid-template-columns: 60px 1fr 28px; font-size: 0.72rem; } } @media (max-width: 767px) { .player-cards-card { grid-column: 1 / -1; } .filter-chip { padding: 3px 8px; font-size: 0.68rem; } } /* Roadmap card in /proof */ .roadmap-card { border-color: rgba(88, 166, 255, 0.25); } .roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 12px; } .roadmap-role { background: rgba(88, 166, 255, 0.06); border: 1px solid rgba(88, 166, 255, 0.18); border-radius: 10px; padding: 12px 14px; } .roadmap-role-title { font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 2px; } .roadmap-role-scope { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue, #58a6ff); margin-bottom: 8px; } .roadmap-role ul { margin: 0; padding-left: 16px; font-size: 0.82rem; color: var(--muted); line-height: 1.45; } .roadmap-role ul li { margin-bottom: 2px; } .roadmap-note { font-size: 0.85rem; color: var(--muted); border-top: 1px dashed rgba(139, 148, 158, 0.2); padding-top: 10px; margin-top: 8px; line-height: 1.5; } .roadmap-note em { color: var(--text); font-style: normal; font-weight: 600; } /* ============================================================================ Pears hypercore append-only log — proof-tab visualisation of the real record shape emitted by src/pears/collab_model.js. Chained by prev_hash; entries are role-tagged. Newest at the top ("HEAD"), scrollable tail. ============================================================================ */ .hypercore-card { border-color: rgba(88, 166, 255, 0.28); } .hypercore-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #58a6ff; background: rgba(88, 166, 255, 0.10); border: 1px solid rgba(88, 166, 255, 0.30); border-radius: 999px; vertical-align: middle; } .hypercore-log { margin: 14px 0 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.25); border-radius: 10px; max-height: 420px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; } .hypercore-entry { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 8px; border-top: 1px dashed rgba(255, 255, 255, 0.05); transition: background 160ms ease; } .hypercore-entry:first-child { border-top: none; } .hypercore-entry:hover { background: rgba(255, 255, 255, 0.02); } .hypercore-entry--head { background: linear-gradient(90deg, rgba(88, 166, 255, 0.06), rgba(88, 166, 255, 0)); border-left: 2px solid rgba(88, 166, 255, 0.4); padding-left: 6px; margin-left: -6px; } .hypercore-entry-marker { display: flex; justify-content: center; padding-top: 4px; } .hypercore-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #6b7280; box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.15); } .hypercore-dot--init { background: #a78bfa; box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.20); } .hypercore-dot--ingest { background: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.20); } .hypercore-dot--decision { background: #58a6ff; box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.22); } .hypercore-dot--observation{ background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.20); } .hypercore-dot--revert { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22); } .hypercore-entry--head .hypercore-dot { animation: hypercore-head-pulse 1.6s ease-in-out infinite; } @keyframes hypercore-head-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.20); } 50% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(88, 166, 255, 0.05); } } .hypercore-entry-body { min-width: 0; } .hypercore-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11.5px; } .hypercore-seq { color: #8b949e; font-weight: 600; } .hypercore-type { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255, 255, 255, 0.06); color: #c9d1d9; border: 1px solid rgba(255, 255, 255, 0.08); } .hypercore-type--init { color: #c7b4ff; border-color: rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.08); } .hypercore-type--ingest { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); } .hypercore-type--decision { color: #93c5fd; border-color: rgba(88, 166, 255, 0.38); background: rgba(88, 166, 255, 0.10); } .hypercore-type--observation{ color: #fcd34d; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); } .hypercore-type--revert { color: #fca5a5; border-color: rgba(239, 68, 68, 0.40); background: rgba(239, 68, 68, 0.10); } .hypercore-role { color: #8b949e; } .hypercore-time { color: #6b7280; margin-left: auto; } .hypercore-head-tag { padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #58a6ff; border: 1px solid rgba(88, 166, 255, 0.4); border-radius: 4px; background: rgba(88, 166, 255, 0.06); } .hypercore-entry-content { color: #d1d5db; line-height: 1.45; margin-bottom: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13.5px; } .hypercore-cursor { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; font-size: 11px; color: #fca5a5; background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.28); } .hypercore-entry-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #6b7280; font-size: 11px; } .hypercore-meta-item code { color: #c9d1d9; background: rgba(255, 255, 255, 0.04); padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05); font-size: 11px; } .hypercore-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; padding: 8px 4px; color: #8b949e; font-size: 12px; } .hypercore-legend-item { display: inline-flex; align-items: center; gap: 6px; } .hypercore-legend .hypercore-dot { width: 8px; height: 8px; box-shadow: none; } @media (max-width: 640px) { .hypercore-log { font-size: 11.5px; padding: 8px; } .hypercore-time { margin-left: 0; } .hypercore-entry-content { font-size: 12.5px; } } /* ---- Hypercore log: real/example badge + verify UI ---- */ .hypercore-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 4px 12px; border-bottom: 1px dashed rgba(139,148,158,0.18); margin-bottom: 10px; font-size: 12px; color: #8b949e; } .hypercore-toolbar-label { display: inline-flex; align-items: center; gap: 6px; } .hypercore-head-meta { margin-left: auto; } .hypercore-head-meta code { color: #c9d1d9; } .data-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid; } .data-badge--real { color: #7ee1a5; background: rgba(46,160,67,0.10); border-color: rgba(46,160,67,0.35); } .data-badge--example, .data-badge--mock, .data-badge--preview { color: #f0b45a; background: rgba(240,180,90,0.08); border-color: rgba(240,180,90,0.32); } .hypercore-verify-btn { background: rgba(88,166,255,0.10); color: #58a6ff; border: 1px solid rgba(88,166,255,0.35); padding: 3px 10px; border-radius: 6px; font-size: 11.5px; cursor: pointer; font-family: inherit; } .hypercore-verify-btn:hover:not(:disabled) { background: rgba(88,166,255,0.18); } .hypercore-verify-btn:disabled { opacity: 0.5; cursor: default; } .hypercore-verify-status { font-size: 11.5px; color: #8b949e; } .hypercore-verify-status--ok { color: #7ee1a5; } .hypercore-verify-status--fail { color: #ff7b72; } .hypercore-verify { margin-left: 6px; font-size: 12px; font-weight: 700; } .hypercore-verify--ok { color: #7ee1a5; } .hypercore-verify--fail { color: #ff7b72; } /* ===== Landing Hero (chat tab, dismissible) ===== */ .hero { position: relative; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 28px 32px 26px; margin-bottom: 24px; background: radial-gradient(1200px 400px at 15% -20%, rgba(35, 134, 54, 0.18), transparent 60%), radial-gradient(900px 300px at 90% -10%, rgba(247, 129, 102, 0.14), transparent 65%), linear-gradient(180deg, #11161d 0%, #0d1117 100%); overflow: hidden; animation: fadeIn 0.35s ease-out; } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(88, 166, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 166, 255, 0.04) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at 30% 30%, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 20%, transparent 75%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; max-width: 880px; } .hero-dismiss { position: absolute; top: 12px; right: 12px; z-index: 2; background: transparent; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .hero-dismiss:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(22, 27, 34, 0.6); margin-bottom: 16px; } .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); box-shadow: 0 0 8px rgba(46, 160, 67, 0.7); animation: heroDotPulse 2s ease-in-out infinite; } @keyframes heroDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero-title { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); margin-bottom: 14px; } .hero-title-accent { display: block; color: var(--text-muted); font-weight: 500; font-size: 0.9em; margin-top: 4px; } .hero-lede { font-size: 1rem; line-height: 1.55; color: var(--text-muted); max-width: 780px; margin-bottom: 20px; } .hero-lede strong { color: var(--text); font-weight: 600; } .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.8rem; font-weight: 500; color: var(--text); background: rgba(22, 27, 34, 0.75); border: 1px solid var(--border); border-radius: 999px; cursor: help; } .hero-chip svg { color: var(--green-light); } .hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 0.9rem; font-weight: 600; border-radius: 6px; text-decoration: none; transition: transform 0.1s, background 0.15s, border-color 0.15s; cursor: pointer; border: 1px solid transparent; } .hero-cta:active { transform: translateY(1px); } .hero-cta--primary { background: var(--green); color: #fff; border-color: var(--green-light); } .hero-cta--primary:hover { background: var(--green-light); } .hero-cta--ghost { background: rgba(22, 27, 34, 0.6); color: var(--text); border-color: var(--border); } .hero-cta--ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: #4b5563; } @media (max-width: 720px) { .hero { padding: 22px 20px 20px; } .hero-title { font-size: 1.5rem; } .hero-lede { font-size: 0.92rem; } .hero-chips { gap: 6px; } .hero-chip { font-size: 0.75rem; padding: 5px 10px; } .hero-cta { padding: 8px 14px; font-size: 0.85rem; flex: 1 1 auto; justify-content: center; } } /* Hidden state (persisted across sessions) */ .hero.hero--hidden { display: none; } /* ========================================================================== UI Notifications — toasts + custom modals (ui-notify.js) ========================================================================== */ /* --- Toast container (bottom-right, stacked) --- */ .ui-toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 380px; width: calc(100% - 40px); } .ui-toast-container > * { pointer-events: auto; } @media (max-width: 640px) { .ui-toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; width: auto; } } /* --- Individual toast --- */ .ui-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 10px; background: #161b22; border: 1px solid #30363d; box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); color: #e6edf3; font-size: 13px; line-height: 1.4; animation: ui-toast-in 0.24s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; } .ui-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; opacity: 0.9; } .ui-toast--info { color: #58a6ff; } .ui-toast--success { color: #3fb950; } .ui-toast--warn { color: #d29922; } .ui-toast--error { color: #f85149; } .ui-toast__icon { color: currentColor; display: flex; align-items: center; padding-top: 1px; } .ui-toast__body { color: #e6edf3; min-width: 0; } .ui-toast__title { font-weight: 600; color: #e6edf3; margin-bottom: 2px; } .ui-toast__msg { color: #8b949e; font-size: 12.5px; } .ui-toast__actions { grid-column: 2 / 4; display: flex; gap: 8px; margin-top: 8px; } .ui-toast__action { background: transparent; color: currentColor; border: 1px solid currentColor; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .ui-toast__action:hover { background: currentColor; color: #0d1117; } .ui-toast__action--primary { background: currentColor; color: #0d1117; } .ui-toast__action--primary:hover { filter: brightness(1.15); } .ui-toast__close { background: transparent; border: none; color: #8b949e; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; align-self: start; transition: color 0.15s; } .ui-toast__close:hover { color: #e6edf3; } .ui-toast--leaving { animation: ui-toast-out 0.24s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; } @keyframes ui-toast-in { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes ui-toast-out { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(20px) scale(0.96); } } /* --- Dialog (custom alert/confirm) --- */ .ui-dialog-host { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; animation: ui-dialog-in 0.18s ease-out; } .ui-dialog-host--leaving { animation: ui-dialog-out 0.18s ease-in forwards; } .ui-dialog-backdrop { position: absolute; inset: 0; background: rgba(1, 4, 9, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ui-dialog { position: relative; background: #161b22; border: 1px solid #30363d; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); min-width: 320px; max-width: 500px; width: calc(100% - 32px); max-height: calc(100vh - 40px); overflow: hidden; display: flex; flex-direction: column; animation: ui-dialog-panel-in 0.22s cubic-bezier(0.25, 0.8, 0.25, 1); } .ui-dialog__head { padding: 16px 20px 12px; border-bottom: 1px solid #21262d; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ui-dialog__title { font-size: 16px; font-weight: 600; color: #e6edf3; } .ui-dialog__close { background: transparent; border: none; color: #8b949e; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .ui-dialog__close:hover { color: #e6edf3; } .ui-dialog__body { padding: 16px 20px; color: #c9d1d9; font-size: 14px; line-height: 1.55; overflow-y: auto; flex: 1 1 auto; } .ui-dialog__body p { margin: 0 0 10px; } .ui-dialog__body p:last-child { margin-bottom: 0; } .ui-dialog__footer { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #21262d; flex-wrap: wrap; } .ui-dialog__btn { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ui-dialog__btn:hover { background: #30363d; border-color: #484f58; } .ui-dialog__btn--primary { background: #238636; color: #ffffff; border-color: #238636; } .ui-dialog__btn--primary:hover { background: #2ea043; border-color: #2ea043; } .ui-dialog__btn--danger { background: #da3633; color: #ffffff; border-color: #da3633; } .ui-dialog__btn--danger:hover { background: #f85149; border-color: #f85149; } @keyframes ui-dialog-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ui-dialog-out { from { opacity: 1; } to { opacity: 0; } } @keyframes ui-dialog-panel-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Reduced motion — kill all UI animations */ @media (prefers-reduced-motion: reduce) { .ui-toast, .ui-toast--leaving, .ui-dialog-host, .ui-dialog-host--leaving, .ui-dialog { animation: none !important; } } /* --- Sortable table headers --- */ .data-table thead th.sortable-th { cursor: pointer; user-select: none; position: relative; padding-right: 20px; transition: color 0.15s; } .data-table thead th.sortable-th:hover { color: #e6edf3; } .data-table thead th.sortable-th:focus-visible { outline: 2px solid #58a6ff; outline-offset: -2px; border-radius: 4px; } .data-table thead th.sortable-th::after { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #484f58; opacity: 0.5; transition: opacity 0.15s, transform 0.15s; } .data-table thead th.sortable-th:hover::after { opacity: 0.9; } .data-table thead th.sortable-th.sorted-asc::after { border-top: none; border-bottom: 5px solid #58a6ff; opacity: 1; } .data-table thead th.sortable-th.sorted-desc::after { border-top: 5px solid #58a6ff; opacity: 1; } /* --- Kaggle stats card --- */ .kaggle-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 14px 0 8px; } .kaggle-chip { background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 10px 12px; transition: border-color 0.15s, transform 0.15s; } .kaggle-chip:hover { border-color: #30363d; transform: translateY(-1px); } .kaggle-chip-label { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-family: ui-monospace, monospace; } .kaggle-chip-value { font-size: 15px; font-weight: 600; color: #e6edf3; font-variant-numeric: tabular-nums; } .kaggle-skeleton { display: flex; gap: 8px; padding: 6px 0; } .kaggle-skeleton .skel-chip { height: 42px; flex: 1; min-width: 100px; background: linear-gradient(90deg, #161b22 25%, #21262d 50%, #161b22 75%); background-size: 200% 100%; border-radius: 8px; animation: skel-shine 1.4s ease-in-out infinite; } @keyframes skel-shine { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } .kaggle-empty { color: #8b949e; font-size: 13px; padding: 8px 0; } /* --- Kaggle runs table --- */ .kaggle-runs-table { margin-top: 12px; } .kaggle-runs { font-size: 12.5px; } .kaggle-runs td, .kaggle-runs th { padding: 8px 10px; } .kaggle-td-id { font-family: ui-monospace, monospace; font-weight: 700; color: #58a6ff; } .kaggle-outcome { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; font-family: ui-monospace, monospace; letter-spacing: 0.3px; } .kaggle-outcome-crash { background: rgba(248,81,73,0.15); color: #f85149; border: 1px solid rgba(248,81,73,0.3); } .kaggle-outcome-partial { background: rgba(210,153,34,0.15); color: #d29922; border: 1px solid rgba(210,153,34,0.3); } .kaggle-outcome-neutral { background: rgba(139,148,158,0.15); color: #8b949e; border: 1px solid rgba(139,148,158,0.3); } @media (max-width: 640px) { .kaggle-stats { grid-template-columns: repeat(2, 1fr); } .kaggle-runs { font-size: 11.5px; } .kaggle-runs td, .kaggle-runs th { padding: 6px 6px; } } /* ======================================================================== team-switcher.js — Sidebar dropdown + mobile chip + create/join modals. Replaces the static .club-card so a user can maintain multiple team contexts (head_coach / assistant_coach / analyst / player) in one install. Persistence lives in localStorage; module details in demo/team-switcher.js. ======================================================================== */ .team-switcher-root { position: relative; margin-bottom: 12px; } .team-switcher-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: var(--bg-elevated, #161b22); border: 1px solid var(--border, #30363d); border-radius: 10px; color: inherit; cursor: pointer; text-align: left; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .team-switcher-trigger:hover { background: var(--bg-hover, #1c2128); border-color: var(--accent, #238636); } .team-switcher-trigger:active { transform: scale(0.995); } .team-switcher-root.is-open .team-switcher-trigger { background: var(--bg-hover, #1c2128); border-color: var(--accent, #238636); } .team-switcher-info { flex: 1; min-width: 0; } .team-switcher-name { font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text, #f0f6fc); } .team-switcher-meta { font-size: 11.5px; color: var(--text-muted, #8b949e); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-switcher-role { font-size: 11px; color: var(--text-muted, #8b949e); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; } .team-switcher-caret { flex: 0 0 auto; color: var(--text-muted, #8b949e); transition: transform 0.18s ease; } .team-switcher-root.is-open .team-switcher-caret { transform: rotate(180deg); } .team-switcher-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--bg-elevated, #161b22); border: 1px solid var(--border, #30363d); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); padding: 6px; z-index: 40; max-height: 60vh; overflow: auto; animation: tsMenuIn 0.14s ease-out; } @keyframes tsMenuIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .team-switcher-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 8px; color: inherit; cursor: pointer; text-align: left; font: inherit; } .team-switcher-item:hover { background: var(--bg-hover, #21262d); } .team-switcher-item.is-active { background: var(--bg-hover, #21262d); } .team-switcher-item-name { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-switcher-item-meta { font-size: 11px; color: var(--text-muted, #8b949e); margin-right: 4px; } .team-switcher-check { color: var(--accent, #238636); flex: 0 0 auto; } .team-switcher-divider { height: 1px; background: var(--border, #30363d); margin: 6px 4px; } .team-switcher-action { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 8px; color: var(--text, #f0f6fc); cursor: pointer; text-align: left; font: inherit; font-size: 13px; } .team-switcher-action:hover { background: var(--bg-hover, #21262d); color: var(--accent, #238636); } /* Mobile topbar chip. */ .team-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px; margin-left: 8px; background: rgba(35, 134, 54, 0.14); border: 1px solid rgba(35, 134, 54, 0.4); color: var(--text, #f0f6fc); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 46vw; } .team-chip .team-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; } .team-chip:hover { background: rgba(35, 134, 54, 0.22); } /* Modal for Create / Join flows. */ .ts-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; animation: tsOverlayIn 0.15s ease-out; } .ts-modal-overlay.is-closing { animation: tsOverlayOut 0.15s ease-out forwards; } @keyframes tsOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tsOverlayOut { from { opacity: 1; } to { opacity: 0; } } .ts-modal { background: var(--bg-elevated, #161b22); border: 1px solid var(--border, #30363d); border-radius: 12px; width: min(460px, 100%); max-height: 90vh; overflow: auto; color: var(--text, #f0f6fc); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); } .ts-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border, #30363d); } .ts-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; } .ts-modal-close { background: transparent; border: 0; color: var(--text-muted, #8b949e); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .ts-modal-close:hover { background: var(--bg-hover, #21262d); color: var(--text, #f0f6fc); } .ts-modal-body { padding: 16px 18px; } .ts-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--border, #30363d); } .ts-field { display: block; margin-bottom: 12px; } .ts-field > span { display: block; font-size: 12px; color: var(--text-muted, #8b949e); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.2px; } .ts-field input, .ts-field select { width: 100%; padding: 9px 10px; background: var(--bg, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 8px; color: var(--text, #f0f6fc); font: inherit; font-size: 13px; } .ts-field input:focus, .ts-field select:focus { outline: none; border-color: var(--accent, #238636); box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.22); } .ts-hint { font-size: 12px; color: var(--text-muted, #8b949e); line-height: 1.5; margin: 4px 0 0; } .ts-hint strong { color: var(--text, #f0f6fc); } .ts-btn { padding: 8px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .ts-btn-primary { background: var(--accent, #238636); color: #fff; border-color: var(--accent, #238636); } .ts-btn-primary:hover { background: #2ea043; } .ts-btn-secondary { background: transparent; color: var(--text, #f0f6fc); border-color: var(--border, #30363d); } .ts-btn-secondary:hover { background: var(--bg-hover, #21262d); } .ts-modal-error { margin-top: 10px; padding: 8px 10px; background: rgba(248, 81, 73, 0.14); border: 1px solid rgba(248, 81, 73, 0.4); color: #f85149; border-radius: 8px; font-size: 12.5px; } /* ======================================================================== chat-signing.js — signed message badge + details popover. Every user bubble gets a small "Signed · FING ERP RINT" chip; clicking opens a 320px panel with pubkey, signature, live re-verification. ======================================================================== */ .chat-sig-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; background: rgba(35, 134, 54, 0.12); border: 1px solid rgba(35, 134, 54, 0.35); color: #3fb950; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px; font-family: ui-monospace, monospace; cursor: pointer; user-select: none; transition: background 0.12s ease, transform 0.08s ease; } .chat-sig-badge:hover { background: rgba(35, 134, 54, 0.2); } .chat-sig-badge:active { transform: scale(0.98); } .chat-sig-badge:focus-visible { outline: 2px solid rgba(35, 134, 54, 0.7); outline-offset: 2px; } .chat-sig-icon { flex: 0 0 auto; } .chat-sig-text { line-height: 1.4; } .chat-sig-badge-unavailable { background: rgba(139, 148, 158, 0.12); border-color: rgba(139, 148, 158, 0.35); color: var(--text-muted, #8b949e); cursor: default; } .chat-sig-panel { position: fixed; width: 320px; background: var(--bg-elevated, #161b22); border: 1px solid var(--border, #30363d); border-radius: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); padding: 14px 16px 12px; z-index: 220; color: var(--text, #f0f6fc); font-size: 12px; animation: chatSigIn 0.14s ease-out; } @keyframes chatSigIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .chat-sig-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; font-size: 13px; } .chat-sig-panel-close { background: transparent; border: 0; color: var(--text-muted, #8b949e); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 5px; } .chat-sig-panel-close:hover { background: var(--bg-hover, #21262d); color: var(--text, #f0f6fc); } .chat-sig-row { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border, #30363d); } .chat-sig-row:last-of-type { border-bottom: 0; } .chat-sig-row > span { flex: 0 0 84px; color: var(--text-muted, #8b949e); font-size: 11px; padding-top: 2px; } .chat-sig-row > code { flex: 1; font-family: ui-monospace, monospace; color: var(--text, #f0f6fc); word-break: break-all; font-size: 11px; line-height: 1.4; } .chat-sig-mono { font-family: ui-monospace, monospace; } .chat-sig-sig { max-height: 60px; overflow: auto; } .chat-sig-verify { margin-top: 10px; padding: 8px 10px; background: rgba(139, 148, 158, 0.1); border-radius: 8px; text-align: center; font-size: 12px; font-weight: 600; } .chat-sig-verify-label.is-ok { color: #3fb950; } .chat-sig-verify-label.is-fail { color: #f85149; } /* ======================================================================== export-report.js — email composer modal (reuses .ts-modal-* styles). Adds a wider variant for the body textarea and a 3-button footer. ======================================================================== */ .em-modal { width: min(540px, 100%); } .em-modal textarea { width: 100%; padding: 10px; background: var(--bg, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 8px; color: var(--text, #f0f6fc); font: inherit; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; resize: vertical; min-height: 140px; max-height: 380px; } .em-modal textarea:focus { outline: none; border-color: var(--accent, #238636); box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.22); } .em-optional { font-style: normal; color: var(--text-muted, #8b949e); font-size: 10.5px; font-weight: 500; margin-left: 4px; } .em-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; padding: 8px 10px; background: rgba(139, 148, 158, 0.08); border-radius: 6px; font-size: 11.5px; color: var(--text-muted, #8b949e); } .em-meta strong { color: var(--text, #f0f6fc); font-weight: 700; } .em-meta-item.em-warn { color: #d29922; } .em-footer { justify-content: space-between; } .em-footer .ts-btn { flex: 0 0 auto; } @media (max-width: 520px) { .em-footer { flex-direction: column-reverse; align-items: stretch; gap: 6px; } .em-footer .ts-btn { width: 100%; } }