/* ============================================================
   Zdalny VPN — panel zarzadzania
   Jasny motyw, akcent fioletowy, neutralne barwy z lekkim
   odchyleniem w fiolet, zeby szarosc nie wygladala przypadkowo.
   ============================================================ */

:root {
    --bg:        #f6f6fa;
    --card:      #ffffff;
    --line:      #ecebf3;
    --line-soft: #f3f2f8;
    --ink:       #16151d;
    --ink-2:     #45435a;
    --muted:     #7b7990;
    --faint:     #a5a3b8;

    --accent:      #6d28d9;
    --accent-2:    #8b5cf6;
    --accent-soft: #f3eefe;
    --accent-ink:  #5b21b6;

    --ok:      #059669;
    --ok-bg:   #d9f7ec;
    --warn:    #b45309;
    --warn-bg: #fdf1dc;
    --bad:     #be123c;
    --bad-bg:  #ffe4ea;
    --info:    #0369a1;
    --info-bg: #e0f2fe;

    --r-lg: 16px;
    --r-md: 11px;
    --r-sm: 8px;

    --sh-1: 0 1px 2px rgba(22, 21, 29, .04);
    --sh-2: 0 1px 2px rgba(22, 21, 29, .05), 0 10px 28px -16px rgba(22, 21, 29, .22);
    --sh-3: 0 2px 6px rgba(22, 21, 29, .06), 0 22px 48px -26px rgba(22, 21, 29, .35);

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

    --nav-h: 62px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------- szkielet */

.shell { display: flex; min-height: 100vh; }

.side {
    width: 244px; flex: 0 0 244px;
    background: var(--card);
    border-right: 1px solid var(--line);
    padding: 20px 14px 24px;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto; overscroll-behavior: contain;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 24px; }
.logo {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--accent-2), var(--accent));
    color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.02em;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px -4px rgba(109, 40, 217, .55);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text b { font-size: 15px; letter-spacing: -.01em; }
.brand-text small { color: var(--faint); font-size: 11.5px; }

.nav-group {
    color: var(--faint); font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 18px 10px 8px;
}

.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; margin-bottom: 2px;
    border-radius: var(--r-md); color: var(--ink-2);
    font-weight: 500; font-size: 14.5px;
    transition: background .12s ease, color .12s ease;
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .75; }
.nav-item:hover { background: var(--line-soft); text-decoration: none; }
.nav-item.active {
    background: linear-gradient(140deg, var(--accent-2), var(--accent));
    color: #fff; font-weight: 600;
    box-shadow: 0 6px 16px -8px rgba(109, 40, 217, .8);
}
.nav-item.active svg { opacity: 1; }

.side-veil {
    display: none; position: fixed; inset: 0; z-index: 30;
    background: rgba(20, 19, 32, .5);
    backdrop-filter: blur(2px);
}
.side-veil.on { display: block; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 26px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}
.grow { flex: 1; }
.burger {
    display: none; width: 40px; height: 40px; padding: 9px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card); color: var(--ink); cursor: pointer;
}
.who { display: flex; align-items: center; gap: 9px; }
.avatar {
    width: 31px; height: 31px; border-radius: 50%;
    background: linear-gradient(140deg, var(--accent-2), var(--accent));
    color: #fff; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.uname { font-weight: 550; font-size: 14px; }

.pill {
    padding: 4px 11px; border-radius: 20px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    background: var(--accent-soft); color: var(--accent-ink);
}
.pill.warn { background: var(--warn-bg); color: var(--warn); }

/* Na szerokim monitorze tresc korzysta z dostepnego miejsca, ale nie
   rozciaga sie w nieskonczonosc - powyzej pewnej szerokosci wiersze
   staja sie nieczytelne, wiec zamiast tego wysrodkowujemy calosc. */
.content {
    padding: 28px 32px 60px;
    width: 100%; max-width: 1560px;
    margin-inline: auto;
}

/* Uklad dwukolumnowy tam, gdzie karty sa niskie i marnowalyby miejsce. */
.cols-2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1180px) {
    .cols-2 { grid-template-columns: 1fr 1fr; }
    .cols-2 > .card { margin-bottom: 0; }
}
.cols-2\-wide { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1180px) {
    .cols-2\-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
    .cols-2\-wide > div > .card:last-child { margin-bottom: 0; }
}

/* -------------------------------------------------------- typografia */

h1 {
    font-size: 25px; font-weight: 680; letter-spacing: -.022em;
    margin: 0 0 22px; text-wrap: balance;
}
h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.008em; margin: 0 0 14px; }
h3 {
    font-size: 11px; font-weight: 700; color: var(--faint);
    text-transform: uppercase; letter-spacing: .09em; margin: 26px 0 10px;
}

p { margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono  { font-family: var(--mono); font-size: 12.5px; font-variant-ligatures: none; }
.bad   { color: var(--bad); }
.dim   { opacity: .5; }

/* ------------------------------------------------------------- karty */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: 22px;
    margin-bottom: 16px;
}
.card.danger { border-color: #fbd8e0; }

.card.login {
    max-width: 400px; margin: 11vh auto; padding: 34px 32px;
    box-shadow: var(--sh-3); border: 0;
}
.card.login h1 { font-size: 23px; margin-bottom: 4px; }
body.plain { display: block; background: var(--bg); }

/* ------------------------------------------------------------ kafle */

.tiles {
    display: grid; gap: 14px; margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.tile {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg); padding: 20px;
    color: #fff; font-size: 12.5px; font-weight: 500;
    background: linear-gradient(145deg, var(--accent-2), var(--accent));
    box-shadow: 0 12px 30px -18px rgba(22, 21, 29, .8);
}
.tile:nth-child(2) { background: linear-gradient(145deg, #34d399, #047857); }
.tile:nth-child(3) { background: linear-gradient(145deg, #fb7185, #be123c); }
.tile:nth-child(4) { background: linear-gradient(145deg, #38bdf8, #0369a1); }
.tile .num {
    display: block; font-size: 32px; font-weight: 700; line-height: 1.05;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    margin-bottom: 3px;
}
.tile::after {
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

/* ----------------------------------------------------------- tabele */

.tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left; padding: 12px 12px 12px 0;
    border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
th {
    font-size: 10.5px; font-weight: 700; color: var(--faint);
    text-transform: uppercase; letter-spacing: .08em;
    padding-top: 0; white-space: nowrap;
}
tr:last-child td { border-bottom: 0; }
td.num, .tabnum { font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--line-soft); }

/* ------------------------------------------------------- formularze */

label {
    display: block; margin-bottom: 16px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
input, select, textarea {
    display: block; width: 100%; margin-top: 6px;
    padding: 10px 12px;
    background: #fff; border: 1px solid #e0dee9;
    border-radius: var(--r-md);
    color: var(--ink); font-size: 14px; font-family: inherit;
    font-weight: 400;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: #d2cfe0; }
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: var(--accent-2);
    box-shadow: 0 0 0 3.5px rgba(139, 92, 246, .15);
}
input::placeholder { color: #b9b7c8; font-style: italic; }
input[readonly] { background: #fafafd; color: var(--ink-2); }
input[disabled] { background: #f4f3f8; color: var(--faint); }
input[type="file"] { padding: 9px; cursor: pointer; font-size: 13px; }
label > .muted, label > span.small { font-weight: 400; display: block; margin-top: 5px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 10px 17px;
    border: 1px solid transparent; border-radius: var(--r-md);
    background: #eeecf5; color: var(--ink-2);
    font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover { filter: brightness(.97); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary {
    background: linear-gradient(140deg, var(--accent-2), var(--accent));
    color: #fff; box-shadow: 0 8px 18px -10px rgba(109, 40, 217, .9);
}
.btn.vpn {
    background: linear-gradient(140deg, #38bdf8, #0369a1);
    color: #fff; box-shadow: 0 8px 18px -10px rgba(3, 105, 161, .9);
}
.btn.bad   { background: #fff; border-color: #f6ccd7; color: var(--bad); }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn.small { padding: 7px 13px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Krotkie potwierdzenie, ze dane trafily do schowka. */
.btn.ok { background: var(--ok-bg); border-color: #bfe5cd; color: var(--ok); }

/* Wlaczenie wysylki HotPlayerem - jedyny wybor, jaki ma sens przy kliencie. */
.hotplayer-box {
    background: #f7f6fb; border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 15px 17px; margin-top: 4px;
}
.przelacznik { display: flex; gap: 11px; align-items: flex-start; margin: 0; cursor: pointer; }
.przelacznik input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; cursor: pointer; }
.przelacznik > span { display: block; }
.przelacznik b { display: block; margin-bottom: 3px; }
.hotplayer-box > label:not(.przelacznik) { margin: 15px 0 0; }

/* Wypelnienie limitu transferu - jeden rzut oka wystarczy. */
.pasek-ruchu {
    height: 10px; border-radius: 6px; background: #eeecf5;
    overflow: hidden; margin: 4px 0 14px;
}
.pasek-wypelnienie {
    height: 100%; border-radius: 6px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.pasek-wypelnienie.warn { background: linear-gradient(90deg, #f5c26b, #e09b2d); }
.pasek-wypelnienie.bad  { background: linear-gradient(90deg, #f0918f, #d64545); }

/* Dane Xtream: pole i przycisk kopiowania obok siebie, w jednej linii. */
.xtream { margin-bottom: 16px; }
.xtream label { margin-bottom: 13px; }
.kopiowalne { display: flex; gap: 8px; align-items: stretch; }
.kopiowalne input,
.kopiowalne textarea { flex: 1 1 auto; min-width: 0; resize: vertical; }
.kopiowalne .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 520px) {
    .kopiowalne { flex-direction: column; }
    .kopiowalne .btn { width: 100%; }
}

/* -------------------------------------------------------- plakietki */

.badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11.5px; font-weight: 650; vertical-align: middle;
    white-space: nowrap;
}
.badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.badge.bad  { background: var(--bad-bg);  color: var(--bad); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.vpn  { background: var(--info-bg); color: var(--info); }

.flash {
    padding: 13px 16px; border-radius: var(--r-md);
    margin-bottom: 18px; font-size: 14px; font-weight: 500;
    display: flex; gap: 10px; align-items: flex-start;
}
.flash.ok  { background: var(--ok-bg);  color: #065f46; }
.flash.err { background: var(--bad-bg); color: #9f1239; }
.flash.floating { max-width: 400px; margin: 22px auto -8px; }

/* ------------------------------------------------------------ reszta */

.toolbar { display: flex; gap: 11px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .inline { flex: 1; }
.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.inline input, .inline select { margin-top: 0; }

.sendbar {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    padding: 16px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: #fbfaff; margin-bottom: 14px;
}
.loc-select { width: auto; min-width: 210px; margin-top: 0; }

.routes { display: flex; gap: 14px; flex-wrap: wrap; }
.route {
    flex: 1; min-width: 236px; padding: 16px;
    border-radius: var(--r-md); border: 1px solid var(--line); background: #fbfaff;
}
.route.active { border-color: #a7ebd2; background: #f2fdf8; }
.route.vpn.active { border-color: #bae6fd; background: #f0f9ff; }
.route-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

details.card > summary {
    cursor: pointer; list-style: none; color: var(--ink);
    font-size: 14.5px; padding: 2px 0 2px 24px; position: relative;
    font-weight: 500;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
    content: ""; position: absolute; left: 4px; top: 8px;
    width: 6px; height: 6px; border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint); transform: rotate(-45deg);
    transition: transform .15s ease;
}
details.card[open] > summary::before { transform: rotate(45deg); top: 6px; }
details.card[open] > summary { border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.details-body { padding-top: 18px; }
details summary { cursor: pointer; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
    padding: 11px 0 11px 28px; position: relative;
    border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
    position: absolute; left: 2px; font-weight: 800; font-size: 13px;
}
.checklist li.yes::before  { content: "\2713"; color: var(--ok); }
.checklist li.no::before   { content: "\2715"; color: var(--bad); }
.checklist li.warn::before { content: "!";     color: var(--warn); }
.checklist li.off::before  { content: "\2013"; color: var(--faint); }
.checklist li.off { color: var(--muted); }

.steps { margin: 0 0 16px; padding-left: 20px; line-height: 1.85; }
.steps li { margin-bottom: 4px; }
.steps li::marker { color: var(--faint); font-weight: 600; }

.inline-check { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 8px; font-weight: 500; }
.inline-check input { width: auto; margin: 0; }

pre {
    background: #f7f6fb; border: 1px solid var(--line);
    padding: 12px; border-radius: var(--r-sm); overflow-x: auto;
    font-size: 11.5px; margin: 8px 0 0;
    white-space: pre-wrap; word-break: break-all; color: var(--ink-2);
}
textarea.msgbox { line-height: 1.6; resize: vertical; font-size: 13px; }

.unsaved {
    display: block; margin-top: 8px; padding: 9px 13px;
    background: var(--warn-bg); border: 1px solid #f2ddb7;
    border-radius: var(--r-sm); color: var(--warn);
    font-size: 13px; font-weight: 500;
}
@keyframes pulse-save {
    0%, 100% { box-shadow: 0 8px 18px -10px rgba(109, 40, 217, .9); }
    50%      { box-shadow: 0 0 0 6px rgba(139, 92, 246, .2); }
}
.btn.pulse { animation: pulse-save 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; } }

.demo-bar {
    background: linear-gradient(140deg, #fef3c7, #fde8c0);
    border: 1px solid #f2ddb7; color: #92400e;
    border-radius: var(--r-md); padding: 12px 16px;
    margin-bottom: 18px; font-size: 13.5px; line-height: 1.5;
}
.demo-bar b { font-weight: 700; }
.demo-kup {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 11px; padding-top: 11px; border-top: 1px solid #f2ddb7;
}

/* Strona po wygasnieciu wersji probnej. */
.wygaslo { max-width: 640px; margin: 0 auto; padding: 46px 22px 70px; }
.wygaslo h1 { text-align: center; }
.wygaslo .lead {
    text-align: center; font-size: 15.5px; color: var(--ink-2);
    margin: 0 0 26px; line-height: 1.6;
}
.wygaslo .cena {
    font-size: 30px; font-weight: 700; color: var(--accent);
    margin: 0 0 6px; letter-spacing: -.02em;
}
.kontakt-lista { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) {
    .kontakt-lista .btn { width: 100%; text-align: center; }
}

/* Przypomnienie o pominietych krokach - informuje, nie blokuje. */
.setup-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--accent-soft); border: 1px solid #e5d9fb; color: #4a3f66;
    border-radius: var(--r-md); padding: 11px 16px;
    margin-bottom: 18px; font-size: 13.5px; line-height: 1.5;
}
.setup-bar span { flex: 1 1 260px; }
.setup-bar b { font-weight: 700; }

.hint {
    background: var(--accent-soft); border: 1px solid #e5d9fb;
    border-radius: var(--r-md); padding: 13px 16px; margin: 0 0 16px;
    font-size: 13.5px; color: #4a3f66;
}

/* ------------------------------------------- kreator konfiguracji */

.setup { max-width: 700px; margin: 0 auto; padding: 46px 22px 80px; }
.setup-head { margin-bottom: 28px; }
.setup-head h1 { margin-bottom: 8px; }

.progress {
    height: 7px; border-radius: 7px; background: var(--line);
    overflow: hidden; margin: 22px 0 8px;
}
.progress-bar {
    height: 100%; border-radius: 7px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.stepcard {
    display: grid; grid-template-columns: 40px 1fr; gap: 0 17px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
    padding: 22px; margin-bottom: 14px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.stepcard.todo { opacity: .5; }
.stepcard.active { border-color: #d8c9fb; box-shadow: var(--sh-2); }
.stepnum {
    width: 33px; height: 33px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    background: #eeecf5; color: var(--faint);
}
.stepcard.active .stepnum {
    background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: #fff;
}
.stepcard.done .stepnum { background: var(--ok-bg); color: var(--ok); }
.stepbody h2 { margin-bottom: 10px; font-size: 16px; }
.stepbody > :last-child { margin-bottom: 0; }

/* Etykietka przy tytule kroku: co trzeba, a co mozna zrobic pozniej. */
.tag {
    display: inline-block; vertical-align: middle; margin-left: 8px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--accent-soft, #f0ebfe); color: var(--accent);
}
.tag.soft { background: #eef0f4; color: var(--faint); }

.setup-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; margin-top: 24px;
}
.setup-foot p { margin: 0; }
/* Przycisk wejscia do panelu zawsze w osobnej linii, nad reszta stopki. */
.setup-foot form { flex: 0 0 100%; }

/* ================================================================
   GLEBIA I REAKCJE NA DOTYK
   ================================================================ */

/* Wejscie strony: elementy podnosza sie kolejno, kazdy o chwile pozniej.
   Tryb "backwards" sprawia, ze po animacji wracaja do zwyklych stylow,
   wiec efekty najechania dzialaja normalnie. */
@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.content > .card,
.content > .tiles,
.content > h1,
.content > .toolbar,
.setup > .stepcard {
    animation: rise .42s cubic-bezier(.2, .7, .3, 1) backwards;
}
.content > .card:nth-of-type(2), .setup > .stepcard:nth-of-type(2) { animation-delay: .05s; }
.content > .card:nth-of-type(3), .setup > .stepcard:nth-of-type(3) { animation-delay: .10s; }
.content > .card:nth-of-type(4), .setup > .stepcard:nth-of-type(4) { animation-delay: .15s; }
.content > .card:nth-of-type(5), .setup > .stepcard:nth-of-type(5) { animation-delay: .20s; }

/* Karty odklejaja sie od tla pod kursorem. */
.card, .stepcard, .route {
    transition: transform .28s cubic-bezier(.2, .7, .3, 1),
                box-shadow .28s cubic-bezier(.2, .7, .3, 1),
                border-color .2s ease;
}
@media (hover: hover) and (min-width: 901px) {
    .card:hover, .stepcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
    .route:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
}

/* Kafle: przestrzenne pochylenie za kursorem plus swiatlo od gory. */
.tiles { perspective: 1000px; }
.tile {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s;
}
.tile::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}
.tile > * { position: relative; z-index: 1; transform: translateZ(22px); }
.tile.tilting { transition: transform .08s linear; }

/* Przyciski: wcisniecie i rozchodzaca sie fala od miejsca kliknięcia. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.primary:active, .btn.vpn:active { box-shadow: 0 3px 8px -6px rgba(22, 21, 29, .9); }

.ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: rgba(255, 255, 255, .45);
    transform: scale(0); opacity: .8;
    animation: ripple .62s cubic-bezier(.2, .7, .3, 1) forwards;
}
.btn:not(.primary):not(.vpn) .ripple,
.nav-item .ripple { background: rgba(109, 40, 217, .16); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

.nav-item { position: relative; overflow: hidden; }
.nav-item:active { transform: scale(.985); }

/* Pola formularzy lekko sie podnosza po zaznaczeniu. */
input:focus, select:focus, textarea:focus { transform: translateY(-1px); }
input, select, textarea { transition: border-color .12s, box-shadow .12s, transform .12s; }

/* Zakladki na dole: krotki impuls po dotknieciu. */
.tabbar a:active svg, .tabbar button:active svg { transform: scale(.86); }
.tabbar svg { transition: transform .12s ease; }

@media (prefers-reduced-motion: reduce) {
    .content > .card, .content > .tiles, .content > h1,
    .content > .toolbar, .setup > .stepcard { animation: none; }
    .card:hover, .stepcard:hover, .route:hover { transform: none; }
    .ripple { display: none; }
    .tile { transition: none; }
    input:focus, select:focus, textarea:focus { transform: none; }
}

/* ================================================================
   TELEFON I TABLET
   ================================================================ */

.tabbar { display: none; }

@media (max-width: 900px) {

    body { font-size: 15.5px; padding-bottom: var(--nav-h); }

    /* Menu boczne wysuwane, plus stale zakladki na dole ekranu. */
    .side {
        position: fixed; z-index: 40; left: 0; top: 0; bottom: 0;
        width: 272px; flex-basis: 272px;
        transform: translateX(-100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 0 60px rgba(20, 19, 32, .25);
    }
    .side.open { transform: translateX(0); }
    .burger { display: flex; align-items: center; justify-content: center; }

    .topbar { padding: 10px 14px; }
    .uname { display: none; }
    .pill { display: none; }
    .pill.warn { display: inline-block; }

    .content { padding: 18px 14px 30px; }
    h1 { font-size: 21px; margin-bottom: 16px; }
    .card { padding: 17px; border-radius: 14px; margin-bottom: 13px; }
    .grid2 { grid-template-columns: 1fr; gap: 0; }

    .tiles { grid-template-columns: 1fr 1fr; gap: 11px; }
    .tile { padding: 16px; font-size: 11.5px; }
    .tile .num { font-size: 26px; }

    /* Palec potrzebuje wiekszych celow niz kursor. */
    .btn { padding: 12px 18px; font-size: 15px; min-height: 46px; }
    .btn.small { padding: 9px 14px; font-size: 13.5px; min-height: 38px; }
    input, select, textarea { padding: 12px 13px; font-size: 16px; }

    .toolbar, .sendbar, .routes { flex-direction: column; align-items: stretch; }
    .toolbar .inline, .sendbar .inline { width: 100%; }
    .toolbar .btn, .sendbar .btn, .sendbar form { width: 100%; }
    .loc-select { width: 100%; min-width: 0; }

    .setup { padding: 24px 14px 40px; }
    .stepcard { grid-template-columns: 32px 1fr; gap: 0 13px; padding: 17px; }
    .stepnum { width: 30px; height: 30px; font-size: 13px; }
    .card.login { margin: 5vh 14px; padding: 26px 22px; }
    .setup-foot { flex-direction: column; align-items: stretch; }

    /* --- tabele zamieniaja sie w kafelki, bez przewijania w bok --- */
    .cards-mobile thead { display: none; }
    .cards-mobile,
    .cards-mobile tbody,
    .cards-mobile tr,
    .cards-mobile td { display: block; width: 100%; }

    .cards-mobile tr {
        border: 1px solid var(--line); border-radius: 13px;
        padding: 13px 15px; margin-bottom: 11px; background: #fff;
        box-shadow: var(--sh-1);
    }
    .cards-mobile tr:hover td { background: transparent; }
    .cards-mobile td {
        border: 0; padding: 4px 0;
        display: flex; align-items: center; justify-content: space-between;
        gap: 14px; font-size: 14px;
    }
    .cards-mobile td::before {
        content: attr(data-label);
        color: var(--faint); font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .07em;
        flex: 0 0 auto;
    }
    .cards-mobile td[data-label=""]::before { content: none; }
    .cards-mobile td.head {
        display: block; padding: 0 0 8px;
        border-bottom: 1px solid var(--line-soft); margin-bottom: 6px;
    }
    .cards-mobile td.head::before { content: none; }
    .cards-mobile td.head a { font-size: 16px; font-weight: 650; color: var(--ink); }
    .cards-mobile td.act { padding-top: 10px; }
    .cards-mobile td.act::before { content: none; }
    .cards-mobile td.act .btn { width: 100%; }

    /* --- stale zakladki na dole --- */
    .tabbar {
        display: flex; position: fixed; z-index: 25;
        left: 0; right: 0; bottom: 0; height: var(--nav-h);
        background: rgba(255, 255, 255, .93);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .tabbar a, .tabbar button {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 3px;
        border: 0; background: none; cursor: pointer;
        color: var(--muted); font-size: 10.5px; font-weight: 600;
        font-family: inherit; text-decoration: none; padding: 0;
    }
    .tabbar svg { width: 21px; height: 21px; }
    .tabbar .on { color: var(--accent); }
    .tabbar a:hover { text-decoration: none; }
}

@media (max-width: 420px) {
    .tiles { grid-template-columns: 1fr; }
    .content { padding: 16px 12px 26px; }
}