/* ================================================================ RDPConnManager – panel WWW
   Charakter: ciepły papier + grafitowy panel boczny, limonkowy sygnał, kroje Bricolage Grotesque / IBM Plex.
   Stany pokazują diody (nie kolorowe pastylki), ikony to własny zestaw liniowy SVG. */
@font-face { font-family: "RCM Display"; font-weight: 500 800; font-display: swap; src: url(/web/font-display.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "RCM Display"; font-weight: 500 800; font-display: swap; src: url(/web/font-display-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "RCM Sans"; font-weight: 100 700; font-display: swap; src: url(/web/font-sans.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "RCM Sans"; font-weight: 100 700; font-display: swap; src: url(/web/font-sans-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "RCM Mono"; font-weight: 500; font-display: swap; src: url(/web/font-mono.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "RCM Mono"; font-weight: 500; font-display: swap; src: url(/web/font-mono-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Ukraiński i rosyjski: własne kroje panelu (RCM Sans/Display) nie mają cyrylicy – cały tekst krojem systemowym, bez mieszania krojów w słowie */
:root:lang(uk), :root:lang(ru) {
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
}
.login-lang { margin-top: 6px; }
.login-lang select { width: auto; min-width: 160px; }

:root {
  --bg: #f2f0eb;
  --surface: #ffffff;
  --surface-2: #f7f5f1;
  --text: #17181c;
  --muted: #6e6c66;
  --border: #e4e0d7;
  --border-strong: #cfcac0;
  --accent: #17181c;
  --accent-soft: #eef6d2;
  --signal: #c6f03a;
  --signal-ink: #1b2200;
  --primary-bg: #17181c;
  --primary-text: #f7f5f1;
  --link: #17181c;
  --focus: #8db31a;
  --danger: #d6392b;
  --warn: #c88a00;
  --ok: #1e9e57;
  --off: #a6a39b;
  --side-bg: #131417;
  --side-2: #1c1d21;
  --side-border: #26282d;
  --side-text: #ebe9e3;
  --side-muted: #8d8b85;
  --shadow: 0 1px 0 rgba(23, 24, 28, .03), 0 18px 40px -18px rgba(23, 24, 28, .22);
  --font: "RCM Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "RCM Display", "RCM Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "RCM Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1012;
    --surface: #17181c;
    --surface-2: #1d1f23;
    --text: #edebe5;
    --muted: #9b998f;
    --border: #2a2c31;
    --border-strong: #3a3d43;
    --accent: #edebe5;
    --accent-soft: #263011;
    --primary-bg: #c6f03a;
    --primary-text: #161a05;
    --link: #edebe5;
    --focus: #c6f03a;
    --danger: #ff6b5c;
    --warn: #f0b429;
    --ok: #3ccf7f;
    --off: #6b6963;
    --side-bg: #0b0c0e;
    --side-2: #151619;
    --side-border: #212328;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
::selection { background: var(--signal); color: var(--signal-ink); }
a { color: var(--link); text-decoration: none; font-weight: 500; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; text-decoration-color: var(--focus); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; }
h1 { font-size: 22px; margin: 0; font-weight: 700; }
h2 { font-size: 30px; line-height: 1.1; margin: 0; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
h4 { margin: 16px 0 8px; font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; margin: 0; }
.error { color: var(--danger); margin: 0; min-height: 1em; }
.mono { font-family: var(--font-mono); font-size: .95em; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; margin-right: .4em; stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
button, input, select, textarea { font: inherit; color: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 10px; padding: 7px 14px; cursor: pointer; white-space: nowrap; font-weight: 500; transition: border-color .15s, background .15s, transform .08s; }
button .ic, button .bi .ic { margin: 0; }
button:hover { border-color: var(--border-strong); background: var(--surface-2); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-text); font-weight: 600; }
button.primary:hover { background: var(--primary-bg); filter: brightness(1.15); }
button.danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
button.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: var(--danger); }
button.ghost { background: transparent; }
button.link { border: none; background: none; padding: 3px 6px; color: var(--muted); font-weight: 500; border-radius: 7px; }
button.link:hover { color: var(--text); background: var(--surface-2); }
td > button + button, td > button + .badge, td > .badge + button { margin-left: 4px; }
button.small { padding: 3px 10px; font-size: 12px; border-radius: 8px; gap: 5px; }
.icon-btn { padding: 6px 9px; font-size: 16px; }
.icon-btn .ic { width: 18px; height: 18px; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
textarea { min-height: 90px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
label { display: flex; flex-direction: column; gap: 5px; font-weight: 500; font-size: 13px; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.brand { display: flex; gap: 12px; align-items: center; color: var(--text); }
.brand:hover { text-decoration: none; }
.logo { width: 44px; height: 44px; display: block; flex: none; }
.brand.small .logo { width: 32px; height: 32px; }
.brand strong { font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- logowanie */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; color: var(--text);
  background:
    radial-gradient(700px 420px at 85% 10%, rgba(198, 240, 58, .22), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    #131417; }
.login-card { width: 100%; max-width: 400px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { font-size: 24px; }
.login-card p.muted { margin: 2px 0 0; }

/* ---------------------------------------------------------------- układ */
:root { --rail-w: 0px; }
.app { display: grid; grid-template-columns: 300px 1fr var(--rail-w); height: 100%; }
.sidebar { background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-border); display: flex; flex-direction: column; min-height: 0;
  --muted: var(--side-muted); --border: var(--side-border); --surface-2: var(--side-2); }
.sidebar .brand { color: var(--side-text); }
.side-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; }
.sidebar .icon-btn { color: var(--side-text); border-color: var(--side-border); }
.sidebar .icon-btn:hover { background: var(--side-2); border-color: #3a3d43; }
.search { margin: 0 12px 10px; width: auto; color: var(--side-text); background: var(--side-2) no-repeat 11px 50% / 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8b85' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E");
  border-color: var(--side-border); padding-left: 34px; }
.search::placeholder { color: var(--side-muted); }
.search:hover { border-color: #3a3d43; }
.tree { flex: 1; overflow: auto; padding: 4px 8px 12px; scrollbar-width: thin; scrollbar-color: #2e3036 transparent; }
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 56px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); position: relative; z-index: 5; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: flex; align-items: center; padding: 7px 12px; border-radius: 10px; color: var(--muted); white-space: nowrap; font-weight: 500; }
.tabs a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.tabs a.active { background: var(--signal); color: var(--signal-ink); font-weight: 600; }
.tabs a .ic { margin: 0; }
.tabs a .badge { margin-left: 6px; }
.spacer { flex: 1; }
.user-chip { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 3px 12px 3px 3px; background: var(--surface); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--signal); font: 700 12px/1 var(--font-display);
  background: #17181c; overflow: hidden; flex: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.main { position: relative; flex: 1; min-height: 0; display: flex; }
.view { flex: 1; overflow: auto; padding: 28px 32px 40px; }
.view > * { max-width: 1280px; }
.mobile-only { display: none; }

/* ---------------------------------------------------------------- drzewo (ciemny panel) */
.node { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 9px; cursor: pointer; user-select: none; white-space: nowrap;
  color: #cfcdc6; }
.node:hover { background: var(--side-2); color: var(--side-text); }
.node.selected { background: #22251b; color: #fff; }
.node.selected::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--signal); }
.node.live .name::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; vertical-align: .1em;
  background: #3ccf7f; box-shadow: 0 0 0 3px rgba(60, 207, 127, .18); }
.node .icon { --c: #8e8c86; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 600 11px/1 var(--font-mono); flex: none;
  color: var(--c); background: color-mix(in srgb, var(--c) 17%, transparent); }
.node .icon .ic { margin: 0; width: 14px; height: 14px; stroke-width: 2; }
.node .name { overflow: hidden; text-overflow: ellipsis; }
.node .proto { margin-left: auto; font: 500 10px/1 var(--font-mono); color: var(--side-muted); text-transform: uppercase; letter-spacing: .06em; }
.node .go { margin-left: auto; font-size: 11px; padding: 2px 9px; opacity: 0; background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.node:hover .go, .node.selected .go { opacity: 1; }
.node.folder .name, .node.client .name { font-weight: 600; }
.node.structural { color: var(--side-muted); }
.children { margin-left: 15px; border-left: 1px solid var(--side-border); padding-left: 5px; }
.toggle { width: 16px; color: var(--side-muted); flex: none; text-align: center; font-size: 13px; }
.toggle:hover { color: var(--signal); }

/* ---------------------------------------------------------------- treść */
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .big-icon { --c: #17181c; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; flex: none;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.page-head .big-icon .ic { margin: 0; width: 22px; height: 22px; }
.page-head .titles { flex: 1 1 0; min-width: 0; }
.page-head .path { color: var(--muted); font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.panel + .panel { margin-top: 14px; }
.grid > .panel + .panel { margin-top: 0; }
.stat { display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 70px; height: 70px; border-radius: 50%; background: var(--signal); opacity: .18; }
.stat .value { font: 700 32px/1.05 var(--font-display); letter-spacing: -.03em; }
.props { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; align-items: baseline; }
.props dt { color: var(--muted); font: 500 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.props dd { margin: 0; overflow-wrap: anywhere; }
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 8px 0 18px; overflow-x: auto; scrollbar-width: none; }
.subtabs button { position: relative; border: none; border-radius: 0; background: none; padding: 9px 12px 11px; color: var(--muted); }
.subtabs button:hover { color: var(--text); background: none; }
.subtabs button.active { color: var(--text); font-weight: 600; }
.subtabs button.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--text); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font: 500 10.5px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--surface); position: sticky; top: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--surface-2); }
tr:last-child td { border-bottom: none; }
tr.group td { background: var(--surface-2); font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filters > * { width: auto; }
.filters label { min-width: 150px; }
/* Znaczniki: neutralny = etykieta; stan (ok / warn / err / off) = dioda + tekst */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font: 500 11px/1.5 var(--font-mono); letter-spacing: .02em;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.badge .ic { margin: 0; width: 12px; height: 12px; }
.badge.ok, .badge.warn, .badge.err, .badge.off { background: none; border-color: transparent; padding-left: 0; color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.badge.ok::before, .badge.warn::before, .badge.err::before, .badge.off::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.badge.ok { --c: var(--ok); }
.badge.warn { --c: var(--warn); }
.badge.warn::before { animation: led-pulse 1.4s ease-in-out infinite; }
.badge.err { --c: var(--danger); color: var(--danger); }
.badge.off { --c: var(--off); color: var(--muted); }
.badge.off::before { background: none; box-shadow: inset 0 0 0 1.5px var(--off); }
.badge.accent { color: var(--signal-ink); background: var(--signal); border-color: var(--signal); }
a.badge:hover { text-decoration: none; filter: brightness(.95); }
@keyframes led-pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 0%, transparent); } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--off); vertical-align: .05em; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.dot.err { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.empty { color: var(--muted); padding: 40px 24px; text-align: center; border: 1px dashed var(--border-strong); border-radius: 16px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.list-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.notes { white-space: pre-wrap; background: var(--surface-2); border-radius: 10px; padding: 12px 14px; margin: 0; border: 1px solid var(--border); }
.secret { font-family: var(--font-mono); letter-spacing: .1em; }
.comment { border-left: 3px solid var(--signal); padding: 4px 12px; margin: 10px 0; }
.form-grid { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
.checklist { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.welcome-hero { margin-bottom: 22px; }
.welcome-hero h2 { font-size: 36px; }

/* ---------------------------------------------------------------- tunel w drzewie i licznik tuneli na górnym pasku */
.tun { --c: var(--off); position: relative; display: inline-grid; place-items: center; width: 24px; height: 22px; margin-left: auto; flex: none; color: var(--c); }
.tun .ic { margin: 0; width: 17px; height: 17px; stroke-width: 2; }
.tun .led { position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--side-bg); }
.tun.off { --c: #6b6963; }
.tun.off .led { display: none; }
.tun.ok { --c: #3ccf7f; }
.tun.ok .led { box-shadow: 0 0 0 2px var(--side-bg), 0 0 8px #3ccf7f; }
.tun.warn { --c: #f0b429; }
.tun.warn .led { animation: tun-blink 1s steps(2, start) infinite; }
.tun.err { --c: #ff6b5c; }
.tun + .go, .tun + .proto { margin-left: 4px; }
@keyframes tun-blink { to { visibility: hidden; } }
.vpn-chip { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 5px 12px 5px 10px; white-space: nowrap; background: var(--surface); }
.vpn-chip .vpn-icon { width: 17px; height: 17px; margin: 0; }
.vpn-chip strong { font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.vpn-segs { display: flex; gap: 2px; align-items: center; }
.vpn-segs i { width: 4px; height: 14px; border-radius: 2px; background: var(--border-strong); }
.vpn-segs i.ok { background: var(--ok); }
.vpn-segs i.warn { background: var(--warn); animation: tun-blink 1s steps(2, start) infinite; }
.vpn-segs i.err { background: var(--danger); }
.vpn-chip.ok .vpn-icon { color: var(--ok); }
.vpn-chip.err { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.vpn-chip.err .vpn-icon { color: var(--danger); }
/* Zgłoś błąd / sugestię – żarówka na górnym pasku: świeci, co kilka sekund mrugnie i rozbłyśnie (pomysł!) */
.feedback-chip { display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 12px 5px 8px; white-space: nowrap; background: var(--surface); }
.feedback-chip:hover { border-color: color-mix(in srgb, #f5b400 55%, transparent); }
.feedback-chip .lbl { font-size: 12.5px; }
.bulb { width: 20px; height: 20px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bulb-glass { fill: #ffd23f; stroke: #c88a00; animation: bulb-blink 5s ease-in-out infinite; }
.bulb-rays { stroke: #f5b400; stroke-width: 1.8; animation: bulb-rays 5s ease-in-out infinite; }
.feedback-chip:hover .bulb-glass, .feedback-chip:hover .bulb-rays { animation-duration: 1.1s; }
@keyframes bulb-blink {
  0%, 62%, 100% { fill: #ffd23f; filter: drop-shadow(0 0 2px rgba(255, 196, 0, .55)); }
  66% { fill: transparent; filter: none; }
  70% { fill: #ffe680; filter: drop-shadow(0 0 5px rgba(255, 196, 0, .95)); }
  74% { fill: transparent; filter: none; }
  80% { fill: #fff3b0; filter: drop-shadow(0 0 7px rgba(255, 210, 40, 1)); }
}
@keyframes bulb-rays { 0%, 74%, 100% { opacity: 0; } 80% { opacity: 1; } 92% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bulb-glass, .bulb-rays { animation: none; } .bulb-rays { opacity: 0; } }

/* ---------------------------------------------------------------- sesja */
.session { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b0c0e; z-index: 6; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--side-bg); color: var(--side-text); border-bottom: 1px solid var(--side-border);
  --border: var(--side-border); --surface: var(--side-2); --surface-2: #24262b; --muted: var(--side-muted); --text: var(--side-text); }
.toolbar button { color: var(--side-text); }
.toolbar button.danger { color: #ff8a7e; border-color: rgba(255, 107, 92, .45); }
.toolbar .title { font-weight: 600; }
.toolbar .state { color: var(--side-muted); font-size: 12px; }
.display { flex: 1; overflow: hidden; background: #000; outline: none; display: grid; place-items: center; }
.display { position: relative; }
.screen { position: absolute; inset: 0; display: grid; place-items: center; outline: none; }
.screen > div:not(.overlay) { box-shadow: 0 0 0 1px rgba(255,255,255,.05); }
.screen.drop::after { content: "Upuść pliki – trafią na dysk „RDPConnManager” w sesji"; position: absolute; inset: 12px; display: grid; place-items: center;
  border: 2px dashed var(--signal); border-radius: 14px; background: rgba(198, 240, 58, .12); color: #fff; font-weight: 600; pointer-events: none; }
.session-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.stab { display: flex; align-items: center; gap: 7px; padding: 4px 4px 4px 10px; border: 1px solid var(--side-border); border-radius: 9px; cursor: pointer;
  background: var(--side-2); max-width: 220px; white-space: nowrap; color: #cfcdc6; }
.stab.active { background: #22251b; border-color: var(--signal); color: #fff; }
.stab-name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.stab-close { border: none; background: none; padding: 0 6px; font-size: 16px; line-height: 1; color: var(--side-muted); }
.stab-close:hover { color: #ff8a7e; background: none; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px;
  text-align: center; color: #ebe9e3; background: rgba(11, 12, 14, .86); z-index: 3; }
.overlay strong { font: 700 20px/1.2 var(--font-display); }
.overlay p { max-width: 560px; margin: 0; color: #b9b7b0; }
.overlay.error strong { color: #ff8a7e; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--signal); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- okna */
dialog { padding: 24px; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); color: var(--text); border-radius: 20px; }
dialog.wide { width: min(860px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(15, 16, 18, .55); backdrop-filter: blur(3px); }
dialog h3 { font-size: 20px; }
dialog form { display: flex; flex-direction: column; gap: 12px; }
.modal-body { display: flex; flex-direction: column; gap: 12px; overflow: auto; max-height: calc(100vh - 200px); }
.buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.toasts { position: fixed; right: calc(var(--rail-w) + 16px); bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: #17181c; color: #f2f0eb; padding: 11px 16px 11px 14px; border-radius: 12px; box-shadow: var(--shadow); max-width: 380px; border-left: 4px solid var(--signal);
  animation: toast-in .25s ease-out; }
.toast.err { border-left-color: #ff6b5c; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); z-index: 20; box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .2s; }
  .app.menu-open .sidebar { transform: none; }
  .mobile-only { display: inline-block; }
  .view { padding: 14px; }
  .props { grid-template-columns: 1fr; gap: 0 0; }
  .props dd { margin-bottom: 8px; }
  .user-chip .name { display: none; }
  .feedback-chip { padding: 5px 8px; }
  .feedback-chip .lbl { display: none; }
}

/* ---------------------------------------------------------------- nagrania */
.rec-panel { padding: 0; overflow: hidden; }
.rec-stage { position: relative; height: min(68vh, 720px); background: #000; display: grid; place-items: center; overflow: hidden; }
.rec-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.rec-guac { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.rec-controls { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.rec-controls select { width: auto; }
.rec-bar { position: relative; height: 12px; margin: 0 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.rec-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 6px; opacity: .55; pointer-events: none; }
.rec-ticks { position: absolute; inset: 0; }
.rec-tick { position: absolute; top: -4px; width: 4px; height: 20px; margin-left: -2px; background: var(--warn); border-radius: 2px; cursor: pointer; }
.inline-form { display: flex; gap: 8px; margin-bottom: 10px; }
.bi { display: inline-flex; line-height: 1; }
/* ---------------------------------------------------------------- menu konta (prawy górny róg) */
.user-chip .caret { color: var(--muted); font-size: 11px; }
.account-menu { position: fixed; z-index: 50; min-width: 250px; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.account-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.account-head .avatar { width: 38px; height: 38px; font-size: 14px; }
.account-item { display: flex; align-items: center; border: none; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; }
.account-item:hover { background: var(--surface-2); }
.account-item.danger-text { color: var(--danger); }
.account-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
/* ---------------------------------------------------------------- samouczek: Azor Ping */
.azor { position: fixed; z-index: 60; width: min(520px, calc(100vw - 16px)); display: flex; gap: 6px; align-items: flex-start; padding: 12px 14px 12px 6px;
  border-radius: 18px; color: #e5e7eb; box-shadow: 0 18px 50px rgba(2, 6, 23, .45);
  background: radial-gradient(1.5px 1.5px at 20% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 70% 80%, #fff8, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff6, transparent), radial-gradient(1px 1px at 85% 20%, #fff6, transparent), linear-gradient(120deg, #0b1026, #202854);
  transition: left .8s cubic-bezier(.65, 0, .35, 1), top .8s cubic-bezier(.65, 0, .35, 1); }
.azor-dog { flex: 0 0 120px; height: 172px; }
.azor-dog svg { width: 100%; height: 100%; overflow: visible; }
.azor .dog-body { transform-origin: 0 0; animation: azor-bob 3.6s ease-in-out infinite; }
.azor.flying .dog-body { animation: azor-fly .8s ease-in-out; transform: rotate(var(--tilt, 0deg)); }
.azor.landed .dog-body { animation: azor-land .45s ease-out; }
.azor .flame { opacity: .25; transform-origin: 0 120px; animation: azor-flame .12s linear infinite alternate; }
.azor.flying .flame { opacity: 1; }
.azor .arm-left { transform: translate(-48px, 4px) rotate(160deg); animation: azor-arm-l 4s ease-in-out infinite; }
.azor .arm-right { transform: translate(48px, 4px) rotate(-50deg); animation: azor-wave 1.05s ease-in-out infinite; }
.azor.flying .arm-right { animation: none; transform: translate(48px, 4px) rotate(-120deg); }
.azor .eyes { transform-origin: 0 -91px; animation: azor-blink 3.5s infinite; }
.azor .ears { transform-origin: 0 -100px; animation: azor-ears 2.8s ease-in-out infinite; }
.azor .tongue { transform-origin: 0 -60px; animation: azor-tongue 5.7s ease-in-out infinite; }
.azor .antenna { animation: azor-light 1.6s ease-in-out infinite; }
.azor-bubble { flex: 1; min-width: 0; background: rgba(255, 255, 255, .95); color: #14182f; border-radius: 14px; padding: 10px 12px; position: relative; }
.azor-bubble::before { content: ""; position: absolute; left: -10px; top: 34px; border: 10px solid transparent; border-left: 0; border-right-color: rgba(255, 255, 255, .95); }
.azor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.azor-name { color: #dc0714; font-weight: 700; font-size: 12px; }
.azor-count { color: #64748b; font-size: 11px; }
.azor-title { display: block; font-size: 16px; margin-bottom: 4px; }
.azor-text { margin: 0; min-height: 66px; font-size: 13px; color: #334155; }
.azor-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.azor-buttons button { padding: 5px 10px; }
.azor-buttons button.ghost { color: #334155; border-color: #cbd5e1; background: #fff; }
.azor-pointer { position: absolute; width: 0; height: 0; border: 12px solid transparent; display: none; animation: azor-point .6s ease-in-out infinite alternate; }
.azor-pointer.to-left { display: block; left: -22px; top: calc(50% - 12px); border-right-color: #dc0714; border-left: 0; }
.azor-pointer.to-right { display: block; right: -22px; top: calc(50% - 12px); border-left-color: #dc0714; border-right: 0; }
.azor-pointer.to-top { display: block; top: -22px; left: calc(50% - 12px); border-bottom-color: #dc0714; border-top: 0; }
.azor-pointer.to-bottom { display: block; bottom: -22px; left: calc(50% - 12px); border-top-color: #dc0714; border-bottom: 0; }
.azor.flying .azor-pointer { display: none; }
.azor-spot { position: fixed; z-index: 59; border: 3px solid #dc0714; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 4000px rgba(2, 6, 23, .28); animation: azor-pulse 1.2s ease-in-out infinite; transition: all .3s ease; }
.azor-confetti { position: fixed; inset: 0; z-index: 61; pointer-events: none; overflow: hidden; }
.azor-confetti i { position: absolute; top: -20px; width: 9px; height: 5px; border-radius: 1px; animation: azor-fall linear forwards; }
@keyframes azor-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes azor-fly { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-14px) rotate(var(--tilt, 0deg)); } 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } }
@keyframes azor-land { 0% { transform: scale(1.12, .86); } 50% { transform: scale(.95, 1.06); } 100% { transform: scale(1, 1); } }
@keyframes azor-flame { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }
@keyframes azor-wave { 0%, 100% { transform: translate(48px, 4px) rotate(-72deg); } 50% { transform: translate(48px, 4px) rotate(-28deg); } }
@keyframes azor-arm-l { 0%, 100% { transform: translate(-48px, 4px) rotate(154deg); } 50% { transform: translate(-48px, 4px) rotate(166deg); } }
@keyframes azor-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes azor-ears { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes azor-tongue { 0%, 60%, 100% { transform: scaleY(1); } 75% { transform: scaleY(1.6); } }
@keyframes azor-light { 0%, 100% { fill: #dc0714; opacity: .5; } 50% { opacity: 1; } }
@keyframes azor-point { from { margin: 0; } to { margin: -4px; } }
@keyframes azor-pulse { 0%, 100% { border-width: 3px; } 50% { border-width: 5px; } }
@keyframes azor-fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .azor, .azor * { animation: none !important; transition: none !important; } }
@media (max-width: 560px) { .azor-dog { flex-basis: 76px; height: 110px; } }
/* ---------------------------------------------------------------- Azor w pogotowiu (lewy dolny róg) */
/* Samouczek przeniesiony z programu WPF (azor.js): kosmiczne okienko z psem i dymkiem; pies, iskry, emotki i konfetti – na płótnie .azt-fx */
.azt { position: fixed; left: 0; top: 0; z-index: 60; border-radius: 18px; overflow: hidden; color: #fff; cursor: move; touch-action: none; user-select: none;
  background: linear-gradient(135deg, #0b1026, #202854); box-shadow: 0 18px 50px rgba(2, 6, 23, .45); transition: opacity .15s; }
.azt-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.azt-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 62; pointer-events: none; }
.azt-head { position: absolute; left: calc(var(--dog) + 10px); right: 14px; top: 11px; display: flex; justify-content: space-between; font: 700 11.3px/1.2 "RCM Sans", system-ui, sans-serif; }
.azt-brand { color: #ff96a0; letter-spacing: .02em; white-space: pre; }
.azt-count { color: #a0aad2; font-weight: 400; }
.azt-bubble { position: absolute; left: calc(var(--dog) + 10px); right: 14px; top: 36px; bottom: 56px; padding: 10px 12px; border-radius: 12px; overflow: auto;
  background: rgba(255, 255, 255, .94); color: #303850; transform-origin: -12px 46px; cursor: default; scrollbar-width: thin; }
.azt-bubble::before { content: ""; position: absolute; left: -12px; top: 34px; border: 10px solid transparent; border-left: 0; border-right: 12px solid rgba(255, 255, 255, .94); }
.azt-title { display: block; font: 700 18px/1.25 var(--font-display); color: #141830; margin-bottom: 4px; }
.azt-text { margin: 0; font-size: 13.3px; line-height: 1.45; white-space: pre-line; }
.azt.celebrating .azt-bubble { bottom: 14px; }
.azt.celebrating .azt-title { font: 800 40px/1 var(--font-display); color: #dc0714; margin-bottom: 6px; letter-spacing: -.02em; }
.azt.celebrating .azt-text { font-size: 14px; }
.azt-buttons { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.azt-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid #505e96; background: #202854; color: #fff; font-weight: 500; cursor: pointer; }
.azt-btn:hover { opacity: .85; }
.azt-btn:disabled { opacity: .45; cursor: default; }
.azt-btn.primary { background: #dc0714; border-color: #dc0714; font-weight: 600; }
.azt.docking { pointer-events: none; }
@media (max-width: 640px) { .azt-bubble { bottom: 54px; } .azt-title { font-size: 16px; } .azt-text { font-size: 13px; } .azt-btn { padding: 6px 10px; } }
.azor-dock { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; border-top: 1px solid var(--border); cursor: pointer; user-select: none; }
.azor-dock:hover { background: var(--surface-2); }
.azor-dock .azor-dog { flex: 0 0 44px; height: 62px; }
.azor-dock .azor-dog svg { width: 100%; height: 100%; overflow: visible; }
.azor-dock-text { display: flex; flex-direction: column; line-height: 1.2; }
.azor-dock .dog-body { animation: azor-bob 3.6s ease-in-out infinite; }
.azor-dock .flame { opacity: 0; }
.azor-dock .arm-left { transform: translate(-48px, 4px) rotate(160deg); }
.azor-dock .arm-right { transform: translate(48px, 4px) rotate(-50deg); }
.azor-dock:hover .arm-right, .azor-dock.welcome .arm-right { animation: azor-wave 1.05s ease-in-out infinite; }
.azor-dock .eyes { transform-origin: 0 -91px; animation: azor-blink 3.5s infinite; }
.azor-dock .ears { transform-origin: 0 -100px; animation: azor-ears 2.8s ease-in-out infinite; }
.azor-dock .antenna { animation: azor-light 1.6s ease-in-out infinite; }
.azor-dock.away .azor-dog { visibility: hidden; }
.azor-dock.welcome .dog-body { animation: azor-land .45s ease-out .75s; }
.azor-tip { position: absolute; left: 12px; bottom: calc(100% + 8px); width: 250px; padding: 10px 12px; border-radius: 12px; z-index: 30;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13px; }
.azor-tip::after { content: ""; position: absolute; left: 22px; top: 100%; border: 8px solid transparent; border-top-color: var(--surface); }
.azor.docking { transition: left .8s cubic-bezier(.5, 0, .3, 1), top .8s cubic-bezier(.5, 0, .3, 1), transform .8s ease-in, opacity .8s ease-in;
  transform: scale(.12); opacity: .2; transform-origin: 30px 80%; }
.azor.docking .azor-bubble, .azor.docking .azor-pointer { opacity: 0; transition: opacity .2s; }
.azor.docking .flame { opacity: 1; }
/* ---------------------------------------------------------------- wskaźnik zajętości */
.busy-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(2, 6, 23, .35); padding: 16px; }
.busy-card { position: relative; overflow: hidden; width: min(420px, 100%); padding: 18px 18px 12px; }
.busy-bar { position: absolute; top: 0; left: 0; height: 3px; width: 40%; background: var(--accent); animation: busy-slide 1.2s ease-in-out infinite; }
.busy-row { display: flex; align-items: center; gap: 14px; }
.busy-texts { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.busy-detail { margin: 0; color: var(--muted); font-size: 13px; }
.busy-foot { justify-content: space-between; margin-top: 12px; }
.busy-spinner { flex: 0 0 34px; border-color: var(--accent-soft); border-top-color: var(--accent); }
@keyframes busy-slide { 0% { left: -40%; } 100% { left: 100%; } }
/* ---------------------------------------------------------------- responsywność (telefon, tablet) */
.tabs .tab-icon { margin-right: 6px; }
.tabs .tab-short { display: none; }
.drawer-backdrop { display: none; }
/* Pasek na komputerze zwija się według własnej szerokości (drzewo zabiera część ekranu): najpierw podpisy przycisków po prawej,
   potem krótkie nazwy kart, na końcu same ikony (pełna nazwa w podpowiedzi). Tylko powyżej 860px – kontener (layout containment)
   zamknąłby w sobie dolny pasek kart na telefonie (position: fixed). */
@media (min-width: 861px) {
  .topbar { container-type: inline-size; }
  .tabs { min-width: 0; }
}
@container (max-width: 1480px) {
  .feedback-chip { padding: 5px 8px; }
  .feedback-chip .lbl, .user-chip .name { display: none; }
}
@container (max-width: 1240px) {
  .tabs a { padding: 7px 9px; }
  .tabs .tab-text { display: none; }
  .tabs .tab-short { display: inline; }
}
@container (max-width: 980px) {
  .tabs .tab-short { display: none; }
  .tabs .tab-icon { margin: 0; font-size: 17px; }
}
@media (max-width: 860px) {
  /* Dolny pasek nawigacji z ikonami (jak w aplikacjach mobilnych) */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; gap: 0; justify-content: space-around; overflow-x: auto;
    background: var(--surface); border-top: 1px solid var(--border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(15, 23, 42, .06); }
  .tabs a { flex: 1 1 0; min-width: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; font-size: 10.5px; }
  .tabs .tab-icon { margin: 0; font-size: 19px; line-height: 1.1; }
  .tabs .tab-text { display: none; }
  .tabs .tab-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 54px; backdrop-filter: none; background: var(--bg); } /* filtr tła zamknąłby w sobie dolny pasek (position: fixed) */
  .topbar .spacer { flex: 1; }
  /* Szuflada z drzewem – przyciemnione tło zamyka ją */
  .drawer-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(2, 6, 23, .4); }
  .app:not(.menu-open) .drawer-backdrop { display: none; }
  .app.menu-open .drawer-backdrop { display: block; }
  /* Kafelki statystyk po dwa w rzędzie */
  .grid:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel.stat .value { font-size: 22px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .page-head h2 { font-size: 20px; overflow-wrap: anywhere; }
  .page-head .actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .filters label { flex: 1 1 140px; min-width: 0; }
  .inline-form { flex-direction: column; }
  .rec-controls { flex-wrap: wrap; }
  .rec-stage { height: min(52vh, 520px); }
  /* Pasek sesji: zakładki w osobnym wierszu, przyciski same ikony */
  .session .toolbar { flex-wrap: wrap; padding: 6px 8px; gap: 6px; }
  .session .toolbar .session-tabs { order: -1; width: 100%; }
  .session .toolbar .state { display: none; }
  .session .toolbar .lbl { display: none; }
  .session .toolbar button { padding: 7px 10px; }
  .session .toolbar .bi { margin: 0; }
  .azor-dock { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  /* Tabele jako karty: wiersz = karta, komórka = „podpis: wartość” */
  .table-wrap { border: none; background: none; overflow: visible; }
  .table-wrap table, .table-wrap tbody { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
  .table-wrap td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border: none; text-align: right;
    overflow-wrap: anywhere; min-width: 0; }
  .table-wrap td { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; column-gap: 6px; }
  .table-wrap td > * { flex: 0 1 auto; min-width: 0; }
  .table-wrap td .badge { white-space: nowrap; }
  .table-wrap td::before { content: attr(data-label); flex: none; max-width: 45%; margin-right: auto; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; }
  .table-wrap td:not([data-label])::before, .table-wrap td[data-label=""]::before { content: none; }
  .table-wrap td:not([data-label]), .table-wrap td[data-label=""] { justify-content: flex-start; flex-wrap: wrap; text-align: left; }
  .table-wrap td:empty { display: none; }
  .table-wrap td.num { text-align: right; }
  /* Okna dialogowe jako arkusz od dołu ekranu */
  dialog, dialog.wide { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    max-height: 92dvh; }
  .modal-body { max-height: calc(92dvh - 150px); }
  dialog .buttons { position: sticky; bottom: 0; background: var(--surface); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .account-menu { left: 8px; right: 8px !important; }
}
@media (pointer: coarse) {
  button, .tabs a, select, input { min-height: 40px; }
  button.link, .stab-close, .subtabs button { min-height: 0; }
  .node { min-height: 40px; }
}
/* ---------------------------------------------------------------- znak GECOS przy nazwie programu */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.1; }
.gecos-mark { display: block; height: 14px; width: auto; }
.login-card .gecos-mark { height: 36px; margin-top: 10px; }
/* ---------------------------------------------------------------- Azor na telefonie: pływający przycisk nad dolnym paskiem */
.azor-dock.floating { position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 16; width: 62px; height: 62px; padding: 0;
  justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); overflow: visible; }
.azor-dock.floating:hover { background: var(--surface); }
.azor-dock.floating .azor-dock-text { display: none; }
.azor-dock.floating .azor-dog { flex: 0 0 40px; height: 58px; margin-top: 2px; }
.azor-dock.floating .azor-tip { left: auto; right: 0; width: min(260px, calc(100vw - 32px)); }
.azor-dock.floating .azor-tip::after { left: auto; right: 22px; }
body.in-session .azor-dock.floating { display: none; }
@media (max-width: 640px) {
  .azor { width: calc(100vw - 16px); }
  .azor-text { min-height: 0; }
}
/* ---------------------------------------------------------------- zainstalowana aplikacja (pełny ekran): miejsce na pasek stanu telefonu */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
  .side-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .login { padding-top: calc(16px + env(safe-area-inset-top)); }
}
/* ---------------------------------------------------------------- wiadomości */
.tabs a { position: relative; }
.tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px;
  font: 700 10.5px/1 var(--font); background: #ff5a3c; color: #fff; }
.msg { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 210px); min-height: 420px; max-width: 1280px; }
.msg-side { overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 6px; }
.msg-list { display: flex; flex-direction: column; gap: 2px; }
.msg-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--text); font-weight: 400; }
.msg-row:hover { background: var(--surface-2); text-decoration: none; }
.msg-row.active { background: var(--accent-soft); }
.msg-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14.5px; }
.msg-row-sub { display: flex; min-width: 0; color: var(--muted); font-size: 12.5px; }
.msg-time { color: var(--muted); font-size: 12.5px; flex: none; white-space: pre; }
.msg-preview { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-row.unread .msg-row-name, .msg-row.unread .msg-preview, .msg-row.unread .msg-time { color: var(--text); font-weight: 700; }
.msg-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--mc-blue); }
.msg-row .mc-av-lg, .msg-row .msg-avatar-trash { width: 52px; height: 52px; }
.msg-avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #17181c; color: var(--signal);
  font: 700 13px/1 var(--font-display); }
.msg-thread { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.msg-placeholder { display: grid; place-items: center; }
.msg-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.msg-head-text { display: flex; flex-direction: column; min-width: 0; }
.msg-head-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-live { color: var(--ok); font-weight: 600; }
.msg-back { display: none; font-size: 28px; line-height: 1; padding: 0 6px 4px 0; color: var(--text); }
.msg-bubbles { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { margin-top: 3px; font-size: 11px; color: var(--muted); text-align: right; }
.msg-first { text-align: center; margin: auto; }
.msg-pick { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.msg-pick-row { justify-content: flex-start; border: none; background: none; padding: 8px; border-radius: 10px; text-align: left; }
.msg-pick-row:hover { background: var(--surface-2); }
.msg-pick-text { display: flex; flex-direction: column; }
.toast-msg { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.toast-msg div { opacity: .85; overflow: hidden; text-overflow: ellipsis; max-height: 3em; }
@media (prefers-color-scheme: dark) {
  .msg-avatar { background: #26282d; }
}
@media (max-width: 860px) {
  .msg { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 230px); }
  .msg.has-thread .msg-side { display: none; }
  .msg:not(.has-thread) .msg-thread { display: none; }
  .msg-back { display: block; }
  .tabs .tab-count { position: absolute; top: 2px; right: 50%; transform: translateX(18px); margin: 0; }
}
body.in-messages .azor-dock.floating { display: none; }
/* ---------------------------------------------------------------- kosz wiadomości (osobny dla każdej osoby) */
.msg-avatar-trash { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.msg-avatar-trash .ic { width: 18px; height: 18px; }
.msg-trash-row { margin-top: 6px; border-top: 1px dashed var(--border); border-radius: 0 0 12px 12px; padding-top: 11px; }
.msg-trash-row.active { border-radius: 12px; }
.msg-head-person { display: contents; }
.msg-head .icon-btn .ic { margin: 0; }
.msg-trash { gap: 8px; }
.trash-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.trash-group:first-child { margin-top: 0; }
.trash-group .msg-avatar { width: 30px; height: 30px; font-size: 11px; }
.trash-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-group button { padding: 5px 10px; font-size: 12.5px; }
.trash-item { display: flex; align-items: center; gap: 6px; margin-left: 40px; padding: 9px 8px 9px 13px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.trash-text { flex: 1; min-width: 0; }
.trash-text .msg-body { max-height: 7.5em; overflow: hidden; }
.trash-text .msg-meta { text-align: left; }
.trash-item .icon-btn { flex: none; border-color: transparent; background: transparent; }
.trash-item .icon-btn:hover { border-color: var(--border-strong); }
@media (max-width: 640px) {
  .trash-item { margin-left: 0; }
  .trash-group .spacer { display: none; }
}
/* ---------------------------------------------------------------- Zespół: karty osób i profil */
.team-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; max-width: 1280px; }
.team-tools input[type=search] { flex: 0 1 320px; min-width: 200px; }
.team-tools .check { margin: 0; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; max-width: 1280px; }
.team-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px 14px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); font-weight: 400;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.team-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.team-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.team-card-cover { align-self: stretch; height: 64px; margin: 0 -14px; }
.team-avatar { position: relative; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 700 15px/1 var(--font-display);
  background: #17181c; }
.team-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.team-avatar-card { width: 84px; height: 84px; margin-top: -42px; font-size: 26px; box-shadow: 0 0 0 4px var(--surface); }
.team-avatar-big { width: 148px; height: 148px; font-size: 46px; box-shadow: 0 0 0 6px var(--bg); }
.team-online { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--surface); }
.team-avatar-big .team-online { right: 12px; bottom: 12px; width: 28px; height: 28px; box-shadow: 0 0 0 5px var(--bg); }
/* Status osoby: zaraz wracam – pomarańczowa kropka, zajęty / nie przeszkadzać – czerwona */
.mc-on.st-1, .team-online.st-1 { background: var(--warn); }
.mc-on.st-2, .mc-on.st-3, .team-online.st-2, .team-online.st-3 { background: var(--danger); }
.team-status.on.st-1, .msg-live.st-1 { color: var(--warn); }
.team-status.on.st-2, .team-status.on.st-3, .msg-live.st-2, .msg-live.st-3 { color: var(--danger); }
.account-item.st-item .bi { color: var(--ok); }
.account-item.st-item.st-1 .bi { color: var(--warn); }
.account-item.st-item.st-2 .bi, .account-item.st-item.st-3 .bi { color: var(--danger); }
.team-avatar[data-enlarge], .team-avatar-big { cursor: zoom-in; }
.avatar-zoom-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.avatar-zoom { width: min(280px, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 84px; font-weight: 700; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
.avatar-zoom img { width: 100%; height: 100%; object-fit: cover; }
.team-name { margin-top: 10px; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-sub { color: var(--muted); font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-status { margin-top: 8px; font-size: 12px; color: var(--muted); }
.team-status.on { color: var(--ok); font-weight: 600; }
.team-mail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); align-self: stretch; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-empty { grid-column: 1 / -1; }
.team-profile { max-width: 920px; }
.team-cover { position: relative; height: 220px; border-radius: 20px; }
.team-back { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(23, 24, 28, .55); color: #fff; font-weight: 600;
  backdrop-filter: blur(6px); }
.team-back:hover { text-decoration: none; background: rgba(23, 24, 28, .75); }
.team-head { display: flex; align-items: flex-end; gap: 22px; margin: -74px 0 0 32px; position: relative; }
.team-head-text { min-width: 0; padding-bottom: 6px; }
.team-head-text h2 { margin: 0; font: 600 30px/1.15 var(--font-display); overflow-wrap: anywhere; }
.team-position { color: var(--muted); font-size: 16px; margin-top: 2px; }
.team-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.team-actions { margin: 20px 0 18px 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.team-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.team-bio { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.team-contact-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; min-width: 0; }
.team-contact-row .ic { flex: none; width: 18px; height: 18px; color: var(--muted); }
.team-contact-row a, .team-contact-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .team-card { padding: 0 10px 12px; border-radius: 16px; }
  .team-card-cover { height: 52px; margin: 0 -10px; }
  .team-avatar-card { width: 68px; height: 68px; margin-top: -34px; font-size: 22px; }
  .team-mail { display: none; }
  .team-tools input[type=search] { flex: 1 1 100%; }
  .team-cover { height: 150px; border-radius: 16px; }
  .team-head { flex-direction: column; align-items: center; text-align: center; margin: -64px 0 0; gap: 10px; }
  .team-avatar-big { width: 120px; height: 120px; font-size: 38px; }
  .team-meta { justify-content: center; }
  .team-actions { margin: 16px 0; justify-content: center; }
  .team-actions button { flex: 1 1 140px; }
}
/* ---------------------------------------------------------------- ekran logowania: marka po lewej, karta po prawej */
.login { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; padding: 24px 16px 48px; }
.login-brand { justify-self: center; max-width: 400px; color: #ebe9e3; text-align: center; }
.login-logo { width: 64px; height: 64px; }
.login-brand h2 { margin: 14px 0 6px; font-size: 30px; color: #fff; }
.login-brand p { margin: 0; color: #a9a7a0; line-height: 1.55; }
.login-gecos { display: block; height: 40px; margin: 22px auto 0; }
.login-title h1 { font-size: 26px; }
.login-title p { margin: 4px 0 2px; }
.login-card button.primary { padding: 11px 14px; font-size: 15px; }
.login-version { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: #8d8b85; }
.login { position: relative; }
@media (min-width: 900px) {
  .login { grid-template-columns: minmax(0, 440px) minmax(0, 400px); justify-content: center; gap: 72px; }
  .login-brand { justify-self: start; text-align: left; }
  .login-logo { width: 84px; height: 84px; }
  .login-brand h2 { font-size: 44px; margin-top: 22px; }
  .login-brand p { font-size: 16px; }
  .login-gecos { margin: 30px 0 0; height: 48px; }
}

/* Słownik stanowisk */
.pos-add { display: flex; gap: 8px; margin-bottom: 10px; }
.pos-add input { flex: 1; min-width: 0; }
.pos-list { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; padding-right: 2px; }
.pos-row { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 6px; }
.pos-row input { min-width: 0; }
.pos-row .icon-btn { padding: 5px 7px; }
.pos-row .icon-btn[disabled] { opacity: .35; cursor: default; }
.pos-count { font-size: 12px; color: var(--muted, #888); min-width: 64px; text-align: right; white-space: nowrap; }
.pos-count.used { color: inherit; font-weight: 600; }
.pos-error { color: #e5484d; font-size: 13px; min-height: 18px; margin-top: 6px; }
.pos-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 560px) { .pos-count { min-width: 0; } .pos-row { grid-template-columns: 1fr auto auto auto; } .pos-count { display: none; } }

/* ---------------------------------------------------------------- program na Windows (logowanie, strona główna) */
.login-desktop { width: 100%; max-width: 400px; min-width: 0; justify-self: center; }
.login-desktop .desktop-card { min-width: 0; }
@media (min-width: 900px) {
  /* pod kartą logowania (prawa kolumna), blisko niej */
  .login { row-gap: 18px; }
  .login-brand { grid-row: 1 / span 2; align-self: center; }
  .login-desktop { grid-column: 2; justify-self: stretch; }
}
.desktop-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(198, 240, 58, .10), rgba(255, 255, 255, .03)); border: 1px solid rgba(198, 240, 58, .28); color: var(--text); }
.login .desktop-card { background: linear-gradient(135deg, rgba(198, 240, 58, .12), rgba(255, 255, 255, .04)); color: #ebe9e3; }
.desktop-mark { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #c6f03a; color: #16181b; }
.desktop-mark .ic { width: 24px; height: 24px; }
.desktop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.desktop-text strong { font-family: var(--font-display); font-size: 15px; }
.desktop-sha { font: 500 11px/1.3 var(--font-mono); color: #8d8b85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.desktop-get { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: #c6f03a; color: #16181b; font-weight: 600; text-decoration: none; }
a.desktop-get:hover { filter: brightness(1.06); text-decoration: none; }
a.desktop-get .ic { width: 16px; height: 16px; }
.desktop-hide { flex: none; }
.home-desktop { margin-bottom: 14px; }
@media (max-width: 520px) {
  .desktop-card { flex-wrap: wrap; }
  .desktop-text { flex-basis: calc(100% - 60px); }
  a.desktop-get { flex: 1; justify-content: center; }
}

/* ================================================================ kody OTP tuneli i Authenticator */
.otp-field { display: grid; gap: 6px; }
.otp-row { display: flex; gap: 8px; align-items: stretch; }
.otp-input { flex: 1; min-width: 0; font: 600 22px/1.2 var(--font-mono); letter-spacing: .14em; text-align: center; padding: 10px 12px; }
button.otp-generate { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); font-weight: 600; white-space: nowrap; }
button.otp-generate:hover { background: var(--signal); filter: brightness(1.05); }
.otp-meter { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.otp-meter i { display: block; height: 100%; width: 100%; background: var(--ok); transition: width .25s linear; }
.otp-meter.low i { background: var(--warn); }
.otp-info { font-size: 12px; color: var(--muted); min-height: 1.2em; }
.otp-info.ok { color: var(--ok); }
.otp-info.warn { color: var(--warn); }
.otp-info.err { color: var(--danger); }
.otp-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text); font-size: 13px; }
.otp-alert .ic { color: var(--danger); flex: none; margin-top: 1px; }
.otp-label { display: grid; gap: 6px; font-size: 13px; }
.otp-box button.small { justify-self: start; }

.auth-head { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.auth-search { flex: 1; min-width: 0; }
.auth-group + .auth-group { margin-top: 22px; }
.auth-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 13px/1.3 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.auth-group-title .count { font: 500 11px/1.6 var(--font-mono); padding: 0 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.auth-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.auth, .auth-list, .auth-group { min-width: 0; }
.auth-tile { min-width: 0; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; min-height: 150px; }
.auth-tile.open { border-color: var(--border-strong); box-shadow: var(--shadow); }
.auth-tile-head { display: flex; gap: 10px; align-items: flex-start; }
.auth-avatar { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--side-bg); color: var(--signal); font: 700 15px/1 var(--font-display); }
.auth-titles { display: grid; min-width: 0; flex: 1; }
.auth-titles .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-tools { display: flex; gap: 2px; }
.auth-tools .icon-btn { padding: 4px 6px; border-color: transparent; }
.auth-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
button.auth-show { width: 100%; padding: 12px; border-style: dashed; font-weight: 600; }
.auth-nope { margin: 0; font-size: 12px; color: var(--muted); }
.auth-live { display: flex; align-items: center; gap: 12px; }
button.auth-code { flex: 1; justify-content: flex-start; border: none; background: none; padding: 0; font: 600 34px/1.1 var(--font-mono); letter-spacing: .08em; color: var(--text); cursor: copy; }
button.auth-code:hover { background: none; color: var(--ok); }
.auth-tile.low button.auth-code { color: var(--warn); }
.auth-live-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.auth-ring { width: 40px; height: 40px; flex: none; transform: rotate(-90deg); }
.auth-ring circle { fill: none; stroke-width: 3.2; }
.auth-ring .track { stroke: var(--border); }
.auth-ring .arc { stroke: var(--ok); stroke-linecap: round; transition: stroke-dasharray .25s linear; }
.auth-tile.low .auth-ring .arc { stroke: var(--warn); }
.auth-ring text { transform: rotate(90deg); transform-origin: 18px 18px; font: 600 11px var(--font-mono); fill: var(--text); }
.auth-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.auth-meta:empty { display: none; }
.auth-foot { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.auth-sources { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.auth-camera { flex-basis: 100%; width: 100%; max-height: 300px; border-radius: 8px; background: #000; object-fit: cover; }
.auth-params { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-generators { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.auth-checks { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 180px; overflow: auto; }
@media (max-width: 640px) {
  .auth-grid { grid-template-columns: minmax(0, 1fr); }
  button.auth-code { font-size: 40px; }
  .auth-ring { width: 46px; height: 46px; }
  .otp-row { flex-wrap: wrap; }
  .otp-row button.otp-generate { flex: 1 1 100%; padding: 11px; }
  .auth-head { flex-wrap: wrap; }
  .auth-head button { flex: 1 1 100%; }
}
/* ---------------------------------------------------------------- rozmowa w stylu Messengera (widok i okienka czatu) */
:root {
  --mc-blue: #0a7cff;
  --mc-mine: linear-gradient(to top, #0a7cff 0%, #5b5cff 55%, #9b3dff 100%);
  --mc-theirs: #f0f0f2;
  --mc-theirs-text: #0b0c0e;
  --mc-field: #f0f0f2;
  --mc-online: #31a24c;
}
@media (prefers-color-scheme: dark) {
  :root { --mc-blue: #2e8fff; --mc-theirs: #2d2f34; --mc-theirs-text: #ecebe7; --mc-field: #24262b; --mc-online: #3fc35a; }
}
.mc { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--surface); }
.mc-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 12px 14px 6px; overscroll-behavior: contain;
  scrollbar-width: thin; }
.mc-list { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.mc-sep { align-self: center; margin: 16px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mc-list > .mc-sep:first-child { margin-top: 4px; }
.mc-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.mc-row.mc-first, .mc-row.mc-single { margin-top: 7px; }
.mc-sep + .mc-row { margin-top: 0; }
.mc-row.mine { justify-content: flex-end; }
.mc-av-slot { flex: none; width: 28px; display: flex; align-items: flex-end; }
.mc-line { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; max-width: min(72%, 560px); }
.mc-row.mine .mc-line { flex-direction: row-reverse; }
.mc-compact .mc-line { max-width: 76%; }
.mc-bubble { position: relative; min-width: 0; padding: 8px 12px; border-radius: 18px; background: var(--mc-theirs); color: var(--mc-theirs-text);
  font-size: 14.5px; line-height: 1.36; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-row.mine .mc-bubble { background: var(--mc-mine); background-attachment: fixed; color: #fff; }
.mc-row.mine .mc-bubble ::selection { background: rgba(255, 255, 255, .85); color: #0b0c0e; }
/* Zaokrąglenia grupy kolejnych dymków jak w Messengerze */
.mc-row.theirs.mc-first .mc-bubble { border-bottom-left-radius: 5px; }
.mc-row.theirs.mc-mid .mc-bubble { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.mc-row.theirs.mc-last .mc-bubble { border-top-left-radius: 5px; }
.mc-row.mine.mc-first .mc-bubble { border-bottom-right-radius: 5px; }
.mc-row.mine.mc-mid .mc-bubble { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.mc-row.mine.mc-last .mc-bubble { border-top-right-radius: 5px; }
.mc-row .mc-bubble.mc-big, .mc-row.mine .mc-bubble.mc-big { background: none; color: inherit; padding: 0 2px; font-size: 40px; line-height: 1.15; }
/* Reakcje: plakietka na dolnym rogu dymka */
.mc-row.has-react { margin-bottom: 14px; }
.mc-reacts { position: absolute; right: 4px; bottom: -16px; z-index: 1; display: inline-flex; align-items: center; gap: 0; height: 22px; padding: 0 5px; border: none;
  border-radius: 11px; background: var(--surface); color: var(--muted); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); font: 600 11.5px/1 var(--font); white-space: nowrap; cursor: pointer; }
.mc-reacts:hover { background: var(--surface); filter: brightness(.97); }
.mc-row.mine .mc-reacts { right: auto; left: 4px; }
.mc-big .mc-reacts { bottom: -12px; }
.mc-re { font-size: 13.5px; line-height: 1; }
.mc-rc { margin-left: 3px; }
.mc-reacts.mine-r { box-shadow: 0 1px 4px rgba(0, 0, 0, .2), inset 0 0 0 1.5px color-mix(in srgb, var(--mc-blue) 55%, transparent); }
/* Akcje przy dymku (reakcja, kosz) – po najechaniu, na telefonie po przytrzymaniu */
.mc-actions { flex: none; display: flex; gap: 0; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.mc-row.mine .mc-actions { flex-direction: row-reverse; }
.mc-row:hover .mc-actions, .mc-row.show-actions .mc-actions, .mc-row.show-react .mc-actions, .mc-actions:focus-within { opacity: 1; pointer-events: auto; }
.mc-act { width: 28px; height: 28px; padding: 0; border: none; background: transparent; border-radius: 50%; color: var(--muted); }
.mc-act:hover { background: var(--surface-2); color: var(--text); }
.mc-act .ic { width: 17px; height: 17px; }
.mc-bar { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 4; width: max-content; display: none; }
.mc-row.mine .mc-bar { left: auto; right: 0; }
.mc-row.bar-below .mc-bar { bottom: auto; top: calc(100% + 4px); }
.mc-row.show-react .mc-bar { display: block; animation: mc-pop .14s ease-out; }
.mc-bar-in { display: flex; gap: 1px; padding: 4px 6px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2), 0 0 0 1px var(--border); }
.mc-bar-btn { width: 34px; height: 34px; padding: 0; border: none; background: none; border-radius: 50%; font-size: 21px; line-height: 1; transition: transform .12s ease; }
.mc-bar-btn:hover { background: none; transform: scale(1.28) translateY(-3px); }
.mc-bar-btn.on { background: color-mix(in srgb, var(--mc-blue) 16%, transparent); }
.mc-compact .mc-bar-btn { width: 29px; height: 29px; font-size: 18px; }
@keyframes mc-pop { from { opacity: 0; transform: translateY(4px) scale(.92); } to { opacity: 1; transform: none; } }
@media (hover: none) {
  .mc-row:hover .mc-actions { opacity: 0; pointer-events: none; }
  .mc-row.show-actions .mc-actions { opacity: 1; pointer-events: auto; }
  .mc-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* „Wysłano” / „Wyświetlono” pod moją ostatnią wiadomością */
.mc-receipt { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin: 3px 2px 0; font-size: 11.5px; color: var(--muted); }
.mc-row.has-react + .mc-receipt { margin-top: -10px; }
/* „pisze…” – dymek z trzema kropkami */
.mc-typing { margin-top: 8px; }
.mc-dots { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.mc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: mc-dot 1.3s ease-in-out infinite; }
.mc-dots i:nth-child(2) { animation-delay: .16s; }
.mc-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes mc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.mc-hello { margin: auto; padding: 28px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.mc-hello strong { margin-top: 8px; font: 650 17px/1.2 var(--font-display); }
.mc-hello .mc-av-lg { width: 72px; height: 72px; font-size: 24px; }
/* Pole wiadomości */
.mc-compose { position: relative; flex: none; display: flex; align-items: flex-end; gap: 4px; padding: 8px 10px 10px; background: var(--surface); }
.mc-tool, .mc-send { flex: none; width: 36px; height: 36px; padding: 0; border: none; background: none; border-radius: 50%; color: var(--mc-blue); }
.mc-tool:hover, .mc-send:hover { background: var(--surface-2); }
.mc-tool .ic { width: 22px; height: 22px; }
.mc-send .ic { width: 21px; height: 21px; }
.mc-send.like .mc-like { font-size: 25px; line-height: 1; transition: transform .1s ease; }
.mc-send.like:active .mc-like { transform: scale(1.25); }
.mc-field { flex: 1; min-width: 0; display: flex; border-radius: 20px; background: var(--mc-field); }
.mc-input, .mc-input:hover, .mc-input:focus { flex: 1; min-height: 36px; max-height: 140px; padding: 8px 14px; border: none; border-radius: 20px; background: transparent;
  box-shadow: none; resize: none; line-height: 20px; overflow-y: auto; }
.mc-field:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-blue) 35%, transparent); }
.mc-picker { position: absolute; left: 8px; bottom: calc(100% - 2px); z-index: 6; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px;
  max-height: 228px; overflow-y: auto; border-radius: 14px; background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 1px var(--border);
  animation: mc-pop .14s ease-out; }
.mc-compact .mc-picker { grid-template-columns: repeat(8, 32px); left: 4px; right: 4px; justify-content: center; }
.mc-emo { width: 34px; height: 34px; padding: 0; border: none; background: none; border-radius: 9px; font-size: 21px; line-height: 1; }
.mc-compact .mc-emo { width: 32px; height: 32px; }
.mc-emo:hover { background: var(--surface-2); transform: scale(1.12); }
/* Kółka osób */
.mc-av { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff;
  font: 700 13px/1 var(--font-display); background: #17181c; user-select: none; }
.mc-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mc-on { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--mc-online);
  box-shadow: 0 0 0 2px var(--surface); }
.mc-av-xs { width: 28px; height: 28px; font-size: 10.5px; }
.mc-av-xs .mc-on { min-width: 8px; min-height: 8px; }
.mc-av-sm { width: 32px; height: 32px; font-size: 11.5px; }
.mc-av-md { width: 40px; height: 40px; font-size: 14px; }
.mc-av-lg { width: 56px; height: 56px; font-size: 18px; }
.mc-av-head { width: 52px; height: 52px; font-size: 17px; }
.mc-av-seen { width: 15px; height: 15px; font-size: 6.5px; }
/* ---------------------------------------------------------------- przycisk i szuflada „Kontakty” (z prawej) */
.contacts-chip { display: flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 10px 5px 9px; background: var(--surface); }
.contacts-chip .ic { width: 18px; height: 18px; }
.contacts-chip[aria-expanded="true"] { border-color: var(--focus); background: var(--accent-soft); }
.contacts-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mc-online); color: #fff; font: 700 11px/18px var(--font); text-align: center; }
.contacts-count.none { background: var(--surface-2); color: var(--muted); }
.contacts-count:empty { display: none; }
.ct-drawer { position: fixed; top: 57px; right: 0; bottom: 0; z-index: 30; width: 320px; display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -22px 0 44px -28px rgba(0, 0, 0, .4); transform: translateX(100%); visibility: hidden;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
.ct-drawer.open { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.ct-head { display: flex; align-items: center; gap: 2px; padding: 12px 8px 8px 16px; }
.ct-head .icon-btn { border: none; border-radius: 50%; padding: 7px; }
.ct-head .icon-btn .ic { margin: 0; }
.ct-title { display: flex; flex-direction: column; min-width: 0; }
.ct-title strong { font: 650 18px/1.2 var(--font-display); letter-spacing: -.01em; }
.ct-search { position: relative; margin: 0 12px 6px; }
.ct-search .ic { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin: 0; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ct-search input { padding-left: 36px; border-radius: 999px; background: var(--surface-2); border-color: transparent; }
.ct-list { flex: 1; overflow-y: auto; padding: 0 6px 14px; scrollbar-width: thin; }
.ct-sec { padding: 12px 10px 4px; font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ct-row { width: 100%; justify-content: flex-start; gap: 11px; padding: 7px 8px; border: none; background: none; border-radius: 10px; text-align: left; white-space: normal;
  font-weight: 400; }
.ct-row:hover { background: var(--surface-2); }
.ct-row:active { transform: none; }
.ct-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ct-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-row.unread .ct-name { font-weight: 700; }
.ct-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--mc-blue); color: #fff; font: 700 11px/20px var(--font); text-align: center; }
.ct-empty { padding: 12px 10px; margin: 0; }
.ct-backdrop { display: none; }
@media (max-width: 860px) {
  .ct-drawer { top: 0; width: min(360px, 90vw); z-index: 41; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .ct-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(2, 6, 23, .42); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.contacts-open .ct-backdrop { opacity: 1; pointer-events: auto; }
  .contacts-chip { padding: 5px 8px; }
}
/* ---------------------------------------------------------------- okienka czatu na dole ekranu */
.chat-dock { position: fixed; right: calc(var(--rail-w) + 16px); bottom: 0; z-index: 28; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; transition: right .26s cubic-bezier(.2, .8, .2, 1); }
body.contacts-open .chat-dock { right: calc(var(--rail-w) + 336px); }
.chat-wins { display: flex; align-items: flex-end; gap: 10px; }
.chat-heads { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; }
.chat-heads:empty { display: none; }
.chat-win, .chat-head { pointer-events: auto; }
.chat-win { width: 330px; height: 450px; max-height: calc(100vh - 76px); display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
  border-radius: 12px 12px 0 0; box-shadow: 0 12px 34px rgba(0, 0, 0, .22), 0 0 0 1px var(--border); animation: chat-in .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes chat-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.chat-win-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer;
  box-shadow: 0 2px 6px -4px rgba(0, 0, 0, .2); }
.chat-win-av { display: flex; }
.chat-win-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chat-win-who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-win-status { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-win-status.on { color: var(--mc-online); }
.chat-win-btn { flex: none; width: 30px; height: 30px; padding: 0; border: none; background: none; border-radius: 50%; color: var(--mc-blue); }
.chat-win-btn:hover { background: var(--surface-2); }
.chat-win-btn .ic { width: 18px; height: 18px; }
.chat-win .mc-scroll { padding: 8px 10px 4px; }
.chat-win .mc-compose { padding: 6px 6px 8px; }
.chat-head { position: relative; animation: chat-in .2s ease-out; }
.chat-head-btn { position: relative; width: 52px; height: 52px; padding: 0; border: none; border-radius: 50%; background: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
.chat-head-btn:hover { background: none; transform: scale(1.05); }
.chat-head-btn .mc-on { box-shadow: 0 0 0 2.5px var(--bg); }
.chat-head-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e41e3f; color: #fff;
  font: 700 11px/20px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.chat-head-x { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--muted);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .12s; }
.chat-head-x .ic { width: 12px; height: 12px; }
.chat-head:hover .chat-head-x, .chat-head-x:focus-visible { opacity: 1; }
@media (min-width: 861px) { body.has-chats .toasts { bottom: auto; top: 70px; } }
body.in-session .chat-dock { display: none; }
@media (max-width: 860px) { .chat-dock { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ct-drawer, .ct-drawer.open, .chat-dock, .ct-backdrop { transition: none; }
  .chat-win, .chat-head, .mc-row.show-react .mc-bar, .mc-picker { animation: none; }
  .mc-dots i { animation: none; opacity: .7; }
  .mc-bar-btn, .mc-bar-btn:hover, .mc-emo:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------- konto na dole paska bocznego */
.side-foot { padding: 8px; border-top: 1px solid var(--side-border); }
.side-profile { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 8px; border: none; border-radius: 10px;
  background: none; color: var(--side-text); text-align: left; font-weight: 400; }
.side-profile:hover, .side-profile[aria-expanded="true"] { background: var(--side-2); }
.side-profile:active { transform: none; }
.side-profile-av { position: relative; flex: none; display: grid; }
.side-profile .avatar { width: 36px; height: 36px; font-size: 13px; box-shadow: 0 0 0 2px var(--side-bg), 0 0 0 3px var(--side-border); }
.side-profile .mc-on { min-width: 11px; min-height: 11px; box-shadow: 0 0 0 2px var(--side-bg); }
.side-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.side-profile-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-profile-text .small { color: var(--side-muted); font-size: 12px; }
.side-profile-more { color: var(--side-muted); font-size: 18px; line-height: 1; padding: 0 2px; }
.side-profile:empty { display: none; }

/* ---------------------------------------------------------------- pas kontaktów przy prawej krawędzi (komputer) */
.ct-rail { display: none; }
@media (min-width: 861px) {
  body:not(.in-session) { --rail-w: 60px; }
  body:not(.in-session) .ct-rail:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 8px 0 10px;
    position: relative; z-index: 31; background: var(--surface); border-left: 1px solid var(--border); }
  body:not(.in-session) #contactsBtn, .topbar .user-chip { display: none; }
  /* Lista wysuwa się spod pasa, na całą wysokość */
  body:not(.in-session) .ct-drawer { top: 0; right: var(--rail-w); }
}
.ct-rail-head { width: 46px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 0;
  border: none; border-radius: 12px; background: none; color: var(--muted); }
.ct-rail-head .bi { margin: 0; font-size: 18px; }
.ct-rail-head:hover, .ct-rail-head[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.ct-rail-count { font: 700 11px/1 var(--font); color: var(--mc-online); }
.ct-rail-count.none { color: var(--muted); }
.ct-rail-list { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--border); overflow-y: auto; scrollbar-width: none; }
.ct-rail-person { position: relative; flex: none; padding: 0; border: none; border-radius: 50%; background: none; min-height: 0; }
.ct-rail-person:active { transform: none; }
.ct-rail-person .mc-av { transition: box-shadow .15s; }
.ct-rail-person:hover .mc-av, .ct-rail-person:focus-visible .mc-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--signal); }
.ct-rail-person .mc-on { box-shadow: 0 0 0 2px var(--surface); }
.ct-rail-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mc-blue); color: #fff;
  font: 700 10.5px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.ct-rail-more { width: 36px; height: 36px; min-height: 0; padding: 0; border: none; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 18px; }
.ct-rail-more:hover { color: var(--text); }

/* Oś czasu tuneli (widok „Tunele VPN”): komórki godzinne z 7 dni */
.tl-card { position: relative; margin-top: 16px; }
.tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.tl-head h3 { margin: 0; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.tl-sw.up, .tl-cell.up { background: var(--ok); }
.tl-sw.part, .tl-cell.part { background: color-mix(in srgb, var(--ok) 45%, var(--surface)); }
.tl-sw.off, .tl-cell.off { background: var(--surface-2); }
.tl-sw.bad { background: var(--danger); }
.tl-body { display: flex; flex-direction: column; gap: 12px; }
.tl-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; gap: 14px; align-items: center; }
.tl-name { display: grid; min-width: 0; }
.tl-name strong, .tl-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar { display: flex; height: 22px; gap: 1px; padding-top: 4px; }
.tl-cell { flex: 1; min-width: 1px; border-radius: 2px; position: relative; }
.tl-cell.future { background: transparent; border: 1px dashed var(--border); }
.tl-cell.bad::before { content: ""; position: absolute; left: -1px; right: -1px; top: -5px; height: 3px; border-radius: 2px; background: var(--danger); }
.tl-cell:hover { outline: 2px solid var(--focus); z-index: 1; }
.tl-days { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.tl-stats { display: grid; justify-items: end; text-align: right; }
.tl-stats strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.tl-warn { color: var(--danger); }
.tl-tip { position: absolute; z-index: 10; pointer-events: none; padding: 6px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow); }
.tl-tip[hidden] { display: none; }
@media (max-width: 860px) {
  .tl-row { grid-template-columns: 1fr; gap: 4px; }
  .tl-stats { justify-items: start; text-align: left; }
}

/* Przypomnienie o sesjach bez opisu pracy */
.notes-nudge { position: fixed; z-index: 60; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 36px));
  padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 13.5px; }
.notes-nudge .ic { margin: 0; color: var(--warn); }
.notes-nudge span { flex: 1; }
.notes-list { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; }
.notes-item { display: grid; gap: 4px; }
.notes-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 13px; }

/* ===== Podgląd sesji kolegi (RCM Share) – okno na całą stronę */
.share-overlay { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #101214; }
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 14px; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); }
.share-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.share-note { padding: 6px 14px; background: var(--accent-soft); color: var(--text); font-size: 13px; }
.share-note.maintenance { position: fixed; top: 0; left: 0; right: 0; z-index: 950; background: var(--warn); color: #fff; text-align: center; font-weight: 600; }
.share-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.share-frame { position: relative; display: inline-block; line-height: 0; }
.share-canvas { display: block; max-width: 100vw; max-height: calc(100vh - 90px); outline: none; background: #000; }
.share-cursor { position: absolute; width: 0; height: 0; pointer-events: none; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 14px solid #fff; transform: rotate(-30deg); filter: drop-shadow(0 0 1px #000); }

/* 5.1: obrazy w wiadomościach */
.mc-img { display: block; max-width: 100%; height: auto; border-radius: 12px; cursor: zoom-in; background: var(--mc-theirs); object-fit: cover; margin: 2px 0 6px; }
.mc-bubble.mc-imgonly { background: none !important; padding: 0; }
.mc-bubble.mc-imgonly .mc-img { margin: 0; }
.mc-attach { flex-basis: 100%; display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; }
.mc-attach[hidden] { display: none; }
.mc-attach img { max-height: 72px; max-width: 140px; border-radius: 8px; }
.mc-compose { flex-wrap: wrap; }
.mc-full { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) { .mc-row:last-child { animation: mc-in .25s cubic-bezier(.2, .8, .2, 1); } }
@keyframes mc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- strona „Do pobrania” (/pobierz, bez logowania – Web\DownloadPage.cs) */
.dl-page { align-items: start; }
.dl-main { width: 100%; max-width: 560px; min-width: 0; justify-self: center; display: flex; flex-direction: column; gap: 14px; }
.dl-heading { margin: 0; font: 700 28px/1.2 var(--font-display); color: #fff; }
.dl-intro, .dl-signed { margin: 0; color: #a9a7a0; line-height: 1.55; }
.dl-signed { font-size: 12.5px; }
.dl-intro code { font-family: var(--font-mono); color: #c6f03a; word-break: break-all; }
.dl-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dl-card h3 { margin: 0; font: 600 18px/1.3 var(--font-display); }
.dl-card p { margin: 0; }
.dl-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.dl-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 2px 0; font-size: 13px; }
.dl-meta dt { color: var(--muted); }
.dl-meta dd { margin: 0; min-width: 0; }
.dl-hash { font: 500 11px/1.5 var(--font-mono); word-break: break-all; }
.dl-card a.desktop-get { align-self: flex-start; }
.dl-direct { font-size: 12.5px; }
.dl-direct code { font-family: var(--font-mono); word-break: break-all; }
.dl-unavailable { color: var(--muted); }
.dl-badge { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12px; font-weight: 600; }
.dl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; color: #ebe9e3; }
.dl-foot .login-lang { margin: 0; }
.dl-foot select { color: var(--text); }
.dl-foot a { color: #ebe9e3; }
.login-downloads { align-self: center; font-size: 13px; }
@media (min-width: 900px) {
  .dl-page { grid-template-columns: minmax(0, 400px) minmax(0, 560px); padding-top: 56px; }
  .dl-page .login-brand { grid-row: auto; position: sticky; top: 56px; }
}
/* Klucze bezpieczeństwa (5.4): lista w profilu, przycisk na stronie logowania */
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); }
.key-row:last-child { border-bottom: none; }
.key-row .danger-text { color: var(--danger); }
#keyRow { width: 100%; }