/* Powłoka studio 4.2.33 — grafit / chłodny błękit. Nie kasuje ID. */
html.studio{
  --g:#8eb4d4;--g2:#c4a574;--t:#c5dcf0;--ink:#f2f5f8;--mut:#c8d2dc;
  --bg:#12151c;--card:#1a1e27;--line:#3a4456;--zeb:#161a22;--chip:#2a3140;
  --surface:#222a38;--surface-strong:#2e384c;
  --action:#6a9fc4;--action-hover:#82b3d4;--on-action:#0b1016;
  --shadow:0 18px 48px rgba(0,0,0,.38);--shadow2:0 4px 18px rgba(0,0,0,.28);
  --r:16px;--nav-h:68px;
  --champagne:#d4b896;--violet:#8b7aa8;
  --kb-inset:0px;--vv-h:100dvh;--vv-off:0px;
  --dock-space:84px;
  --sat:env(safe-area-inset-top, 0px);
  --head-stack:88px;
  --glass:color-mix(in srgb,var(--card) 78%,transparent);
  --glass-line:color-mix(in srgb,#ffffff 16%,var(--line));
  color-scheme:dark;
  scroll-padding-top:calc(var(--sat) + var(--head-stack) + 16px);
}
html.studio,html.studio body{
  background:var(--bg);color:var(--ink);
  font:16px/1.55 ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
}
html.studio body{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  background-attachment:fixed;
  min-height:100dvh;
}
html.studio ::selection{background:color-mix(in srgb,var(--g) 28%,transparent);color:var(--ink)}
html.studio h1,html.studio .vtitle,html.studio .studio-home-tytul{
  letter-spacing:-.035em;font-weight:650;color:var(--ink);
  overflow:visible;line-height:1.22;
}
html.studio .vsub,html.studio .lead,html.studio .tnote,html.studio .th,
html.studio .studio-home-sub,html.studio .fhint,html.studio #pjWyt,html.studio #pjNInfo,
html.studio #prNInfo,html.studio .crow2,html.studio .aihint{
  color:var(--mut);
}
html.studio .bar::before{display:none!important}
html.studio header{
  background:color-mix(in srgb,var(--card) 72%,transparent);
  backdrop-filter:blur(20px) saturate(1.15);
  border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  box-shadow:none;
  padding:calc(var(--sat) + 10px) 14px 10px;
}
html.studio #tabs{
  left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(720px,calc(100% - 20px));
  display:flex;gap:2px;
  background:color-mix(in srgb,var(--card) 78%,transparent);
  backdrop-filter:blur(22px) saturate(1.18);
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  border-radius:22px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  min-height:0;
  overflow:hidden;
}
html.studio #tabs .tab{
  flex:1 1 0;min-width:0;min-height:56px;
  border-top:0;border-radius:16px;
  color:var(--mut);
  white-space:normal;overflow:visible;text-overflow:unset;
  hyphens:manual;word-break:keep-all;overflow-wrap:normal;
}
html.studio #tabs .tab.on{
  color:var(--ink);
  background:color-mix(in srgb,var(--surface-strong) 80%,transparent);
}
html.studio #tabs .tab.on::before{
  color:var(--g);background:transparent;transform:none;
}
html.studio #tabs .tab:not(.on){font-size:.62rem}
html.studio #paleta{
  background:color-mix(in srgb,#0a0c10 55%,transparent);
  backdrop-filter:blur(16px);
  align-items:flex-start;padding:14vh 16px 16px;
}
html.studio #paleta .pal-box{
  width:min(480px,100%);
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(22px);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}
html.studio #composer{
  left:50%;right:auto;transform:translateX(-50%);
  width:min(720px,calc(100% - 16px));
  bottom:calc(var(--kb-inset) + var(--dock-space));
  background:color-mix(in srgb,var(--card) 86%,transparent);
  backdrop-filter:blur(20px);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:10px 12px;
}
html.studio #view-ai{padding-bottom:calc(var(--dock-space) + 160px)}
html.studio main,html.studio .view,
html.studio #view-projekt,html.studio #view-przerobka,html.studio #view-ai,
html.studio #view-advisor,html.studio #view-tools,html.studio #view-sync{
  padding-top:calc(var(--sat) + var(--head-stack) + 14px);
  padding-bottom:calc(var(--dock-space) + env(safe-area-inset-bottom) + 28px);
}
html.studio #top{
  bottom:calc(var(--dock-space) + 16px);
  background:var(--card);color:var(--ink);border:1px solid var(--line);
}

/* Klawiatura: pełne schowanie paska (nie ucięty sliver). Pole+przycisk nad IME. */
html.studio body.kb-open header,
html.studio body.kb-open #tabs,
html.studio body.kb-open #top,
html.studio body.kb-open #studioHomeBtn{
  display:none!important;
}
html.studio body.kb-open.kb-q header{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  position:fixed;top:auto;left:0;right:0;
  bottom:var(--kb-inset);
  z-index:55;
  transform:none;
  padding:10px 12px calc(8px + env(safe-area-inset-bottom,0px));
  border-bottom:0;
  border-top:1px solid var(--glass-line);
  border-radius:16px 16px 0 0;
  background:color-mix(in srgb,var(--card) 94%,transparent);
}
html.studio body.kb-open.kb-q header .studio-mark,
html.studio body.kb-open.kb-q header #menuBtn,
html.studio body.kb-open.kb-q header #intentBar,
html.studio body.kb-open.kb-q header #intentKarta{
  display:none!important;
}
html.studio body.kb-open main,
html.studio body.kb-open .view,
html.studio body.kb-open #view-projekt,
html.studio body.kb-open #view-przerobka,
html.studio body.kb-open #view-ai,
html.studio body.kb-open #view-advisor,
html.studio body.kb-open #view-tools,
html.studio body.kb-open #view-sync{
  padding-top:16px;
}
html.studio body.kb-open #composer{
  bottom:var(--kb-inset);
  transform:translateX(-50%);
  width:min(720px,100%);
  border-radius:16px 16px 0 0;
}
html.studio .ime-dock{
  position:fixed!important;left:0!important;right:0!important;
  z-index:55!important;margin:0!important;
  width:auto!important;max-width:none!important;
  bottom:var(--kb-inset)!important;
  padding:10px 12px calc(8px + env(safe-area-inset-bottom,0px))!important;
  background:color-mix(in srgb,var(--card) 94%,transparent)!important;
  backdrop-filter:blur(18px);
  border-top:1px solid var(--glass-line)!important;
  border-radius:16px 16px 0 0!important;
  box-shadow:0 -10px 32px rgba(0,0,0,.4);
}

/* Centrum intencji — nie ósma zakładka */
#studioHome{
  position:fixed;inset:0;z-index:36;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 24px) 20px calc(var(--dock-space) + 24px);
}
#studioHome[hidden]{display:none!important}
.studio-home-ornament{
  position:absolute;inset:8% 12% auto;height:42%;
  background:
    radial-gradient(ellipse at 30% 40%,color-mix(in srgb,var(--g) 16%,transparent),transparent 55%),
    radial-gradient(ellipse at 78% 20%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 50%);
  pointer-events:none;filter:blur(8px);
}
.studio-home-inner{position:relative;width:min(560px,100%);text-align:left}
.studio-kicker{
  margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--champagne);
}
.studio-home-tytul{margin:0 0 8px;font-size:clamp(1.8rem,6vw,2.4rem);color:var(--ink)}
.studio-home-sub{margin:0 0 22px;color:var(--mut);font-size:.98rem}
html.studio body.studio-home header{opacity:0;pointer-events:none}
html.studio body.studio-home main,
html.studio body.studio-home .view{visibility:hidden}
html.studio body.kb-open.studio-home #studioHome{padding-top:16px}
html.studio #studioHome .intent-bar{display:flex;gap:8px;margin:0}
html.studio #studioHome #intentIn{
  flex:1;height:52px;border-radius:14px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink);
  padding:0 14px;font-size:16px;
}
html.studio #studioHome #intentIdz{
  height:52px;padding:0 18px;border-radius:14px;
  background:var(--action);border-color:var(--action);color:var(--on-action);
  font-weight:700;cursor:pointer;
}
html.studio #intentKarta{margin-top:14px}
html.studio #intentKarta .pr-karta-odmowy{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
}
.studio-mark{
  flex:0 0 auto;height:42px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--g);font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  cursor:pointer;
}

/* Czytnik lista–treść */
#czytnik{margin:0 0 14px}
.czytnik-pasek{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:8px 0 12px;position:sticky;top:calc(var(--sat) + var(--head-stack) + 4px);
  z-index:8;background:linear-gradient(var(--bg) 70%,transparent);
}
html.studio body.kb-open .czytnik-pasek{top:8px}
#czytnikTytul{flex:1 1 140px;font-size:.88rem;font-weight:650;color:var(--ink)}
.czytnik-pasek button{
  font:inherit;font-size:.78rem;font-weight:650;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
}
#czytnikMapa{
  position:fixed;z-index:48;top:0;left:0;bottom:0;width:min(88vw,380px);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(20px);
  border-right:1px solid var(--line);
  overflow:auto;padding:calc(var(--sat) + 16px) 12px 100px;
  box-shadow:var(--shadow);
}
#czytnikMapa[hidden]{display:none!important}
#czytnikMapa button{
  display:block;width:100%;text-align:left;font:inherit;font-size:.86rem;
  padding:10px 12px;margin:0 0 4px;border:0;border-radius:10px;
  background:transparent;color:var(--ink);cursor:pointer;
}
#czytnikMapa button.on{background:var(--surface-strong);color:var(--g)}
html.studio.czytnik-on main > section.ch{display:none!important}
html.studio.czytnik-on main > section.ch.is-open{
  display:block!important;content-visibility:visible;contain-intrinsic-size:auto none;
}
@media(min-width:960px){
  html.studio.czytnik-on #czytnikMapa:not([hidden]){
    position:static;width:auto;height:auto;max-height:min(48vh,420px);
    box-shadow:none;border:1px solid var(--line);border-radius:14px;
    padding:10px;margin:0 0 14px;background:var(--card);backdrop-filter:none;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;
  }
}

