/* ═══════════════════════════════════════════════════════════════ AGENT ŁAMAŃ 5.0 - Design System v2 Jaśniejsze tło · Lepsza typografia · Pełna responsywność ═══════════════════════════════════════════════════════════════ */ /* Fonts loaded via in for non-blocking load */ :root { /* Kolory tła - lekko jaśniejsze */ --bg0: #0d0d16; --bg1: #12121e; --bg2: #181826; --bg3: #1f1f30; --bg4: #27273d; /* Tekst */ --text: #eeeef8; --text2: #c8c8e0; --muted: #7070a0; --muted2: #4a4a70; /* Akcenty */ --acc: #47ffe8; /* cyan - główny */ --acc2: #e8ff47; /* żółty - secondary */ --acc3: #ff6b47; /* orange - alert */ --acc4: #b07fff; /* fiolet - tertiary */ --acc5: #3dff8f; /* zielony - success */ --green: #3dff8f; --red: #ff4466; --yellow: #ffc547; --acc-rgb:71,255,232; /* Obramowania */ --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.14); --card-border: rgba(71,255,232,.16); --topbar-border: rgba(71,255,232,.2); /* Cienie */ --panel-shadow: 0 0 0 1px rgba(71,255,232,.07), 0 8px 32px rgba(0,0,0,.4); --card-shadow: 0 2px 8px rgba(0,0,0,.3); /* Wiersze tabel */ --tr-odd: transparent; --tr-even: rgba(255,255,255,.025); --tr-hover: rgba(71,255,232,.06); /* Fonty */ --fsmono: 'JetBrains Mono', 'Consolas', monospace; --fssans: 'Syne', 'Inter', sans-serif; --fsui: 'Inter', system-ui, sans-serif; --mono: var(--fsmono); /* Wymiary */ --r: 7px; --r1: 4px; --r2: 12px; --r3: 16px; --sidebar: 224px; --topbar-h:50px; --fs: 13px; /* Inne */ --fg: var(--text); } /* ─── RESET & BASE ─────────────────────────────────────── */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } button, a, input, select, textarea { touch-action:manipulation; -webkit-tap-highlight-color:transparent; } html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } html, body { height:100%; } body { background:var(--bg0); color:var(--text); font-family:var(--fsui); font-size:var(--fs); line-height:1.5; display:flex; flex-direction:column; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ─── SCROLLBARS ───────────────────────────────────────── */ ::-webkit-scrollbar { width:5px; height:5px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:rgba(71,255,232,.18); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:rgba(71,255,232,.35); } /* ─── TOPBAR ───────────────────────────────────────────── */ .topbar { display:flex; align-items:center; gap:10px; padding:0 18px; height:var(--topbar-h); min-height:var(--topbar-h); background:linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%); border-bottom:1px solid var(--topbar-border); flex-shrink:0; z-index:200; box-shadow:0 1px 20px rgba(0,0,0,.4); } .topbar-logo { font-family:var(--fssans); font-size:17px; font-weight:800; letter-spacing:-.4px; white-space:nowrap; cursor:pointer; background:linear-gradient(110deg, var(--acc) 0%, var(--acc2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 8px rgba(71,255,232,.2)); } .topbar-logo span { font-size:10px; letter-spacing:.5px; font-family:var(--fsmono); -webkit-text-fill-color:var(--muted); opacity:.7; } .topbar-sep { flex:1; min-width:0; } .topbar-stat { font-size:11px; font-family:var(--fsmono); color:var(--muted); background:var(--bg3); padding:4px 12px; border-radius:20px; border:1px solid var(--border2); white-space:nowrap; } .topbar-stat b { color:var(--acc2); font-weight:600; } #top-status-dot { width:7px; height:7px; border-radius:50%; background:var(--muted2); display:inline-block; margin-right:5px; vertical-align:middle; transition:background .4s, box-shadow .4s; } #top-status-dot.ok { background:var(--acc5); box-shadow:0 0 7px var(--acc5); } #top-status-dot.err { background:var(--acc3); box-shadow:0 0 7px var(--acc3); } .topbar-actions { display:flex; gap:5px; align-items:center; flex-shrink:0; } /* ─── LAYOUT ───────────────────────────────────────────── */ .layout { display:flex; flex:1; overflow:hidden; min-height:0; } /* ─── SIDEBAR ──────────────────────────────────────────── */ .sidebar { width:var(--sidebar); min-width:var(--sidebar); background:var(--bg1); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:6px 0 20px; overflow-y:auto; overflow-x:hidden; flex-shrink:0; -webkit-overflow-scrolling:touch; } .sidebar-section { font-size:9px; letter-spacing:2px; color:var(--acc2); padding:14px 18px 3px; text-transform:uppercase; font-family:var(--fsmono); font-weight:700; opacity:0.9; border-top:1px solid rgba(71,255,232,.06); } .sidebar-section:first-of-type { border-top:none; padding-top:8px; } .tab-btn { display:flex; align-items:center; gap:8px; width:100%; padding:5px 16px; border:none; background:none; color:var(--text2); font-family:var(--fsui); font-size:12.5px; cursor:pointer; text-align:left; border-left:3px solid transparent; transition:background .14s, color .14s, border-color .14s; min-height:36px; } .tab-btn:hover { background:rgba(71,255,232,.05); color:var(--text2); border-left-color:rgba(71,255,232,.3); } .tab-btn.active { background:linear-gradient(90deg, rgba(71,255,232,.1) 0%, transparent 100%); color:var(--acc); border-left:3px solid var(--acc); font-weight:700; } .tab-btn .ic { font-size:14px; width:18px; flex-shrink:0; text-align:center; } .tab-btn .nav-label { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; } /* ─── MAIN AREA ────────────────────────────────────────── */ .main { flex:1; overflow-y:auto; overflow-x:hidden; padding:18px 22px; scroll-behavior:smooth; min-height:0; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .panel { display:none; } .panel.active { display:block; animation:fadeIn .2s ease; } @keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} } /* ─── PANEL HEADER ─────────────────────────────────────── */ .panel-head { margin-bottom:20px; } .panel-title { font-family:var(--fssans); font-size:22px; font-weight:800; color:var(--acc); letter-spacing:-.4px; padding-bottom:6px; display:inline-block; border-bottom:2px solid rgba(71,255,232,.4); text-shadow:0 0 20px rgba(71,255,232,.15); } .panel-sub { font-size:12px; color:var(--muted); margin-top:5px; font-family:var(--fsui); letter-spacing:.1px; } /* ─── CARDS ────────────────────────────────────────────── */ .cards { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; } .card { background:var(--bg2); border:1px solid var(--card-border); border-radius:var(--r2); padding:14px 18px; min-width:120px; position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; box-shadow:var(--card-shadow); } .card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--acc), var(--acc2), var(--acc4)); opacity:0; transition:opacity .2s; } .card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.35); border-color:rgba(71,255,232,.28); } .card:hover::after { opacity:1; } .card-lbl { font-size:10px; font-family:var(--fsui); font-weight:600; color:var(--muted); letter-spacing:.7px; text-transform:uppercase; margin-bottom:5px; } .card-val { font-family:var(--fssans); font-size:22px; font-weight:700; color:var(--acc2); line-height:1.2; } .card-val.sm { font-size:13px; font-weight:500; font-family:var(--fsui); } /* ─── CONTROLS ─────────────────────────────────────────── */ .ctrl { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:flex-end; } .ctrl-lbl { font-size:9px; font-family:var(--fsui); font-weight:700; color:var(--muted2); letter-spacing:1px; text-transform:uppercase; width:100%; margin-bottom:2px; } input, select, textarea { background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r); color:var(--text); font-family:var(--fsui); font-size:13px; padding:7px 11px; outline:none; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; } input::placeholder { color:var(--muted2); } input[type="date"] { color-scheme:dark; } input:focus, select:focus, textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(71,255,232,.1); } /* ─── BUTTONS ──────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:5px; padding:8px 15px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; font-family:var(--fsui); font-size:12px; font-weight:600; transition:all .15s; white-space:nowrap; min-height:34px; line-height:1; -webkit-tap-highlight-color:transparent; } .btn:active { transform:scale(.96); } .btn:disabled { opacity:.4; cursor:not-allowed; transform:none; } .btn-p { background:var(--acc); color:#09090f; border-color:var(--acc); } .btn-p:hover { background:#6efff3; box-shadow:0 0 14px rgba(71,255,232,.35); } .btn-s { background:var(--bg3); color:var(--text2); border-color:var(--border2); } .btn-s:hover { background:var(--bg4); border-color:rgba(71,255,232,.4); color:var(--acc); } .btn-g { background:var(--acc5); color:#09090f; border-color:var(--acc5); } .btn-g:hover { box-shadow:0 0 14px rgba(61,255,143,.3); } .btn-xs { padding:4px 10px !important; font-size:10px !important; min-height:26px !important; border-radius:5px !important; } /* ─── AUTOCOMPLETE ─────────────────────────────────────── */ .ac-wrap { position:relative; } .ac-list:empty { display:none !important; } .ac-list { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:500; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r); max-height:240px; overflow-y:auto; box-shadow:0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(71,255,232,.08); scrollbar-width:thin; } .ac-item { padding:9px 13px; cursor:pointer; font-size:12px; font-family:var(--fsui); color:var(--text2); border-left:2px solid transparent; transition:background .08s, color .08s, border-color .08s; user-select:none; -webkit-user-select:none; } .ac-item:hover { background:rgba(71,255,232,.07); color:var(--acc); border-left-color:rgba(71,255,232,.3); } .ac-item.sel { background:rgba(71,255,232,.12); color:var(--acc); border-left-color:var(--acc); font-weight:600; } /* ─── TABLES ───────────────────────────────────────────── */ .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:8px; border-radius:var(--r2); border:1px solid var(--border); } table { width:100%; border-collapse:collapse; } th { font-size:10px; font-family:var(--fsui); font-weight:700; letter-spacing:.9px; color:var(--muted); text-align:left; padding:8px 11px; border-bottom:1px solid var(--border2); text-transform:uppercase; position:sticky; top:0; z-index:2; background:#1c1c2e; white-space:nowrap; } td { font-size:12px; font-family:var(--fsui); padding:7px 11px; border-bottom:1px solid var(--border); vertical-align:middle; } tbody tr:nth-child(even) td { background:var(--tr-even); } tbody tr:hover td { background:var(--tr-hover) !important; transition:background .08s; } .mono, .fsmono { font-family:var(--fsmono) !important; } /* ─── BADGES ───────────────────────────────────────────── */ .bdg { display:inline-flex; align-items:center; font-size:10px; font-family:var(--fsui); font-weight:600; padding:2px 8px; border-radius:20px; letter-spacing:.2px; transition:filter .12s; } .bdg:hover { filter:brightness(1.18); } .bdg[title] { border-bottom:1px dotted rgba(255,255,255,.2); cursor:help; } .bdg-c { background:rgba(71,255,232,.1); color:var(--acc); border:1px solid rgba(71,255,232,.28); } .bdg-y { background:rgba(232,255,71,.1); color:var(--acc2); border:1px solid rgba(232,255,71,.28); } .bdg-o { background:rgba(255,107,71,.1); color:var(--acc3); border:1px solid rgba(255,107,71,.28); } .bdg-v { background:rgba(176,127,255,.1); color:var(--acc4); border:1px solid rgba(176,127,255,.28); } .bdg-g { background:rgba(61,255,143,.1); color:var(--acc5); border:1px solid rgba(61,255,143,.28); } .bdg-p { background:rgba(176,127,255,.1); color:var(--acc4); border:1px solid rgba(176,127,255,.2); } .bdg-m { background:rgba(255,71,136,.1); color:#ff4488; border:1px solid rgba(255,71,136,.25); } /* ─── INFO BAR ─────────────────────────────────────────── */ .info-bar { background:var(--bg3); border:1px solid var(--border2); border-left:3px solid rgba(71,255,232,.5); border-radius:0 var(--r) var(--r) 0; padding:8px 14px; font-size:11px; font-family:var(--fsui); color:var(--text2); display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; } /* ─── ALERTS ───────────────────────────────────────────── */ .alert { padding:10px 14px; border-radius:var(--r); font-size:12px; margin-bottom:10px; font-family:var(--fsui); border-left:3px solid transparent; } .alert-e { background:rgba(255,68,102,.08); border:1px solid rgba(255,68,102,.25); border-left:3px solid var(--red); color:#ff6688; } .alert-s { background:rgba(61,255,143,.08); border:1px solid rgba(61,255,143,.25); border-left:3px solid var(--green); } .alert-box { padding:10px 14px; border-radius:var(--r); font-size:12px; margin-bottom:10px; border-left:3px solid var(--border2); } .alert-box.alert-warn { background:rgba(232,255,71,.07); border:1px solid rgba(232,255,71,.2); border-left-color:var(--yellow); } .alert-box.alert-ok { background:rgba(61,255,143,.08); border:1px solid rgba(61,255,143,.2); border-left-color:var(--green); } .alert-box.alert-info { background:rgba(71,255,232,.07); border:1px solid rgba(71,255,232,.2); border-left-color:var(--acc2); } .alert-w { background:rgba(232,255,71,.07); border:1px solid rgba(232,255,71,.2); border-left:3px solid var(--acc2); color:var(--acc2); } .alert-i { background:rgba(71,255,232,.07); border:1px solid rgba(71,255,232,.2); border-left:3px solid var(--acc); color:var(--acc); } /* ─── LOADER OVERLAY ───────────────────────────────────── */ #loader-overlay { position:fixed; inset:0; background:linear-gradient(135deg, #09090f 0%, #0d0d1a 100%); z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; backdrop-filter:blur(4px); } #loader-overlay.hidden { display:none; } .loader-title { font-family:var(--fssans); font-size:26px; font-weight:800; background:linear-gradient(110deg, var(--acc), var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.5px; } .loader-step { font-size:12px; color:var(--muted); font-family:var(--fsui); min-height:18px; letter-spacing:.2px; } .loader-bar-wrap { width:260px; height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; } .loader-bar { height:100%; background:linear-gradient(90deg, var(--acc), var(--acc2)); border-radius:3px; transition:width .35s ease; width:0%; box-shadow:0 0 10px rgba(71,255,232,.4); } .loader-pct { font-size:11px; color:var(--acc2); font-family:var(--fsmono); font-weight:700; } /* ─── SPINNER / LOADING ────────────────────────────────── */ .loa { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-family:var(--fsui); padding:20px 0; } .spinner { width:18px; height:18px; border-radius:50%; border:2px solid rgba(71,255,232,.15); border-top-color:var(--acc); border-right-color:rgba(71,255,232,.5); animation:spin .65s linear infinite; flex-shrink:0; will-change:transform; } @keyframes spin { to{transform:rotate(360deg)} } /* ─── MONTH BUTTONS ────────────────────────────────────── */ .m-btn { padding:4px 11px; border-radius:20px; font-size:11px; border:1px solid var(--border2); cursor:pointer; background:var(--bg3); color:var(--muted); font-family:var(--fsui); font-weight:500; transition:all .14s; } .m-btn:hover { border-color:var(--acc); color:var(--text2); } .m-btn.active { background:var(--acc); color:#09090f; border-color:var(--acc); font-weight:700; } /* ─── SCORE WRAP ───────────────────────────────────────── */ .score-wrap { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .score-num { display:inline-block; min-width:28px; text-align:right; font-family:var(--fsmono); font-variant-numeric:tabular-nums; } .score-bar { display:inline-block; height:4px; border-radius:2px; flex-shrink:0; background:linear-gradient(90deg,var(--acc),var(--acc2)); box-shadow:0 0 5px rgba(71,255,232,.3); } /* ─── SZUKAJ MECZU ──────────────────────────────────────────── */ .sm-filter-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:12px 14px; transition:border-color .15s, box-shadow .15s; } .sm-filter-card.active { border-color:var(--acc); box-shadow:0 0 0 2px rgba(71,255,232,.12); } .sm-filter-head { display:flex; align-items:center; gap:8px; } .sm-filter-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; width:100%; user-select:none; } .sm-filter-toggle input[type=checkbox] { width:16px; height:16px; accent-color:var(--acc); flex-shrink:0; } .sm-filter-body { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); } .sm-opt-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:11px; border:1px solid var(--border2); background:var(--bg3); color:var(--muted); cursor:pointer; transition:all .12s; user-select:none; } .sm-opt-btn:hover { border-color:var(--acc); color:var(--text); } .sm-opt-btn:has(input:checked) { background:rgba(71,255,232,.12); color:var(--acc); border-color:var(--acc); font-weight:700; } .sm-match-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:12px 14px; margin-bottom:8px; transition:border-color .15s; } .sm-match-card:hover { border-color:rgba(71,255,232,.25); } .sm-match-card.both-pass { border-left:4px solid var(--acc5); } .sm-match-card.one-pass { border-left:4px solid var(--acc2); } .sm-tag { display:inline-flex; align-items:center; font-size:10px; padding:2px 8px; border-radius:12px; font-weight:600; background:rgba(71,255,232,.1); color:var(--acc); border:1px solid rgba(71,255,232,.25); white-space:nowrap; } .sm-tag.opp { background:rgba(176,127,255,.1); color:var(--acc4); border-color:rgba(176,127,255,.25); } .sm-day-header { font-size:13px; font-weight:800; color:var(--acc2); padding:8px 0 4px; margin-top:14px; margin-bottom:6px; border-bottom:1px solid var(--border2); display:flex; align-items:center; gap:8px; } .sm-day-header:first-child { margin-top:0; } ────────────────────────────────── */ .pred-tag { display:inline-flex; align-items:center; font-size:10px; font-family:var(--fsui); font-weight:500; padding:2px 8px; border-radius:20px; background:rgba(80,80,120,.4); color:#9898c8; border:1px solid rgba(120,120,180,.25); white-space:nowrap; display:inline-block; cursor:help; } .pred-tag.pred-day { background:rgba(71,255,232,.14); color:#7af8e8; border:1px solid rgba(71,255,232,.3); } .pred-tag.pred-linijka { background:rgba(71,255,232,.14); color:#7af8e8; border:1px solid rgba(71,255,232,.3); } .pred-tag.pred-h2h { background:rgba(255,107,71,.14); color:#ff9d7a; border:1px solid rgba(255,107,71,.3); } .pred-tag.pred-hist { background:rgba(232,255,71,.14); color:#d8f060; border:1px solid rgba(232,255,71,.3); } .pred-tag.pred-tri { background:rgba(176,127,255,.14); color:#c8a0ff; border:1px solid rgba(176,127,255,.3); } .pred-tag.pred-month { background:rgba(71,255,232,.14); color:#7af8e8; border:1px solid rgba(71,255,232,.3); } .pred-tag.pred-hot { background:rgba(61,255,143,.14); color:#6affa0; border:1px solid rgba(61,255,143,.3); } /* ─── JASNE MOTYWY - czytelność ────────────────────────── */ body.theme-light .pred-tag.pred-day, body.theme-light .pred-tag.pred-linijka, body.theme-light .pred-tag.pred-month { background:rgba(0,130,100,.13); color:#004d38; border:1px solid rgba(0,130,100,.35); } body.theme-light .pred-tag.pred-h2h { background:rgba(160,40,0,.11); color:#7a1e00; border:1px solid rgba(160,40,0,.32); } body.theme-light .pred-tag.pred-hist { background:rgba(110,80,0,.13); color:#5a3e00; border:1px solid rgba(110,80,0,.32); } body.theme-light .pred-tag.pred-tri { background:rgba(80,0,160,.11); color:#3d0080; border:1px solid rgba(80,0,160,.32); } body.theme-light .pred-tag.pred-hot { background:rgba(0,120,40,.13); color:#004d1a; border:1px solid rgba(0,120,40,.32); } body.theme-light .pred-tag { color:#1a1a2e !important; } body.theme-light .bdg-c { background:rgba(0,100,200,.13) !important; color:#003880 !important; border-color:rgba(0,100,200,.32) !important; } body.theme-light .bdg-y { background:rgba(130,80,0,.13) !important; color:#5c3800 !important; border-color:rgba(130,80,0,.32) !important; } body.theme-light .bdg-o { background:rgba(150,45,0,.12) !important; color:#6e1f00 !important; border-color:rgba(150,45,0,.32) !important; } body.theme-light .bdg-v { background:rgba(80,0,160,.11) !important; color:#3d0080 !important; border-color:rgba(80,0,160,.32) !important; } body.theme-light .bdg-g { background:rgba(0,110,40,.13) !important; color:#004a1a !important; border-color:rgba(0,110,40,.32) !important; } body.theme-light .bdg-p { background:rgba(80,0,160,.11) !important; color:#3d0080 !important; border-color:rgba(80,0,160,.32) !important; } body.theme-light .bdg-m { background:rgba(150,0,55,.11) !important; color:#6e0028 !important; border-color:rgba(150,0,55,.32) !important; } body.theme-light .bdg { color:#1a1a2e !important; } body.theme-light .tab-btn { color:var(--text); } body.theme-light .tab-btn:hover { background:rgba(0,0,0,.07); color:var(--acc); } body.theme-light .tab-btn.active { background:rgba(0,0,0,.10); color:var(--acc); border-left:3px solid var(--acc); } /* Buttons visible on light backgrounds */ body.theme-light .btn-s { background:rgba(0,0,0,.10); color:var(--text) !important; border-color:rgba(0,0,0,.22); } body.theme-light .btn-s:hover { background:rgba(0,0,0,.18); color:var(--text) !important; } /* Topbar buttons on colored gradient need white text */ body.theme-light .topbar .btn-s { background:rgba(0,0,0,.22); color:#fff !important; border-color:rgba(255,255,255,.35); } body.theme-light .topbar .btn-s:hover { background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.6); } /* Info pill in topbar */ body.theme-light #dates-info-pill { color:#fff !important; background:rgba(0,0,0,.25) !important; border-color:rgba(255,255,255,.4) !important; } /* topbar stat text */ body.theme-light .topbar-stat { background:rgba(0,0,0,.2); color:#fff !important; border-color:rgba(255,255,255,.25); } body.theme-light .topbar-stat b { color:#ffe484 !important; } body.theme-light .sidebar-section { color:var(--acc2) !important; opacity:1; } body.theme-light .score-bar { background:var(--acc); opacity:.5; } body.theme-light tbody tr:hover td { background:rgba(0,0,0,.05) !important; } body.theme-light .muted, body.theme-light [style*="color:var(--muted)"] { color:var(--muted) !important; } body.theme-light .panel-sub { color:var(--muted); } /* Fix info-bar text in light themes */ body.theme-light .info-bar { color:var(--text) !important; background:rgba(0,0,0,.07) !important; border-color:rgba(0,0,0,.2) !important; border-left-color:var(--acc) !important; } /* Fix alert boxes in light themes */ body.theme-light .alert-i { background:rgba(0,60,200,.07) !important; border-color:rgba(0,60,200,.22) !important; color:var(--acc) !important; } body.theme-light .alert-w { background:rgba(130,80,0,.07) !important; color:var(--muted) !important; } /* Sidebar section labels */ body.theme-light .sidebar-section { color:var(--muted) !important; opacity:1; } body.theme-light .card { background:var(--bg3); } body.theme-light .alert { color:var(--text); } /* ─── DUBLER BOX ───────────────────────────────────────── */ .dubler-box { background:linear-gradient(135deg, rgba(232,255,71,.05), rgba(71,255,232,.04)); border:1px solid rgba(232,255,71,.25); border-radius:var(--r2); padding:14px 16px; margin-bottom:16px; box-shadow:0 2px 12px rgba(232,255,71,.05); } .dubler-title { font-size:13px; font-weight:700; font-family:var(--fssans); color:var(--acc2); margin-bottom:10px; } .dubler-pair { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:start; } .dubler-match { background:var(--bg3); border-radius:var(--r); padding:10px 12px; border:1px solid var(--border); } .dubler-sep { font-size:20px; font-weight:800; color:var(--acc2); display:flex; align-items:center; justify-content:center; padding-top:16px; } .dm-team { font-weight:700; font-size:13px; margin-bottom:2px; font-family:var(--fsui); } .dm-vs { font-size:11px; color:var(--muted); } /* ─── ROWS HIGHLIGHTS ──────────────────────────────────── */ .row-gold td { background:rgba(255,200,71,.05) !important; } .row-silver td { background:rgba(180,180,210,.04) !important; } .row-bronze td { background:rgba(205,127,50,.04) !important; } .row-highlight td { background:rgba(71,255,232,.06) !important; } .row-highlight { border-left:2px solid rgba(71,255,232,.25); } .row-highlight td:first-child { border-left:3px solid var(--acc5); } /* ─── POROWNYWARKA ─────────────────────────────────────── */ .por-grid { overflow-x:auto; margin-top:10px; border-radius:var(--r); } .por-cell { min-width:50px; height:28px; text-align:center; vertical-align:middle; font-size:10px; cursor:pointer; } .por-cell.has { background:rgba(71,255,232,.1); color:var(--acc); } .por-cell.common { background:rgba(232,255,71,.15); color:var(--acc2); border:1px solid rgba(232,255,71,.3); } .por-cell.close { background:rgba(255,107,71,.15); border:1px solid rgba(255,107,71,.35); } /* ─── TICKER BAR ───────────────────────────────────────── */ #mecze-ticker-bar { display:none; align-items:center; gap:10px; padding:5px 16px; min-height:30px; background:linear-gradient(90deg, var(--bg2), var(--bg3)); border-bottom:1px solid var(--border2); font-size:11px; font-family:var(--fsui); flex-shrink:0; } #mecze-ticker-bar.active { display:flex; } .mecze-ticker-label { color:var(--acc2); font-weight:700; white-space:nowrap; font-size:11px; flex-shrink:0; } .mecze-ticker-track { flex:1; overflow:hidden; position:relative; height:22px; } .mecze-ticker-slide { display:flex; flex-direction:column; transition:transform .45s ease; } .mecze-ticker-item { display:flex; align-items:center; gap:6px; height:24px; font-size:11px; overflow:hidden; } .mecze-ticker-item .tm-match { color:var(--text); font-weight:600; } .mecze-ticker-item .tm-date { color:var(--muted); font-size:10px; } .mecze-ticker-item .tm-badge { background:rgba(71,255,232,.12); color:var(--acc); padding:1px 6px; border-radius:10px; font-size:9px; } .mecze-ticker-close { cursor:pointer; color:var(--muted); padding:0 4px; font-size:14px; flex-shrink:0; } .mecze-ticker-close:hover { color:var(--acc3); } /* ─── AGENT TOOLTIP ────────────────────────────────────── */ .agent-tooltip { position:fixed; z-index:9998; background:var(--bg3); border:1px solid var(--border2); border-left:3px solid var(--acc); border-radius:var(--r2); padding:10px 14px; max-width:320px; font-size:11px; font-family:var(--fsui); box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(71,255,232,.08); backdrop-filter:blur(8px); pointer-events:auto; opacity:0; transition:opacity .15s; line-height:1.7; } .agent-tooltip.visible { opacity:1; } /* tm-tooltip: floating, position:fixed, ukryty gdy nie aktywny */ .tm-tooltip { position:fixed; z-index:9997; background:var(--bg3); border:1px solid var(--border2); border-left:3px solid var(--acc2); border-radius:var(--r2); padding:10px 14px; max-width:340px; font-size:11px; font-family:var(--fsui); box-shadow:0 8px 30px rgba(0,0,0,.6); pointer-events:none; opacity:0; transition:opacity .15s; line-height:1.7; display:none; } .tm-tooltip.visible { opacity:1; display:block; } /* ─── PASSWORD SCREEN ──────────────────────────────────── */ #pw-screen { position:fixed; inset:0; z-index:5000; background:radial-gradient(ellipse at 50% 0%, rgba(71,255,232,.06) 0%, #09090f 60%); display:flex; align-items:center; justify-content:center; } #pw-screen.hidden { display:none; } #pw-box { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r3); padding:40px 44px; width:360px; max-width:92vw; text-align:center; box-shadow:0 0 60px rgba(71,255,232,.08), 0 20px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:16px; } #pw-logo { font-family:var(--fssans); font-size:26px; font-weight:800; background:linear-gradient(110deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.5px; } #pw-sub { font-size:12px; color:var(--muted); font-family:var(--fsui); line-height:1.6; } #pw-input { width:100%; padding:11px 14px; font-size:14px; border-radius:var(--r); background:var(--bg3); border:1px solid var(--border2); color:var(--text); text-align:center; font-family:var(--fsui); } #pw-btn { width:100%; padding:12px; font-size:13px; font-weight:700; border-radius:var(--r); border:none; cursor:pointer; background:var(--acc); color:#09090f; font-family:var(--fssans); letter-spacing:.5px; transition:all .15s; } #pw-btn:hover { background:#6efff3; box-shadow:0 0 20px rgba(71,255,232,.35); } #pw-err { font-size:12px; color:var(--acc3); min-height:18px; font-family:var(--fsui); } /* ─── DIAGNOSTICS ──────────────────────────────────────── */ #diag-overlay { position:fixed; inset:0; z-index:4000; background:rgba(9,9,15,.88); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; } #diag-overlay.hidden { display:none; } #diag-box { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r2); padding:24px; max-width:560px; width:94%; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.7); } /* ─── TECH PANEL ───────────────────────────────────────── */ #tech-panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:3999; backdrop-filter:blur(4px); } #tech-panel-overlay.hidden { display:none; } #tech-panel { position:fixed; top:0; right:0; width:340px; max-width:96vw; height:100%; z-index:4000; background:var(--bg2); border-left:1px solid var(--border2); box-shadow:-8px 0 40px rgba(0,0,0,.5); overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; } /* ─── HTAB (horizontal tab row) ───────────────────────── */ .htab { padding:5px 12px; border-radius:20px; font-size:11px; border:1px solid var(--border2); background:var(--bg3); color:var(--muted); cursor:pointer; font-family:var(--fsui); font-weight:500; transition:all .14s; } .htab:hover { border-color:var(--acc4); color:var(--text2); } .htab.active { background:var(--acc); color:#09090f !important; border-color:var(--acc) !important; font-weight:700; box-shadow:0 2px 8px rgba(71,255,232,.25); } /* ─── ZESTAWIENIA ──────────────────────────────────────── */ .z-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-top:12px; } .z-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:12px 14px; } .z-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .z-card-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-family:var(--fsui); font-weight:600; } .z-card-count { font-family:var(--fssans); font-size:18px; font-weight:700; color:var(--acc); } .z-card-list { font-size:11px; color:var(--text); max-height:120px; overflow-y:auto; } .z-card-item { padding:2px 0; border-bottom:1px solid var(--border); cursor:pointer; font-family:var(--fsui); } .z-card-item:hover { color:var(--acc); } /* ─── MISC ─────────────────────────────────────────────── */ .lnj-cell { font-size:10px; padding:3px 6px; border-radius:3px; background:var(--bg3); text-align:center; font-family:var(--fsmono); } .lnj-cell.has { background:rgba(71,255,232,.14); color:var(--acc); font-weight:600; } .lnj-cell.streak3 { background:rgba(232,255,71,.18); color:var(--acc2); } .lnj-cell.streak5 { background:rgba(255,107,71,.18); color:var(--acc3); } .lnj-cell.hdr { background:var(--bg4); color:var(--muted); font-size:9px; } .sch-cell { font-size:10px; padding:4px 3px; border-radius:3px; background:var(--bg2); text-align:center; min-height:26px; font-family:var(--fsmono); } .sch-cell.has { background:rgba(71,255,232,.14); color:var(--acc); font-size:9px; } .sch-cell.hdr { background:var(--bg4); color:var(--muted); font-size:9px; } .pred-score { font-family:var(--fssans); font-size:24px; font-weight:800; color:var(--acc2); min-width:48px; text-align:center; } .pred-score.high { color:var(--acc3); } .month-bar { display:flex; align-items:center; gap:6px; margin-bottom:4px; } .month-bar-fill { height:8px; border-radius:4px; background:linear-gradient(90deg,var(--acc),var(--acc2)); min-width:2px; transition:width .3s; } .month-bar-lbl { font-size:10px; color:var(--muted); min-width:20px; font-family:var(--fsui); } .month-bar-cnt { font-size:10px; color:var(--acc2); font-family:var(--fsmono); font-weight:600; } .yr-current td { background:rgba(71,255,232,.04) !important; } td.score-cell { white-space:nowrap; min-width:85px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } /* ─── KEYFRAMES ────────────────────────────────────────── */ @keyframes pulse-warn { 0%,100%{opacity:1} 50%{opacity:.6} } @keyframes h2h-pulse { 0%,100%{ box-shadow:0 0 4px rgba(255,140,0,.4); background:rgba(255,140,0,.18); } 50% { box-shadow:0 0 16px rgba(255,140,0,.8); background:rgba(255,140,0,.35); } } /* ─── MOBILE MENU BTN ──────────────────────────────────── */ #mobile-menu-btn { display:none; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r); cursor:pointer; padding:5px 10px; font-size:18px; color:var(--text); line-height:1; align-items:center; justify-content:center; flex-shrink:0; } /* ═══════════════════════════════════════════════════════ RESPONSIVE - Tablet (≤900px) ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { :root { --sidebar:190px; } .topbar-stat { display:none !important; } .topbar-sep { display:none !important; } .main { padding:16px; } } /* ═══════════════════════════════════════════════════════ RESPONSIVE - Tablet narrow (≤768px) ═══════════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --sidebar:56px; } .sidebar { overflow:hidden; } .sidebar .nav-label, .sidebar-title, .sidebar-section { display:none !important; } .tab-btn { padding:10px 0; justify-content:center; gap:0; } .tab-btn .ic { width:100%; font-size:16px; text-align:center; } .main { padding:12px; } .topbar { padding:0 12px; } .ctrl input, .ctrl select { width:100%; max-width:none; } .btn { font-size:11px; padding:6px 10px; } .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .panel-title { font-size:18px; } table { font-size:11px; } th, td { padding:5px 7px; } .dubler-pair { grid-template-columns:1fr; } /* Tabele na mobile */ table { font-size:10.5px; } th, td { padding:5px 6px !important; } .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100vw; } /* Panele na mobile */ .panel-title { font-size:18px !important; } .ctrl { flex-wrap:wrap !important; gap:6px !important; } .ctrl input, .ctrl select { min-width:0; max-width:100%; } .info-bar { font-size:10px !important; } /* Przyciski na mobile */ .btn-p, .btn-s { padding:7px 10px !important; font-size:11px !important; } .htab { padding:6px 10px !important; font-size:11px !important; } /* TOP10 */ .dubler-box { padding:10px !important; } .dm-team { font-size:13px !important; } /* Sidebar drawer */ .sidebar.mobile-open { width:220px !important; min-width:220px !important; } } /* ═══════════════════════════════════════════════════════ RESPONSIVE - Mobile (≤560px) Pełna wersja mobilna z hamburgerem ═══════════════════════════════════════════════════════ */ @media (max-width: 560px) { /* Pokazuj hamburger, ukryj sidebar */ #mobile-menu-btn { display:flex !important; } .sidebar { display:none !important; width:0 !important; } /* Scrollowanie po stronie */ html, body { overflow-y:auto !important; height:auto !important; } .layout { overflow:visible !important; height:auto !important; flex-direction:column !important; } .main { margin-left:0 !important; padding:10px !important; min-height:auto !important; overflow-y:visible !important; height:auto !important; } /* Topbar mobile */ .topbar { padding:0 10px !important; height:48px !important; gap:6px; } .topbar-logo { font-size:14px !important; } .topbar-actions { gap:4px !important; overflow-x:auto; flex-shrink:1; } .topbar-actions .btn { font-size:10px !important; padding:4px 7px !important; min-height:30px !important; } .topbar-actions .btn-hide-mobile { display:none !important; } #btn-rebuild { display:none !important; } /* Panel typo */ .panel-title { font-size:16px !important; } .panel-sub { font-size:10px !important; } /* Tabele */ .tbl-wrap { border-radius:var(--r); } table { font-size:10px !important; } th, td { padding:4px 6px !important; } /* Formularze - zapobiegaj zoom na iOS */ input, select, textarea { font-size:16px !important; } .ctrl { gap:6px !important; } .ctrl input, .ctrl select { max-width:100% !important; } /* Info bar, badges */ .info-bar { font-size:10px !important; padding:6px 10px !important; } .bdg { font-size:9px !important; } /* Cards responsive */ .cards { gap:8px; } .card { padding:10px 12px; min-width:100px; } .card-val { font-size:18px; } /* Grid */ .grid-3 { grid-template-columns:1fr !important; } .dubler-pair { grid-template-columns:1fr !important; gap:8px; } .z-grid { grid-template-columns:1fr !important; } } /* ─── MOBILE SIDEBAR (open via hamburger) ───────────── */ @media (max-width: 560px) { .sidebar.mobile-open { display:flex !important; position:fixed; top:0; left:0; width:78vw; max-width:290px; height:100vh; z-index:600; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; flex-direction:column; padding:16px 0 48px; background:var(--bg1); box-shadow:4px 0 30px rgba(0,0,0,.6); border-right:1px solid var(--border2); } .sidebar.mobile-open .nav-label { display:block !important; font-size:13px !important; } .sidebar.mobile-open .sidebar-title, .sidebar.mobile-open .sidebar-section { display:block !important; } .sidebar.mobile-open .tab-btn { min-width:0 !important; font-size:13px !important; padding:12px 18px !important; text-align:left; justify-content:flex-start; gap:10px; } .sidebar.mobile-open .tab-btn .ic { font-size:15px !important; width:18px; } } /* ─── PRINT ─────────────────────────────────────────── */ @media print { .topbar, .sidebar, #mobile-menu-btn { display:none !important; } .main { padding:0 !important; } } /* ─── AUTH LOGIN ────────────────────────────────────────── */ #auth-screen { position:fixed; inset:0; z-index:6000; background:radial-gradient(ellipse at 50% 0%, rgba(71,255,232,.06) 0%, #09090f 70%); display:flex; align-items:center; justify-content:center; } #auth-screen.hidden { display:none !important; } .auth-box { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r3); padding:36px 40px; width:380px; max-width:94vw; box-shadow:0 0 60px rgba(71,255,232,.07), 0 20px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:14px; } .auth-logo { font-family:var(--fssans); font-size:24px; font-weight:800; text-align:center; background:linear-gradient(110deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:2px; } .auth-tabs { display:flex; gap:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--border2); } .auth-tab { flex:1; padding:8px; text-align:center; cursor:pointer; background:var(--bg3); font-size:12px; font-weight:600; color:var(--muted); transition:all .15s; } .auth-tab.active { background:var(--acc); color:var(--bg1); } .auth-inp { width:100%; padding:10px 13px; border-radius:var(--r); background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-family:var(--fsui); font-size:14px; } .auth-inp:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(71,255,232,.12); } .auth-btn { width:100%; padding:12px; border-radius:var(--r); border:none; cursor:pointer; background:var(--acc); color:#09090f; font-family:var(--fssans); font-size:13px; font-weight:800; letter-spacing:.3px; transition:all .15s; } .auth-btn:hover { filter:brightness(1.1); box-shadow:0 0 18px rgba(71,255,232,.35); } .auth-err { font-size:12px; color:var(--red); min-height:18px; text-align:center; } .auth-ok { font-size:12px; color:var(--green); text-align:center; } /* ─── TOPBAR USER ───────────────────────────────────────── */ #topbar-user { display:flex; align-items:center; gap:7px; padding:3px 10px; border-radius:20px; background:var(--bg3); border:1px solid var(--border2); cursor:pointer; transition:all .15s; font-size:12px; } #topbar-user:hover { border-color:var(--acc); } .topbar-avatar { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; } .topbar-uname { font-weight:700; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topbar-plan { font-size:9px; padding:1px 5px; border-radius:8px; font-weight:700; } .plan-admin { background:rgba(232,255,71,.18); color:var(--acc2); } .plan-premium { background:rgba(71,255,232,.18); color:var(--acc); } .plan-free { background:rgba(120,120,150,.15); color:var(--muted); } /* ─── MODAL BASE ────────────────────────────────────────── */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); z-index:8000; display:flex; align-items:center; justify-content:center; padding:16px; } .modal-overlay.hidden { display:none !important; } .modal-box { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r2); max-width:560px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.7); } .modal-head { display:flex; align-items:center; gap:10px; padding:16px 20px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg2); z-index:5; } .modal-title { font-size:16px; font-weight:800; color:var(--acc); } .modal-close { margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:20px; line-height:1; padding:2px 6px; } .modal-close:hover { color:var(--acc3); } .modal-body { padding:18px 20px 22px; } /* ─── KONTO MODAL ───────────────────────────────────────── */ .konto-section { margin-bottom:18px; } .konto-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; font-weight:700; margin-bottom:6px; } .konto-inp { width:100%; padding:8px 11px; border-radius:var(--r); background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-size:13px; } .konto-inp:focus { outline:none; border-color:var(--acc); } .konto-stat { display:flex; gap:6px; flex-wrap:wrap; } .konto-stat-item { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:8px 12px; font-size:11px; } .konto-stat-item b { color:var(--acc2); display:block; font-size:15px; font-family:var(--fssans); } .color-picker-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; } .color-swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .15s; flex-shrink:0; } .color-swatch.sel { border-color:#fff; transform:scale(1.2); box-shadow:0 0 8px rgba(255,255,255,.4); } .nick-preview { padding:6px 14px; border-radius:20px; font-weight:700; font-size:13px; display:inline-block; } /* ─── CHAT WIDGET ───────────────────────────────────────── */ #chat-fab { position:fixed; bottom:24px; right:24px; z-index:7000; width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--acc4)); color:var(--bg1); display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; border:none; box-shadow:0 4px 24px rgba(71,255,232,.4); transition:all .2s; } #chat-fab:hover { transform:scale(1.1); box-shadow:0 6px 32px rgba(71,255,232,.6); } #chat-badge { position:absolute; top:-3px; right:-3px; background:var(--acc3); color:#fff; min-width:18px; height:18px; border-radius:9px; font-size:9px; font-weight:800; line-height:18px; text-align:center; padding:0 3px; display:none; border:2px solid var(--bg1); } #chat-panel { position:fixed; bottom:88px; right:24px; z-index:7001; width:360px; max-width:calc(100vw - 32px); background:var(--bg2); border:1px solid var(--border2); border-radius:14px; box-shadow:0 12px 48px rgba(0,0,0,.7); display:flex; flex-direction:column; overflow:hidden; transition:opacity .15s,transform .15s; transform-origin:bottom right; } #chat-panel.hidden { display:none; } .chat-head { display:flex; align-items:center; gap:8px; padding:11px 14px 10px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,rgba(71,255,232,.06),rgba(176,127,255,.06)); } .chat-title { font-weight:800; color:var(--acc); font-size:13px; letter-spacing:.2px; } .chat-online { font-size:10px; color:var(--muted); margin-left:2px; } .chat-head-actions { margin-left:auto; display:flex; gap:6px; align-items:center; } .chat-msgs { height:360px; overflow-y:auto; padding:10px 10px 6px; display:flex; flex-direction:column; gap:2px; scroll-behavior:smooth; } .chat-msgs::-webkit-scrollbar { width:4px; } .chat-msgs::-webkit-scrollbar-thumb { background:rgba(71,255,232,.2); border-radius:2px; } .chat-day-sep { text-align:center; font-size:9px; color:var(--muted2); padding:6px 0 2px; user-select:none; } .chat-msg-wrap { display:flex; gap:7px; padding:3px 4px 2px; border-radius:8px; position:relative; transition:background .12s; } .chat-msg-wrap:hover { background:rgba(255,255,255,.04); } .chat-msg-wrap:hover .chat-msg-actions { opacity:1; } .chat-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; margin-top:2px; } .chat-msg-body { flex:1; min-width:0; } .chat-msg-meta { display:flex; align-items:baseline; gap:5px; margin-bottom:1px; } .chat-msg-author { font-weight:800; font-size:11px; } .chat-msg-plan { font-size:8px; padding:0 3px; border-radius:3px; margin-left:1px; } .chat-msg-time { font-size:9px; color:var(--muted2); } .chat-msg-text { color:var(--text2); font-size:12px; line-height:1.55; word-break:break-word; } .chat-msg-actions { position:absolute; top:2px; right:6px; opacity:0; transition:opacity .12s; display:flex; gap:3px; align-items:center; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:2px 6px; } .chat-react-btn { background:none; border:none; cursor:pointer; font-size:13px; padding:1px 2px; border-radius:4px; transition:transform .1s; line-height:1; } .chat-react-btn:hover { transform:scale(1.3); } .chat-del-btn { background:none; border:none; cursor:pointer; font-size:10px; color:var(--muted); padding:0 2px; border-radius:3px; transition:color .1s; } .chat-del-btn:hover { color:var(--acc3); } .chat-reactions { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; } .chat-reaction-pill { display:inline-flex; align-items:center; gap:2px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1px 6px 1px 4px; font-size:11px; cursor:pointer; transition:all .12s; user-select:none; } .chat-reaction-pill:hover { background:rgba(71,255,232,.12); border-color:var(--acc); } .chat-reaction-pill.mine { background:rgba(71,255,232,.15); border-color:rgba(71,255,232,.4); } .chat-reaction-count { font-size:10px; color:var(--text2); font-weight:600; } .chat-input-row { display:flex; gap:6px; padding:8px 10px 10px; border-top:1px solid var(--border); background:var(--bg2); } .chat-input { flex:1; padding:7px 12px; border-radius:20px; background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-size:12px; transition:border .15s; } .chat-input:focus { outline:none; border-color:var(--acc); } .chat-send-btn { width:34px; height:34px; border-radius:50%; border:none; background:var(--acc); color:var(--bg1); font-weight:800; font-size:14px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; } .chat-send-btn:hover { background:var(--acc4); transform:scale(1.08); } .chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); font-size:12px; padding:30px 0; gap:8px; } .chat-not-logged { padding:14px 16px; background:rgba(71,255,232,.06); border-top:1px solid var(--border); font-size:11px; color:var(--muted); text-align:center; } /* ─── ADMIN PANEL ───────────────────────────────────────── */ .admin-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; } .admin-tab { padding:5px 14px; border-radius:20px; cursor:pointer; font-size:11px; font-weight:600; border:1px solid var(--border2); background:var(--bg3); color:var(--muted); transition:all .12s; } .admin-tab.active { background:var(--acc); color:var(--bg1); border-color:var(--acc); } .user-row { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:10px 14px; display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; } .user-avatar-big { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; } .user-info { flex:1; min-width:0; } .user-name { font-weight:800; font-size:13px; } .user-email { font-size:10px; color:var(--muted); } .user-meta { font-size:10px; color:var(--muted); margin-top:3px; } .user-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }