/* public/podglad/podglad.css - styl stron podgladu (karty, przegladarka 3D, ortofoto).
   Kolory jak public/chmura.html (motyw ciemny) + motyw jasny (data-motyw="jasny"). */
:root, :root[data-motyw="ciemny"] {
  --bg:#0b1120; --bg-2:#0f172a; --card:rgba(255,255,255,.05); --card-2:rgba(255,255,255,.08); --stroke:rgba(255,255,255,.11); --stroke-2:rgba(255,255,255,.18);
  --text:#e8eefc; --muted:#93a3c2; --dim:#6b7d9e; --accent:#38bdf8; --accent-2:#818cf8; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --pill-ok-bg:rgba(34,197,94,.17); --pill-ok:#86efac; --pill-warn-bg:rgba(245,158,11,.17); --pill-warn:#fcd34d; --bad-text:#fca5a5;
  --panel:rgba(11,17,32,.92); --input:rgba(0,0,0,.3); --head:rgba(0,0,0,.22); --cien:0 10px 30px rgba(0,0,0,.45);
  color-scheme: dark;
}
:root[data-motyw="jasny"] {
  --bg:#f4f6fb; --bg-2:#ffffff; --card:#ffffff; --card-2:#eef2f9; --stroke:rgba(15,23,42,.12); --stroke-2:rgba(15,23,42,.22);
  --text:#0f172a; --muted:#475569; --dim:#64748b; --accent:#0284c7; --accent-2:#4f46e5;
  --pill-ok-bg:rgba(34,197,94,.15); --pill-ok:#166534; --pill-warn-bg:rgba(245,158,11,.18); --pill-warn:#92400e; --bad-text:#b91c1c;
  --panel:rgba(255,255,255,.95); --input:#fff; --head:rgba(255,255,255,.8); --cien:0 10px 30px rgba(15,23,42,.18);
  color-scheme: light;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); color:var(--text); }