/* Rodzina kafelków (etapy 01–04): szkło oszczędne, jasny tekst. Bez neonu, bez sfery. */
html.studio .studio-etapy,
html.studio .reform-etapy,
html.studio .chips,
html.studio .qchips,
html.studio .ai-chips,
html.studio #toolsKoty,
html.studio #syncKoty,
html.studio #view-advisor .adv-kat{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 14px;
  overflow:visible;
}
html.studio .studio-etapy button,
html.studio .reform-etapy [data-etap],
html.studio .chips a,
html.studio .qchips button,
html.studio .ai-chips button,
html.studio #toolsKoty button,
html.studio #syncKoty button,
html.studio #view-advisor .adv-kat .aopt,
html.studio #view-advisor .aopt:not(.small){
  display:flex;align-items:center;justify-content:flex-start;
  min-height:56px;width:auto;max-width:none;flex:none;
  margin:0;padding:12px 14px;text-align:left;
  font:inherit;font-size:.84rem;font-weight:650;line-height:1.25;
  color:var(--ink);
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid var(--glass-line);
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  text-decoration:none;cursor:pointer;
  white-space:normal;overflow:visible;overflow-wrap:anywhere;
}
html.studio .studio-etapy button.on,
html.studio .reform-etapy [data-etap].on,
html.studio #toolsKoty button.on,
html.studio #syncKoty button.on{
  color:var(--ink);
  border-color:color-mix(in srgb,var(--g) 55%,var(--line));
  background:color-mix(in srgb,var(--surface-strong) 70%,transparent);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
html.studio .chips::-webkit-scrollbar{display:none}
html.studio #toolsLista{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px;
}
html.studio #toolsLista button{
  display:flex;align-items:center;min-height:52px;padding:11px 13px;text-align:left;
  font:inherit;font-size:.82rem;font-weight:650;color:var(--ink);
  background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;cursor:pointer;
}
html.studio #toolsLista button.on{
  border-color:color-mix(in srgb,var(--g) 55%,var(--line));
  background:color-mix(in srgb,var(--surface-strong) 70%,transparent);
}
html.studio #view-advisor .acard{
  display:flex;flex-wrap:wrap;gap:8px;
  background:var(--glass);border:1px solid var(--glass-line);
}
html.studio #view-advisor .aq,
html.studio #view-advisor .acard > p,
html.studio #view-advisor .aref,
html.studio #view-advisor .arow,
html.studio #view-advisor .adv-kat{
  flex:1 1 100%;
}
html.studio #view-advisor .aopt:not(.small){
  flex:1 1 calc(50% - 8px);
}
html.studio #view-advisor .aopt.small{
  flex:1 1 100%;min-height:44px;justify-content:center;color:var(--mut);
}
html.studio #view-advisor .ayes,
html.studio #view-advisor .ano{min-height:52px}

#view-projekt [data-pj-panel][hidden]{display:none!important}
html.studio #view-projekt .pj-views{
  display:grid;grid-template-columns:1fr 76px;grid-template-rows:repeat(4,minmax(64px,1fr));
  gap:8px;min-height:min(58vh,540px);background:#0a0c10;padding:8px;border-radius:16px;
}
html.studio #view-projekt .pj-cell{grid-column:2;min-height:0}
html.studio #view-projekt .pj-cell.is-hero{
  grid-column:1;grid-row:1/-1;
}
html.studio #view-projekt .pj-cell canvas{width:100%;height:100%;object-fit:contain}

