/* Ciemny jest domyślną paletą (zgodnie z tym, czego chce większość ludzi klikających w skrócony link o 23:00) - .light na (dopisywane przez JS w base.html) nadpisuje na jasną. */ :root { --bg: #14151a; --surface: #1c1e24; --text: #e7e8ea; --muted: #9498a3; --accent: #5b8def; --accent-contrast: #ffffff; --border: #2c2e36; --danger: #ff6b6b; --result-bg: #182338; --result-border: #26385c; } :root.light { --bg: #f7f7f8; --surface: #ffffff; --text: #1b1b1f; --muted: #666; --accent: #2f6feb; --accent-contrast: #ffffff; --border: #ddd; --danger: #c0392b; --result-bg: #eaf1ff; --result-border: #cddcfb; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; transition: background-color 0.15s ease, color 0.15s ease; } .site-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; transition: background-color 0.15s ease, border-color 0.15s ease; } .logo { font-weight: 700; text-decoration: none; color: var(--text); } /* Prawdziwy przełącznik (track + kółko), nie przycisk z tekstem - dokładnie taki, jak "jasny/ciemny" wygląda wszędzie indziej. */ .theme-toggle { position: relative; width: 42px; height: 24px; padding: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--muted); } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.15s ease, background-color 0.15s ease; } :root.light .theme-toggle-thumb { transform: translateX(18px); background: var(--accent); } main { flex: 1; max-width: 720px; margin: 3rem auto; padding: 0 1.5rem; width: 100%; } .table-scroll { overflow-x: auto; } .hero h1 { margin-bottom: 0.25rem; } .lead { color: var(--muted); margin-top: 0; } .link-form p { margin: 0 0 1rem; } .link-form input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 1rem; } .link-form label { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; color: var(--muted); } .advanced-settings { margin: 0.25rem 0 1.25rem; border: 1px solid var(--border); border-radius: 8px; transition: border-color 0.15s ease; } .advanced-settings summary { cursor: pointer; padding: 0.6rem 0.9rem; font-size: 0.9rem; color: var(--muted); user-select: none; } .advanced-settings summary:hover { color: var(--text); } .advanced-settings[open] summary { border-bottom: 1px solid var(--border); } .advanced-fields { padding: 1rem 0.9rem 0.25rem; } button { background: var(--accent); color: var(--accent-contrast); border: none; padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 1rem; cursor: pointer; } button:hover { opacity: 0.9; } .submit-row { text-align: center; margin-top: 0.5rem; } .submit-button { padding: 0.85rem 2.75rem; font-size: 1.15rem; } .result { background: var(--result-bg); border: 1px solid var(--result-border); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; transition: background-color 0.15s ease, border-color 0.15s ease; } .result-link { font-weight: 600; color: var(--accent); word-break: break-all; } .stats-hint { margin: 0.5rem 0 0; font-size: 0.9rem; } .form-error, .errorlist { color: var(--danger); font-size: 0.9rem; margin: 0 0 1rem; padding-left: 1.1rem; } .form-error { padding-left: 0; } .total-clicks { font-size: 1.1rem; } .hint { color: var(--muted); } h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; } #daily-stats-chart { margin-bottom: 1.5rem; } .events-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .events-table th, .events-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); } .site-footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 2rem 1rem; } .site-footer p { margin: 0.25rem 0; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--text); }