body { font-family:-apple-system,"Segoe UI",Roboto,Inter,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
.ukryty { display:none !important; }
.wrap { max-width:980px; margin:0 auto; padding:0 18px 40px; }
header.gora { border-bottom:1px solid var(--stroke); background:var(--head); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.brand { display:flex; align-items:center; gap:10px; } .brand img { width:30px; height:30px; border-radius:8px; display:block; }
.brand b { font-size:16px; } .brand span { display:block; font-size:10.5px; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; }
/* stopka wydawcy (strona listy) i plakietka "Powered by" w naglowku (viewer, orto - cala scena to plotno) */
.stopka { border-top:1px solid var(--stroke); margin-top:28px; }
.stopka .wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 18px 22px; color:var(--dim); font-size:12px; letter-spacing:.04em; }
.stopka .pk-logo { display:block; height:30px; width:auto; opacity:.9; }
.pk-znak { position:absolute; left:10px; bottom:10px; z-index:4; display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:8px; background:var(--panel); border:1px solid var(--stroke); color:var(--dim); font-size:11px; letter-spacing:.04em; text-decoration:none; }
.scena .staty { bottom:44px; }
.pk-znak img { display:block; height:20px; width:auto; opacity:.9; }
:root[data-motyw="jasny"] .pk-logo, :root[data-motyw="jasny"] .pk-znak img { filter:invert(1); opacity:.8; }
@media (max-width:700px) { .pk-znak span { display:none; } .pk-znak img { height:16px; } }
h1 { font-size:20px; margin-top:20px; } .muted { color:var(--muted); font-size:13.5px; } .dim { color:var(--dim); font-size:12.5px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 15px; border-radius:11px; border:1px solid transparent;
       font:inherit; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; color:var(--text); background:transparent; white-space:nowrap; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#05101f; }
.btn-ghost { border-color:var(--stroke-2); font-weight:500; }
.btn-sm { padding:5px 10px; font-size:12.5px; border-radius:9px; }
.btn-bad { border-color:rgba(239,68,68,.45); color:var(--bad-text); font-weight:500; }
.btn:disabled { opacity:.5; cursor:default; }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input[type=text], input[type=search], select { padding:8px 11px; border-radius:10px; background:var(--input); border:1px solid var(--stroke); color:var(--text); font:inherit; font-size:15px; }
.card { background:var(--card); border:1px solid var(--stroke); border-radius:15px; padding:16px; margin-top:14px; }
.pill { display:inline-block; padding:1px 9px; border-radius:999px; font-size:11px; font-weight:600; }
.pill.ok { background:var(--pill-ok-bg); color:var(--pill-ok); } .pill.warn { background:var(--pill-warn-bg); color:var(--pill-warn); }
.pill.tag { background:var(--card-2); color:var(--muted); border:1px solid var(--stroke); }
.msg { margin-top:10px; font-size:14px; } .msg.bad { color:var(--bad-text); } .msg.ok { color:var(--pill-ok); }
.bar { height:8px; border-radius:6px; background:var(--card-2); overflow:hidden; margin-top:6px; }
.bar > i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

/* ------------------------------------------------------------- karty ---- */
/* 2.14.0 (#29): karty Nagrania | Wyniki na gorze strony, duze pola dotyku (>= 44 px), ten sam wyglad co na /chmura */
.zakladki { display:flex; gap:6px; margin-top:14px; padding:4px; border:1px solid var(--stroke-2); border-radius:13px; background:var(--card-2); }
.zakladki button { flex:1 1 0; min-width:0; min-height:44px; font:inherit; font-size:15.5px; font-weight:700; color:var(--muted); background:none;
                   border:none; border-radius:10px; padding:6px 10px; cursor:pointer; }
.zakladki button[aria-selected="true"] { color:var(--text); background:linear-gradient(135deg,rgba(56,189,248,.24),rgba(129,140,248,.24));
                   box-shadow:inset 0 0 0 1px var(--accent); }
.zakladki button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.miejsce { align-items:center; }
.narzedzia { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.narzedzia input[type=search] { flex:1 1 220px; min-width:0; }
.miejsce { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); }
.lista { margin-top:6px; }
.poz { display:grid; grid-template-columns:96px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--stroke); }
.poz:first-child { border-top:none; }
.mini { width:96px; height:64px; border-radius:9px; object-fit:cover; background:var(--card-2); border:1px solid var(--stroke); display:block; }
.mini.pusta { display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:22px; }
.nazwa { font-weight:600; word-break:break-word; }
.akcje { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.zestaw { border:1px solid var(--stroke); border-radius:13px; margin-top:12px; background:var(--card); overflow:hidden; }
.zestaw > summary, .skala > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; }
.zestaw > summary::-webkit-details-marker, .skala > summary::-webkit-details-marker { display:none; }
.zestaw > summary::before, .skala > summary::before { content:"▸"; color:var(--dim); margin-right:4px; transition:transform .15s; }
.zestaw[open] > summary::before, .skala[open] > summary::before { transform:rotate(90deg); }
.zestaw > summary .tyt, .skala > summary .tyt { flex:1; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.zestaw > summary .tyt b { font-size:15.5px; }
/* 2.14.0-dev: dluga nazwa zestawu bez spacji (np. 84_Dron_KAMAN_Kopia) nie wypycha "Usun zestaw" poza karte na telefonie (390 px) - przycisk schodzi do drugiej linii */
.zestaw > summary { flex-wrap:wrap; } .zestaw > summary > .btn { margin-left:auto; } .zestaw > summary .tyt b { overflow-wrap:break-word; }
.skala { border-top:1px solid var(--stroke); margin-left:14px; }
.skala .wysylki { padding:0 14px 6px 22px; }
.tagi { display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
.okno-tlo { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.okno { background:var(--bg-2); color:var(--text); border:1px solid var(--stroke-2); border-radius:15px; max-width:620px; width:100%; max-height:86vh; overflow:auto; padding:18px; box-shadow:var(--cien); }
.okno dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin-top:10px; font-size:14px; }
.okno dt { color:var(--muted); } .okno dd { word-break:break-word; }
.okno pre { font-size:12px; white-space:pre-wrap; word-break:break-all; background:var(--card-2); border-radius:8px; padding:8px; margin-top:4px; }
.stan-pusty { text-align:center; padding:28px 10px; color:var(--muted); }
@media (max-width: 640px) {
  .poz { grid-template-columns:72px 1fr; }
  .mini { width:72px; height:52px; }
  .akcje { grid-column:1 / -1; justify-content:flex-start; }
  .skala { margin-left:6px; } .skala .wysylki { padding:0 8px 6px 10px; }
}

/* ------------------------------------------------- przegladarka 3D / orto ---- */
body.pelny { overflow:hidden; height:100vh; height:100dvh; display:flex; flex-direction:column; }
.scena { position:relative; flex:1; min-height:0; overflow:hidden; }
.scena canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none; }
.pasek { position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; z-index:5; max-width:calc(100% - 20px); }
.pasek .btn { background:var(--panel); border-color:var(--stroke-2); }
.ikona { width:18px; height:18px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.staty { position:absolute; left:10px; bottom:10px; font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--stroke); border-radius:8px; padding:3px 8px; z-index:4; pointer-events:none; font-variant-numeric:tabular-nums; }
.pomoc { position:absolute; left:50%; transform:translateX(-50%); bottom:10px; font-size:12px; color:var(--dim); z-index:3; pointer-events:none; text-align:center; max-width:60%; }
.etykieta { position:absolute; z-index:6; background:var(--panel); border:1px solid var(--stroke-2); border-radius:8px; padding:4px 9px; font-size:12.5px; pointer-events:none; box-shadow:var(--cien); white-space:nowrap; }
.legenda { position:absolute; right:10px; bottom:10px; z-index:4; background:var(--panel); border:1px solid var(--stroke); border-radius:10px; padding:8px 10px; font-size:12px; min-width:140px; }
.legenda .rampa { height:10px; border-radius:4px; margin:5px 0 2px; }
.legenda .wiersz { display:flex; align-items:center; gap:6px; } .legenda .kw { width:10px; height:10px; border-radius:3px; display:inline-block; }
.nakladka { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:8; background:var(--bg); padding:20px; text-align:center; }
.panel { position:absolute; top:0; right:0; bottom:0; width:310px; background:var(--panel); border-left:1px solid var(--stroke); overflow-y:auto; z-index:7;
         padding:8px 14px 20px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .2s; }
.panel.zwiniety { transform:translateX(100%); }
.panel h2 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:14px 0 6px; font-weight:700; }
.panel .uchwyt { display:none; }
.pole { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-size:13.5px; }
.pole label { display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; }
.pole select { font-size:13px; padding:5px 8px; max-width:170px; }
.pole input[type=range] { flex:1; max-width:150px; accent-color:var(--accent); }
.pole input[type=number] { width:76px; padding:4px 6px; border-radius:7px; background:var(--input); border:1px solid var(--stroke); color:var(--text); font:inherit; font-size:13px; }
.pole .wart { font-variant-numeric:tabular-nums; color:var(--muted); min-width:34px; text-align:right; font-size:12.5px; }
.pole input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; }
.palety { display:flex; gap:6px; flex-wrap:wrap; }
.palety button { width:26px; height:26px; border-radius:7px; border:2px solid var(--stroke-2); cursor:pointer; }
.palety button[aria-pressed="true"] { border-color:var(--accent); }
.siatka-btn { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.siatka-btn .btn { padding:5px 4px; font-size:12px; }
.licznik-warstwy { color:var(--dim); font-size:11.5px; }
@media (max-width: 700px) {
  .panel { top:auto; left:0; width:auto; max-height:56vh; border-left:none; border-top:1px solid var(--stroke-2); border-radius:16px 16px 0 0; padding-top:0; }
  .panel.zwiniety { transform:translateY(calc(100% - 44px)); }
  .panel .uchwyt { display:flex; position:sticky; top:0; justify-content:center; align-items:center; gap:8px; height:44px; background:var(--panel); cursor:pointer;
                   font-size:13px; color:var(--muted); border:none; width:100%; font:inherit; z-index:1; }
  .panel .uchwyt::before { content:""; width:38px; height:4px; border-radius:2px; background:var(--stroke-2); position:absolute; top:7px; }
  .staty { bottom:auto; top:54px; }
  .legenda { bottom:auto; top:54px; }
  .pomoc { display:none; }
}
.osie-etykiety { position:absolute; inset:0; pointer-events:none; z-index:3; }
.os-et { position:absolute; font-size:11px; font-weight:700; }
.rampa-turbo { background:linear-gradient(90deg,#30123b,#2978ee,#21d6a8,#a6f738,#fabb2e,#db3814); }
.legenda .row { justify-content:space-between; flex-wrap:nowrap; }
.leg-sekcja { margin-top:6px; }
.palety .pal-auto { background:linear-gradient(135deg,#0b1120 50%,#eef2f9 50%); }
.pomoc { top:12px; bottom:auto; left:auto; right:12px; transform:none; text-align:right; max-width:46%; background:var(--panel); border:1px solid var(--stroke); border-radius:8px; padding:3px 8px; }
@media (min-width: 701px) {
  .scena.z-panelem canvas { width:calc(100% - 310px); }
  .scena.z-panelem .pomoc, .scena.z-panelem .legenda { right:322px; }
}
.nav > .row:first-child { flex-wrap:nowrap; min-width:0; flex:1; }
.nav .brand { min-width:0; }
.nav .brand b, .nav .brand span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav > .row:last-child { flex-wrap:nowrap; }
@media (max-width: 700px) {
  body.pelny .nav { padding:6px 8px; gap:6px; }
  body.pelny .nav .brand span { font-size:10px; }
  body.pelny .nav .btn-sm { padding:4px 8px; font-size:12px; }
}
header.gora .wrap { padding-bottom:0; }
.akcje-okna { justify-content:flex-end; margin-top:14px; }
.skala-orto { position:absolute; right:12px; bottom:12px; z-index:4; background:var(--panel); border:1px solid var(--stroke); border-radius:8px; padding:4px 8px 3px; font-size:12px; color:var(--text); }
.skala-orto i { display:block; height:6px; border:2px solid var(--text); border-top:none; margin-bottom:2px; }
.btn[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
/* 15.10 (prawdziwy serwer, telefon 390 px): .scena .staty {bottom:44px} wygrywalo z regula telefonu
   (top:54px) -> ramka statystyk rozciagnieta na cala scene i przyciemniajaca chmure; plakietka
   "Powered by" schowana pod zwinietym panelem; tytul w naglowku nachodzil na przyciski. */
.nav .brand > div { min-width:0; }
@media (max-width: 700px) {
  .scena .staty { bottom:auto; top:54px; max-width:calc(100% - 20px); }
  .scena .legenda { top:88px; }
  .scena:has(.panel) .pk-znak { bottom:54px; } /* tylko nad zwinietym panelem przegladarki 3D */
}