/* Notatki ze spotkań: formatka NEW PROJECT (grafit, glinka, Instrument Sans + Inter). Ciemny domyślnie. */
:root {
  --bg:#f4f3ed; --surface:#ffffff; --surface-2:#faf9f3;
  --text:#262625; --text-2:#67655e; --text-3:#82807a;
  --line:#e5e3dc; --line-2:#eceae3;
  --clay:#bd5b39; --przycisk:#a94e2c; --mineral:#3d6b53; --plum:#6b4f8a;
  --dot:rgba(0,0,0,.045); --zle:#b03426; --dobrze:#3d6b53; --uwaga:#8a6d1f;
  --tlo-zle:#fdf1ef; --tlo-dobrze:#eff5f1; --tlo-uwaga:#fbf4df;
  --cien:0 1px 2px #0000000a, 0 12px 26px -16px #0000002e;
  --serif:'Instrument Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  --r:10px; --topbar:56px;
}
:root[data-theme="dark"] {
  --bg:#1e1f1d; --surface:#272826; --surface-2:#2f302d;
  --text:#f2f0e9; --text-2:#a09e94; --text-3:#87857c;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.055);
  --clay:#d97757; --przycisk:#b85838; --mineral:#7bb0a0; --plum:#a98acb;
  --dot:rgba(255,255,255,.05); --zle:#e0785f; --dobrze:#7bb0a0; --uwaga:#d9b45a;
  --tlo-zle:#3a2b28; --tlo-dobrze:#2b352f; --tlo-uwaga:#3a3426;
}
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; background:var(--bg); background-image:radial-gradient(var(--dot) 1px, transparent 1px); background-size:22px 22px; color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
body.app { padding-top:var(--topbar); }
body.bez-paska { padding-top:0; }
a { color:var(--clay); }
.pomin { position:absolute; left:-999px; top:8px; background:var(--surface); padding:6px 10px; border-radius:var(--r); z-index:100; }
.pomin:focus { left:8px; }
.kontener { max-width:1040px; margin:0 auto; padding:28px 24px 60px; }
.mono { font-family:var(--mono); font-size:.86em; }
.drobne { font-size:.82rem; color:var(--text-3); }
.srodek { text-align:center; }
.rozpychacz { flex:1; }
code { font-family:var(--mono); font-size:.9em; background:var(--surface-2); padding:1px 5px; border-radius:5px; }
pre { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; overflow:auto; font-size:.85rem; }

