/* ═══════════════════════════════════════════════════════════════════ UTM Menager — glass design system Ciemny motyw domyślny; jasny przez . ═══════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* tło i szkło */ --bg-0: #070a18; --bg-1: #0d1226; --bg-glow-a: rgba(79, 70, 229, .32); --bg-glow-b: rgba(6, 182, 212, .20); --bg-glow-c: rgba(168, 85, 247, .18); --glass-bg: rgba(255, 255, 255, .055); --glass-bg-strong: rgba(255, 255, 255, .09); --glass-border: rgba(255, 255, 255, .11); --glass-shadow: 0 20px 60px rgba(0, 0, 0, .45); /* tekst */ --ink-1: #eef1fb; --ink-2: #a7aec9; --ink-3: #6b7394; /* akcent */ --accent-1: #818cf8; --accent-2: #22d3ee; --accent-grad: linear-gradient(120deg, #6366f1, #22d3ee); --accent-soft: rgba(99, 102, 241, .16); --danger: #f87171; --danger-soft: rgba(248, 113, 113, .12); --ok: #34d399; --ok-soft: rgba(52, 211, 153, .13); /* wykresy (walidowane: dataviz) */ --series-1: #3987e5; --series-2: #d95926; --grid-line: rgba(255, 255, 255, .07); --axis-line: rgba(255, 255, 255, .16); --chart-surface: #1a2138; --radius: 20px; --radius-sm: 12px; } html[data-theme="light"] { color-scheme: light; --bg-0: #e9edf7; --bg-1: #f4f6fb; --bg-glow-a: rgba(99, 102, 241, .22); --bg-glow-b: rgba(34, 211, 238, .18); --bg-glow-c: rgba(192, 132, 252, .16); --glass-bg: rgba(255, 255, 255, .55); --glass-bg-strong: rgba(255, 255, 255, .78); --glass-border: rgba(15, 23, 42, .10); --glass-shadow: 0 20px 50px rgba(30, 41, 90, .14); --ink-1: #10142b; --ink-2: #4b5375; --ink-3: #8189a8; --accent-soft: rgba(99, 102, 241, .12); --series-1: #2a78d6; --series-2: #d95926; --grid-line: rgba(15, 23, 42, .08); --axis-line: rgba(15, 23, 42, .18); --chart-surface: #f4f6fb; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif; background: var(--bg-1); color: var(--ink-1); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ── tło: aurora ──────────────────────────────────────────────── */ .aurora { position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 600px at 85% -10%, var(--bg-glow-c), transparent 60%), radial-gradient(1100px 700px at 12% 8%, var(--bg-glow-a), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-0) 90%); } .aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .8; will-change: transform; } .aurora i:nth-child(1) { width: 480px; height: 480px; left: -8%; top: 12%; background: var(--bg-glow-a); animation: drift-a 26s ease-in-out infinite alternate; } .aurora i:nth-child(2) { width: 420px; height: 420px; right: -6%; top: 34%; background: var(--bg-glow-b); animation: drift-b 32s ease-in-out infinite alternate; } .aurora i:nth-child(3) { width: 380px; height: 380px; left: 38%; bottom: -14%; background: var(--bg-glow-c); animation: drift-c 38s ease-in-out infinite alternate; } @keyframes drift-a { to { transform: translate(90px, 60px) scale(1.15); } } @keyframes drift-b { to { transform: translate(-70px, -50px) scale(1.1); } } @keyframes drift-c { to { transform: translate(60px, -80px) scale(1.2); } } @media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } } /* ── szkło ────────────────────────────────────────────────────── */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--glass-shadow); } .grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── layout ───────────────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: 248px 1fr; gap: 20px; padding: 20px; max-width: 1480px; margin: 0 auto; min-height: 100vh; } .sidebar { position: sticky; top: 20px; height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 22px 14px; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 20px; font-size: 17px; letter-spacing: .2px; } .brand svg { width: 28px; height: 28px; flex: none; } .brand b { font-weight: 700; } .nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background .18s, color .18s, transform .18s; border: 1px solid transparent; } .nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .nav-item:hover { background: var(--glass-bg-strong); color: var(--ink-1); transform: translateX(3px); } .nav-item.active { color: var(--ink-1); background: var(--accent-soft); border-color: rgba(129, 140, 248, .28); box-shadow: inset 0 0 24px rgba(99, 102, 241, .12); } .sidebar-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--glass-border); } .main { min-width: 0; padding-bottom: 40px; } /* karta szczegółów linku */ .detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 16px; } .note-full { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; line-height: 1.65; color: var(--ink-1); white-space: pre-wrap; word-break: break-word; } /* baner trybu demo */ .demo-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 11px 16px; border-radius: var(--radius-sm); background: rgba(237, 161, 0, .10); border: 1px solid rgba(237, 161, 0, .35); font-size: 13.5px; color: var(--ink-1); } .demo-banner .btn { margin-left: auto; } /* ── nagłówki widoków ─────────────────────────────────────────── */ .view { animation: view-in .35s cubic-bezier(.2, .7, .3, 1); } @keyframes view-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 20px; flex-wrap: wrap; } .view-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.3px; } .view-head .sub { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; } .head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ── przyciski ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass-bg-strong); color: var(--ink-1); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s, border-color .16s; } .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .55; cursor: default; transform: none; } .btn-primary { background: var(--accent-grad); border: none; color: #fff; box-shadow: 0 8px 24px rgba(99, 102, 241, .38); } .btn-primary:hover { box-shadow: 0 12px 32px rgba(99, 102, 241, .5); } .btn-ghost { background: transparent; box-shadow: none; } .btn-ghost:hover { background: var(--glass-bg-strong); } .btn-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(248, 113, 113, .25); } .btn-sm { padding: 8px 12px; font-size: 13px; } .btn-block { width: 100%; } .btn-icon { padding: 8px; border-radius: 10px; } .btn-icon svg { width: 16px; height: 16px; } /* ── pola formularzy ──────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 6px; } .field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .2px; } .field input, .field select, .field textarea, .search input { font: inherit; font-size: 14px; color: var(--ink-1); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; outline: none; transition: border-color .16s, box-shadow .16s; width: 100%; } .field input:focus, .field select:focus, .field textarea:focus, .search input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(129, 140, 248, .18); } .field select option { background: var(--bg-1); color: var(--ink-1); } .field input[type="color"] { padding: 4px; height: 42px; cursor: pointer; } /* minmax(0,1fr): inputy mają wbudowaną min-szerokość i bez tego rozpychają kartę */ .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .field input { min-width: 0; } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } .hint { font-size: 12px; color: var(--ink-3); margin: 2px 0 0; overflow-wrap: anywhere; } .search { position: relative; min-width: 240px; } .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 2; } .search input { padding-left: 38px; } /* ── karty / gridy ────────────────────────────────────────────── */ .grid { display: grid; gap: 16px; } /* karty nie dyktują min-szerokości kolumny — inaczej nowrap-owy tekst w głębi (np. wartości presetu) rozpycha całą siatkę poza ekran telefonu */ .grid > * { min-width: 0; } .grid-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .grid-2 { grid-template-columns: 1fr 1fr; } @media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } } .card { padding: 20px 22px; } .card h3 { margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-2); } /* stat tile */ .stat { position: relative; overflow: hidden; } .stat .stat-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .3px; } .stat .stat-value { font-size: 34px; font-weight: 750; letter-spacing: -1px; margin-top: 6px; font-variant-numeric: tabular-nums; } .stat .stat-extra { font-size: 12px; color: var(--ink-3); margin-top: 4px; } .stat .stat-trend { margin-top: 6px; font-size: 12px; font-weight: 650; } .trend.up { color: var(--ok); } .trend.down { color: var(--danger); } .trend.flat { color: var(--ink-3); } .stat .stat-ico { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); } .stat .stat-ico svg { width: 19px; height: 19px; stroke: var(--accent-1); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── tabela ───────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; } tbody td { padding: 13px 14px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; } tbody tr { transition: background .15s; } tbody tr:hover { background: var(--glass-bg-strong); } tbody tr:last-child td { border-bottom: none; } td.num { font-variant-numeric: tabular-nums; text-align: right; } th.num { text-align: right; } .link-cell .t { font-weight: 600; } .link-cell .u { font-size: 12px; color: var(--ink-3); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .short-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); border: 1px solid rgba(129, 140, 248, .25); color: var(--accent-1); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 650; cursor: pointer; transition: transform .15s, box-shadow .15s; font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .short-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99, 102, 241, .3); } .short-pill svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; } .short-pill.pill-long { background: var(--glass-bg-strong); border-color: var(--glass-border); color: var(--ink-2); font-family: inherit; } .short-pill.pill-long:hover { color: var(--ink-1); box-shadow: none; border-color: var(--accent-1); } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--ink-2); } .badge.ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(52, 211, 153, .3); } .badge.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(248, 113, 113, .35); } /* usuwanie szablonu z pigułki */ .chip .chip-x { display: inline-block; margin-left: 7px; opacity: .4; font-weight: 800; transition: opacity .15s, color .15s; } .chip .chip-x:hover { opacity: 1; color: var(--danger); } /* zalogowany użytkownik w stopce menu */ .me-badge { font-size: 12px; font-weight: 650; color: var(--ink-2); padding: 6px 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* plakietka z podpiętą pomocą — klik otwiera wyjaśnienie */ .badge[data-help] { cursor: help; transition: border-color .15s, box-shadow .15s; } .badge[data-help]::after { content: '?'; margin-left: 5px; opacity: .55; font-weight: 800; } .badge[data-help]:hover { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(129, 140, 248, .14); } .row-actions { display: flex; gap: 6px; justify-content: flex-end; } .row-actions .btn-icon { opacity: .75; } .row-actions .btn-icon:hover { opacity: 1; } /* switch */ .switch { position: relative; width: 40px; height: 23px; display: inline-block; cursor: pointer; } .switch input { display: none; } .switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); transition: background .2s, border-color .2s; } .switch i::after { content: ''; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-2); top: 2px; left: 2px; transition: transform .2s, background .2s; } .switch input:checked + i { background: var(--accent-grad); border-color: transparent; } .switch input:checked + i::after { transform: translateX(17px); background: #fff; } /* ── modal ────────────────────────────────────────────────────── */ .modal-backdrop[hidden] { display: none; } .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(5, 8, 20, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: fade-in .2s ease; } @keyframes fade-in { from { opacity: 0; } } .modal { width: min(680px, 100%); max-width: 100%; max-height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; padding: 26px 28px; background: var(--glass-bg-strong); animation: modal-in .28s cubic-bezier(.2, .8, .3, 1.1); } @keyframes modal-in { from { opacity: 0; transform: translateY(22px) scale(.97); } } .modal h2 { margin: 0 0 18px; font-size: 20px; } .modal .form-grid { display: flex; flex-direction: column; gap: 14px; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } /* pigułki presetów */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--ink-2); transition: color .15s, border-color .15s, transform .15s, background .15s; } .chip:hover { color: var(--ink-1); border-color: var(--accent-1); transform: translateY(-1px); } .chip.active { background: var(--accent-soft); color: var(--accent-1); border-color: rgba(129, 140, 248, .45); } /* baner prowadzący w modalu („Zmień cel") */ .modal-callout { background: var(--accent-soft); border: 1px solid rgba(129, 140, 248, .35); border-radius: var(--radius-sm); padding: 11px 15px; margin-bottom: 16px; font-size: 13px; line-height: 1.55; color: var(--ink-1); } input.highlight { border-color: var(--accent-1) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, .25) !important; animation: pulse-glow 1.6s ease-in-out 2; } @keyframes pulse-glow { 50% { box-shadow: 0 0 0 7px rgba(129, 140, 248, .12); } } .url-preview { background: var(--glass-bg); border: 1px dashed var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--accent-2); word-break: break-all; line-height: 1.5; } .section-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 0; } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); } /* ── pomoc kontekstowa ────────────────────────────────────────── */ .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-bg-strong); color: var(--ink-3); font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; flex: none; transition: color .15s, border-color .15s, box-shadow .15s; } .help-btn:hover { color: var(--accent-1); border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(129, 140, 248, .15); } .help-pop { position: fixed; z-index: 120; width: min(320px, calc(100vw - 16px)); padding: 14px 16px; border-radius: 14px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--glass-shadow); animation: modal-in .2s cubic-bezier(.2, .8, .3, 1.1); } .help-pop h4 { margin: 0 0 6px; font-size: 13px; color: var(--ink-1); } .help-pop p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); } .help-pop code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; background: var(--glass-bg); border-radius: 5px; padding: 1px 5px; } .help-pop b { color: var(--ink-1); } /* ── toasty ───────────────────────────────────────────────────── */ .toasts { position: fixed; bottom: 22px; right: 22px; z-index: 90; display: flex; flex-direction: column; gap: 10px; } .toast { padding: 13px 18px; border-radius: 14px; font-size: 14px; font-weight: 550; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--glass-shadow); display: flex; align-items: center; gap: 10px; animation: toast-in .3s cubic-bezier(.2, .8, .3, 1.1); } .toast.ok { border-color: rgba(52, 211, 153, .35); } .toast.err { border-color: rgba(248, 113, 113, .4); } .toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; } .toast.err .dot { background: var(--danger); } @keyframes toast-in { from { opacity: 0; transform: translateX(30px); } } .toast.out { animation: toast-out .25s ease forwards; } @keyframes toast-out { to { opacity: 0; transform: translateX(30px); } } /* ── wykresy ──────────────────────────────────────────────────── */ .chart-box { position: relative; } .chart-box svg { display: block; width: 100%; height: auto; } .chart-legend { display: flex; gap: 18px; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; } .chart-legend .li { display: inline-flex; align-items: center; gap: 7px; } .chart-legend .sw { width: 14px; height: 4px; border-radius: 2px; } .chart-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 10px; padding: 8px 12px; font-size: 12px; line-height: 1.55; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); white-space: nowrap; transform: translate(-50%, -110%); transition: opacity .12s; color: var(--ink-1); } .chart-tip b { font-variant-numeric: tabular-nums; } .chart-tip .tip-day { color: var(--ink-2); font-size: 11px; } /* bar list */ .bar-list { display: flex; flex-direction: column; gap: 11px; } .bar-row { display: grid; grid-template-columns: minmax(80px, 40%) 1fr 44px; gap: 10px; align-items: center; font-size: 13px; } .bar-row .bl { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-row .bt { height: 10px; border-radius: 5px; background: var(--glass-bg); overflow: hidden; display: flex; gap: 2px; align-items: stretch; } .bar-row .bf { height: 100%; border-radius: 3px; background: var(--series-1); transition: width .7s cubic-bezier(.2, .8, .3, 1); min-width: 2px; flex: none; } .bar-row .bf-qr { background: var(--series-2); } .chart-legend.legend-sm { font-size: 11.5px; margin-bottom: 10px; gap: 14px; } /* element legendy z podpiętą pomocą — klikalny jak plakietki */ .chart-legend .li[data-help] { cursor: help; transition: color .15s; } .chart-legend .li[data-help]::after { content: '?'; margin-left: 4px; opacity: .5; font-weight: 800; font-size: .85em; } .chart-legend .li[data-help]:hover { color: var(--ink-1); } .bar-row .bv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .empty-note { color: var(--ink-3); font-size: 13px; padding: 12px 0; } .range-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); } .range-tabs button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); border: none; background: transparent; padding: 6px 13px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; } .range-tabs button.active { background: var(--accent-soft); color: var(--ink-1); } /* ── QR studio ────────────────────────────────────────────────── */ .qr-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; } @media (max-width: 1080px) { .qr-layout { grid-template-columns: 1fr; } } .qr-preview-card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 24px; position: sticky; top: 20px; } .qr-canvas { padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 16px 48px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255,255,255,.08); } .qr-canvas canvas, .qr-canvas svg { display: block; max-width: 100%; height: auto; } .qr-target { font-size: 12.5px; color: var(--ink-3); font-family: ui-monospace, 'SF Mono', Menlo, monospace; word-break: break-all; text-align: center; max-width: 420px; } .qr-dl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .seg { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); } .seg button { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); border: none; background: transparent; padding: 7px 4px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; } .seg button.active { background: var(--accent-soft); color: var(--ink-1); } /* lista linków — elastyczne wiersze zamiast tabeli (mobile: meta zawija się pod nazwę) */ .link-list { display: flex; flex-direction: column; } .link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 4px; border-bottom: 1px solid var(--grid-line); transition: background .15s; } .link-row:hover { background: var(--glass-bg-strong); } .link-row:last-child { border-bottom: none; } .link-main { flex: 1 1 240px; min-width: 0; cursor: pointer; } .link-main .t { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .link-main .u { font-size: 12px; color: var(--ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-main .link-note, .qr-hist-info .qr-note { font-size: 12px; color: var(--ink-2); font-style: italic; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; } .link-clicks { font-variant-numeric: tabular-nums; text-align: right; line-height: 1.25; } .link-clicks small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; } /* lista presetów (bez tabeli — mieści się na każdej szerokości) */ .preset-list { display: flex; flex-direction: column; } .preset-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--grid-line); transition: background .15s; } .preset-row:hover { background: var(--glass-bg-strong); } .preset-row:last-child { border-bottom: none; } .preset-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .preset-info .pv { font-size: 12px; color: var(--ink-3); font-family: ui-monospace, 'SF Mono', Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* historia QR */ .qr-history { display: flex; flex-direction: column; } .qr-hist-row { display: grid; grid-template-columns: 84px 1fr auto auto auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--grid-line); transition: background .15s; } .qr-hist-row:hover { background: var(--glass-bg-strong); } .qr-hist-row:last-child { border-bottom: none; } .qr-mini { width: 84px; height: 84px; border-radius: 14px; background: #fff; display: grid; place-items: center; padding: 6px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .qr-mini canvas { max-width: 100%; max-height: 100%; display: block; } .qr-hist-info { min-width: 0; cursor: pointer; } .qr-mini { cursor: pointer; } .qr-hist-info .t { font-weight: 600; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qr-hist-scans { text-align: right; font-variant-numeric: tabular-nums; } .qr-hist-scans b { font-size: 17px; } .qr-hist-scans span { display: block; font-size: 11px; color: var(--ink-3); } .qr-hist-date { font-size: 12px; color: var(--ink-3); white-space: nowrap; } @media (max-width: 700px) { .qr-hist-row { grid-template-columns: 64px 1fr auto; } .qr-mini { width: 64px; height: 64px; } .qr-hist-date { display: none; } .qr-hist-row .row-actions { grid-column: 2 / -1; justify-content: flex-start; } } /* ── logowanie ────────────────────────────────────────────────── */ .login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; } .login-wrap { width: min(400px, 100%); } .login-card { padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; text-align: center; } .login-logo { display: grid; place-items: center; } .login-logo svg { width: 52px; height: 52px; } .login-card h1 { margin: 0; font-size: 26px; } .login-sub { margin: -6px 0 10px; color: var(--ink-2); font-size: 13.5px; } .login-card .field { text-align: left; } .login-error { color: var(--danger); font-size: 13px; margin: 0; } /* ── responsywność ────────────────────────────────────────────── */ .nav-burger { display: none; } .nav-burger svg { width: 20px; height: 20px; } @media (max-width: 860px) { /* auto 1fr: belka ma wysokość treści — bez tego grid rozciąga jej wiersz, gdy strona jest krótsza niż ekran (belka „pływała" na telefonie) */ .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; padding: 12px; gap: 12px; } .sidebar { position: static; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; flex-wrap: wrap; min-width: 0; max-width: 100%; } .brand { padding: 0 6px 0 8px; flex: 1; } .nav-burger { display: inline-flex; padding: 10px; } /* nawigacja i stopka schowane — otwiera je hamburger */ .nav, .sidebar-foot { display: none; } .sidebar.open .nav { display: flex; flex-direction: column; flex: 0 0 100%; width: 100%; margin-top: 12px; gap: 4px; } .sidebar.open .nav-item { padding: 13px 14px; font-size: 15.5px; } .sidebar.open .sidebar-foot { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 0 100%; width: 100%; border-top: 1px solid var(--glass-border); padding-top: 12px; margin-top: 10px; } .sidebar.open .me-badge { margin-right: auto; } .theme-label { display: none; } } /* wąskie ekrany: tabele gubią drugorzędne kolumny (szczegóły są w statystykach) */ @media (max-width: 700px) { thead th, tbody td { padding: 10px 8px; } #campaignsCard th:nth-child(2), #campaignsCard td:nth-child(2), #campaignsCard th:nth-child(3), #campaignsCard td:nth-child(3), #campaignsCard th:nth-child(4), #campaignsCard td:nth-child(4), #campaignsCard th:nth-child(6), #campaignsCard td:nth-child(6), #campaignsCard th:nth-child(7), #campaignsCard td:nth-child(7) { display: none; } } /* przełącznik motywu: pokazuj właściwą ikonę */ html:not([data-theme="light"]) .ico-sun { display: none; } html[data-theme="light"] .ico-moon { display: none; } ::selection { background: rgba(99, 102, 241, .35); }