@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-opsz-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/inter-latin-opsz-normal.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; }
:root { color-scheme: dark; --amber:#f2b45a; --teal:#4fd1b5; --bg-top:#02040a; --bg-bottom:#0d2048; --fg:#f3f6fb; --muted:#a7b3c7; --line:rgba(255,255,255,.09); --accent:#8fb4ff; --card:rgba(255,255,255,.045); --measure:66ch; }
* { box-sizing: border-box; }
html { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter Variable',Inter,'Segoe UI',Roboto,Arial,sans-serif; font-optical-sizing:auto;
  background:var(--bg-top) linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%) no-repeat; min-height:100%; color:var(--fg); line-height:1.6; font-size:17px; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--accent); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.wrap { max-width:960px; margin:0 auto; padding:0 16px; width:100%; }
header.site { border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap; }
.brand { font-weight:600; font-size:.92rem; letter-spacing:.24em; text-decoration:none; color:var(--fg); }
.who { color:var(--muted); font-size:.92rem; display:flex; gap:14px; align-items:center; }
.who form { margin:0; }
.who-av { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--accent); background:rgba(143,180,255,.14); border:1px solid rgba(143,180,255,.35); }
.who-n { color:var(--fg); margin-left:-6px; }
.btn-out { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:.88rem; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 14px 5px 11px; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.btn-out:hover { color:var(--fg); border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }
main { flex:1; padding:72px 0 96px; }
h1 { font-size:clamp(2rem,4.6vw,3rem); font-weight:600; line-height:1.12; letter-spacing:-.03em; margin:0 0 16px; text-wrap:balance; }
h2 { font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:48px 0 4px; }
h3 { font-size:1.15rem; font-weight:600; letter-spacing:-.02em; margin:0 0 6px; }
.lead { font-size:1.15rem; color:var(--muted); max-width:var(--measure); margin:0; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; text-decoration:none; color:inherit; display:block; backdrop-filter:blur(12px); transition:border-color .15s,background .15s; }
a.card:hover { border-color:rgba(143,180,255,.5); background:rgba(255,255,255,.07); }
.card p { margin:0; color:var(--muted); font-size:.97rem; }
.badge { display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:10px; }
.files { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }
.files li { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px; }
video { width:100%; max-width:var(--measure); border-radius:10px; border:1px solid var(--line); background:#000; margin-top:8px; display:block; }
.empty { color:var(--muted); }
.login { max-width:380px; margin:0 auto; }
.login label { display:block; font-size:.85rem; color:var(--muted); margin:16px 0 4px; }
.login input { width:100%; font:inherit; color:var(--fg); background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:11px 14px; }
.login button { margin-top:22px; width:100%; font:inherit; font-weight:600; color:#02040a; background:var(--accent); border:0; border-radius:10px; padding:12px; cursor:pointer; }
.err { color:#ff9b9b; margin-top:14px; font-size:.92rem; }
footer.site { border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; padding:24px 0; }
footer.site a { color:inherit; margin-left:18px; }
.policy h2 { font-size:1.05rem; margin:24px 0 4px; }
.policy p { margin:6px 0; }
.now { color:var(--muted); margin:8px 0 0; font-size:.95rem; }
.picker li { padding:0; }
.picker a { display:block; padding:12px 16px; text-decoration:none; color:inherit; }
.picker li.on { border-color:rgba(143,180,255,.6); background:rgba(255,255,255,.08); }
.fb { max-width:var(--measure); margin-top:12px; }
.fb label { display:block; font-size:.85rem; color:var(--muted); margin:14px 0 4px; }
.fb select, .fb input, .fb textarea { width:100%; font:inherit; color:var(--fg); background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }
.fb textarea { resize:vertical; }
.fb button { margin-top:16px; font:inherit; font-weight:600; color:#02040a; background:var(--accent); border:0; border-radius:10px; padding:11px 22px; cursor:pointer; }
.ok { color:#9be0b0; margin:12px 0 0; }
.fb .row { display:flex; gap:10px; }
.fb .row input { flex:1; }
.fb button.alt { margin:0; background:transparent; color:var(--accent); border:1px solid var(--line); padding:10px 16px; white-space:nowrap; }
.files a.seek { color:var(--accent); }
.lead.tight { margin-top:4px; }
.badge.side { margin:0 0 0 8px; }
.empty.gap { margin-top:32px; }
details.uw { max-width:var(--measure); margin-top:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
details.uw summary { cursor:pointer; padding:12px 16px; font-weight:600; list-style:none; }
details.uw summary::-webkit-details-marker { display:none; }
details.uw summary::before { content:"▸ "; color:var(--accent); }
details.uw[open] summary::before { content:"▾ "; }
details.uw .cnt { color:var(--accent); font-weight:400; }
details.uw form.fb, details.uw .note, details.uw ul.mine { margin-left:16px; margin-right:16px; }
details.uw ul.mine { margin-bottom:16px; }
.fb .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.fb .actions button { margin-top:0; }
.fb .row { display:flex; gap:10px; margin-top:4px; }
article.chal { margin-top:22px; padding:18px 20px 12px; background:var(--card); border:1px solid var(--line); border-radius:14px; max-width:var(--measure); }
article.chal h3 { margin:2px 0 8px; font-size:1.1rem; }
article.chal .chal-body p { margin:0 0 10px; color:var(--muted); }
article.chal details.uw { background:transparent; border:0; margin-top:4px; }
article.chal details.uw summary { padding-left:0; }
.fb label.check { display:flex; gap:10px; align-items:center; color:var(--fg); font-size:.95rem; margin-top:18px; }
.fb label.check input { width:auto; }
.proc { max-width:var(--measure); margin-top:8px; }
.proc h2 { margin-top:36px; }
.proc p { color:var(--muted); }
.proc strong { color:var(--fg); }
ol.steps { list-style:none; counter-reset:st; padding:0; margin:16px 0; display:grid; gap:10px; }
ol.steps li { counter-increment:st; position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px 14px 56px; color:var(--muted); }
ol.steps li::before { content:counter(st); position:absolute; left:16px; top:12px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(143,180,255,.5); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.9rem; }
ul.prose { padding-left:20px; color:var(--muted); }
ul.prose li { margin:6px 0; }
/* owner panel (/admin/feedback) */
.adm-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:20px 0 12px; }
.adm-bar select, .adm-bar input, .adm-bar button, .adm-item button, .adm-item textarea { font:inherit; font-size:.95rem; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
.adm-bar input { flex:1; min-width:180px; } .adm-bar button, .adm-item button, .adm-chip { cursor:pointer; }
.adm-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.adm-chip { font:inherit; font-size:.9rem; color:var(--fg); padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); }
.adm-chip.on, .adm-item button.on { border-color:var(--accent); color:var(--accent); font-weight:600; }
.adm-item { background:var(--card); border:1px solid var(--line); border-left-width:4px; border-radius:12px; padding:14px 16px; margin:0 0 12px; max-width:none; }
.adm-item.s-nowe { border-left-color:var(--accent); } .adm-item.s-w-toku { border-left-color:#e0b04a; } .adm-item.s-zrobione { border-left-color:#5ec27a; } .adm-item.s-odrzucone { border-left-color:#d56a6a; opacity:.7; }
.adm-meta { color:var(--muted); font-size:.88rem; margin:0 0 6px; } .adm-meta b { color:var(--fg); }
.adm-text { white-space:pre-wrap; margin:0 0 10px; }
.adm-acts { display:flex; flex-wrap:wrap; gap:6px; }
.adm-item textarea { width:100%; margin-top:8px; resize:vertical; }
.adm-dl { display:inline-block; margin:0 14px 6px 0; } .adm-dls { margin:8px 0 0; }
.adm-note { color:var(--accent); font-size:.9rem; min-height:1.4em; }
.adm-set { border:1px solid var(--line); border-radius:10px; margin:0 0 12px; padding:8px 14px 10px; }
.adm-set legend { color:var(--muted); font-size:.85rem; padding:0 6px; }
.adm-set label.check { margin-top:8px; }
.adm-item h3 { margin-bottom:10px; } .adm-item form.fb { margin-bottom:10px; }
.tools-nav { display:flex; flex-wrap:wrap; gap:4px; margin:-32px 0 32px; border-bottom:1px solid var(--line); }
.tools-nav a { padding:8px 14px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; font-size:.95rem; }
.tools-nav a:hover { color:var(--fg); }
.tools-nav a.on { color:var(--fg); border-bottom-color:var(--accent); }
/* access panel: accounts on the left, the chosen account on the right */
.acc { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; margin-top:20px; align-items:start; }
@media (max-width:720px) { .acc { grid-template-columns:1fr; } }
.acc-list { display:flex; flex-direction:column; gap:6px; }
.acc-user { display:block; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); text-decoration:none; color:var(--fg); }
.acc-user:hover { border-color:rgba(143,180,255,.5); }
.acc-user.on { border-color:var(--accent); background:rgba(143,180,255,.1); }
.acc-sum { display:block; font-size:.8rem; color:var(--muted); }
.acc-tag { font-size:.68rem; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.acc-new { color:var(--accent); border-style:dashed; }
.acc-main { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.acc-main .fb { max-width:none; }
.acc-h { font-size:1.5rem; text-transform:none; letter-spacing:-.02em; color:var(--fg); margin:0; }
.acc-all { font-weight:600; }
.acc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0 16px; }
.acc-sec { border-top:1px solid var(--line); margin-top:24px; padding-top:16px; }
.acc-sec h3 { font-size:1rem; margin:0 0 4px; }
.acc-del { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; }
.acc-del summary { cursor:pointer; color:#ff9b9b; font-size:.95rem; }
.acc-gap { margin-top:14px; }
.acc-key { margin-top:16px; }

/* tabs on the owner's pages */
.tools-nav a.on { border-bottom-color:var(--amber); }

/* header: one for everybody */
nav.main { display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; font-size:.95rem; }
nav.main a { text-decoration:none; color:var(--muted); }
nav.main a:hover { color:var(--fg); }
nav.main .who { margin-left:6px; padding-left:18px; border-left:1px solid var(--line); }
@media (max-width:640px) { nav.main .who { margin-left:0; padding-left:0; border-left:0; width:100%; } }
nav.main a.btn-login { color:#02040a; background:var(--accent); font-weight:600; padding:6px 16px; border-radius:999px; }
nav.main a.btn-login:hover { color:#02040a; filter:brightness(1.08); }

/* public home */
h1.hero { max-width:none; font-size:clamp(2.1rem,4.4vw,3.3rem); margin-bottom:18px; }
.hero2 { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px 48px; align-items:center; }
.hero2 .lead { font-size:1.08rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn-hero { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:600; color:#02040a; background:var(--accent); border-radius:999px; padding:11px 22px; border:1px solid transparent; }
.btn-hero:hover { filter:brightness(1.08); }
.btn-hero.ghost { color:var(--fg); background:transparent; border-color:var(--line); }
.btn-hero.ghost:hover { border-color:rgba(255,255,255,.3); filter:none; background:rgba(255,255,255,.05); }
.hero-hint { margin:14px 0 0; font-size:.88rem; color:var(--muted); }
.hero-art svg { width:100%; height:auto; display:block; }
.how { margin-top:72px; padding-top:40px; border-top:1px solid var(--line); }
.how h2 { font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 20px; }
.how-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.how-steps li { display:grid; gap:6px; padding:18px 18px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); }
.how-steps b { font-size:1rem; }
.how-steps li > span:last-child { color:var(--muted); font-size:.9rem; line-height:1.45; }
.how-n { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; font-weight:700; color:#fff; background:linear-gradient(180deg,#3d9bff,#0a6fe0); margin-bottom:4px; }
.how-steps li:last-child .how-n { background:#30d158; color:#02040a; }
@media (max-width:860px) { .hero2 { grid-template-columns:1fr; } .hero-art { order:-1; max-width:360px; margin:-20px auto 0; } .how-steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .how-steps { grid-template-columns:1fr; } }
.zone { display:grid; gap:4px; max-width:var(--measure); margin-top:56px; padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:var(--card); text-decoration:none; color:var(--fg); }
.zone:hover { border-color:rgba(143,180,255,.5); }
.zone-title { font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.zone-text { color:var(--muted); }
.zone-go { color:var(--accent); font-weight:600; margin-top:6px; }

/* owner panel: amber, above the projects, three tool tiles with counters */
.owner { margin:-24px 0 56px; padding:18px 18px 20px; border-radius:18px; border:1px solid rgba(242,180,90,.35); background:linear-gradient(180deg,rgba(242,180,90,.10),rgba(242,180,90,.03)); }
.owner-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:0 4px 14px; }
.owner-head h2 { margin:0; color:var(--amber); }
.owner-head span { color:var(--muted); font-size:.85rem; }
.owner-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.ocard { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:14px; align-items:center; padding:16px 18px; border-radius:14px; background:rgba(2,4,10,.45); border:1px solid rgba(242,180,90,.22); text-decoration:none; color:var(--fg); transition:border-color .15s, transform .15s; }
.ocard:hover { border-color:var(--amber); transform:translateY(-1px); }
.ocard-n { grid-row:1 / span 3; min-width:52px; height:52px; padding:0 8px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem; font-weight:700; color:var(--amber); background:rgba(242,180,90,.12); }
.ocard-n.hot { color:#02040a; background:var(--amber); }
.ocard-t { font-weight:600; font-size:1.05rem; }
.ocard-s { color:var(--fg); font-size:.9rem; }
.ocard-s2 { color:var(--muted); font-size:.8rem; }

/* "propose an idea": teal invitation below the projects */
.cta { display:flex; gap:18px; align-items:center; margin-top:48px; padding:22px 24px; border:1px solid rgba(79,209,181,.4); border-radius:16px; text-decoration:none; color:var(--fg); background:linear-gradient(90deg,rgba(79,209,181,.14),rgba(79,209,181,.03)); }
.cta:hover { border-color:var(--teal); }
.cta-plus { flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--teal); color:#02040a; font-size:1.7rem; font-weight:700; line-height:1; }
.cta-body { flex:1; display:grid; gap:2px; }
.cta-k { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.cta b { font-size:1.1rem; }
.cta-sub { color:var(--muted); font-size:.95rem; }
.cta-go { flex:none; color:var(--teal); font-weight:600; white-space:nowrap; }
@media (max-width:640px) { .cta { flex-wrap:wrap; } .cta-go { width:100%; padding-left:66px; } }

/* proposals inbox */
a.adm-chip { text-decoration:none; }
.gap-top { margin-top:20px; }
.flag { color:var(--amber); font-weight:600; }
.adm-item h3 { margin:2px 0 8px; }
.adm-item .fb label { margin-top:6px; }
.fb button.alt.on { border-color:var(--accent); color:var(--fg); background:rgba(143,180,255,.14); }

/* ---- project page: header, tabs ---- */
.phead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; }
.ph-text { min-width:0; flex:1 1 420px; }
.ph-back { display:inline-flex; align-items:center; gap:5px; font-size:.84rem; font-weight:500; text-decoration:none; color:var(--muted); padding:4px 12px 4px 8px; border:1px solid var(--line); border-radius:999px; background:var(--card); transition:color .15s, border-color .15s, background .15s; }
.ph-back:hover { color:var(--fg); border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }
.page-h { margin:4px 0 22px; }
.page-h h1, h1.page-h1 { font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 4px; }
h1.page-h1 { margin-top:14px; }
.page-h p { margin:0; color:var(--muted); font-size:.98rem; }
.phead h1 { font-size:clamp(1.5rem,2.6vw,2.1rem); margin:6px 0 4px; max-width:none; }
.phead h1 .badge { vertical-align:middle; margin:0 0 0 8px; }
.ph-lead { margin:0; color:var(--muted); font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
main.wide { padding-top:28px; }
.ptabs { display:inline-flex; flex:none; gap:2px; margin:0; padding:3px; border-radius:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); }
.ptabs a { padding:6px 16px; border-radius:7px; font-size:.92rem; font-weight:500; color:var(--muted); text-decoration:none; }
.ptabs a:hover { color:var(--fg); }
.ptabs a.on { color:var(--fg); background:rgba(255,255,255,.14); box-shadow:0 1px 2px rgba(0,0,0,.35); }
.ptabs a span { font-size:.78rem; color:var(--muted); margin-left:4px; }
.hint { color:var(--muted); font-size:.82rem; margin:10px 0 0; }
body.wide .wrap { max-width:1240px; }
main.wide .lead { max-width:var(--measure); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- film viewer, macOS-like: window with the player, tiles below, remarks panel on the right ---- */
.viewer { display:grid; gap:18px; margin-top:16px; align-items:start; }
.viewer.js:not(.open) .notes { display:none; }
.viewer.js.open { grid-template-columns:minmax(0,1fr) 380px; }
@media (max-width:980px) { .viewer.js.open { grid-template-columns:1fr; } }
.stage-col { min-width:0; }
.win, .notes { background:rgba(28,28,32,.72); border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.45); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); }
.win { overflow:hidden; }
.win-bar { display:flex; align-items:center; gap:12px; height:40px; padding:0 8px 0 14px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border-bottom:1px solid rgba(0,0,0,.45); }
.lights { display:flex; gap:8px; flex:none; } .lights i { width:12px; height:12px; border-radius:50%; background:#ff5f57; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25); }
.lights i:nth-child(2) { background:#febc2e; } .lights i:nth-child(3) { background:#28c840; }
.win-title { flex:1; text-align:center; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.win-btn { flex:none; display:inline-flex; gap:6px; align-items:center; font:inherit; font-size:.82rem; font-weight:600; color:var(--fg); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:7px; padding:4px 10px; cursor:pointer; }
.win-btn:hover, .win-btn[aria-expanded="true"] { background:#0a84ff; border-color:#0a84ff; color:#fff; }
.win video { display:block; width:100%; max-width:none; margin:0; border:0; border-radius:0; aspect-ratio:16/9; max-height:calc(100vh - 500px); min-height:220px; object-fit:contain; background:#000; }

/* film tiles */
.ftiles { display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)); margin-top:8px; }
.ftile { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:58px; padding:8px 8px 8px 10px; border-radius:12px; text-decoration:none; color:var(--fg); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); transition:background .15s, border-color .15s, box-shadow .15s; }
.ftile:hover { background:rgba(255,255,255,.08); }
.ftile.on { background:rgba(10,132,255,.16); border-color:#0a84ff; box-shadow:0 0 0 1px #0a84ff inset; }
.ft-main { flex:1; min-width:0; display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--fg); }
.ft-n { flex:none; min-width:28px; height:28px; padding:0 6px; border-radius:8px; display:grid; place-items:center; font-size:.8rem; font-weight:700; color:#fff; background:linear-gradient(180deg,#3d9bff,#0a6fe0); box-shadow:0 1px 2px rgba(0,0,0,.3); }
.ftile.on .ft-n { background:#fff; color:#0a6fe0; }
.ft-t { font-weight:600; font-size:.9rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:560px) { .ftile { flex-wrap:wrap; row-gap:2px; min-height:0; } .ft-bar { width:100%; padding-left:38px; justify-content:space-between; } .ft-t { -webkit-line-clamp:2; } }
.ft-bar { flex:none; display:flex; align-items:center; gap:8px; }
.ft-rate { margin:0; display:flex; align-items:center; gap:6px; }
.ft-ok { font:inherit; font-size:.75rem; padding:2px 8px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; }
.star-row { display:inline-flex; flex-direction:row-reverse; }
.star-row input { position:absolute; opacity:0; width:1px; height:1px; }
.star-row label { font-size:1.05rem; line-height:1; padding:0 1px; color:rgba(255,255,255,.22); cursor:pointer; transition:color .1s, transform .1s; }
.star-row input:checked ~ label, .star-row label:hover, .star-row label:hover ~ label { color:#ffcc33; }
.star-row label:hover { transform:scale(1.18); }
.star-row input:focus-visible + label { outline:2px solid #0a84ff; outline-offset:1px; border-radius:3px; }
.ft-com { position:relative; display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:.78rem; font-weight:600; text-decoration:none; color:var(--muted); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); }
.ft-com:hover { color:var(--fg); border-color:rgba(255,255,255,.25); }
.ft-com::after { content:""; width:7px; height:7px; border-radius:50%; background:transparent; }
.ft-com.st-nowe { color:#cfe3ff; } .ft-com.st-nowe::after { background:#0a84ff; }
.ft-com.st-w-toku { color:#ffe2b0; } .ft-com.st-w-toku::after { background:#ff9f0a; }
.ft-com.st-done { color:#c9f2d3; } .ft-com.st-done::after { background:#30d158; }
.ft-com.st-none::after { display:none; }
.ftile.ft-new { border-style:dashed; border-color:rgba(79,209,181,.45); background:rgba(79,209,181,.06); }
.ftile.ft-new .ft-n { background:var(--teal); color:#02040a; font-size:1.1rem; }
.ft-hint { font-size:.78rem; color:var(--muted); }
.viewer.open .ftiles { grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); }

/* remarks panel */
.notes { padding:14px 16px 18px; max-height:calc(100vh - 32px); overflow:auto; position:sticky; top:16px; }
.viewer:not(.js) .notes { position:static; max-height:none; }
.viewer:not(.js) .fpanel + .fpanel { border-top:1px solid rgba(255,255,255,.08); margin-top:18px; padding-top:18px; }
.fp-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.fp-head h3 { margin:2px 0 0; font-size:1.1rem; }
.fp-close { flex:none; width:26px; height:26px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:var(--fg); font-size:1.1rem; line-height:1; cursor:pointer; }
.fp-close:hover { background:rgba(255,255,255,.2); }
.fp-k { margin:0; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.fp-gap { margin-top:22px; }
.fp-empty { color:var(--muted); font-size:.9rem; margin:8px 0 0; }
.notes .fb { max-width:none; margin-top:4px; }
.notes .fb label { font-size:.8rem; margin:12px 0 4px; }
.notes .fb select, .notes .fb input, .notes .fb textarea { font-size:.95rem; border-radius:7px; padding:8px 10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.notes .fb select:focus, .notes .fb input:focus, .notes .fb textarea:focus { outline:none; border-color:#0a84ff; box-shadow:0 0 0 3px rgba(10,132,255,.45); }
.notes .fb button { border-radius:7px; padding:8px 14px; font-size:.92rem; background:#0a84ff; color:#fff; }
.notes .fb button.alt { background:rgba(255,255,255,.1); color:var(--fg); border:0; padding:8px 12px; }
.notes .fb .actions { margin-top:14px; }
.notes .fp-new .fb button { background:var(--teal); color:#02040a; }
.notes ul.mine { margin-top:8px; } .notes ul.mine li { font-size:.92rem; padding:10px 12px; }
.rst { float:right; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:rgba(10,132,255,.2); color:#cfe3ff; }
.rst.st-w-toku { background:rgba(255,159,10,.2); color:#ffe2b0; } .rst.st-zrobione { background:rgba(48,209,88,.2); color:#c9f2d3; } .rst.st-odrzucone { background:rgba(255,255,255,.1); color:var(--muted); }

/* ratings summary in the owner's feedback panel */
.rates { margin:8px 0 20px; } .rates h2 { margin-top:24px; }
.rate-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); margin-top:8px; }
.rate-film { font-weight:600; overflow-wrap:anywhere; } .rate-stars { color:#ffcc33; white-space:nowrap; } .rate-who { grid-column:1 / -1; color:var(--muted); font-size:.85rem; }

/* challenges editor */
.ce-new { margin:14px 0 18px; border:1px dashed rgba(79,209,181,.45); border-radius:12px; padding:0 16px; background:rgba(79,209,181,.05); }
.ce-new[open] { padding-bottom:16px; }
.ce-new summary { list-style:none; cursor:pointer; display:flex; gap:12px; align-items:center; padding:12px 0; font-weight:600; }
.ce-new summary::-webkit-details-marker, .ce-edit summary::-webkit-details-marker, .ce-del summary::-webkit-details-marker { display:none; }
.ce-new .scen-plus { width:30px; height:30px; font-size:1.2rem; }
.ce-new .fb button { background:var(--teal); color:#02040a; }
.chal-ed h3 { margin:2px 0 6px; }
.ce-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:10px; }
.ce-edit, .ce-del { flex:0 0 auto; }
.ce-edit[open], .ce-del[open] { flex:1 1 100%; order:2; }
.ce-edit summary, .ce-del summary, button.mini { list-style:none; cursor:pointer; font:inherit; font-size:.85rem; padding:5px 12px; border-radius:7px; border:1px solid var(--line); background:rgba(255,255,255,.07); color:var(--fg); display:inline-block; }
.ce-del summary { color:#ff9b9b; }
button.mini:disabled { opacity:.35; cursor:default; }
.ce-mini { display:flex; gap:6px; margin:0; }
.ce-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ce-ans { margin-top:8px; } .ce-ans summary { cursor:pointer; color:var(--accent); font-size:.9rem; }

/* films manager */
.fm-up { margin:12px 0 22px; padding:14px 16px; border-radius:12px; border:1px dashed rgba(10,132,255,.5); background:rgba(10,132,255,.06); max-width:none; }
.fm-row2 { grid-template-columns:140px 1fr; }
.fm-prog { display:flex; gap:12px; align-items:center; margin-top:14px; }
.fm-prog progress { flex:1; height:10px; accent-color:#0a84ff; }
.fm-pct { font-size:.85rem; color:var(--muted); white-space:nowrap; }
.fm-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fm-row { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); flex-wrap:wrap; }
.fm-main { flex:1 1 300px; min-width:0; }
.fm-title { display:flex; gap:8px; margin:0; }
.fm-title input { flex:1; min-width:0; font:inherit; color:var(--fg); background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:7px; padding:6px 10px; }
.fm-row .adm-meta { margin:6px 0 0; overflow-wrap:anywhere; }

/* topic sections between film tiles; owner's layout editing */
.fsec + .fsec { margin-top:6px; }
.fsec-h { display:flex; align-items:center; gap:12px; margin:14px 0 8px; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.fsec-h::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.12); }
.fsec-h[data-empty] { display:none; }
.fsec:first-child .fsec-h { margin-top:10px; }
.ftile.ft-up { border-style:dashed; border-color:rgba(242,180,90,.5); background:rgba(242,180,90,.06); }
.ftile.ft-up .ft-n { background:var(--amber); color:#02040a; font-size:1.1rem; }
.hint-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; margin-top:10px; }
.hint-row .hint { margin:0; }
.ed-tools, .ed-on { display:inline-flex; gap:6px; }
.ed-on[hidden] { display:none; }
.ed-btn { font:inherit; font-size:.8rem; font-weight:600; padding:4px 12px; border-radius:7px; cursor:pointer; color:var(--amber); background:rgba(242,180,90,.1); border:1px solid rgba(242,180,90,.4); }
.ed-btn:hover { background:rgba(242,180,90,.18); }
.ed-btn.ed-primary { background:var(--amber); color:#02040a; border-color:var(--amber); }
.viewer.editing .fsec-h, .viewer.editing .fsec-h[data-empty] { display:flex; text-transform:none; letter-spacing:0; }
.viewer.editing .fsec-h::after { display:none; }
.fsec-in { flex:1; font:inherit; font-size:.9rem; font-weight:600; color:var(--fg); background:rgba(242,180,90,.08); border:1px dashed rgba(242,180,90,.5); border-radius:7px; padding:6px 10px; }
.fsec-del { flex:none; width:28px; height:28px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:var(--fg); cursor:pointer; font-size:1rem; }
.viewer.editing .ftiles { min-height:64px; padding:6px; border-radius:12px; outline:1px dashed rgba(242,180,90,.35); }
.viewer.editing .ftile[data-i] { cursor:grab; }
.viewer.editing .ftile[data-i] * { pointer-events:none; }
.viewer.editing .ftile.ft-x { opacity:.35; pointer-events:none; }
.ftile.dragging { opacity:.4; }
.fp-ed .fb { margin-top:10px; }

/* "how we work" diagram on the projects page */
.flow { margin:28px 0 8px; padding:18px 18px 16px; border-radius:16px; border:1px solid var(--line); background:var(--card); }
.flow h2 { margin:0 0 14px; }
.flow-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:10px; }
.flow-steps { display:contents; }
.flow-step { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:12px 6px 10px; border-radius:12px; }
.flow-step.in-loop { background:rgba(79,209,181,.08); }
.flow-step:not(.last)::after { content:"→"; position:absolute; right:-11px; top:20px; color:var(--muted); font-size:.95rem; }
.flow-n { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.9rem; color:#fff; background:linear-gradient(180deg,#3d9bff,#0a6fe0); margin-bottom:4px; }
.flow-step.in-loop .flow-n { background:var(--teal); color:#02040a; }
.flow-step.last .flow-n { background:#30d158; color:#02040a; }
.flow-step b { font-size:.88rem; line-height:1.25; }
.flow-d { font-size:.76rem; color:var(--muted); line-height:1.3; }
.flow-loop { grid-row:2; grid-column:3 / 6; margin:4px 0 22px; height:18px; border:1.5px solid rgba(79,209,181,.55); border-top:0; border-radius:0 0 14px 14px; position:relative; }
.flow-loop::before { content:""; position:absolute; left:-5px; top:-6px; border:5px solid transparent; border-bottom:7px solid rgba(79,209,181,.8); }
.flow-loop span { position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%); white-space:nowrap; font-size:.76rem; color:var(--teal); }
@media (max-width:760px) {
  .flow-grid { grid-template-columns:1fr; row-gap:6px; }
  .flow-step { flex-direction:row; flex-wrap:wrap; text-align:left; align-items:center; column-gap:10px; padding:8px 10px; }
  .flow-step .flow-n { margin:0; }
  .flow-d { flex-basis:100%; padding-left:42px; margin-top:-4px; }
  .flow-step:not(.last)::after { content:"↓"; right:auto; left:22px; top:auto; bottom:-14px; }
  .flow-loop { grid-row:auto; grid-column:auto; height:auto; border:0; margin-top:6px; }
  .flow-loop::before { display:none; }
  .flow-loop span { position:static; transform:none; white-space:normal; padding:0; background:none; }
}

.privacy { max-width:var(--measure); margin-top:28px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:.85rem; color:var(--muted); }
.privacy p { margin:6px 0 0; }

/* data and GDPR panel */
.dz-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.dz-item { display:grid; gap:4px; padding:12px 14px; border-radius:12px; border:1px solid rgba(242,180,90,.4); border-left-width:4px; background:rgba(242,180,90,.06); }
.dz-item.dz-info { border-color:rgba(10,132,255,.45); background:rgba(10,132,255,.06); }
.dz-item span { color:var(--muted); font-size:.9rem; }
.dz-ok { margin-top:10px; padding:12px 14px; border-radius:12px; border:1px solid rgba(48,209,88,.45); background:rgba(48,209,88,.08); color:#c9f2d3; }
.dz-act { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 0; }
.dz-act label.check { display:flex; gap:6px; align-items:center; font-size:.85rem; color:var(--muted); margin:0; }
.dz-table { width:100%; max-width:var(--measure); border-collapse:collapse; margin-top:10px; font-size:.92rem; }
.dz-table th, .dz-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.dz-table th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
.dz-table td:nth-child(2) { font-variant-numeric:tabular-nums; font-weight:600; }
.dz-people { display:grid; gap:8px; margin-top:10px; max-width:var(--measure); }
.dz-person { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:0 14px; }
.dz-person[open] { padding-bottom:12px; }
.dz-person summary { cursor:pointer; list-style:none; display:flex; gap:12px; align-items:baseline; padding:10px 0; }
.dz-person summary::-webkit-details-marker { display:none; }
.dz-person summary span { color:var(--muted); font-size:.85rem; }
a.mini { text-decoration:none; font-size:.85rem; padding:5px 12px; border-radius:7px; border:1px solid var(--line); background:rgba(255,255,255,.07); color:var(--fg); }
/* password: eye button inside the field */
.pw-wrap { position:relative; display:block; }
.pw-wrap input { width:100%; padding-right:44px; }
.pw-wrap .pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.pw-wrap .pw-eye:hover { color:var(--fg); background:rgba(255,255,255,.08); }
/* authenticator QR (white background, dark modules: scanners need it) */
.qr-wrap { display:flex; flex-wrap:wrap; gap:18px 24px; align-items:flex-start; }
.qr-wrap svg.qr { flex:none; border-radius:10px; }
.qr-wrap > div { flex:1; min-width:240px; }
.totp-ok { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:10px 0 6px; }
.totp-ok label { flex:0 1 200px; margin:0; }
.totp-ok input { font-size:1.2rem; letter-spacing:.2em; }
.totp-ok button { margin:0; }
.acc-key .err { margin:8px 0; }
.login.wide { max-width:760px; }
.login-who { color:var(--muted); margin:0 0 18px; }
.login-alt { margin-top:22px; font-size:.9rem; }
.login-note { margin-top:18px; font-size:.88rem; color:var(--muted); }
.login .acc-key { margin-top:8px; }
.login .totp-ok input { width:auto; }

/* documents tab */
.docs { display:grid; gap:28px; max-width:860px; }
.docsec h2 { font-size:1.05rem; margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.docsec h2 .muted { font-size:.82rem; font-weight:400; color:var(--muted); }
.doc-user { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin:16px 0 6px; }
.doc-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.doc { display:flex; align-items:flex-start; gap:14px; padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.doc-ico { flex:none; width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:.7rem; font-weight:700; letter-spacing:.04em; color:#fff; background:linear-gradient(180deg,#3d9bff,#0a6fe0); }
.doc-body { flex:1; min-width:0; }
.doc-t { font-weight:600; color:var(--fg); text-decoration:none; overflow-wrap:anywhere; }
.doc-t:hover { text-decoration:underline; }
.doc-d { margin:3px 0 0; color:var(--fg); font-size:.93rem; }
.doc-m { margin:4px 0 0; color:var(--muted); font-size:.82rem; overflow-wrap:anywhere; }
.doc-del { margin:0; } .doc-del button { width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; font-size:1.1rem; line-height:1; cursor:pointer; }
.doc-del button:hover { color:#ff9b9b; border-color:#ff9b9b; }
.docup { margin-top:16px; padding:16px 18px; border-radius:12px; border:1px dashed rgba(143,180,255,.4); background:rgba(143,180,255,.05); max-width:none; }
.docup h3 { margin:0 0 4px; font-size:1rem; }
.docup .actions { display:flex; align-items:center; gap:14px; } .doc-prog { color:var(--muted); font-size:.9rem; }