/* Pasek */
.topbar { position:fixed; top:0; left:0; right:0; height:var(--topbar); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:45; }
.topbar-w { max-width:1040px; margin:0 auto; height:100%; display:flex; align-items:center; gap:14px; padding:0 18px; }
.topbar-marka { flex:0 1 auto; min-width:0; }
.tytul-app { display:flex; flex-direction:column; text-decoration:none; color:var(--text); line-height:1.1; }
.tytul-app b { font-family:var(--serif); font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tytul-app span { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.nav { display:flex; gap:2px; margin-left:8px; flex:1; min-width:0; }
.nav a, .nav button { color:var(--text-2); text-decoration:none; font-size:.86rem; padding:6px 10px; border-radius:var(--r); white-space:nowrap; border:0; background:none; font:inherit; font-size:.86rem; cursor:pointer; }
.nav a:hover, .nav button:hover { color:var(--text); background:var(--surface-2); }
.nav a[aria-current="page"] { color:var(--text); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.topbar-prawa { display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto; }
.zegar-mini { width:30px; height:30px; }
.zegar-mini svg { display:block; width:100%; height:100%; }
.motyw { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.motyw button { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text-2); cursor:pointer; }
.motyw button[aria-pressed="true"] { background:var(--surface-2); color:var(--text); }
.motyw svg { width:14px; height:14px; }
.wyloguj-form { margin:0; }
.menu-przycisk { display:none; width:36px; height:36px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--text); cursor:pointer; align-items:center; justify-content:center; }
.nav-instaluj { display:none; }
.pasek-uwaga { background:var(--tlo-uwaga); border-bottom:1px solid var(--line); font-size:.9rem; }
.pasek-uwaga .kontener { padding:8px 24px; }

/* Strzałki Wstecz i Dalej */
.strzalki-historii { position:relative; display:flex; align-items:center; flex:0 0 auto; margin-left:-6px; }
.strzalki-historii > button { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; color:var(--text); cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.strzalki-historii > button:hover:not(:disabled) { color:var(--clay); background:var(--surface-2); }
.strzalki-historii > button:disabled { color:var(--text-3); opacity:.4; cursor:default; }
.strzalki-historii > button:focus-visible { outline:2px solid var(--clay); outline-offset:2px; }
.historia-menu { position:absolute; left:0; top:100%; z-index:60; margin-top:4px; width:min(22rem, calc(100vw - 2rem)); max-height:60vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--cien); padding:4px 0; }
.historia-menu p { margin:0; padding:6px 12px 4px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.historia-menu button { display:flex; width:100%; min-height:40px; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; border:0; background:none; color:var(--text); text-align:left; font:inherit; font-size:.88rem; cursor:pointer; }
.historia-menu button span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.historia-menu button small { flex:0 0 auto; color:var(--text-3); font-variant-numeric:tabular-nums; }
.historia-menu button:hover, .historia-menu button:focus { background:var(--surface-2); outline:none; }

/* Nagłówki stron */
.marka { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); margin:0 0 12px; }
h1 { font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.3rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 10px; }
h2 { font-family:var(--serif); font-weight:500; font-size:1.25rem; margin:0; }
h3 { font-family:var(--serif); font-weight:600; font-size:1.02rem; margin:18px 0 6px; }
.lead { font-family:var(--serif); font-weight:400; font-size:clamp(1rem,2vw,1.12rem); color:var(--text-2); margin:0; }
.strona-glowa { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.strona-glowa > div:first-child { flex:1 1 420px; min-width:0; }
.akcje { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sekcja-glowa { display:flex; align-items:center; gap:12px; padding-bottom:12px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.sekcja-glowa .liczba { font-family:var(--mono); font-size:.78rem; color:var(--text-3); }
.kropka { width:9px; height:9px; border-radius:50%; background:var(--clay); flex:0 0 auto; }
.karta { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin-bottom:18px; box-shadow:var(--cien); }
.karta.pusta { text-align:left; }
.dwie-kolumny { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.proza { color:var(--text-2); font-size:.95rem; line-height:1.65; }
.proza p { margin:0 0 12px; }
.proza.duza { font-size:1.05rem; color:var(--text); }
.proza h2 { color:var(--text); margin:20px 0 8px; font-size:1.15rem; }
.proza h2:first-child { margin-top:0; }
.proza ul, .proza ol { padding-left:22px; margin:0 0 12px; }
.proza li { margin-bottom:6px; }
.proza b { color:var(--text); }
.rzad { display:grid; grid-template-columns:110px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.rzad:last-child { border-bottom:0; }
.rzad h3 { margin:0 0 6px; }
.rzad .data { color:var(--text-3); padding-top:3px; }
.stopka { margin-top:40px; border-top:1px solid var(--line); color:var(--text-3); font-size:.82rem; }
.stopka .kontener { padding:22px 24px 36px; }
.stopka a { color:var(--clay); text-decoration:none; }
.adres-kanoniczny { font-family:var(--mono); font-size:.72rem; margin-top:4px; }

/* Formularze */
.pole { margin-bottom:14px; }
.pole label { display:block; font-size:.84rem; color:var(--text-2); margin-bottom:5px; }
.pole .podpowiedz { display:block; font-size:.78rem; color:var(--text-3); margin-top:5px; line-height:1.5; }
.pola-rzad { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], select, textarea {
  width:100%; padding:9px 12px; font-family:var(--sans); font-size:.94rem; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); transition:border-color .15s; min-height:40px;
}
input:focus, select:focus { outline:none; border-color:var(--clay); }
.wybor { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text-2); }
.wybor + .wybor { margin-top:6px; }
fieldset.pole { border:0; padding:0; margin:0 0 14px; min-width:0; }
fieldset.pole legend { display:block; font-size:.84rem; color:var(--text-2); margin-bottom:6px; padding:0; }
[hidden] { display:none !important; }
.pole-z-okiem { position:relative; display:block; }
.pole-z-okiem input { padding-right:74px; }
.oko { position:absolute; top:50%; right:6px; transform:translateY(-50%); font-family:var(--sans); font-size:.76rem; color:var(--text-2); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; }
.oko:hover, .oko[aria-pressed="true"] { color:var(--text); border-color:var(--text-3); }
.przyciski { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px; }
.glowny, button.glowny { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:.9rem; color:#fff; background:var(--przycisk); border:1px solid var(--przycisk); border-radius:999px; padding:9px 20px; height:40px; cursor:pointer; text-decoration:none; transition:filter .15s; white-space:nowrap; }
.glowny:hover { filter:brightness(1.08); }
.drugi, button.drugi { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:.9rem; color:var(--text-2); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 18px; height:40px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.drugi:hover { color:var(--text); border-color:var(--text-3); }
.drugi.niebezpieczny:hover { color:var(--zle); border-color:var(--zle); }
.glowny.maly, .drugi.maly { height:32px; padding:4px 14px; font-size:.82rem; }
.glowny.duzy, .drugi.duzy { height:52px; padding:10px 28px; font-size:1.05rem; min-width:120px; }
button:disabled { opacity:.5; cursor:default; filter:none !important; }
.komunikat { margin:0 0 18px; padding:12px 16px; border-radius:var(--r); border:1px solid var(--line); font-size:.94rem; background:var(--surface); }
.komunikat.dobry { border-color:var(--dobrze); background:var(--tlo-dobrze); }
.komunikat.zly { border-color:var(--zle); background:var(--tlo-zle); }
.pasek-narzedzi { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.pasek-narzedzi input[type="search"] { flex:1 1 260px; width:auto; }

/* Tabele */
.tabela-przewijana { overflow:auto; max-height:70vh; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.tabela { width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; }
.tabela th, .tabela td { padding:9px 10px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; }
.tabela thead th { position:sticky; top:0; z-index:2; background:var(--surface-2); font-size:.78rem; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; cursor:pointer; user-select:none; }
.tabela thead th.lp { cursor:default; }
.tabela th .sort-strzalka { margin-left:4px; color:var(--text-3); font-size:.8rem; }
.tabela th[aria-sort] .sort-strzalka { color:var(--clay); }
.tabela td.lp, .tabela th.lp { text-align:center; width:3.2em; color:var(--text-3); font-variant-numeric:tabular-nums; }
.tabela tbody tr:hover td { background:var(--surface-2); }
.tabela td a { color:var(--text); text-decoration:none; }
.tabela td a:hover { color:var(--clay); }
.tabela .przytnij { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabela .cytat { color:var(--text-2); font-style:italic; }
.tabela .szczegoly { max-width:360px; word-break:break-word; }
@media print { .tabela th .sort-strzalka { display:none; } .strzalki-historii, .topbar, .stopka { display:none; } }

/* Fasolki stanu: inline-flex, nic nie nachodzi */
.fasolka { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.78rem; line-height:1.4; border:1px solid var(--line); background:var(--surface-2); color:var(--text-2); white-space:nowrap; }
.fasolka::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--text-3); }
.stan-gotowe::before, .poziom-info::before { background:var(--dobrze); }
.stan-blad::before, .poziom-blad::before { background:var(--zle); }
.stan-nagrywanie::before { background:var(--zle); animation:puls 1.2s infinite; }
.stan-wgrane::before, .stan-konwersja::before, .stan-transkrypcja::before, .stan-analiza::before, .stan-dokumenty::before, .stan-ponow_analize::before, .poziom-ostrzezenie::before { background:var(--uwaga); animation:puls 1.6s infinite; }
@keyframes puls { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* Nagrywarka */
.nagrywarka .wskaznik { height:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:8px 0 12px; }
.nagrywarka .poziom { height:100%; width:0; background:linear-gradient(90deg, var(--mineral), var(--clay)); transition:width .08s linear; }
.czas-nagrania { font-family:var(--mono); font-size:2.6rem; letter-spacing:.02em; line-height:1; margin:4px 0 6px; font-variant-numeric:tabular-nums; }
.stan-nagrania { margin:0 0 14px; color:var(--text-2); font-size:.9rem; min-height:1.4em; }
.postep { height:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:10px 0; }
.postep > div { height:100%; width:0; background:var(--clay); transition:width .4s; }
.postep-karta p:first-child { margin:0 0 6px; font-weight:600; }

/* Spotkanie */
.pliki-rzad { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; }
.odtwarzacz audio { width:100%; display:block; }
.mowcy { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.mowcy .przyciski { grid-column:1 / -1; }
.mowca { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; background:var(--surface-2); min-width:0; }
.mowca-glowa { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.mowca .probka { margin:8px 0 0; font-size:.82rem; color:var(--text-3); font-style:italic; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.kropka-mowcy { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.kropka-mowcy.m0 { background:#d97757; } .kropka-mowcy.m1 { background:#7bb0a0; } .kropka-mowcy.m2 { background:#a98acb; }
.kropka-mowcy.m3 { background:#d9b45a; } .kropka-mowcy.m4 { background:#6ea0d9; } .kropka-mowcy.m5 { background:#c77aa2; }
.zakladki { display:flex; gap:4px; flex-wrap:wrap; margin:6px 0 14px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.zakladki button { border:1px solid transparent; background:none; color:var(--text-2); font:inherit; font-size:.9rem; padding:7px 14px; border-radius:999px; cursor:pointer; }
.zakladki button:hover { color:var(--text); background:var(--surface-2); }
.zakladki button[aria-selected="true"] { color:var(--text); background:var(--surface); border-color:var(--line); }
.stanowiska p { margin:0 0 10px; }
.transkrypcja { display:flex; flex-direction:column; gap:8px; }
.wyp { display:grid; grid-template-columns:72px 150px 1fr; gap:10px; padding:8px 10px; border-radius:8px; align-items:start; }
.wyp:hover { background:var(--surface-2); }
.wyp.aktywna { background:var(--surface-2); box-shadow:inset 3px 0 0 var(--clay); }
.wyp .czas a { color:var(--text-3); text-decoration:none; }
.wyp .czas a:hover { color:var(--clay); }
.wyp .kto { display:flex; align-items:center; gap:6px; min-width:0; }
.wyp .kto b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wyp .tekst { color:var(--text); }

/* Logowanie */
.logowanie-strona { padding-top:30px; }
.logowanie { max-width:420px; margin-top:34px; }

/* Okna (Co nowego, Zainstaluj) */
.okno { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--text); padding:0; width:min(620px, calc(100vw - 32px)); max-height:85vh; box-shadow:var(--cien); }
.okno::backdrop { background:rgba(0,0,0,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.okno-glowa { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); flex-wrap:wrap; }
.okno-glowa h2 { font-size:1.1rem; }
.okno-przyciski { display:flex; gap:8px; }
.okno-tresc { padding:16px 18px 20px; }
.okno-tresc ul { margin:8px 0 0; padding-left:20px; }
.data-mono { font-family:var(--mono); font-size:.78rem; color:var(--text-3); margin:0; }

/* Telefon i tablet */
@media (max-width:1099px) {
  .nav { position:fixed; top:var(--topbar); right:0; left:0; display:none; flex-direction:column; gap:2px; background:var(--surface); border-bottom:1px solid var(--line); padding:10px 14px 14px; box-shadow:var(--cien); z-index:46; }
  body.menu-otwarte .nav { display:flex; }
  body.menu-otwarte .topbar { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav a, .nav button { padding:10px 12px; font-size:1rem; text-align:left; }
  .nav .nav-instaluj { display:block; }
  .topbar-prawa [data-instaluj]:not(.nav-instaluj), .topbar-prawa .wyloguj-form { display:none; }
  .menu-przycisk { display:inline-flex; }
  .zegar-mini { display:none; }
  .dwie-kolumny { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .kontener { padding:20px 16px 50px; }
  .karta { padding:16px 16px; }
  .wyp { grid-template-columns:1fr; gap:4px; }
  .wyp .czas { order:2; } .wyp .kto { order:1; } .wyp .tekst { order:3; }
  .rzad { grid-template-columns:1fr; gap:4px; }
  .topbar-w { gap:8px; padding:0 10px; }
  .tytul-app span { display:none; }
}
@media (max-width:420px) { .strzalki-historii > button { width:32px; height:32px; } .strzalki-historii { margin-left:-8px; } .tytul-app b { font-size:.9rem; } .glowny.duzy, .drugi.duzy { min-width:0; flex:1; } }
