:root {
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #172033;
    --muted: #667085;
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-soft: #e0f2fe;
    --border: #e4e7ef;
    --side: #111827;
    --side-text: #cbd5e1;
    --side-active: #1f2a44;
    --ok-bg: #ecfdf3; --ok-text: #067647;
    --err-bg: #fef3f2; --err-text: #b42318;
    --warn-bg: #fffaeb; --warn-text: #93370d;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #060912;
        --card: #0d1424;
        --text: #e6eaf3;
        --muted: #98a2b3;
        --primary: #38bdf8;
        --primary-hover: #7dd3fc;
        --primary-soft: #0c2a3d;
        --border: #1b2538;
        --side: #0a0f1d;
        --side-active: #1b2540;
        --ok-bg: #0d2b1e; --ok-text: #6ce9a6;
        --err-bg: #3a1716; --err-text: #fda29b;
        --warn-bg: #3a2a10; --warn-text: #fec84b;
        --shadow: none;
    }
}
:root[data-theme="dark"] {
    --bg: #060912; --card: #0d1424; --text: #e6eaf3; --muted: #98a2b3;
    --primary: #38bdf8; --primary-hover: #7dd3fc; --primary-soft: #0c2a3d;
    --border: #1b2538; --side: #0a0f1d; --side-active: #1b2540;
    --ok-bg: #0d2b1e; --ok-text: #6ce9a6; --err-bg: #3a1716; --err-text: #fda29b;
    --warn-bg: #3a2a10; --warn-text: #fec84b; --shadow: none;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 18px; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
h3 { margin: 0 0 4px; font-size: 1.05rem; }

/* ---------- Logowanie / rejestracja ---------- */
.auth-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth-head h1 { margin: 0; }
.auth-head .theme-toggle { margin: 0; flex: 0 0 auto; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
main.narrow { width: 100%; max-width: 400px; }
.logo {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-weight: 700; font-size: 1.3rem; margin: 0 0 22px;
}
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff;
    font-weight: 700; font-size: .95rem; flex: none;
}

/* ---------- Karty i formularze ---------- */
.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow);
}
form.card label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .9rem; }
form.card label small { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=password] {
    display: block; width: 100%; margin-top: 6px;
    padding: 10px 12px; font: inherit; font-size: .97rem; color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; background: var(--card);
    transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.btn {
    display: block; width: 100%; padding: 11px 16px; font: inherit; font-size: .97rem; font-weight: 600;
    color: #fff; background: var(--primary); border: 0; border-radius: 9px; cursor: pointer;
    transition: background .15s;
}
.btn:hover { background: var(--primary-hover); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { display: inline-block; width: auto; padding: 7px 14px; font-size: .88rem; text-decoration: none; }
.btn.secondary { background: var(--card); color: var(--primary); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--primary-soft); }
.muted { color: var(--muted); font-size: .9rem; }
.alert { padding: 11px 14px; border-radius: 9px; margin-bottom: 14px; font-size: .92rem; border: 1px solid transparent; }
.alert.success { background: var(--ok-bg); color: var(--ok-text); }
.alert.error { background: var(--err-bg); color: var(--err-text); }

/* ---------- Panel: układ z menu bocznym ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 240px; flex: none; background: var(--side); color: var(--side-text);
    display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
    display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700;
    font-size: 1.05rem; padding: 4px 10px 22px;
}
.sidebar .brand:hover { text-decoration: none; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
    display: block; padding: 9px 12px; border-radius: 8px; color: var(--side-text);
    font-size: .95rem; font-weight: 500;
}
.menu a:hover { background: var(--side-active); color: #fff; text-decoration: none; }
.menu a.active { background: var(--side-active); color: #fff; }
.account { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding: 16px 10px 4px; }
.account .who { color: #fff; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .email { font-size: .8rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }
button.link { background: none; border: 0; padding: 0; color: #a5b4fc; cursor: pointer; font: inherit; font-size: .85rem; }
button.link:hover { text-decoration: underline; }
.content { flex: 1; min-width: 0; }
main.wide { max-width: 1080px; padding: 32px 32px 56px; }
form.inline { display: inline; margin: 0; }

/* ---------- Siatki, tabele, odznaki ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid .card { margin: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
form.billing { margin-top: 16px; }
dl { margin: 0; }
dt { font-size: .78rem; color: var(--muted); margin-top: 10px; text-transform: uppercase; letter-spacing: .04em; }
dd { margin: 2px 0 0; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .76rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--primary-soft); color: var(--primary); }
.badge.active { background: var(--ok-bg); color: var(--ok-text); }
.badge.past_due, .badge.provisioning_failed, .badge.suspended { background: var(--err-bg); color: var(--err-text); }
.badge.paid { background: var(--warn-bg); color: var(--warn-text); }
.badge.cancelled, .badge.pending { background: var(--border); color: var(--muted); }
.empty { text-align: center; padding: 28px 12px; color: var(--muted); }

.plan { display: flex; flex-direction: column; }
.plan .price { font-weight: 700; font-size: 1.5rem; margin: 6px 0 4px; letter-spacing: -.01em; }
.plan .muted { margin-bottom: 14px; }
.plan label { display: block; margin: 8px 0 12px; font-weight: 600; font-size: .88rem; }
.suffix { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.suffix input { margin-top: 0; }
h2.section { margin: 26px 0 12px; font-size: 1.1rem; }

@media (max-width: 800px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 14px; gap: 6px; }
    .sidebar .brand { padding: 0 8px 0 0; }
    .menu { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .menu a { padding: 7px 10px; font-size: .88rem; }
    .account { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
    .account .email { display: none; }
    main.wide { padding: 22px 16px 40px; }
}
@media (max-width: 640px) { table { display: block; overflow-x: auto; } }

/* Zmiana hasła skrzynki – formularz widoczny pod wierszem, bez rozwijania */
.pwd-row td { padding-top: 0; border-bottom: 1px solid var(--border); background: transparent; }
.pwd-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
.pwd-form label { flex: 1 1 260px; margin: 0; }
.pwd-form label small { font-weight: 400; color: var(--muted); }
.pwd-form .btn { margin: 0; }

/* Usuwanie usługi (WWW, tylko admin) – pole i przycisk w jednym rzędzie */
.svc-del { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: nowrap; }
.svc-del input { width: 170px; max-width: 100%; margin: 0; }
.svc-del .btn { margin: 0; white-space: nowrap; }

/* Strona WWW: nowa czcionka + przyciski w jednym wierszu */
.www-page, .www-page input, .www-page button, .www-page th, .www-page td {
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.www-page h1 { font-weight: 700; letter-spacing: -.01em; }
.www-page .svc-cell { white-space: nowrap; width: 280px; text-align: center; }
.svc-del { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; width: 250px; max-width: 100%; flex-wrap: nowrap; }
.www-page th.svc-col { text-align: center; }
.svc-del input[type=text] { display: inline-block; width: 150px; height: 34px; box-sizing: border-box; margin: 0; padding: 0 10px; font-size: .85rem; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.svc-del .btn { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; }
.svc-del .btn { margin: 0; white-space: nowrap; background: #dc2626; border-color: #dc2626; color: #fff; }
.svc-del .btn:hover { background: #b91c1c; border-color: #b91c1c; }

/* Ustawienia kopii zapasowych */
.backup-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0; }
.backup-form label { margin: 0; min-width: 180px; }
.backup-form .btn { margin: 0; }

/* Reinstalacja WordPressa – ukryta, rozwijana po kliknięciu */
details.reinstall { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
details.reinstall summary { cursor: pointer; color: var(--muted); font-weight: 600; list-style-position: inside; }
details.reinstall summary:hover { color: var(--primary); }
details.reinstall form { margin-top: 12px; }

/* Reinstalacja: przycisk w kolorze motywu zamiast strzałki */
details.reinstall summary { list-style: none; display: inline-block; cursor: pointer; background: var(--primary); color: #fff; font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 8px; }
details.reinstall summary::-webkit-details-marker { display: none; }
details.reinstall summary:hover { background: var(--primary-hover, var(--primary)); color: #fff; }
details.reinstall[open] summary { margin-bottom: 12px; }

/* ---------- Przełącznik motywu i ikony ---------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0 0 10px; padding: 0;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--card); color: var(--text); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
}

/* ---------- Nowocześniejszy wygląd (jasny i ciemny) ---------- */
:root { --radius: 16px; }
.card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.btn { border-radius: 10px; }
.btn:not(.secondary) { box-shadow: 0 1px 2px rgba(2, 132, 199, .25); }
.badge { letter-spacing: .01em; }

/* Komunikat „w toku” przy instalacji */
.progress-box {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--primary-soft);
}
.progress-box strong { display: block; }
.spinner {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--border); border-top-color: var(--primary);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Usuwanie WordPressa – czerwony przycisk */
details.wp-remove summary { background: #dc2626; }
details.wp-remove summary:hover { background: #b91c1c; }

/* Autoodpowiedź skrzynki */
/* Autoodpowiedź: przycisk jak przy reinstalacji, po kliknięciu wysuwa się formularz */
details.autoresp { margin: 0; background: none; border: 0; padding: 0; }
details.autoresp > summary { list-style: none; cursor: pointer; margin: 0; }
details.autoresp > summary::-webkit-details-marker { display: none; }
details.autoresp[open] > summary { margin-bottom: 12px; }
.autoresp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
.autoresp-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.autoresp-form label small { font-weight: 400; color: var(--muted); }
.autoresp-form .wide { grid-column: 1 / -1; }
.autoresp-form input, .autoresp-form textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    padding: 10px 12px; font: inherit; font-size: .97rem; color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; background: var(--card);
}
.autoresp-form input[type=checkbox] { width: auto; margin: 0; padding: 0; }
.autoresp-form input[type=datetime-local] { color-scheme: light; }
:root[data-theme="dark"] .autoresp-form input[type=datetime-local] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .autoresp-form input[type=datetime-local] { color-scheme: dark; } }
.autoresp-form textarea { min-height: 70px; }
.autoresp-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.autoresp-foot .autoresp-toggle { flex-direction: row; align-items: center; gap: 8px; }
.autoresp-foot .btn { margin: 0; }

/* Pole-pułapka dla botów (ukryte przed człowiekiem) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Widżet Cloudflare Turnstile na środku formularza */
.cf-turnstile { display: flex; justify-content: center; margin: 12px 0; }

/* Pasek zajętości dysku */
.meter { height: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.meter span { display: block; height: 100%; min-width: 0; background: var(--primary); border-radius: 2px; }
.meter.warn span { background: #dc2626; }
/* przy zajętości 0% nie pokazuj kropki z minimalnej szerokości */
.meter[data-pct="0"] span { display: none; }

/* Miejsce na dysku na pulpicie */
.disk-row { margin: 10px 0; }
.disk-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.disk-row .meter { margin: 6px 0 0; }
.mb-usage { margin-top: 4px; }
.mb-usage .meter { margin: 4px 0 0; height: 8px; }
.pass-gen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pass-gen input { flex: 1 1 0; width: auto; max-width: 260px; min-width: 0; margin: 0; }
.pass-gen .btn { margin: 0; }

/* Pole hasła z generatorem: etykieta nad polem, pole i przycisk w jednej linii */
.pg-field { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.pg-field > label { margin: 0; flex: 0 0 auto; }
.pg-field .pass-gen { margin-top: 6px; }
.pass-gen { display: flex; gap: 8px; align-items: center; }
.pass-gen .btn { margin: 0; flex: 0 0 auto; white-space: nowrap; }

/* Dodawanie skrzynki: login, hasło i przycisk w jednej linii, wszystko równo */
form.mail-create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
form.mail-create > label { flex: 1 1 200px; min-width: 0; margin: 0; }
form.mail-create > .pg-field { flex: 1 1 260px; }
form.mail-create > .btn { margin: 0; flex: 0 0 auto; }
form.mail-create .suffix { margin-top: 6px; }
.mb-usage .meter { max-width: 240px; height: 6px; margin: 4px 0 0; }

/* Zajętość skrzynki obok limitu, w tej samej linii */
.mb-cell { white-space: nowrap; }
.mb-cell .mb-usage { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 0 10px; vertical-align: middle; }
.mb-cell .mb-usage small { white-space: nowrap; }
.mb-cell .mb-usage .meter { margin: 0; width: 240px; }

/* Przycisk usuwający (czerwony) */
.btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }
.mb-del { text-align: right; }

/* Konta FTP: hasło, generator i usuwanie w jednej linii */
.ftp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ftp-row form { margin: 0; }
.ftp-pwd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftp-pwd .ftp-label { margin: 0; white-space: nowrap; }
.ftp-pwd input, .ftp-pwd input[type=text] { width: 140px; max-width: 140px; margin: 0; display: inline-block; }
.ftp-pwd .btn { margin: 0; white-space: nowrap; }
.ftp-table td { vertical-align: middle; }

/* Tabela rekordów DNS: stały układ kolumn, mieści się w karcie, długie teksty się zawijają */
.dns-table { table-layout: fixed; width: 100%; }
.dns-table th, .dns-table td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.dns-table th:nth-child(1), .dns-table td:nth-child(1) { width: 70px; font-weight: 600; }
.dns-table th:nth-child(2), .dns-table td:nth-child(2) { width: 30%; }
.dns-table th:nth-child(4), .dns-table td:nth-child(4) { width: 64px; text-align: center; }
.dns-table th:nth-child(5), .dns-table td:nth-child(5) { width: 84px; text-align: right; }
.dns-table td { vertical-align: middle; }

/* Strony szerokie na cały ekran (np. Domeny) */
main.wide.wide-full { max-width: none; }

/* Edycja rekordu DNS */
.dns-edit-row td { border-bottom: 1px solid var(--border); padding-top: 0; }
details.dns-details { margin: 0 0 8px; }
details.dns-details > summary { list-style: none; display: inline-block; cursor: pointer; margin: 0; }
details.dns-details > summary::-webkit-details-marker { display: none; }
details.dns-details[open] > summary { margin-bottom: 10px; }
.dns-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; margin: 0; }
.dns-edit label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.dns-edit .wide { grid-column: 1 / -1; }
.dns-edit input, .dns-edit select { width: 100%; box-sizing: border-box; margin: 0; }
.dns-edit .dns-proxy { flex-direction: row; align-items: center; gap: 8px; }
.dns-edit .dns-proxy input { width: auto; }
.dns-edit .btn { margin: 0; justify-self: start; }

/* Edytuj obok Usuń; formularz edycji rozwija się pod rekordem */
.dns-edit-row { display: none; }
tr:has(.rec-toggle:checked) + .dns-edit-row { display: table-row; }
.dns-edit-row td { padding: 10px 0 16px; border-bottom: 1px solid var(--border); }
.rec-edit-btn { cursor: pointer; margin-right: 6px; }

/* Akcje rekordu w jednej linii: Edytuj obok Usuń, bez zawijania */
.dns-table th:nth-child(4), .dns-table td:nth-child(4) { width: 70px; text-align: center; }
.dns-table th:nth-child(5), .dns-table td:nth-child(5) { width: 190px; text-align: right; white-space: nowrap; }
.dns-table td:nth-child(5) .rec-edit-btn, .dns-table td:nth-child(5) .btn { white-space: nowrap; display: inline-block; vertical-align: middle; }
.dns-table td:nth-child(5) form.inline { display: inline-block; margin: 0; vertical-align: middle; }
.dns-table td:nth-child(4) { padding-right: 24px; }

/* Listy rozwijane w tym samym stylu co pola tekstowe (także w ciemnym motywie) */
select {
    display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    padding: 10px 12px; font: inherit; font-size: .97rem; color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; background: var(--card);
    cursor: pointer;
}
select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
select option { background: var(--card); color: var(--text); }
:root[data-theme="light"] select { color-scheme: light; }
:root[data-theme="dark"] select { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) select { color-scheme: dark; } }

/* Pola liczbowe w stylu pozostałych pól */
input[type=number] {
    display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    padding: 10px 12px; font: inherit; font-size: .97rem; color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; background: var(--card);
}
input[type=number]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* bez domyślnych strzałek przeglądarki (wyglądają staro w ciemnym motywie) */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Pola uzupełnione przez przeglądarkę (autofill) bez żółtego tła */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
    box-shadow: 0 0 0 1000px var(--card) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
}
.svc-usage { margin-top: 6px; max-width: 260px; }
.svc-usage .meter { margin: 4px 0 0; height: 8px; }

/* Zajętość na stronie usługi: trzy kafelki w jednym rzędzie */
.disk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 6px; }
.disk-stat { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.disk-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.disk-stat strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.disk-stat-total { border-color: var(--primary); }
@media (max-width: 560px) { .disk-stats { grid-template-columns: 1fr; } }
.billing-box { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.billing-box .billing { margin: 0; }

/* Karta konta: avatar z inicjałami i czytelne dane */
.account-card { max-width: 520px; }
.account-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(2, 132, 199, .25); }
.account-id { min-width: 0; overflow-wrap: anywhere; }
.account-name { font-weight: 700; font-size: 1.05rem; }
.account-meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.account-meta dt { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.account-meta dd { margin: 0; }

/* Konto: zdjęcie, dane do faktury */
.avatar-img { object-fit: cover; padding: 0; overflow: hidden; background: var(--card); }
.acc-avatar-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.acc-avatar-form input[type=file] { max-width: 100%; }
.account-billing { max-width: 640px; margin-top: 16px; }
.acc-form { display: grid; gap: 12px; }
.acc-form label { display: flex; flex-direction: column; gap: 4px; }
.acc-form label.acc-check { flex-direction: row; align-items: center; gap: 8px; }
.acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .acc-row { grid-template-columns: 1fr; } }

/* Pasek boczny: avatar zamiast litery */
.brand-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.brand-initials { border-radius: 50%; font-size: .8rem; font-weight: 700; flex: 0 0 auto; }

/* Ładny wybór pliku */
.file-pick { position: relative; display: inline-flex; cursor: pointer; }
.file-pick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0; }
.file-pick .btn { pointer-events: none; }
.file-pick:focus-within .btn { box-shadow: 0 0 0 3px var(--primary-soft); }
.acc-hint { flex-basis: 100%; }

/* Logo zamiast litery w nagłówku strony dla gości */
.brand-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }

/* Linki pod formularzem logowania: dwa przyciski obok siebie */
.auth-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.auth-links .btn { margin: 0; text-align: center; }
@media (max-width: 420px) { .auth-links { grid-template-columns: 1fr; } }

/* Konto: karta z avatarem po lewej, dane do faktury po prawej */
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.account-grid .account-card, .account-grid .account-billing { max-width: none; margin: 0; }
@media (max-width: 800px) { .account-grid { grid-template-columns: 1fr; } }

/* Zadania w administracji: wszystkie przyciski w jednym wierszu */
.task-actions { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; white-space: nowrap; }
.task-actions form { margin: 0; }


/* Ikony w menu bocznym (liniowe, w kolorze tekstu) */
.menu a { display: flex; align-items: center; gap: 10px; }
.menu-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.menu a.active .menu-icon { opacity: 1; }

details.dns-box summary, details.disable-2fa summary { list-style: none; display: inline-block; cursor: pointer; background: var(--primary); color: #fff; font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 8px; }
details.dns-box summary::-webkit-details-marker, details.disable-2fa summary::-webkit-details-marker { display: none; }
details.dns-box summary:hover { background: var(--primary-hover, var(--primary)); }
details.disable-2fa summary { background: #dc2626; }
details.disable-2fa summary:hover { background: #b91c1c; }
details.dns-box[open] summary, details.disable-2fa[open] summary { margin-bottom: 12px; }
.twofa-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 4px 0 8px; }
.twofa-row form.inline { margin: 0; }
.twofa-row details.disable-2fa { margin: 0; }
.twofa-row details.disable-2fa[open] { flex-basis: 100%; }
details.bill-details summary { list-style: none; display: inline-block; cursor: pointer; background: var(--primary); color: #fff; font-weight: 600; font-size: .82rem; padding: 5px 10px; border-radius: 8px; }
details.bill-details summary::-webkit-details-marker { display: none; }
details.bill-details summary:hover { background: var(--primary-hover, var(--primary)); }
details.bill-details .bill-body { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--text); }
.wp-title { display: flex; align-items: center; gap: 8px; }
.wp-icon { flex: 0 0 auto; }
.menu-badge { float: right; margin-top: 1px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #dc2626; color: #fff; font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center; }
.quota-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.quota-row input[type=range] { flex: 1; accent-color: var(--primary); }
.quota-row output { min-width: 80px; text-align: right; font-weight: 600; color: var(--text); }

/* Formularz nowej skrzynki: jedna kolumna, równe odstępy */
form.mail-create { display: grid; gap: 16px; margin-top: 16px; }
form.mail-create > label,
form.mail-create .quota-field { display: grid; gap: 6px; margin: 0; }
form.mail-create .pg-field { display: grid; gap: 6px; }
form.mail-create .pass-gen { display: flex; gap: 8px; align-items: center; }
form.mail-create .pass-gen input { flex: 1; min-width: 0; }
form.mail-create > button[type=submit] { justify-self: start; }
.quota-row { display: flex; align-items: center; gap: 14px; }
.quota-row input[type=range] {
    flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px;
    background: linear-gradient(to right, var(--primary) var(--fill, 0%), var(--border) var(--fill, 0%));
    outline: none; margin: 0;
}
.quota-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--primary); cursor: pointer;
}
.quota-row input[type=range]::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid var(--card); cursor: pointer;
}
.quota-row output { min-width: 84px; text-align: right; font-weight: 600; color: var(--text); white-space: nowrap; }
form.mail-create .quota-field small { color: var(--muted); }
.menu-badge.menu-badge-neutral { background: rgba(255,255,255,.16); color: #fff; }
.fm-crumbs { margin: 8px 0 14px; font-size: .95rem; }
.fm-editor { width: 100%; min-height: 420px; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: .88rem; line-height: 1.5; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 12px; resize: vertical; }
.fm-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.fm-actions { white-space: nowrap; }
.fm-actions > * { margin: 2px 6px 2px 0; vertical-align: middle; }
.fm-actions form.inline { display: inline-block; }
.fm-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.fm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fm-actions > form.inline, .fm-actions > a, .fm-actions > details { margin: 0; display: inline-flex; }
.fm-actions details.bill-details[open] { flex-basis: 100%; }
.fm-actions details.bill-details summary { font-size: .88rem; padding: 7px 14px; line-height: 1.2; }
.fm-actions details.bill-details form.inline { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.fm-actions details.bill-details input[type=text] { max-width: 260px; }
.fm-nav { margin: 0 0 6px; }
.traffic-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin: 14px 0 6px; padding: 8px 0 0; border-bottom: 1px solid var(--border); }
.traffic-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.traffic-bar { width: 100%; min-height: 2px; height: 0; background: var(--primary); border-radius: 3px 3px 0 0; }
.traffic-col:hover .traffic-bar { background: var(--primary-hover); }
.fwd-box { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.fwd-box h3 { margin: 0 0 10px; font-size: 1rem; }
.fwd-form { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fwd-form label { display: grid; gap: 4px; flex: 1 1 180px; margin: 0; }
.fwd-form label:nth-of-type(1) { flex: 1 1 200px; }
.fwd-form select, .fwd-form input { max-width: 100%; }
.fwd-form button { flex: 0 0 auto; }
/* Autoodpowiedź i hasło: w jednym rzędzie (na wąskim ekranie się zawijają) */
.autoresp-form { grid-template-columns: minmax(160px, 2fr) minmax(130px, 1fr) minmax(130px, 1fr) auto auto; align-items: end; }
.autoresp-form .ar-text { grid-column: 1 / -1; order: 10; }
.autoresp-form .autoresp-toggle { display: flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; padding-bottom: 8px; }
.autoresp-form .ar-save { white-space: nowrap; }
.pwd-form .pass-gen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pwd-form .pass-gen input { flex: 1 1 200px; min-width: 0; }
.pwd-form .pg-field { flex: 1 1 420px; }
/* Hasło: pole i przyciski tej samej wysokości */
.pwd-form .pass-gen input,
.pwd-form .pass-gen .btn,
.autoresp-form .ar-save,
.autoresp-form input[type=text],
.autoresp-form input[type=datetime-local] { height: 40px; box-sizing: border-box; }
.pwd-form .pass-gen .btn,
.autoresp-form .ar-save { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
/* Skrzynka: limit, pasek, autoodpowiedź i usuń w jednej linii */
td.mb-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mb-usage { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; min-width: 0; }
.mb-usage small { white-space: nowrap; }
.mb-usage .meter { flex: 1 1 120px; min-width: 80px; height: 8px; margin: 0; border: 0; background: var(--border); border-radius: 999px; }
.mb-usage .meter span { border-radius: 999px; }
details.autoresp { display: inline-block; }
details.autoresp summary { list-style: none; cursor: pointer; white-space: nowrap; }
details.autoresp summary::-webkit-details-marker { display: none; }
details.autoresp[open] { flex: 0 0 100%; }
details.autoresp[open] summary { margin-bottom: 10px; }
/* Autoodpowiedź: treść, potem przełącznik i przycisk pod nią */
.autoresp-form .ar-foot { grid-column: 1 / -1; order: 11; display: flex; align-items: center; gap: 14px; }
.autoresp-form .autoresp-toggle { padding-bottom: 0; }
/* Hasło skrzynki: etykieta, pole i przyciski w jednej linii */
.pwd-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; text-align: left; }
.pwd-form .pg-field { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; flex: 1 1 auto; margin: 0; }
.pwd-form .pg-field > label { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.pwd-form .pass-gen { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; margin: 0; }
.pwd-form .pass-gen input { flex: 1 1 200px; min-width: 0; height: 40px; box-sizing: border-box; }
.pwd-form .pass-gen .btn { height: 40px; display: inline-flex; align-items: center; margin: 0; }
.pwd-form > button[type=submit] { height: 40px; margin: 0; }
/* Hasło skrzynki: wyrównanie do kolumn tabeli i odstępy bez nachodzenia */
.pwd-row td { padding: 4px 10px 14px; }
.pwd-form { margin: 0; padding: 0; gap: 10px 12px; }
.pwd-form .pg-field { gap: 10px 12px; width: 100%; }
.pwd-form .pg-field > label { padding-right: 4px; }
.pwd-form .pass-gen { gap: 8px 10px; }
.pwd-form .pass-gen input { flex: 1 1 240px; max-width: 380px; margin: 0; }
.pwd-form .pass-gen .btn,
.pwd-form > button[type=submit] { flex: 0 0 auto; white-space: nowrap; }
/* Nazwa nowej skrzynki: etykieta i pole w jednej linii */
form.mail-create label.mb-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
form.mail-create label.mb-name .suffix { flex: 1 1 260px; }
/* Nowa skrzynka: hasło w jednej linii z etykietą i przyciskami */
form.mail-create .pg-field { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
form.mail-create .pg-field > label { flex: 0 0 auto; margin: 0; white-space: nowrap; }
form.mail-create .pg-field .pass-gen { flex: 1 1 280px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
form.mail-create .pg-field .pass-gen input { flex: 1 1 220px; min-width: 0; height: 40px; box-sizing: border-box; }
form.mail-create .pg-field .pass-gen .btn { height: 40px; display: inline-flex; align-items: center; margin: 0; white-space: nowrap; }
/* Przydzielone miejsce: etykieta i suwak w jednej linii, suwak krótszy */
form.mail-create .quota-field { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
form.mail-create .quota-field .quota-row { flex: 0 1 280px; min-width: 180px; margin: 0; }
form.mail-create .quota-field > small { flex: 1 1 100%; }
/* Lista kont: kolumny z własnym miejscem, poziome przewijanie na wąskim ekranie */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.acc-table { min-width: 980px; }
table.acc-table th, table.acc-table td { padding: 12px 14px; vertical-align: middle; }
table.acc-table th { white-space: nowrap; }
table.acc-table td:nth-child(4), table.acc-table td:nth-child(5), table.acc-table td:nth-child(6) { white-space: nowrap; }
table.acc-table td:nth-child(7) { min-width: 200px; }
table.acc-table details.bill-details .bill-body { max-width: 260px; }
/* Karta po siatce kart (np. statystyki w Klienci) ma taki sam odstęp jak siatka */
.grid + .card { margin-top: 16px; }
/* Dashboard: kolumna Miejsce z krótkim paskiem */
td.svc-space { min-width: 170px; }
td.svc-space .svc-usage { max-width: 200px; }
td.svc-space .meter { margin: 4px 0 0; height: 8px; border: 0; background: var(--border); }
td.svc-space .meter span { border-radius: 999px; }
td.svc-space small { white-space: nowrap; }
td.svc-space { vertical-align: middle; text-align: center; }
td.svc-space .svc-usage { margin: 0 auto; }
/* Miejsce na pulpicie: tekst i pasek w jednej linii, wyśrodkowane w wierszu */
td.svc-space .svc-usage { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: none; margin: 0 auto; }
td.svc-space .svc-usage .meter { flex: 0 0 110px; width: 110px; margin: 0; }
td.svc-space .svc-usage small { white-space: nowrap; }
/* Miejsce: treść od lewej, tak jak pozostałe kolumny */
td.svc-space { text-align: left; }
td.svc-space .svc-usage { justify-content: flex-start; margin: 0; }

/* Formularz nowej bazy: nazwa, hasło, generator i przycisk w jednym rzędzie */
form.db-create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin-top: 16px; }
form.db-create > label { display: grid; gap: 6px; flex: 1 1 200px; min-width: 0; margin: 0; }
form.db-create > .pg-field { display: grid; gap: 6px; flex: 2 1 380px; min-width: 0; margin: 0; }
form.db-create > .pg-field > label { margin: 0; }
form.db-create input[type=text],
form.db-create input[type=password] { height: 40px; box-sizing: border-box; margin: 0; width: 100%; }
form.db-create .pass-gen { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; }
form.db-create .pass-gen input { flex: 1 1 0; min-width: 0; max-width: none; }
form.db-create .pass-gen .btn { height: 40px; display: inline-flex; align-items: center; margin: 0; flex: 0 0 auto; white-space: nowrap; }
form.db-create > .btn { height: 40px; margin: 0; flex: 0 0 auto; }

/* Akcje na liście plików: Edytuj (lub pusto dla katalogów) i Zmień nazwę / Usuń w jednej linii */
.fm-actions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fm-act-left { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: 84px; }
.fm-act-right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 1 auto; }
.fm-act-left > *, .fm-act-right > * { margin: 0; }
.fm-act-left form.inline, .fm-act-right form.inline { display: inline-flex; margin: 0; }
.fm-act-right details.bill-details { display: inline-flex; flex-wrap: wrap; }
.fm-act-right details.bill-details[open] { flex-basis: 100%; }
.fm-act-right details.bill-details[open] > form.inline { margin-top: 8px; }

/* Nowy folder: pole nazwy i przycisk w jednej linii */
form.fm-mkdir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
form.fm-mkdir > label { display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; margin: 0; white-space: nowrap; }
form.fm-mkdir input[type=text] { height: 40px; box-sizing: border-box; margin: 0; width: auto; flex: 1 1 auto; min-width: 0; }
form.fm-mkdir > .btn { height: 40px; margin: 0; flex: 0 0 auto; white-space: nowrap; }

/* Pole nowego hasła w formularzu zmiany hasła skrzynki: węższe o ~1/4 */
.pwd-form .pass-gen input { flex: 0 1 285px; max-width: 285px; }

/* Wiersz zmiany hasła skrzynki: zawartość wyśrodkowana w pionie, równe odstępy góra/dół */
tr.pwd-row > td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
tr.pwd-row .pwd-form { align-items: center; margin: 0; }
tr.pwd-row .pwd-form > label,
tr.pwd-row .pwd-form .pg-field { margin: 0; }
tr.pwd-row .pwd-form .pass-gen input,
tr.pwd-row .pwd-form .pass-gen .btn { height: 40px; box-sizing: border-box; }

/* Pole loginu nowej skrzynki: o połowę węższe */
form.mail-create label.mb-name .suffix { flex: 0 1 auto; }
form.mail-create label.mb-name .suffix input { flex: 0 0 auto; width: 190px; max-width: 100%; }

/* Ostrzeżenie na pulpicie: usługa kończy się w ciągu 30 dni */
.expiry-warn { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); font-size: .82rem; font-weight: 600; }

/* Pomoc: wątek zgłoszenia */
.support-msg { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; margin: 0 0 16px; }
.support-msg.from-support { border-left-color: var(--primary); }
.support-msg p { margin: 6px 0; }
.support-msg .btn { margin: 4px 6px 0 0; }
form.support-close { margin-top: 12px; }

/* Formularze pomocy: etykiety nad polami, pola na pełną szerokość */
form.support-form { display: flex; flex-direction: column; gap: 14px; }
form.support-form > label { display: grid; gap: 6px; margin: 0; }
form.support-form input[type=text] { width: 100%; height: 42px; box-sizing: border-box; margin: 0; }
form.support-form textarea { width: 100%; min-height: 172px; box-sizing: border-box; margin: 0; resize: vertical; font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
form.support-form textarea:focus, form.support-form input[type=text]:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
form.support-form .fm-row { margin-top: 0; }
form.support-form > button[type=submit] { justify-self: start; }
.support-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.www-actions { white-space: nowrap; }
.www-actions .btn { margin: 2px 6px 2px 0; }

/* Wiersze tabel: zawartość wyrównana w pionie (np. pulpit: miejsce, status, data w jednej linii) */
table td, table th { vertical-align: middle; }
td.svc-space { vertical-align: middle; }
.expiry-warn { margin-left: 8px; vertical-align: middle; }
.exp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; white-space: nowrap; }
.exp-row .expiry-warn { margin-left: 0; }
.menu-badge.menu-badge-ok { background: #12b76a; }

/* Pulpit: pasek zajętości pod liczbami (w pionie) */
td.svc-space .svc-usage { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
td.svc-space .svc-usage .meter { flex: 0 0 auto; width: 180px; margin: 0; }

/* Klienci: tabela na szerokość karty, bez pustego paska przewijania */
table.acc-table { min-width: 0; width: 100%; }
table.acc-table td:nth-child(7) { min-width: 0; }
.www-actions { white-space: normal; }
.www-actions .btn { white-space: nowrap; }

/* WWW: usuwanie usługi (admin) bliżej lewej, bez pustego miejsca po lewej */
.www-page .svc-cell { width: auto; text-align: left; padding-left: 10px; }
.www-page th.svc-col { text-align: left; padding-left: 10px; }
.www-page .svc-del { justify-content: flex-start; margin: 0; width: auto; }
input[name=confirm_email] { max-width: 170px; margin: 0; }
form.del-acc { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; }
form.del-acc .btn { margin: 0; white-space: nowrap; }

/* Szersza treść na dużych ekranach (menu i czcionka bez zmian) */
@media (min-width: 1100px) {
    main.wide { max-width: 1240px; }
}
@media (min-width: 1500px) {
    main.wide { max-width: 1420px; }
}

/* Dodawanie skrzynki: nazwa i przydział miejsca obok siebie na szerokim ekranie */
@media (min-width: 900px) {
  form.mail-create { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 24px; }
  form.mail-create > .pg-field,
  form.mail-create > button[type=submit] { grid-column: 1 / -1; }
}

/* Hasło nowej skrzynki: etykieta nad polem, pole tej samej szerokości i w tej samej linii co login */
@media (min-width: 900px) {
  form.mail-create .pg-field { flex-direction: column; align-items: flex-start; }
  form.mail-create .pg-field .pass-gen { flex: 0 0 auto; }
  form.mail-create .pg-field .pass-gen input { flex: 0 0 190px; width: 190px; max-width: 100%; }
}

/* Hasło nowej skrzynki: etykieta, pole i przyciski w jednej linii, bez zawijania */
@media (min-width: 900px) {
  form.mail-create .pg-field { flex-direction: row; flex-wrap: nowrap; align-items: center; }
  form.mail-create .pg-field > label { flex: 0 0 auto; }
  form.mail-create .pg-field .pass-gen { flex: 0 0 auto; flex-wrap: nowrap; }
}

/* Usuwanie konta: odstęp od danych do faktury */
.card.account-delete { margin-top: 40px; }

/* Usuwanie konta: pole e-mail i przycisk w jednej linii (etykieta nad polem) */
.card.account-delete form.billing { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.card.account-delete form.billing > label { margin: 0; flex: 0 1 auto; }
.card.account-delete form.billing > label input { width: 240px; max-width: 100%; }
.card.account-delete form.billing > button { margin: 0 0 0 0; height: 40px; }

/* Usuwanie konta: etykieta, pole e-mail i przycisk w jednej linii */
.card.account-delete form.billing { flex-wrap: nowrap; align-items: center; }
.card.account-delete form.billing > label { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.card.account-delete form.billing > label input { width: 220px; height: 40px; box-sizing: border-box; }
.card.account-delete form.billing > button { height: 40px; white-space: nowrap; }

/* Poczta: nowa skrzynka jako osobny blok, oddzielony od listy skrzynek i aliasów */
.mail-box { margin-top: 20px; }

/* Poczta: nowa skrzynka i przekierowania w osobnych ramkach zamiast linii */
.fwd-box { margin: 18px 0 0; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.mail-box { margin-top: 18px; }

/* Zmiana hasła skrzynki: rozwijany panel jak autoodpowiedź */
details.pwd-det { display: inline-block; margin-top: 6px; }
details.pwd-det > summary { list-style: none; cursor: pointer; white-space: nowrap; }
details.pwd-det > summary::-webkit-details-marker { display: none; }
details.pwd-det[open] { display: block; flex: 0 0 100%; }
details.pwd-det[open] > summary { margin-bottom: 12px; }
.pwd-form .pass-gen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1 / -1; }
.pwd-form .pass-gen .pw-label { flex: 0 0 100%; }
.pwd-form .pass-gen input { flex: 1 1 220px; min-width: 0; height: 40px; box-sizing: border-box; }
.pwd-form .pass-gen .btn { height: 40px; margin: 0; }

/* Zmiana hasła: etykieta, pole, generuj i zmień w jednej linii */
.pwd-form .pass-gen { flex-wrap: nowrap; align-items: center; }
.pwd-form .pass-gen .pw-label { flex: 0 0 auto; white-space: nowrap; margin: 0; }
.pwd-form .pass-gen input { flex: 0 1 220px; }
.pwd-form .ar-foot { display: flex; align-items: center; margin: 0; }

/* Lista istniejących skrzynek w ramce, jak pozostałe bloki */
.mail-list-box { margin-top: 0; }

/* Poczta: napis logowania po lewej, przycisk webmaila po prawej w ramce listy */
.webmail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.webmail-row .btn { margin: 0; flex: 0 0 auto; }

/* Poczta: przycisk webmaila przy prawej krawędzi ramki */
.webmail-row { justify-content: flex-end; }

/* Domeny zewnętrzne: lista serwerów nazw do podpięcia */
.fwd-box ul { margin: 6px 0 10px; padding-left: 18px; }
.fwd-box code { word-break: break-all; }

/* Pasek boczny: przy długim menu przewija się sam, żeby dało się dojść do wylogowania */
.sidebar { overflow-y: auto; overscroll-behavior: contain; }

/* Pasek boczny: przewijanie zostaje, pasek przewijania ukryty */
.sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { display: none; }

/* Podłącz swoją domenę – pasek nad planami hostingowymi */
.plan-connect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; align-items: center; margin: 0 0 24px; }
.plan-connect h3 { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-connect .pc-price { font-size: 1.1rem; font-weight: 700; }
.plan-connect .muted { margin: 0; }
.plan-connect .pc-form { display: flex; gap: 12px; align-items: flex-end; min-width: 0; }
.plan-connect .pc-form label { flex: 1 1 0; min-width: 0; margin: 0; white-space: nowrap; }
.plan-connect .pc-form input[type=text] { width: 100%; box-sizing: border-box; margin: 0; }
.plan-connect .btn { white-space: nowrap; margin: 0; flex: 0 0 auto; width: auto; padding-left: 22px; padding-right: 22px; }
@media (max-width: 800px) { .plan-connect { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .plan-connect .pc-form { flex-direction: column; align-items: stretch; } }

/* Hosting WWW – styl jak na stronie głównej: turkusowy akcent, unoszenie karty po najechaniu */
.plan-hosting { border-top: 3px solid #2dd4bf; border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.plan-hosting:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20, 184, 166, .18); }
.plan-hosting h3 { color: #14b8a6; font-size: 1.1rem; }
.plan-hosting .price { font-size: 1.8rem; }
.plan-hosting .plan-features { list-style: none; padding: 0; margin: 4px 0 18px; }
.plan-hosting .plan-features li { position: relative; padding-left: 26px; margin: 6px 0; color: var(--muted, #64748b); font-size: .92rem; }
.plan-hosting .plan-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #14b8a6; font-weight: 700; }
.plan-hosting .btn { background: #14b8a6; color: #fff; border-radius: 10px; }
.plan-hosting .btn:hover { background: #0d9488; }
.plan-hosting .btn:disabled { background: #14b8a6; opacity: .45; }

/* Domeny – ten sam styl kart co hosting, w kolorach sekcji domen */
.plan-domain { border-top: 3px solid #0066ff; border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.plan-domain:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 102, 255, .16); }
.plan-domain h3 { color: #6c5ce7; font-size: 1.1rem; }
.plan-domain .price { font-size: 1.8rem; }
.plan-domain .plan-features { list-style: none; padding: 0; margin: 4px 0 18px; }
.plan-domain .plan-features li { position: relative; padding-left: 26px; margin: 6px 0; color: var(--muted, #64748b); font-size: .92rem; }
.plan-domain .plan-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #14b8a6; font-weight: 700; }
.plan-domain .plan-features li.plan-badge { display: inline-block; margin-left: 0; padding: 4px 10px 4px 26px; background: #e0f2fe; color: #0369a1; border-radius: 6px; font-weight: 700; }
.plan-domain .btn { background: #6366f1; color: #fff; border-radius: 10px; }
.plan-domain .btn:hover { background: #4f46e5; }
.plan-domain .btn:disabled { background: #6366f1; opacity: .45; }

/* Nagłówki sekcji planów – jak na stronie głównej, z ikoną kuli ziemskiej */
.plan-title { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 800; }
.plan-title-icon { flex: 0 0 auto; color: #38bdf8; }
.plan-title-hosting { color: #0066ff; }
.plan-title-domain { background: linear-gradient(90deg, #1d4ed8 50%, #14b8a6 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-title-domain .plan-title-icon { -webkit-text-fill-color: #38bdf8; }

/* Domeny: 3 karty w rzędzie (2 na tablecie, 1 na telefonie) */
.grid-domains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-domains { grid-template-columns: 1fr; } }

/* Zwiększ pakiet – lista większych pakietów na stronie usługi */
.upgrade-list { display: grid; gap: 12px; margin-top: 12px; }
.upgrade-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin: 0; }
.upgrade-item strong { font-size: 1rem; }
.upgrade-item .muted { grid-column: 1; font-size: .88rem; }
.upgrade-item .upgrade-price { font-weight: 700; }
.upgrade-item .btn { grid-row: 1 / span 2; grid-column: 3; white-space: nowrap; }
@media (max-width: 600px) { .upgrade-item { grid-template-columns: 1fr; } .upgrade-item .btn { grid-row: auto; grid-column: auto; } }

/* Postęp podpinania domeny (krokowy pasek na /domeny) */
.steps { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.steps li { position: relative; text-align: center; font-size: .82rem; color: var(--muted, #64748b); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.steps li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--border); z-index: 0; }
.steps li:first-child::before { display: none; }
.steps li.done::before, .steps li.current::before { background: #14b8a6; }
.step-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); background: var(--card); font-weight: 700; }
.steps li.done .step-dot { background: #14b8a6; border-color: #14b8a6; color: #fff; }
.steps li.current .step-dot { border-color: #14b8a6; color: #0d9488; box-shadow: 0 0 0 4px rgba(20, 184, 166, .18); }
.steps li.current { color: var(--text, #0f172a); font-weight: 700; }
@media (max-width: 560px) { .steps .step-label { font-size: .72rem; } }

.plan-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.upgrade-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 9px; font-size: .75rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s; }
.upgrade-btn:hover { background: var(--primary-hover); text-decoration: none; color: #fff; }

.validity-note { color: #ca8a04; font-weight: 600; }

/* Ikony pakietów hostingu */
.plan-icon { color: #14b8a6; vertical-align: -5px; margin-right: 10px; flex: 0 0 auto; }

/* Przyciski „Przejdź na…” na stronie usługi – mniejsze */
.upgrade-item .btn { width: auto; padding: 7px 14px; font-size: .85rem; border-radius: 8px; }
.current-plan { color: #14b8a6; font-weight: 600; }
.current-plan .plan-icon { vertical-align: -5px; margin-right: 8px; }
/* Cena i przycisk w jednej linii, wyśrodkowane w pionie względem nazwy pakietu */
.upgrade-item .upgrade-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.upgrade-item .btn { grid-row: 1 / span 2; grid-column: 3; align-self: center; }

/* Strona usługi: WordPress, pliki i dysk obok siebie */
.svc-tri { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.svc-tri > .card { display: flex; flex-direction: column; }
.svc-tri > .card { margin: 0; }
.svc-tri .disk-stats { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .svc-tri { grid-template-columns: 1fr; } }
.svc-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.svc-stack > .card { margin: 0; }

/* Kopie zapasowe w kolumnie: mniejsze pola, wszystko w jednej linii */
.svc-stack .backup-form { flex-wrap: nowrap; gap: 10px; align-items: flex-end; }
.svc-stack .backup-form label { flex: 1 1 0; min-width: 0; font-size: .85rem; }
.svc-stack .backup-form select { width: 100%; box-sizing: border-box; padding: 6px 30px 6px 10px; font-size: .85rem; border-radius: 8px; margin-top: 4px; }
.svc-stack .backup-form .btn { width: auto; flex: 0 0 auto; padding: 7px 14px; font-size: .85rem; border-radius: 8px; margin-bottom: 0; }
.svc-tri { margin-bottom: 20px; }
/* Kopie zapasowe wypełniają wysokość kolumny, żeby dolny brzeg był równy z pozostałymi kartami */
.svc-stack > .card { display: flex; flex-direction: column; }
.svc-stack > .card:last-child { flex: 1 1 auto; }

/* Lista skrzynek: wszystkie pola w jednej linii, wyrównane do środka */
td.mb-mail, td.mb-cell, td.mb-del { vertical-align: middle; }
td.mb-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
td.mb-cell .mb-usage { flex: 0 1 260px; }
td.mb-cell .quota-form { margin: 0; }
td.mb-cell .quota-form .quota-row { display: flex; align-items: center; gap: 10px; margin: 0; }
td.mb-cell .quota-form .quota-row input[type=range] { flex: 0 0 170px; width: 170px; }
td.mb-cell .quota-form .quota-row output { min-width: 76px; text-align: right; white-space: nowrap; }
td.mb-cell .quota-form .btn,
td.mb-cell details.autoresp > summary.btn,
td.mb-cell details.pwd-det > summary.btn {
    height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    margin: 0; padding-top: 0; padding-bottom: 0; white-space: nowrap;
}
td.mb-cell details.pwd-det[open] { flex: 0 0 100%; }

/* Kolejność w wierszu skrzynki: pasek, suwak, Zmień hasło, Ustaw autoodpowiedź (tuż przed Usuń) */
td.mb-cell .mb-usage { order: 0; }
td.mb-cell .quota-form { order: 1; }
td.mb-cell details.pwd-det { order: 2; }
td.mb-cell details.autoresp { order: 3; }
td.mb-cell .btn { width: auto; }
td.mb-cell details.autoresp,
td.mb-cell details.pwd-det { flex: 0 0 auto; }
td.mb-cell details.autoresp[open],
td.mb-cell details.pwd-det[open] { flex: 0 0 100%; }

/* Grupę przycisków przesuwamy do prawej, tuż przed kolumnę Usuń */
td.mb-cell { justify-content: flex-end; }
td.mb-cell details.autoresp[open],
td.mb-cell details.pwd-det[open] { flex-basis: 100%; }

/* Ostateczna kolejność: Zapisz, Zmień hasło, Ustaw autoodpowiedź, Usuń */
td.mb-cell details.pwd-det { order: 2; }
td.mb-cell details.autoresp:not(.pwd-det) { order: 3; }

/* Pasek zajętości przy wierszu skrzynki: pokazany obok tekstu z rozmiarem */
td.mb-cell .mb-usage .meter { display: block; flex: 0 1 140px; min-width: 60px; height: 6px; margin: 0; }

/* Wiersz skrzynki: linia 1 = zajęte miejsce + suwak + Zapisz, linia 2 = Zmień hasło + Ustaw autoodpowiedź */
td.mb-cell { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; }
td.mb-cell .mb-usage { flex: 0 0 auto; margin: 0; }
td.mb-cell .mb-usage small { white-space: nowrap; }
td.mb-cell .quota-form { flex: 0 0 auto; }
td.mb-cell details.pwd-det,
td.mb-cell details.autoresp { flex: 0 0 auto; }

/* Formularz nowej skrzynki: login na górze, reszta w jednym rzędzie na dole */
form.mail-create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
form.mail-create > .mb-name { flex: 0 0 100%; }
form.mail-create > .pg-field { flex: 1 1 280px; min-width: 0; }
form.mail-create > .quota-field { flex: 1 1 300px; min-width: 0; }
form.mail-create > .mb-submit { flex: 0 0 auto; height: 40px; }
form.mail-create .pg-field .pass-gen { flex-wrap: nowrap; }
form.mail-create .pg-field .pass-gen input { flex: 1 1 0; min-width: 0; height: 40px; box-sizing: border-box; }
form.mail-create .pg-field .pass-gen .btn { height: 40px; white-space: nowrap; }

/* Nowa skrzynka: nagłówek pola nad polem, wszystkie pola i przyciski w jednym rzędzie */
form.mail-create > .mb-name,
form.mail-create > .quota-field { display: flex; flex-direction: column; gap: 6px; }
form.mail-create > .mb-name { flex: 1 1 200px; min-width: 0; }
form.mail-create > .quota-field { flex: 1 1 240px; min-width: 0; }
form.mail-create > .pg-field { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
form.mail-create > .mb-submit { flex: 0 0 auto; align-self: flex-end; height: 40px; }
@media (min-width: 901px) {
  form.mail-create { flex-wrap: nowrap; }
}

/* Formularz nowej skrzynki – jedyny obowiązujący układ (nadpisuje starsze reguły siatki) */
form.mail-create { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; grid-template-columns: none; gap: 16px 18px; }
form.mail-create > * { margin: 0; min-width: 0; }
form.mail-create label { text-align: left; }
form.mail-create > .mb-name { flex: 0 1 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
form.mail-create > .quota-field { flex: 0 1 300px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
form.mail-create .quota-field .quota-row { display: flex; align-items: center; gap: 12px; margin: 0; }
form.mail-create .quota-field .quota-row input[type=range] { flex: 1 1 auto; width: auto; }
form.mail-create .quota-field > small { flex: none; }
form.mail-create > .pg-field { flex: 0 1 360px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
form.mail-create .pg-field .pass-gen { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin: 0; width: 100%; }
form.mail-create .pg-field .pass-gen input { flex: 1 1 0; min-width: 0; width: auto; height: 40px; box-sizing: border-box; }
form.mail-create .pg-field .pass-gen .btn { height: 40px; white-space: nowrap; margin: 0; }
form.mail-create > .mb-submit { flex: 0 0 auto; align-self: flex-start; margin-top: 26px; height: 40px; }
@media (max-width: 900px) {
  form.mail-create { flex-wrap: wrap !important; }
  form.mail-create > * { flex: 1 1 100%; }
  form.mail-create > .mb-submit { flex: 0 0 auto; }
}

/* Nowa skrzynka: login, przydział, hasło, generuj, dodaj – jeden rząd jak wiersze kont */
p.mc-title { margin: 14px 0 8px; font-weight: 600; color: var(--text); }
p.mc-title small { font-weight: 400; color: var(--muted); }
form.mc-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px 14px; margin: 0; }
form.mc-row .mc-login { flex: 0 0 auto; }
form.mc-row .mc-login .suffix { display: flex; align-items: center; gap: 6px; margin: 0; }
form.mc-row .mc-login input { width: 180px; height: 40px; box-sizing: border-box; margin: 0; }
form.mc-row .mc-login span { white-space: nowrap; }
form.mc-row .mc-quota { flex: 0 1 300px; min-width: 200px; }
form.mc-row .mc-quota .quota-row { display: flex; align-items: center; gap: 10px; margin: 0; }
form.mc-row .mc-quota input[type=range] { flex: 1 1 auto; width: auto; margin: 0; }
form.mc-row .mc-quota output { min-width: 80px; text-align: right; white-space: nowrap; }
form.mc-row .mc-pass { flex: 0 1 360px; min-width: 240px; display: flex; align-items: center; gap: 8px; }
form.mc-row .mc-pass input { flex: 1 1 0; min-width: 0; width: auto; height: 40px; box-sizing: border-box; margin: 0; }
form.mc-row .mc-pass .btn,
form.mc-row .mb-submit { height: 40px; margin: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
p.mc-note { margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) {
  form.mc-row { flex-wrap: wrap; }
  form.mc-row .mc-quota, form.mc-row .mc-pass { flex: 1 1 100%; }
}

/* Nagłówek nowej skrzynki: tytuł i informacja o pakiecie w jednej linii */
.mc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.mc-head p.mc-title { margin: 14px 0 8px; }
.mc-head p.mc-note { margin: 14px 0 8px; text-align: right; }

/* Nagłówek karty nowej skrzynki: tytuł po lewej, informacja o pakiecie po prawej, w jednej linii */
.mc-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.mc-top h3 { margin: 0; }
.mc-top p.mc-note { margin: 0; text-align: right; }

/* Wiersz skrzynki w jednej linii: węższe paski i suwak, bez zawijania */
td.mb-cell { flex-wrap: nowrap; gap: 10px; }
td.mb-cell .mb-usage { flex: 0 0 auto; gap: 8px; }
td.mb-cell .mb-usage .meter { flex: 0 1 80px; width: 80px; min-width: 50px; }
td.mb-cell .quota-form .quota-row { gap: 8px; }
td.mb-cell .quota-form .quota-row input[type=range] { flex: 0 0 120px; width: 120px; }
td.mb-cell .quota-form .quota-row output { min-width: 70px; }
td.mb-cell details.pwd-det[open],
td.mb-cell details.autoresp[open] { flex: 0 0 auto; }

/* Pasek zajętości przed tekstem z rozmiarem */
td.mb-cell .mb-usage .meter { order: -1; }

/* Pasek z rozmiarem przy lewej krawędzi kolumny Limit, reszta wiersza przy prawej */
td.mb-cell .mb-usage { margin-right: auto; }

/* Kolumny wiersza skrzynki: Limit | Zwiększ / zmniejsz | przyciski */
td.mb-cell { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; }
td.mb-quota-cell .quota-form { margin: 0; }
td.mb-quota-cell .quota-form .quota-row input[type=range] { flex: 0 0 150px; width: 150px; }
td.mb-act-cell { justify-content: flex-end; }
td.mb-act-cell details.pwd-det,
td.mb-act-cell details.autoresp { flex: 0 0 auto; }

/* Komórki tabeli zostają komórkami; flex siedzi w wewnętrznym .mb-inner */
td.mb-cell { display: table-cell; vertical-align: middle; }
td.mb-cell > .mb-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; }
td.mb-act-cell > .mb-inner { justify-content: flex-end; }

/* Miejsce na dysku: „Razem” na górze, nad stroną i pocztą */
.disk-stats .disk-stat-total { order: -1; }

/* Usuwanie usługi z pulpitu: pole na nazwę domeny i przycisk w jednej linii pod domeną */
form.svc-del-dash { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
form.svc-del-dash input[type=text] { flex: 1 1 140px; min-width: 0; max-width: 200px; height: 32px; box-sizing: border-box; margin: 0; font-size: .85rem; }
form.svc-del-dash .btn { height: 32px; margin: 0; }

/* Podłączanie i przenoszenie domeny obok siebie */
.connect-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 24px; align-items: stretch; }
.connect-pair > * { margin: 0; }
.connect-pair .plan-connect { display: flex; flex-direction: column; gap: 12px; }
.connect-pair .plan-connect .pc-form { flex-direction: column; align-items: stretch; }
.connect-pair .plan-connect .pc-form label { white-space: normal; }
.connect-pair .plan-connect .btn { width: 100%; }
.connect-pair .transfer-info h3 { margin: 0 0 6px; }
.connect-pair .transfer-info p { margin: 0; }
@media (max-width: 800px) { .connect-pair { grid-template-columns: minmax(0, 1fr); } }
.connect-pair .plan-connect { align-items: stretch; text-align: left; }
.connect-pair .plan-connect .pc-form label { display: block; }
.transfer-info h3 { display: flex; align-items: center; gap: 10px; }
.transfer-icon { flex: 0 0 auto; color: var(--accent, #0a7bc4); }
.connect-pair .transfer-info { display: flex; flex-direction: column; gap: 12px; }
.connect-pair .transfer-info .pc-form { margin-top: auto; }
.connect-pair .transfer-info .btn { width: 100%; text-align: center; box-sizing: border-box; }
.connect-pair .transfer-info .pc-form { display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 auto; margin-top: 8px; }
.connect-pair .transfer-info .btn { display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; margin: 0; text-align: center; }

/* Serwery VPS (tylko informacyjnie, bez zamawiania) */
.grid-vps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan-vps { border-top: 3px solid #38bdf8; border-radius: 14px; }
.plan-vps.vps-strato { border-top-color: #10b981; }
.plan-vps.vps-cumulo { border-top-color: #6366f1; }
.plan-vps h3 { margin: 0 0 6px; color: #0284c7; font-size: 1.1rem; }
.plan-vps.vps-strato h3 { color: #059669; }
.plan-vps.vps-cumulo h3 { color: #4f46e5; }
.plan-vps .price { font-size: 1.8rem; font-weight: 700; margin: 0 0 12px; }
.plan-vps .price small { font-size: .9rem; font-weight: 400; color: var(--muted, #64748b); }
.plan-vps .plan-features { list-style: none; padding: 0; margin: 0; }
.plan-vps .plan-features li { position: relative; padding-left: 26px; margin: 6px 0; color: var(--muted, #64748b); font-size: .92rem; }
.plan-vps .plan-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #0ea5e9; font-weight: 700; }
.plan-vps h3 { display: flex; align-items: center; gap: 8px; }
.plan-vps .vps-icon { flex: 0 0 auto; }
.plan-vps.vps-humilis .vps-icon { color: #38bdf8; }
.plan-vps.vps-strato .vps-icon { color: #10b981; }
.plan-vps.vps-cumulo .vps-icon { color: #6366f1; }