/* STUDIO - ekran publikacji na caly ekran (`/lenta/nowy-wpis`).

   Wariant "studio" wybrany przez wlasciciela z trzech makiet: podglad
   zajmuje caly ekran, narzedzia stoja w prawej kolumnie, a podpis
   z hasztagami lezy na dole - czlowiek widzi, co opublikuje, zanim
   nacisnie guzik.

   ARKUSZ NIE CHOWA NICZEGO SAM. Dopoki nie ma klasy `stu-zywe` (stawia
   ja `public/js/studio.js`), strona wyglada jak zwykly formularz: pole
   pliku i pole tekstu. Kto ma wylaczony JavaScript, publikuje jak dotad -
   a schowane arkuszem pole pliku znaczyloby stron", ktora nie robi nic.

   Kolory sa WPISANE WPROST tam, gdzie lezy zdjecie czlowieka: pod spodem
   jest jego kadr, a nie tlo portalu. */

body.tryb-studio{background:#07070A}
body.tryb-studio .demobar{display:none}

.stu{max-width:680px;margin:0 auto;padding:18px 14px 40px;display:flex;flex-direction:column;gap:14px}
.stu-blad{padding:11px 13px;border-radius:12px;background:rgba(255,90,90,.14);
  border:1px solid rgba(255,90,90,.4);color:#FFD9D9;font-size:13.5px}

/* --------------------------------------------------- bez skryptu */
.stu-pusto{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;
  border:1.5px dashed rgba(242,220,150,.45);border-radius:18px;background:rgba(242,220,150,.06);
  text-align:center;cursor:pointer}
.stu-plus{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#F3DDA8,#C9A24D);color:#14130F;font-size:30px;font-weight:800}
.stu-pusto b{font-family:var(--f-display);font-size:16px;color:#F6EBD2}
.stu-pusto small{color:#B9B2A2;font-size:12.5px;line-height:1.45;max-width:280px}
.stu-wpis textarea{width:100%;padding:12px 13px;border-radius:14px;background:#15130E;
  border:1px solid #2A2519;color:#EDE7DA;font-family:var(--f-body);font-size:15px;
  line-height:1.45;resize:vertical}
.stu-wpis textarea::placeholder{color:#8E8877}
.stu-wyslij{width:100%;padding:15px;border-radius:14px;border:0;cursor:pointer;
  background:var(--gold);color:#14130F;font-family:var(--f-display);font-weight:800;font-size:15.5px}
.stu-nota{color:#B9B2A2;font-size:12px;line-height:1.5;margin:0}
.stu-nota a{border-bottom:1px solid var(--gline)}

/* `HIDDEN` NA WLASNEJ KLASIE Z `DISPLAY` NIE CHOWA NICZEGO - regula
   przegladarki `[hidden]{display:none}` przegrywa z nasza wlasna. Skrypt
   chowa tym wszystkie piec czesci; bez tych wierszy narzedzia filmu staly
   na ekranie takze wtedy, gdy zadnego pliku jeszcze nie ma - i lezaly
   wprost na zaproszeniu "wybierz zdjecie albo film". */
.stu-pusto[hidden],.stu-gora[hidden],.stu-narz[hidden],
.stu-pliki[hidden],.stu-dodaj[hidden]{display:none}

/* ============================================ PELNY EKRAN (ze skryptem) */
.stu.stu-zywe{position:fixed;inset:0;max-width:none;margin:0;padding:0;z-index:1200;
  background:#000;display:block}
body.tryb-studio.stu-otwarte{overflow:hidden}

.stu-zywe .stu-kadr{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.stu-zywe .stu-podglad{position:absolute;inset:0;display:grid;place-items:center}
.stu-zywe .stu-kadr video,.stu-zywe .stu-kadr img{width:100%;height:100%;object-fit:contain;display:block}
.stu-zywe .stu-pusto{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(320px,86%);background:rgba(15,14,11,.86);z-index:4}

/* ciemnienie u gory i u dolu - biale napisy gina na jasnym kadrze */
.stu-zywe:before,.stu-zywe:after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.stu-zywe:before{top:0;height:120px;background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent)}
.stu-zywe:after{bottom:0;height:56%;background:linear-gradient(to top,rgba(0,0,0,.9),transparent)}

.stu-gora{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 14px 0;color:#fff}
.stu-x{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;
  color:#fff;font-size:18px}
.stu-czas,.stu-ile{padding:6px 12px;border-radius:20px;background:rgba(0,0,0,.5);
  font-family:var(--f-display);font-weight:800;font-size:12.5px;color:#F6EBD2}

/* --------------------------------------------------- narzedzia */
.stu-narz{position:absolute;right:10px;top:50%;transform:translateY(-54%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.stu-n{width:56px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;border:0;background:transparent;cursor:pointer;color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:10.5px;letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
.stu-kolo{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.14),rgba(10,10,12,.5) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 12px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.stu-kolo:before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.4px;
  background:linear-gradient(135deg,#FFF3CE,#C9A24D 50%,#8A6208);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.stu-n svg{width:23px;height:23px;fill:none;stroke:#FFF8E7;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.stu-n.on .stu-kolo{background:linear-gradient(135deg,#F3DDA8,#C9A24D)}
.stu-n.on svg{stroke:#14130F}
/* Przekreslenie glosnika: `hidden` nie chowa elementu wewnatrz <svg>. */
.stu-n svg .znak-nie{display:none}
.stu-n.nie svg .znak-nie{display:inline}

/* --------------------------------------------------- szuflada narzedzia */
.stu-praca{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:14px 14px calc(16px + env(safe-area-inset-bottom));
  background:rgba(10,9,7,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(242,220,150,.22)}
.stu-praca-g{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;
  color:#F6EBD2;font-size:13px}
.stu-praca-g b{font-family:var(--f-display);font-weight:800;font-size:14px}
.stu-suw{display:flex;flex-direction:column;gap:9px}
.stu-suw input[type=range]{width:100%;accent-color:#C9A24D}
.stu-suw label{display:flex;align-items:center;gap:9px;color:#B9B2A2;font-size:12px}
.stu-suw label span{flex:0 0 26px;font-weight:800;color:#F2DC96}
.stu-gotowe{width:100%;margin-top:12px;padding:12px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#F3DDA8,#C9A24D);color:#14130F;
  font-family:var(--f-display);font-weight:800;font-size:14px}

/* --------------------------------------------------- dol: pliki, podpis */
.stu-zywe .stu-dol{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:0 12px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.stu-pliki{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.stu-pliki::-webkit-scrollbar{display:none}
.stu-mini{position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:11px;overflow:hidden;
  border:1.5px solid transparent;background:#15130E}
.stu-mini.on{border-color:#F2DC96}
.stu-mini img,.stu-mini video{width:100%;height:100%;object-fit:cover;display:block}
.stu-mini i{position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center}
.stu-zywe .stu-wpis{padding:12px 13px;border-radius:16px;background:rgba(18,16,12,.84);
  border:1px solid rgba(242,220,150,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stu-zywe .stu-wpis textarea{background:transparent;border:0;padding:0;color:#EDE7DA;font-size:14.5px;
  resize:none;min-height:42px}
.stu-zywe .stu-wpis textarea::placeholder{color:#B9B2A2}
.stu-tagi{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.stu-tag{padding:5px 10px;border-radius:999px;cursor:pointer;
  background:rgba(242,220,150,.14);border:1px solid rgba(242,220,150,.4);color:#F2DC96;
  font-family:var(--f-display);font-weight:700;font-size:12.5px}
.stu-tag.on{background:linear-gradient(135deg,#F3DDA8,#C9A24D);color:#14130F;border-color:transparent}
.stu-tag-swoj{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#B9B2A2}
.stu-pub{display:flex;gap:10px;align-items:center}
.stu-zywe .stu-wyslij{flex:1;width:auto}
.stu-dodaj{width:54px;height:52px;flex:0 0 54px;border-radius:14px;display:grid;place-items:center;
  background:#15130E;border:1px solid #2C2719;color:#C9A24D;font-size:22px;cursor:pointer}
.stu-dodaj input,.stu-schowane{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.stu-zywe .stu-nota{display:none}