/* ReForm: model + overlay + sheet */
html.studio #view-przerobka{
  background:transparent;color:var(--ink);
  padding-bottom:calc(var(--dock-space) + 240px);
}
html.studio #view-przerobka .pr-siatka{grid-template-columns:1fr;position:relative}
html.studio #view-przerobka .pr-pod{
  display:grid;grid-template-columns:1fr 76px;grid-template-rows:repeat(4,minmax(56px,1fr));
  gap:8px;min-height:min(52vh,480px);
}
html.studio #view-przerobka .pr-cv{grid-column:2;aspect-ratio:auto;height:100%}
html.studio #view-przerobka .pr-cv.is-hero{grid-column:1;grid-row:1/-1}
#prOverlayCechy{
  position:absolute;left:8px;top:8px;max-width:min(280px,46%);
  max-height:46%;overflow:auto;z-index:2;
  background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;padding:8px;
}
#prOverlayCechy[hidden]{display:none!important}
#prNitka.reform-sheet{
  border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--card);margin:0 0 12px;
}
@media(max-width:720px){
  html.studio body[data-view="przerobka"] #prNitka.reform-sheet{
    position:fixed;left:8px;right:8px;z-index:43;
    bottom:calc(var(--kb-inset) + var(--dock-space));
    margin:0;max-height:42vh;overflow:auto;
    box-shadow:var(--shadow);
  }
  html.studio body.kb-open[data-view="przerobka"] #prNitka.reform-sheet,
  html.studio body.kb-open[data-view="przerobka"] #prNitka.ime-dock{
    bottom:var(--kb-inset);left:0;right:0;border-radius:16px 16px 0 0;
    max-height:min(46vh,var(--vv-h));
  }
}

/* Asystent: jeden ekran klucza */
#aiGate{
  display:none;flex-direction:column;align-items:flex-start;gap:12px;
  min-height:46vh;justify-content:center;padding:12px 4px 40px;
}
html.studio body.ai-locked #aiGate{display:flex}
html.studio body.ai-locked #aiFeed,
html.studio body.ai-locked #aiChips,
html.studio body.ai-locked #composer{display:none!important}
html.studio body.ai-locked.kb-open #composer{display:none!important}
#aiGate h2{margin:0;font-size:1.6rem;letter-spacing:-.03em;color:var(--ink)}
#aiGate p{margin:0;color:var(--mut);max-width:36em}
#aiGateOtworz{
  font:inherit;font-weight:700;padding:12px 18px;border-radius:14px;cursor:pointer;
  border:1px solid var(--action);background:var(--action);color:var(--on-action);
}

/* Doradca: jeden krok */
html.studio #view-advisor .acard{max-width:560px}
html.studio #advPostep{font-size:.86rem;color:var(--mut);margin:0 0 10px}
html.studio #advWstecz{
  font:inherit;font-size:.8rem;font-weight:650;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;margin:0 0 12px;
}
html.studio #view-advisor .aopt[hidden],
html.studio #view-advisor .agrp[hidden]{display:none!important}

/* Narzędzia: kategorie */
#toolsLista{margin-bottom:14px}
#view-tools .tool[hidden]{display:none!important}

/* Aktualizuj: zakładki */
#view-sync [data-sync-panel][hidden]{display:none!important}
#syncTrescBox{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px}
#syncTrescBox p{margin:0 0 10px;color:var(--mut);font-size:.92rem}

@media (min-width:720px){
  html.studio .chips,
  html.studio .qchips,
  html.studio .studio-etapy,
  html.studio .reform-etapy{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:640px){
  /* Pływający dock: 7 etykiet w 1 rzędzie na 360 CSS się tnie (overflow-x).
     Dwa rzędy 4+3, bez nowrap, bez ósmej pozycji. Klawiatura (kb-open) bez zmian. */
  html.studio{--dock-space:132px;--nav-h:118px}
  html.studio #tabs{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    align-items:stretch;
    gap:2px;
    overflow:hidden;
    min-height:0;
    padding:6px 12px calc(8px + env(safe-area-inset-bottom,0px));
    border-radius:18px;
  }
  html.studio #tabs .tab{
    grid-column:span 3;
    flex:none;
    min-width:0;
    min-height:52px;
    max-width:none;
    padding:3px 1px 4px;
    font-size:clamp(.62rem,2.85vw,.72rem);
    letter-spacing:-.02em;
    line-height:1.15;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    overflow-wrap:normal;
    word-break:keep-all;
    hyphens:manual;
  }
  html.studio #tabs .tab:nth-child(n+5){grid-column:span 4}
  html.studio #tabs .tab:not(.on){font-size:clamp(.62rem,2.85vw,.72rem)}
  html.studio main,html.studio .view,html.studio #view-projekt,html.studio #view-ai,
  html.studio #view-przerobka,html.studio #view-advisor,html.studio #view-tools,html.studio #view-sync{
    padding-bottom:calc(var(--dock-space) + env(safe-area-inset-bottom) + 32px);
  }
}
@media (prefers-reduced-motion:reduce){
  html.studio *,html.studio *::before,html.studio *::after{
    transition:none!important;animation:none!important;
  }
  html.studio .studio-etapy button,
  html.studio .chips a,
  html.studio .qchips button,
  html.studio .aopt{
    backdrop-filter:none;
  }
}