/*
Theme Name: Langle
Theme URI: https://langle.pl
Author: Joanna Patyk-Taous
Description: Jasny, skandynawski motyw dla anglistow. Tablica lekcyjna: free-to-use, pay-to-save.
Version: 3.15.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: langle
*/

:root{
  --cream:#FBF9F4;
  --card:#FFFFFF;
  --ink:#22302A;
  --muted:#66756D;
  --sage:#7FB685;
  --sage-soft:#DCEBDD;
  --butter:#F7C948;
  --butter-soft:#FBEED0;
  --peach:#F2A48D;
  --peach-soft:#FCE4DC;
  --sky:#8FB8DE;
  --sky-soft:#DFEAF5;
  --line:#ECE7DC;
  --radius:22px;
  --shadow:0 14px 34px rgba(34,48,42,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
}
.disp{font-family:'Bricolage Grotesque',sans-serif}

/* ===== NAV ===== */
nav{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,244,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,4vw,56px);
}
.logo{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;
}
.logo::before{
  content:"";width:22px;height:11px;border-radius:11px 11px 0 0;background:var(--sage);
  transition:transform .25s;
}
.logo:hover::before{transform:translateY(-2px)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links > a:not(.btn){
  color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem;transition:color .2s;
}
.nav-links > a:not(.btn):hover{color:var(--ink)}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}
@media(max-width:640px){
  nav{padding:12px 16px;gap:10px}
  .logo{font-size:1.2rem;gap:6px}
  .logo::before{width:17px;height:9px}
  .nav-links{gap:8px}
  /* Na waskich ekranach chowamy tylko zachete "Kup Premium" (nav-secondary) -
     dostep do konta (nav-account) zostaje widoczny zawsze, bo logowanie sie
     to funkcjonalna koniecznosc, nie marketing. Uzywamy semantycznych klas
     (nie .sun/.ghost), bo te kolory zmieniaja znaczenie w zaleznosci od
     statusu Premium usera. */
  .nav-links .nav-secondary{display:none}
  .nav-links .btn{padding:9px 14px;font-size:.85rem}
}
@media(max-width:380px){
  .logo{font-size:1.05rem}
  .nav-links .btn{padding:8px 12px;font-size:.8rem}
}
.btn{
  display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:.98rem;text-decoration:none;cursor:pointer;border:none;
  padding:13px 28px;border-radius:999px;
  background:var(--ink);color:var(--cream);
  transition:transform .18s,box-shadow .18s,background .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(34,48,42,.2)}
.btn.sun{background:var(--butter);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream);box-shadow:none}

/* ===== HERO ===== */
.hero{
  max-width:1180px;margin:0 auto;position:relative;
  padding:clamp(56px,8vw,104px) clamp(20px,4vw,56px) clamp(48px,7vw,88px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center;
}
@media(max-width:940px){.hero{grid-template-columns:1fr}}
/* scandinavian arches in the background */
.deco{position:absolute;z-index:-1;opacity:.9;animation:bob 7s ease-in-out infinite}
.deco.d1{top:36px;right:6%;width:70px;height:35px;border-radius:70px 70px 0 0;background:var(--butter-soft)}
.deco.d2{bottom:60px;left:2%;width:52px;height:52px;border-radius:50%;background:var(--peach-soft);animation-delay:2s}
.deco.d3{top:52%;right:0;width:40px;height:80px;border-radius:80px 0 0 80px;background:var(--sky-soft);animation-delay:4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--sage-soft);color:#3E6B47;
  padding:8px 18px;border-radius:999px;font-weight:600;font-size:.86rem;
  margin-bottom:26px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.4);opacity:.6}}
.hero h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.6rem,5.8vw,4.4rem);line-height:1.04;margin-bottom:24px;
}
.hero h1 .hl{
  position:relative;white-space:nowrap;z-index:1;
}
.hero h1 .hl::after{
  content:"";position:absolute;left:-6px;right:-6px;bottom:6px;height:.42em;z-index:-1;
  background:var(--butter);border-radius:6px;
  transform:scaleX(0);transform-origin:left;
  animation:paint .7s .5s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes paint{to{transform:scaleX(1)}}
.hero p.lead{font-size:1.14rem;color:var(--muted);max-width:470px;margin-bottom:34px}
.hero p.lead b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ===== RESCUE PANEL ===== */
.console{
  background:var(--card);border:1px solid var(--line);border-radius:28px;
  padding:32px 30px 30px;box-shadow:var(--shadow);
  animation:rise .8s ease both;position:relative;
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.console.flash{animation:flash 1.1s ease}
@keyframes flash{
  0%{box-shadow:0 0 0 0 rgba(247,201,72,.75),var(--shadow)}
  100%{box-shadow:0 0 0 30px rgba(247,201,72,0),var(--shadow)}
}
.console::before{ /* little arch on top of the card */
  content:"";position:absolute;top:-13px;left:44px;width:44px;height:22px;
  border-radius:44px 44px 0 0;background:var(--peach);
}
.console .bar{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.console .bar h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.console .bar .stat{font-size:.8rem;color:var(--muted);font-weight:500}
.ring-wrap{display:flex;justify-content:center;margin-bottom:22px}
.ring{position:relative;width:196px;height:196px}
.ring svg{transform:rotate(-90deg)}
.ring .track{fill:none;stroke:#F0EBDF;stroke-width:12;stroke-linecap:round}
.ring .bar-c{
  fill:none;stroke:url(#grad);stroke-width:12;stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
}
.ring .time{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .time b{font-family:'Bricolage Grotesque',sans-serif;font-size:3.5rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.ring .time span{font-size:.82rem;color:var(--muted);font-weight:500;margin-top:2px}
.minutes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.min-pick{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;
  padding:10px 18px;border-radius:999px;cursor:pointer;
  background:var(--cream);border:1.5px solid var(--line);color:var(--muted);
  transition:all .18s;
}
.min-pick:hover{border-color:var(--sage);color:var(--ink);transform:translateY(-2px)}
.min-pick.active{background:var(--sage);border-color:var(--sage);color:#fff}
.console .btn{width:100%;text-align:center;font-size:1.02rem;padding:15px}

/* ===== GENERATORS ===== */
.section{max-width:1180px;margin:0 auto;padding:clamp(48px,7vw,92px) clamp(20px,4vw,56px)}
.head{max-width:620px;margin:0 auto 48px;text-align:center}
.head h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,4.2vw,2.9rem);line-height:1.1;margin-bottom:12px;
}
.head p{color:var(--muted);font-size:1.05rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile{
  display:block;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 24px;position:relative;cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  opacity:0;transform:translateY(16px);
}
.tile.show{opacity:1;transform:none;transition:opacity .5s,transform .5s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.tile .ico{
  width:46px;height:46px;border-radius:14px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.tile:hover .ico{transform:rotate(-6deg) scale(1.08)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.sage{background:var(--sage-soft);color:#3F7A49}
.ico.butter{background:var(--butter-soft);color:#A87F14}
.ico.peach{background:var(--peach-soft);color:#C2664A}
.ico.sky{background:var(--sky-soft);color:#48719C}
.tile h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:6px;line-height:1.25;
}
.tile p{font-size:.88rem;color:var(--muted);line-height:1.55}
.tile .arr{
  position:absolute;top:24px;right:22px;color:var(--ink);font-size:1.1rem;
  opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;
}
.tile:hover .arr{opacity:1;transform:none}

/* ===== HOW ===== */
.how-wrap{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:30px;margin-top:8px}
.how-step{text-align:center;padding:0 10px}
.how-step .n{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.2rem;
  width:52px;height:52px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.how-step:nth-child(1) .n{background:var(--sage-soft)}
.how-step:nth-child(2) .n{background:var(--butter-soft)}
.how-step:nth-child(3) .n{background:var(--peach-soft)}
.how-step:nth-child(4) .n{background:var(--sky-soft)}
.how-step h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.15rem;margin-bottom:8px;letter-spacing:-.01em}
.how-step p{color:var(--muted);font-size:.95rem;max-width:300px;margin:0 auto}

/* ===== PATYCZANKA ===== */
.band{max-width:1180px;margin:0 auto;padding:clamp(56px,8vw,96px) clamp(20px,4vw,56px)}
.band-inner{
  background:var(--sage-soft);
  border-radius:30px;padding:clamp(36px,5vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.band-inner::before{
  content:"";position:absolute;right:-30px;bottom:-50px;width:170px;height:170px;
  border-radius:50%;background:var(--sage);opacity:.25;
}
.band-inner::after{
  content:"";position:absolute;right:110px;top:-40px;width:90px;height:45px;
  border-radius:0 0 90px 90px;background:var(--butter);opacity:.5;
}
.band h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;margin-bottom:8px;color:#2C4A34}
.band p{font-weight:500;max-width:470px;color:#4A6352}
.band .btn{position:relative;z-index:1}

/* ===== FOOTER ===== */
footer{padding:52px clamp(20px,4vw,56px) 30px;border-top:1px solid var(--line)}
.foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:38px;padding-bottom:36px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer p{font-size:.9rem;color:var(--muted);max-width:320px;margin-top:12px}
footer h4{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;
  color:var(--ink);margin-bottom:16px;
}
footer a.link{display:block;color:var(--muted);text-decoration:none;font-size:.93rem;margin-bottom:10px;transition:color .2s}
footer a.link:hover{color:var(--sage)}
.copy{
  max-width:1180px;margin:0 auto;padding-top:22px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted);
  display:flex;justify-content:center;text-align:center;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tile{opacity:1;transform:none}
  .hero h1 .hl::after{transform:scaleX(1)}
}

/* ===== WP admin bar fix ===== */
body.admin-bar nav{top:32px}
@media(max-width:782px){body.admin-bar nav{top:46px}}

/* ===== Podstrony: regulamin, polityka prywatnosci, strony generatorow ===== */
.paper-wrap{max-width:840px;margin:clamp(40px,6vw,72px) auto;padding:0 20px}
.paper-page{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:clamp(32px,5vw,56px);box-shadow:var(--shadow);
}
.paper-page h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.02em;margin-bottom:18px;line-height:1.15}
.paper-page h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.4rem;margin:28px 0 10px;letter-spacing:-.01em}
.paper-page h3{font-weight:600;font-size:1.1rem;margin:22px 0 8px}
.paper-page p, .paper-page li{font-size:1rem;color:#4A574F;margin-bottom:12px}
.paper-page ul, .paper-page ol{padding-left:22px;margin-bottom:14px}
.paper-page a{color:#3F7A49;font-weight:600}

/* ===== Generatory: modal ===== */
.lg-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(34,48,42,.45);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.lg-overlay.open{opacity:1;pointer-events:auto}
.lg-modal{
  background:var(--cream);border-radius:26px;width:100%;max-width:620px;
  max-height:92vh;overflow-y:auto;padding:28px clamp(20px,4vw,34px) 30px;
  box-shadow:0 30px 70px rgba(34,48,42,.3);
  transform:translateY(16px) scale(.98);transition:transform .25s;
}
.lg-overlay.open .lg-modal{transform:none}
.lg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.lg-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.lg-sub{color:var(--muted);font-size:.92rem;margin-top:4px;max-width:440px}
.lg-close{
  flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;font-size:1rem;color:var(--muted);
  transition:all .18s;
}
.lg-close:hover{border-color:var(--peach);color:var(--ink);transform:rotate(90deg)}
.lg-levels{display:flex;gap:8px;margin-bottom:14px}
.lg-pill{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.88rem;
  padding:8px 16px;border-radius:999px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);color:var(--muted);transition:all .18s;
}
.lg-pill:hover{border-color:var(--sage);color:var(--ink)}
.lg-pill.active{background:var(--sage);border-color:var(--sage);color:#fff}
.lg-score{font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:10px;display:none}
.lg-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px;display:flex;flex-direction:column;gap:16px;
}
.lg-card.lg-center{text-align:center;align-items:center}
.lg-kicker{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.lg-big{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.1;
}
.lg-def,.lg-q{font-size:1.15rem;line-height:1.55}
.lg-word{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3em}
.lg-gap{
  display:inline-block;min-width:64px;border-bottom:2.5px solid var(--butter);margin:0 2px;
}
.lg-label{font-size:.85rem;font-weight:600;color:var(--peach);text-transform:uppercase;letter-spacing:.04em}
.lg-forbidden{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lg-forbidden li{
  background:var(--peach-soft);color:#A85B41;font-weight:600;
  padding:6px 14px;border-radius:999px;font-size:.95rem;text-decoration:line-through;
}
.lg-scene{font-size:clamp(2.4rem,8vw,3.6rem);line-height:1.35;letter-spacing:.06em}
.lg-questions{text-align:left;padding-left:22px;color:var(--ink)}
.lg-questions li{margin-bottom:6px}
.lg-opts{display:grid;gap:10px}
.lg-opt{
  font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;text-align:left;
  padding:13px 18px;border-radius:14px;cursor:pointer;
  background:var(--cream);border:1.5px solid var(--line);color:var(--ink);transition:all .15s;
}
.lg-opt:hover{border-color:var(--sage);transform:translateY(-1px)}
.lg-opt.good{background:var(--sage-soft);border-color:var(--sage);color:#2C5B35}
.lg-opt.bad{background:var(--peach-soft);border-color:var(--peach);color:#A0432A}
.lg-note{font-size:.9rem;color:var(--muted);background:var(--sky-soft);border-radius:12px;padding:10px 14px}
.lg-next{align-self:center}
.lg-reveal{align-self:center}
.lg-answer{width:100%;text-align:center;animation:rise .35s ease both}
.lg-syn{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lg-syn li{background:var(--sage-soft);color:#2C5B35;font-weight:600;padding:6px 14px;border-radius:999px}
.lg-ladder-ends{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.lg-step{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:.08em;
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:8px 14px;
}
.lg-step.big{font-size:1.5rem;background:var(--butter-soft);border-color:var(--butter)}
.lg-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.lg-arrow{color:var(--muted);font-weight:600;font-size:.9rem}
.lg-form label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:.95rem}
.lg-form select{
  font:inherit;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--cream);color:var(--ink);
}
.lg-plan{display:flex;flex-direction:column;gap:10px}
.lg-plan-row{
  display:flex;gap:14px;align-items:baseline;background:var(--cream);
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:.95rem;
}
.lg-plan-day{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;flex:none;width:74px;color:#3F7A49}
.lg-rescue{display:flex;flex-direction:column;gap:10px}
.lg-rescue-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.lg-rescue-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.lg-rescue-item p{font-size:.9rem;color:var(--muted);line-height:1.5}
.lg-time{
  flex:none;font-size:.78rem;font-weight:700;color:#A87F14;
  background:var(--butter-soft);border-radius:999px;padding:3px 10px;
}


/* ===== Hero w wersji dla uczacych sie: wysrodkowany, bez panelu ===== */
.hero-solo{grid-template-columns:1fr;max-width:860px;text-align:center;padding-bottom:clamp(32px,5vw,56px)}
.hero-solo .lead{margin-left:auto;margin-right:auto}
.hero-solo .hero-ctas{justify-content:center}

/* ===== NOWE SEKCJE v3.0.0: pivot na tablice lekcyjna (free-to-use, pay-to-save) ===== */

/* Hero board mock (podmienia panel Lesson Rescue z .console) */
/* ===== HERO: podglad tablicy (identyczne ikony co /tablica/) ===== */
.hero-copy{max-width:560px}
.hero-fine{margin-top:22px;font-size:.88rem;color:var(--muted)}
.hero-fine strong{color:var(--ink);font-weight:700}

.board-preview{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;animation:rise .8s ease both;
  transform-origin:top left;
}
.bp-topbar{
  display:flex;align-items:center;gap:16px;padding:10px 14px;
  background:rgba(251,249,244,.9);border-bottom:1px solid var(--line);
}
.bp-brand{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1rem;color:var(--ink);
  display:flex;align-items:center;gap:7px;
}
.bp-logo{width:14px;height:7px;border-radius:14px 14px 0 0;background:var(--sage)}
.bp-title{
  flex:1;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.85rem;color:var(--muted);
  padding:6px 10px;border:1.5px solid var(--line);border-radius:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bp-actions{display:flex;align-items:center;gap:8px;flex:none}
.bp-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.75rem;font-weight:600;color:#3E6B47;background:var(--sage-soft);
  padding:5px 10px;border-radius:999px;
}
.bp-chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bp-btn{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.78rem;
  background:var(--butter);color:var(--ink);padding:6px 12px;border-radius:999px;
}
.bp-toolbar{
  display:flex;align-items:center;gap:6px;padding:8px 14px;
  border-bottom:1px solid var(--line);background:var(--cream);
  overflow-x:auto;scrollbar-width:none;
}
.bp-toolbar::-webkit-scrollbar{display:none}
.bp-tool{
  flex:none;width:32px;height:32px;border-radius:8px;border:none;background:transparent;
  color:var(--ink);cursor:default;display:flex;align-items:center;justify-content:center;
}
.bp-tool.active{background:var(--sage-soft);color:#3F7A49}
.bp-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bp-sep{width:1px;height:20px;background:var(--line);flex:none;margin:0 4px}
.bp-sw{width:18px;height:18px;border-radius:50%;flex:none;border:1.5px solid rgba(0,0,0,.06)}
.bp-stamp{font-size:1rem;flex:none;padding:0 2px;user-select:none}
.bp-canvas{
  aspect-ratio:16/9;background:#FFFDF9;position:relative;overflow:hidden;
}
.bp-shot{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
@media(max-width:640px){
  /* Kompaktowy podglad tablicy w Hero - wiecej ikon widocznych bez scrolla,
     mniej istotne elementy (badge "Anna") chowamy zeby zrobic miejsce na tytul.
     Ta reguła MUSI byc po bazowych .bp-* (kolejnosc w kaskadzie), inaczej
     zwykla reguła .bp-chip nizej w pliku by ja nadpisala mimo bycia w media query. */
  .bp-topbar{gap:8px;padding:8px 10px}
  .bp-chip{display:none}
  .bp-tool{width:28px;height:28px}
  .bp-tool svg{width:14px;height:14px}
  .bp-sw{width:15px;height:15px}
  .bp-toolbar{gap:4px;padding:7px 10px}
  .bp-btn{font-size:.72rem;padding:6px 10px}
}

/* ===== SEKCJE: kicker + head refresh ===== */
.section-kicker{
  display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:#3F7A49;background:var(--sage-soft);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}

/* ===== FEATURES ===== */
.feat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;margin-top:8px;
}
.feat{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.feat-ico{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.feat-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat-ico.sage{background:var(--sage-soft);color:#3F7A49}
.feat-ico.butter{background:var(--butter-soft);color:#A87F14}
.feat-ico.peach{background:var(--peach-soft);color:#C2664A}
.feat-ico.sky{background:var(--sky-soft);color:#48719C}
.feat h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.15rem;
  letter-spacing:-.01em;margin-bottom:8px;
}
.feat p{color:var(--muted);font-size:.95rem;line-height:1.55}

/* ===== POSTLESSON ===== */
.postlesson{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none;padding-left:0;padding-right:0}
.postlesson .head, .postlesson .pl-grid{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
.pl-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
}
.pl-card{
  background:var(--cream);border-radius:20px;padding:26px 22px 22px;
  position:relative;transition:transform .2s;
}
.pl-card:hover{transform:translateY(-4px)}
.pl-num{
  position:absolute;top:18px;right:20px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.6rem;
  color:var(--line);line-height:1;
}
.pl-ico{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.pl-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-ico.sage{background:var(--sage-soft);color:#3F7A49}
.pl-ico.butter{background:var(--butter-soft);color:#A87F14}
.pl-ico.peach{background:var(--peach-soft);color:#C2664A}
.pl-ico.sky{background:var(--sky-soft);color:#48719C}
.pl-card h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:-.01em;margin-bottom:8px;padding-right:32px;
}
.pl-card p{color:var(--muted);font-size:.92rem;line-height:1.55}

/* ===== PRICING (rozszerzenie plan-*) ===== */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:920px;margin:0 auto}
@media(max-width:760px){.plans{grid-template-columns:1fr}}
.plans-3{grid-template-columns:repeat(3,1fr);max-width:1180px}
@media(max-width:960px){.plans-3{grid-template-columns:1fr}}
.plan-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.plan-card.premium{border:2px solid var(--butter);background:linear-gradient(180deg,var(--card) 0%,var(--butter-soft) 220%);position:relative}
.plan-badge{
  align-self:flex-start;font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:999px;
  margin-bottom:14px;
}
.plan-badge.free{background:var(--sage-soft);color:#3E6B47}
.plan-badge.premium{background:var(--butter);color:var(--ink)}
.plan-card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.02em;margin-bottom:6px}
.plan-sub{color:var(--muted);font-size:.95rem;margin-bottom:18px;min-height:2.8em}
.plan-price{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan-price-big{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:2.6rem;letter-spacing:-.03em;color:var(--ink);line-height:1;
}
.plan-price-sub{color:var(--muted);font-size:.92rem;font-weight:500}
.plan-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.plan-list li{position:relative;padding-left:26px;font-size:.94rem;color:var(--ink);line-height:1.45}
.plan-list li strong{font-weight:600}
.plan-list li::before{
  content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--sage-soft);
}
.plan-list li::after{
  content:"";position:absolute;left:5px;top:6.5px;width:6px;height:3px;
  border-left:2px solid #3E6B47;border-bottom:2px solid #3E6B47;transform:rotate(-45deg);
}
.premium .plan-list li::before{background:var(--butter)}
.premium .plan-list li::after{border-color:#7A5A0F}
.plan-note{font-size:.85rem;color:var(--muted);margin-top:12px;padding-top:10px}
.plan-cta{margin-top:auto;text-align:center;margin-bottom:8px}

/* Przelacznik miesiac/rok na karcie subskrypcji */
.plan-toggle{display:inline-flex;padding:3px;background:var(--cream);border:1px solid var(--line);border-radius:999px;margin-bottom:18px;align-self:flex-start}
.plan-toggle-btn{
  border:none;background:transparent;cursor:pointer;padding:7px 14px;border-radius:999px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.82rem;color:var(--muted);
  transition:background .15s,color .15s;
}
.plan-toggle-btn.active{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.plan-sub-card .plan-price-big{font-size:2.3rem}

/* ===== FAQ ===== */
.faq-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;
  max-width:920px;margin:0 auto;
}
.faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 22px;transition:border-color .2s;
}
.faq-item:hover{border-color:var(--sage)}
.faq-item[open]{border-color:var(--sage);background:var(--sage-soft)}
.faq-item summary{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1rem;
  color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:1.6rem;font-weight:400;color:var(--muted);line-height:1;transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:12px;color:var(--muted);font-size:.94rem;line-height:1.6}

/* ===== TABLICA (template-tablica.php) ===== */
body.langle-board-page{overflow:hidden;background:var(--cream)}
.lb-app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ===== Blok "za maly ekran" - zastepuje cala tablice na telefonach ===== */
.lb-mobile-block{
  display:none;
  min-height:100vh;min-height:100dvh;
  align-items:center;justify-content:center;
  padding:32px 24px;background:var(--cream);
}
.lb-mobile-block-inner{max-width:380px;text-align:center}
.lb-mobile-icon{
  width:88px;height:88px;border-radius:24px;background:var(--sage-soft);
  display:flex;align-items:center;justify-content:center;color:#3F7A49;
  margin:0 auto 24px;
}
.lb-mobile-block h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--ink);letter-spacing:-.01em;margin:0 0 14px;line-height:1.25;
}
.lb-mobile-block p{
  font-size:.95rem;color:var(--muted);line-height:1.6;margin:0 0 14px;
}
.lb-mobile-hint{font-weight:600;color:var(--ink)!important}
.lb-mobile-block .btn{margin-top:8px;padding:13px 28px}

/* Przelaczenie widocznosci: ponizej 760px pokazuj TYLKO komunikat,
   ukryj cala aplikacje tablicy (unika wszelkich problemow z rozjezdzajacym
   sie interfejsem, bo skomplikowany toolbar + widgety po prostu sie nie renderuja) */
@media(max-width:759px){
  .lb-mobile-block{display:flex}
  .lb-app{display:none}
}
.lb-topbar{
  display:flex;align-items:center;gap:16px;
  padding:10px clamp(14px,2.5vw,26px);
  background:rgba(251,249,244,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);flex:none;
}
.lb-title{
  flex:1;min-width:0;font:600 1rem 'Bricolage Grotesque',sans-serif;color:var(--ink);
  background:transparent;border:1.5px solid transparent;border-radius:10px;padding:8px 12px;
  transition:border-color .15s,background .15s;
}
.lb-title:hover{border-color:var(--line)}
.lb-title:focus{outline:none;border-color:var(--sage);background:var(--card)}
.lb-topbar-right{display:flex;align-items:center;gap:14px;flex:none}
.lb-free-note{font-size:.8rem;color:var(--muted);font-weight:500}
@media(max-width:640px){.lb-free-note{display:none}}
.lb-topbar .btn{padding:10px 20px;font-size:.9rem}

/* ===== WIDOK UCZNIA: ograniczony pasek narzedzi ===========================
   Uczen dolaczajacy przez link wspolny (nie nauczyciel) widzi tylko to, co
   potrzebne zeby aktywnie uczestniczyc w lekcji - pisac, rysowac, zaznaczac.
   Narzedzia do PROWADZENIA lekcji (materialy, widgety klasowe, struktura
   stron, zapis/zakonczenie) zostaja wylacznie dla nauczyciela.
   Klasa .lb-student-view jest dodawana do <body> w startCollab() gdy
   isTeacher=false, wiec przelacza sie automatycznie w momencie dolaczenia. */

/* Narzedzie tabel - tworzenie nowych tabel to raczej przygotowanie
   materialu niz uczestniczenie w lekcji na biezaco */
body.lb-student-view [data-tool="table"]{display:none!important}

/* Pieczatki (gwiazdka/check/x itd.) - to narzedzie nauczyciela do oceniania,
   nie ma sensu zeby uczen sam sobie stawial oceny */
body.lb-student-view #lbStamps{display:none!important}

/* Dodawanie materialow (obraz/link/wideo/PDF) - nauczyciel przygotowuje
   i kontroluje tresc lekcji, uczen nie powinien wstawiac wlasnych plikow */
body.lb-student-view #lbAddImage,
body.lb-student-view #lbAddLink,
body.lb-student-view #lbAddVideo,
body.lb-student-view #lbAddPdf{display:none!important}

/* Widgety "prowadzenia klasy" - minutnik, losowanie ucznia, kostka, small
   talk sluza NAUCZYCIELOWI do zarzadzania przebiegiem lekcji */
body.lb-student-view #lbToggleTimer,
body.lb-student-view #lbTogglePicker,
body.lb-student-view #lbToggleDice,
body.lb-student-view #lbToggleSmalltalk{display:none!important}

/* Czyszczenie calej tablicy - zbyt destrukcyjne dla ucznia (moglby
   przypadkiem skasowac cala prace nauczyciela) */
body.lb-student-view #lbClear{display:none!important}

/* Struktura lekcji: tlo strony, dodawanie/duplikowanie stron - to nauczyciel
   projektuje uklad lekcji. Uczen nadal moze przelaczac miedzy istniejacymi
   stronami strzalkami (lbPagePrev/lbPageNext zostaja widoczne) */
body.lb-student-view #lbBgPicker,
body.lb-student-view #lbPageAdd,
body.lb-student-view #lbPageDup,
body.lb-student-view #lbPageBgClear{display:none!important}

/* Akcje administracyjne w gornym pasku: zapraszanie kolejnych osob, zapis
   do historii, lista "Moje lekcje" i konczenie lekcji naleza wylacznie do
   wlasciciela pokoju (nauczyciela) - te przyciski renderuja sie zawsze w
   PHP bez sprawdzania roli, wiec bez tego uczen by je widzial i mogl kliknac */
body.lb-student-view #lbInviteBtn,
body.lb-student-view #lbQuickSave,
body.lb-student-view #lbMyLessons,
body.lb-student-view #lbFinish,
body.lb-student-view #lbToggleParticipants,
body.lb-student-view #lbTopbarPremiumCta{display:none!important}

.lb-toolbar{
  display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;flex:none;
  padding:6px clamp(10px,1.5vw,20px);
  background:var(--card);border-bottom:1px solid var(--line);
}
.lb-tool{
  width:35px;height:35px;border-radius:10px;border:1.5px solid transparent;
  background:transparent;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  flex:none;
}
.lb-tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-tool:hover{background:var(--cream);color:var(--ink)}
.lb-tool.active{background:var(--sage-soft);border-color:var(--sage);color:#3F7A49}
/* Highlighter zawsze rysuje neonowym rozem, wiec przycisk tez to sygnalizuje -
   nawet nieaktywny ma delikatny rozowy akcent, a aktywny wyrazny rozowy */
.lb-tool-marker{color:#FF2E9B}
.lb-tool-marker.active{background:#FFE3F2;border-color:#FF2E9B;color:#FF2E9B}
.lb-sep{width:1px;height:22px;background:var(--line);margin:0 2px;flex:none}
.lb-swatches{display:flex;gap:5px;align-items:center}
.lb-swatch{
  width:21px;height:21px;border-radius:50%;border:2px solid var(--card);cursor:pointer;
  box-shadow:0 0 0 1.5px var(--line);transition:transform .12s,box-shadow .12s;padding:0;
  flex:none;
}
.lb-swatch.active{box-shadow:0 0 0 2px var(--ink);transform:scale(1.12)}
.lb-swatch-custom{position:relative;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);overflow:hidden;display:inline-block}
.lb-swatch-custom input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
.lb-sizes{display:flex;gap:4px;align-items:center}
.lb-size{
  width:26px;height:26px;border-radius:8px;border:1.5px solid transparent;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex:none;
}
.lb-size span{display:block;border-radius:50%;background:var(--muted)}
.lb-size.active{background:var(--sage-soft);border-color:var(--sage)}
.lb-size.active span{background:#3F7A49}
.lb-stamps{display:flex;gap:2px}
.lb-stamp{
  width:32px;height:32px;border-radius:10px;border:1.5px solid transparent;background:transparent;
  cursor:pointer;font-size:.98rem;display:flex;align-items:center;justify-content:center;transition:all .15s;
  flex:none;
}
.lb-stamp:hover{background:var(--cream)}
.lb-stamp.active{background:var(--butter-soft);border-color:var(--butter)}

/* Uniwersalna regula: [hidden] MUSI byc niewidoczne bez wzgledu na CSS elementu */
[hidden]{display:none !important}

.lb-stage{
  position:relative;flex:1;min-height:0;margin:12px clamp(14px,2.5vw,26px);
  background:#E7E3DA;border-radius:18px;
  overflow:auto;padding:24px 16px;
  display:flex;justify-content:safe center;align-items:flex-start;
}
.lb-paper-outer{
  flex:none;position:relative;margin:0 auto;
  /* Default = 100% skala kartki; JS aktualizuje wg zoom */
  width:794px;height:1123px;
}
.lb-paper{
  position:absolute;top:0;left:0;width:794px;height:1123px;
  background:#FFFDF9;border-radius:4px;
  box-shadow:0 12px 34px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.06);
  background-image:linear-gradient(to bottom, transparent 31px, rgba(143,184,222,.32) 32px, transparent 32px);
  background-size:100% 32px;
  background-position:0 68px;
  transform-origin:top left;
}
/* Warianty tla kartki (Jamboard: dots/grid/blank) - przelaczane przyciskiem w toolbarze */
.lb-paper.bg-blank{background-image:none}
.lb-paper.bg-dots{
  background-image:radial-gradient(circle, rgba(143,184,222,.45) 1.3px, transparent 1.3px);
  background-size:24px 24px;
  background-position:12px 68px;
}
.lb-paper.bg-grid{
  background-image:
    linear-gradient(to right, rgba(143,184,222,.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,184,222,.28) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:0 60px;
}
.lb-paper::before{
  content:"";position:absolute;left:0;right:0;top:0;height:60px;
  border-bottom:1.5px solid rgba(242,164,141,.65);
  background:linear-gradient(180deg, rgba(251,249,244,.9), transparent);
  z-index:0;pointer-events:none;
}
.lb-paper::after{
  content:"";position:absolute;left:56px;top:0;bottom:0;width:1px;
  background:rgba(242,164,141,.4);
  z-index:0;pointer-events:none;
}
#lbCanvas{position:absolute;inset:0;touch-action:none;cursor:crosshair;z-index:2}
#lbLiveCanvas{position:absolute;inset:0;pointer-events:none;z-index:3}
#lbLaserCanvas{position:absolute;inset:0;pointer-events:none;z-index:5}
/* Warstwa elementow ZAWSZE nad canvasem (nie tylko w trybie "kursor") - dzieki
   temu klikniecie na istniejacy element (karteczke, obraz, tabele...) zawsze
   trafia w niego, niezaleznie od tego jakie narzedzie jest akurat aktywne.
   Puste miejsca miedzy elementami (kontener ma pointer-events:none) przepuszczaja
   klik do canvasu ponizej, wiec rysowanie piórem dalej dziala normalnie. */
.lb-items{position:absolute;inset:0;pointer-events:none;z-index:3}
.lb-page-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:4px;pointer-events:none}

/* Kontrolki zoom - poziomy pasek w prawym dolnym rogu, ponad panelem picker
   (ktory jest wyzej top:400+), z dala od paska hint na samym dole */
.lb-zoom{
  position:fixed;right:16px;bottom:16px;z-index:58;
  display:inline-flex;align-items:center;gap:2px;padding:4px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.lb-zoom-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.lb-zoom button{
  border:none;background:transparent;cursor:pointer;
  min-width:34px;height:32px;border-radius:999px;padding:0 8px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.8rem;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.lb-zoom button:hover{background:var(--cream)}
.lb-zoom button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#lbZoomLabel{min-width:44px;padding:0 4px}
.lb-item{position:absolute;pointer-events:auto;cursor:grab;user-select:none}
.lb-item.dragging{cursor:grabbing;opacity:.85}
.lb-item-selected{outline:2px solid var(--sage);outline-offset:3px;border-radius:3px}
.lb-item-del{
  position:absolute;top:-11px;right:-11px;width:22px;height:22px;border-radius:50%;
  border:none;background:var(--ink);color:var(--cream);font-size:.65rem;cursor:pointer;
  opacity:0;transition:opacity .15s;z-index:2;pointer-events:auto;
}
.lb-item:hover .lb-item-del,.lb-item-selected .lb-item-del{opacity:1}

/* Warstwy: dwa male przyciski nad przyciskiem usuwania, tylko na hover */
.lb-item-layer{
  position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--card);color:var(--muted);
  font-size:.6rem;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s;
  z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:auto;
}
.lb-item:hover .lb-item-layer,.lb-item-selected .lb-item-layer{opacity:1}
.lb-item-layer:hover{background:var(--sage-soft);color:#3F7A49;border-color:var(--sage)}
.lb-item-front{right:16px}
.lb-item-back{right:40px}

/* Uchwyt zmiany rozmiaru w prawym dolnym rogu elementu */
.lb-item-resize{
  position:absolute;bottom:-8px;right:-8px;width:18px;height:18px;
  border:1.5px solid var(--sage);background:var(--card);
  border-radius:4px;cursor:se-resize;padding:0;
  opacity:0;transition:opacity .15s,transform .15s;
  pointer-events:auto;z-index:3;
}
.lb-item-resize::after{
  content:"";position:absolute;bottom:3px;right:3px;
  width:8px;height:8px;
  background:
    linear-gradient(135deg, transparent 45%, var(--sage) 45%, var(--sage) 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, var(--sage) 70%, var(--sage) 80%, transparent 80%);
}
.lb-item:hover .lb-item-resize,.lb-item-selected .lb-item-resize{opacity:1}
.lb-item-resize:hover{transform:scale(1.15)}
/* Elementy dopasowuja zawartosc do kontenera */
.lb-item-image img{display:block;max-width:none}
.lb-item-video iframe{display:block;border:0;border-radius:8px}
.lb-item-video{overflow:hidden;border-radius:8px}

.lb-item-text{min-width:140px}

/* ===== Karteczki samoprzylepne ===== */
.lb-item-sticky{
  border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
  padding:12px 10px;box-sizing:border-box;
  transform:rotate(-0.6deg);
  transition:transform .15s;
}
.lb-item-sticky:hover{transform:rotate(0deg) scale(1.02)}
.lb-sticky-text{
  width:100%;height:100%;outline:none;overflow-y:auto;
  font:400 14px/1.4 'Inter',sans-serif;color:#22302A;cursor:text;
}
.lb-sticky-text:empty:before{content:attr(data-placeholder);color:rgba(34,48,42,.4)}
.lb-text-edit{
  min-width:140px;min-height:34px;padding:6px 10px;border-radius:10px;
  border:1.5px dashed transparent;font:400 16px/1.4 'Inter',sans-serif;outline:none;cursor:text;
}
.lb-text-edit:hover{border-color:var(--line)}
.lb-text-edit:focus{border-color:var(--sage);background:rgba(251,249,244,.7)}
.lb-text-edit:empty::before{content:attr(data-placeholder);color:var(--muted)}
.lb-item-image img{border-radius:10px;box-shadow:0 6px 18px rgba(34,48,42,.14);display:block}
.lb-stamp-glyph{font-size:2.1rem;line-height:1;display:block}
.lb-item-link a{
  display:inline-block;background:var(--sky-soft);color:#48719C;font-weight:600;font-size:.85rem;
  padding:9px 15px;border-radius:11px;text-decoration:none;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-item-video iframe{border:none;border-radius:12px;box-shadow:0 8px 22px rgba(34,48,42,.18);display:block}
.lb-hint{
  flex:none;text-align:center;font-size:.78rem;color:var(--muted);
  padding:0 16px 10px;
}

/* Modale tablicy */
.lb-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(34,48,42,.45);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.lb-overlay:not(.open){visibility:hidden}
.lb-overlay.open{opacity:1;pointer-events:auto;visibility:visible}
.lb-modal{
  position:relative;background:var(--cream);border-radius:24px;width:100%;max-width:560px;
  max-height:92vh;overflow-y:auto;padding:30px clamp(20px,4vw,34px);
  box-shadow:0 30px 70px rgba(34,48,42,.3);
  transform:translateY(14px) scale(.98);transition:transform .22s;
}
.lb-overlay.open .lb-modal{transform:none}
.lb-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--card);cursor:pointer;color:var(--muted);
  font-size:.85rem;transition:all .15s;
}
.lb-close:hover{border-color:var(--peach);color:var(--ink)}
.lb-modal-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.35rem;
  letter-spacing:-.02em;line-height:1.2;margin:6px 0 8px;
}
.lb-modal-sub{color:var(--muted);font-size:.95rem;margin-bottom:20px}
.lb-finish-grid{display:flex;flex-direction:column;gap:10px}
.lb-finish-opt{
  display:flex;gap:14px;align-items:flex-start;
  text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:16px 18px;cursor:pointer;transition:all .15s;font-family:inherit;width:100%;
}
.lb-finish-opt:hover{border-color:var(--sage);transform:translateY(-1px);box-shadow:var(--shadow)}
.lb-finish-ico{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.lb-finish-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-finish-ico.sage{background:var(--sage-soft);color:#3F7A49}
.lb-finish-ico.butter{background:var(--butter-soft);color:#A87F14}
.lb-finish-ico.peach{background:var(--peach-soft);color:#C2664A}
.lb-finish-ico.sky{background:var(--sky-soft);color:#48719C}
.lb-finish-body{flex:1;min-width:0}
.lb-finish-opt strong{
  display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.02rem;
  color:var(--ink);margin-bottom:3px;letter-spacing:-.01em;
}
.lb-finish-opt span{font-size:.88rem;color:var(--muted);line-height:1.5}
.lb-notes{
  width:100%;font:400 .92rem/1.55 'Inter',sans-serif;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px;
  resize:vertical;margin-bottom:16px;
}
.lb-notes:focus{outline:none;border-color:var(--sage)}
.lb-modal-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lb-form{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.lb-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
.lb-form input,.lb-form textarea{
  font:400 .95rem 'Inter',sans-serif;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;
}
.lb-form input:focus,.lb-form textarea:focus{outline:none;border-color:var(--sage)}
.lb-send-status{font-size:.88rem;font-weight:600;color:var(--muted)}

/* ===== Moje lekcje / zapis serwerowy ===== */
.lb-top-btn{padding:9px 16px;font-size:.85rem}
.lb-login-link{font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none}
.lb-login-link:hover{color:var(--ink);text-decoration:underline}
.lb-lessons{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow-y:auto}
.lb-lesson-row{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;
}
.lb-lesson-thumb{
  flex:none;width:74px;height:48px;border-radius:9px;background:var(--cream) center/cover no-repeat;
  border:1px solid var(--line);
}
.lb-lesson-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-lesson-meta strong{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-lesson-meta span{font-size:.78rem;color:var(--muted)}
.lb-lesson-open{padding:8px 16px;font-size:.82rem;flex:none}
.lb-lesson-del{
  flex:none;border:none;background:transparent;color:var(--muted);font-size:.8rem;font-weight:600;
  cursor:pointer;padding:6px 8px;border-radius:8px;transition:all .15s;font-family:inherit;
}
.lb-lesson-del:hover{background:var(--peach-soft);color:#A0432A}


/* Elementy tablicy sa zawsze przeciagalne i klikalne (patrz .lb-item powyzej) -
   nie trzeba juz przelaczac osobnego "trybu kursora" zeby przesunac karteczke
   czy obraz, dokladnie jak w innych popularnych narzedziach do notatek/tablic. */

/* ===== Tabela ===== */
.lb-item-table{min-width:200px}
.lb-table{
  border-collapse:collapse;
  background:#fff;
  box-shadow:0 4px 14px rgba(34,48,42,.12);
  border-radius:10px;
  overflow:hidden;
  font-family:'Inter',sans-serif;
}
.lb-table td{
  border:1px solid var(--line);
  padding:9px 13px;
  min-width:64px;
  min-height:32px;
  font-size:.92rem;
  color:var(--ink);
  vertical-align:top;
  outline:none;
  cursor:text;
}
.lb-table td:focus{background:var(--sage-soft);box-shadow:inset 0 0 0 2px var(--sage)}
.lb-table tr:first-child td{background:var(--cream);font-weight:600}

/* ===== Wspoldzielenie: badge, panel uczestnikow, modale ===== */
.lb-collab-badge{
  display:none;padding:5px 12px;background:var(--sage-soft);color:#3E6B47;
  border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;
}
.lb-collab-badge.active{display:inline-flex;align-items:center}
.lb-collab-badge.warn{background:var(--peach-soft);color:#A0432A}

.lb-participants-panel{
  display:none;position:fixed;top:216px;left:16px;z-index:50;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;width:300px;box-shadow:var(--shadow);
}
.lb-participants-panel.active{display:block}
.lb-participants-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lb-participants-panel h4{
  font:800 .8rem 'Bricolage Grotesque',sans-serif;color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;margin:0;
}
.lb-participant{
  display:flex;flex-direction:column;gap:6px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:.88rem;
}
.lb-participant:last-child{border-bottom:none}
.lb-participant-top{display:flex;align-items:center;gap:8px}
.lb-participant-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.lb-participant-name{flex:1;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lb-participant-status{font-size:.74rem;color:var(--muted);flex:none}
.lb-participant.blocked .lb-participant-name{color:var(--muted);text-decoration:line-through}
.lb-participant-kick{
  background:transparent;border:none;color:#A0432A;cursor:pointer;
  font:600 .76rem 'Inter',sans-serif;padding:5px 10px;border-radius:8px;flex:none;
  transition:background .15s;
}
.lb-participant-kick:hover{background:var(--peach-soft)}
.lb-participant-empty{font-size:.85rem;color:var(--muted);margin:4px 0 0;line-height:1.5}

.lb-invite-link{
  width:100%;padding:12px 14px;background:var(--cream);border:1.5px solid var(--line);
  border-radius:12px;font:600 .88rem/1.4 'Fira Mono',ui-monospace,monospace;
  color:var(--ink);margin-bottom:18px;word-break:break-all;
}
.lb-invite-link:focus{outline:none;border-color:var(--sage)}

@media(max-width:760px){
  .lb-participants-panel{position:static;width:auto;margin:0 clamp(14px,2.5vw,26px) 12px}
}

/* Notka w modalu zaproszenia */
.lb-modal-note{
  margin-top:14px;padding:11px 14px;background:var(--sky-soft, #E7F0FA);color:#2C4F6E;
  border-radius:10px;font-size:.82rem;line-height:1.5;
}

/* Paywall modal - customer-friendly Premium prompt */
.lb-modal-pay{text-align:center}
.lb-pay-badge{
  display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#A87F14;
  background:var(--butter-soft);padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.lb-pay-features{
  list-style:none;text-align:left;max-width:380px;margin:20px auto 24px;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.lb-pay-features li{
  display:flex;align-items:flex-start;gap:12px;font-size:.95rem;color:var(--ink);line-height:1.5;
}
.lb-pay-features li span{
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--sage-soft);
  color:#3F7A49;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;
}
.lb-pay-price{
  background:var(--cream);border-radius:14px;padding:18px 24px;margin:0 0 22px;
  display:inline-flex;align-items:baseline;gap:10px;
}
.lb-pay-price-big{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:2.4rem;letter-spacing:-.03em;color:var(--ink);line-height:1;
}
.lb-pay-price-sub{color:var(--muted);font-size:.9rem;font-weight:500}
.lb-pay-guarantee{font-size:.83rem;color:var(--muted);margin-top:18px;max-width:460px;margin-left:auto;margin-right:auto}

/* Paywall - dwie karty wariantow (Lifetime / Subskrypcja) */
.lb-modal-pay-wide{max-width:680px}
.lb-pay-features-shared{max-width:460px}
.lb-pay-plans{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;text-align:left;
}
.lb-pay-plan{
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.lb-pay-plan h4{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.1rem;
  letter-spacing:-.01em;margin:2px 0 0;
}
.lb-pay-plan-badge{
  display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#A87F14;
  background:var(--butter-soft);padding:4px 10px;border-radius:999px;
}
.lb-pay-plan-badge-alt{color:#3F7A49;background:var(--sage-soft)}
.lb-pay-plan .lb-pay-price{
  background:transparent;padding:6px 0 4px;margin:2px 0;display:flex;align-items:baseline;gap:8px;
}
.lb-pay-plan .lb-pay-price-big{font-size:1.7rem}
.lb-pay-plan .btn{width:100%;justify-content:center;margin-top:4px}
.lb-pay-toggle{
  display:inline-flex;background:var(--cream);border-radius:999px;padding:3px;gap:2px;
}
.lb-pay-toggle-btn{
  border:none;background:transparent;padding:6px 12px;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;
}
.lb-pay-toggle-btn.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(34,48,42,.12)}
.lb-pay-plan.plan-sold-out{opacity:.6}
@media(max-width:640px){
  .lb-pay-plans{grid-template-columns:1fr}
}

/* Klodka na opcjach Finish dla free */
.lb-finish-lock{display:none}
.lb-finish-locked .lb-finish-lock{
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:14px;right:14px;
  width:24px;height:24px;background:var(--butter-soft);color:#A87F14;
  border-radius:50%;font-size:.8rem;
}
.lb-finish-locked .lb-finish-opt{position:relative}
.lb-finish-locked .lb-finish-opt:hover .lb-finish-lock{
  background:var(--butter);color:var(--ink);
}

/* ===== Nawigacja stron (multi-page PDF) ===== */
.lb-pages{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:10;
  display:inline-flex;align-items:center;gap:2px;padding:4px 6px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.lb-pages button{
  border:none;background:transparent;cursor:pointer;padding:6px 10px;border-radius:999px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.85rem;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
}
.lb-pages button:hover{background:var(--cream)}
.lb-pages button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lb-pages span{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.85rem;color:var(--muted);padding:0 8px}
.lb-pages-nav{display:none;align-items:center} /* JS wlacza inline-flex od 2 stron */
.lb-pages-sep{width:1px;height:18px;background:var(--line);margin:0 2px}
.lb-bg-picker{display:inline-flex;gap:2px;padding:2px;background:var(--cream);border-radius:999px}
.lb-bg-picker button{
  padding:5px 9px;font-size:.85rem;min-width:30px;
}
.lb-bg-picker button.active{background:var(--sage);color:#fff}

/* ===== TIMER (minutnik z klepsydra) - fixed, draggable ===== */
.lb-timer{
  position:fixed;top:216px;right:16px;z-index:55;
  width:230px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:0 16px 14px;box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.lb-timer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 8px;cursor:grab;user-select:none;
}
.lb-timer-header:active{cursor:grabbing}
.lb-timer-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.9rem;
  color:var(--ink);letter-spacing:-.01em;
}
.lb-timer-close{
  width:26px;height:26px;border:none;background:transparent;cursor:pointer;
  border-radius:50%;color:var(--muted);font-size:.85rem;
}
.lb-timer-close:hover{background:var(--cream);color:var(--ink)}
.lb-timer-display{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lb-hourglass{width:56px;height:78px;flex:none}
.lb-timer-text{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.8rem;
  color:var(--ink);letter-spacing:-.02em;line-height:1;
}
.lb-timer-presets{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.lb-timer-presets button{
  flex:1;min-width:44px;
  border:1.5px solid var(--line);background:var(--cream);cursor:pointer;
  padding:6px 4px;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--muted);
  font-family:'Bricolage Grotesque',sans-serif;transition:all .15s;
}
.lb-timer-presets button:hover{border-color:var(--sage);color:var(--ink)}
.lb-timer-presets button.active{background:var(--sage);color:#fff;border-color:var(--sage)}
.lb-timer-controls{display:flex;gap:6px}
.lb-timer-controls button{flex:1;padding:8px 12px;font-size:.85rem}

/* Kompaktowy badge pokazuje pozostaly czas nawet gdy widget zamkniety */
.lb-timer-badge{
  position:fixed;top:216px;right:16px;z-index:56;
  padding:10px 18px;border:none;cursor:pointer;
  background:rgba(34,48,42,.95);color:var(--cream);
  border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.2);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.15rem;
  letter-spacing:-.02em;display:inline-flex;align-items:center;gap:8px;
  animation:fade-in-up .3s ease both;
}
.lb-timer-badge::before{content:"⏳";font-size:1.1rem}
.lb-timer-badge:hover{transform:translateY(-2px);background:rgba(34,48,42,1)}
.lb-timer-badge.done{background:var(--peach);color:#22302A;animation:pulse-timer 1s ease infinite}
@keyframes fade-in-up{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes pulse-timer{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* Widget - dyskretne wskazanie ze leci */
.lb-timer.running .lb-timer-title::after{content:" ⏱";color:var(--sage)}

/* ===== SLOWNIK - fixed, draggable ===== */
.lb-dict{
  position:fixed;bottom:70px;left:16px;z-index:55;
  width:320px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  display:flex;flex-direction:column;
}
.lb-dict-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line);
  cursor:grab;user-select:none;
}
.lb-dict-head:active{cursor:grabbing}
.lb-dict-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.9rem;
  color:var(--ink);letter-spacing:-.01em;
}
.lb-dict-close{
  width:26px;height:26px;border:none;background:transparent;cursor:pointer;
  border-radius:50%;color:var(--muted);font-size:.85rem;
}
.lb-dict-close:hover{background:var(--cream);color:var(--ink)}
.lb-dict-langs{
  display:flex;gap:6px;align-items:center;padding:10px 14px 0;
}
.lb-dict-langs select{
  flex:1;padding:6px 8px;border:1.5px solid var(--line);border-radius:8px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.85rem;
  background:var(--cream);color:var(--ink);cursor:pointer;
}
#lbDictSwap{
  border:none;background:var(--cream);cursor:pointer;padding:6px 10px;
  border-radius:8px;font-size:1rem;color:var(--sage);
}
#lbDictSwap:hover{background:var(--sage-soft)}
.lb-dict-input-wrap{
  display:flex;gap:6px;padding:10px 14px;
}
.lb-dict-input-wrap input{
  flex:1 1 auto;min-width:0;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;
  font:400 .9rem 'Inter',sans-serif;outline:none;
  box-sizing:border-box;
}
.lb-dict-input-wrap input:focus{border-color:var(--sage)}
.lb-dict-input-wrap .btn{flex:none;padding:8px 14px;font-size:.85rem;white-space:nowrap}
.lb-dict-result{
  padding:0 14px 12px;font-size:.9rem;line-height:1.5;color:var(--ink);
  max-height:280px;overflow-y:auto;
}
.lb-dict-loading{color:var(--muted);font-style:italic;padding:8px 0}
.lb-dict-word{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin:4px 0}
.lb-dict-src{
  display:inline-block;font-size:.7rem;padding:2px 6px;border-radius:4px;
  background:var(--sky-soft);color:#48719C;font-weight:700;margin-right:4px;letter-spacing:.05em;
}
.lb-dict-arrow{color:var(--muted);font-size:.85rem;margin:4px 0}
.lb-dict-trans{
  background:var(--sage-soft);color:#2C5B35;font-weight:700;font-size:1.1rem;
  padding:10px 14px;border-radius:10px;margin:6px 0 10px;
  font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;
}
.lb-dict-def{margin:6px 0;font-size:.85rem;color:#4A574F}
.lb-dict-def strong{color:var(--ink)}
.lb-dict-ex{margin:6px 0 8px;font-size:.85rem;color:var(--ink);line-height:1.5}
.lb-dict-ex strong{color:var(--muted);font-weight:600;font-size:.78rem}
.lb-dict-ex-trans{color:var(--muted);font-style:italic}
.lb-dict-noex{margin:6px 0 8px;font-size:.8rem;color:var(--muted);font-style:italic}
.lb-dict-add{
  display:block;width:100%;margin-top:8px;padding:8px 12px;border:1.5px dashed var(--sage);
  background:var(--sage-soft);color:#2C5B35;border-radius:8px;cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.85rem;
  transition:all .15s;
}
.lb-dict-add:hover{background:var(--sage);color:#fff;border-style:solid}
.lb-dict-history-toggle{padding:8px 14px 12px;border-top:1px solid var(--line)}
.lb-dict-history-toggle button{
  width:100%;padding:8px 12px;border:none;background:var(--cream);
  border-radius:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:.82rem;color:var(--muted);cursor:pointer;transition:all .15s;
}
.lb-dict-history-toggle button:hover{background:var(--sage-soft);color:#2C5B35}
.lb-dict-vocab-title{font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:6px}
.lb-dict-vocab-text{
  width:100%;min-height:180px;padding:10px;border:1px solid var(--line);
  border-radius:8px;font:400 .78rem/1.5 'Courier New',monospace;color:var(--ink);
  resize:vertical;
}

/* ===== DEMO SECTION - przykladowa lekcja na home ===== */
.demo-annotation{
  position:absolute;right:0;top:2px;
  font-size:2rem;color:#8A3B24;font-weight:700;line-height:1;
  font-family:'Bricolage Grotesque',sans-serif;
}

/* ===== Text-to-speech button na elementach tekstowych ===== */
.lb-item-speak{
  position:absolute;top:-8px;right:24px;
  width:28px;height:24px;border:1.5px solid var(--sage);background:var(--card);
  border-radius:12px;cursor:pointer;padding:0;
  color:var(--sage);opacity:0;transition:opacity .15s,transform .15s;
  display:inline-flex;align-items:center;justify-content:center;
  pointer-events:auto;z-index:3;
}
.lb-item:hover .lb-item-speak,
.lb-item-speak:hover{opacity:1;transform:scale(1.05)}
.lb-item-speak:hover{background:var(--sage);color:#fff}

/* ===== Paleta znakow specjalnych (nad elementem tekstowym) ===== */
.lb-char-palette{
  position:absolute;bottom:calc(100% + 6px);left:0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  padding:6px;z-index:10;min-width:220px;
}
.lb-char-tabs{
  display:flex;gap:2px;margin-bottom:4px;
  border-bottom:1px solid var(--line);padding-bottom:4px;
}
.lb-char-tab{
  border:none;background:transparent;cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.7rem;
  padding:4px 8px;border-radius:6px;color:var(--muted);letter-spacing:.05em;
}
.lb-char-tab:hover{background:var(--cream)}
.lb-char-tab.active{background:var(--sage);color:#fff}
.lb-char-list{display:flex;flex-wrap:wrap;gap:2px}
.lb-char-btn{
  border:1px solid var(--line);background:var(--cream);cursor:pointer;
  width:28px;height:28px;border-radius:6px;padding:0;
  font:400 15px 'Inter',sans-serif;color:var(--ink);
}
.lb-char-btn:hover{background:var(--sage-soft);border-color:var(--sage)}

/* ===== Slownik speak button ===== */
.lb-dict-speak{
  margin-top:6px;padding:6px 12px;
  border:1.5px solid var(--sage-soft);background:transparent;color:var(--sage);
  border-radius:8px;cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.8rem;
  display:inline-flex;align-items:center;gap:6px;transition:all .15s;
}
.lb-dict-speak:hover{background:var(--sage);color:#fff;border-color:var(--sage)}

/* ===== Losowanie ucznia widget ===== */
.lb-picker{
  position:fixed;top:480px;right:16px;z-index:55;
  width:240px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:0 16px 14px;box-shadow:0 8px 24px rgba(0,0,0,.14);
}
/* Timer konczy sie na stalej pozycji ~453px (top:216 + wysokosc ~237px), wiec
   picker NIE MOZE zejsc nizej bez wzgledu na wysokosc ekranu - to jedyny
   bezpieczny wariant kompresji, ktory wciaz zostawia margines od timera. */
@media(max-height:850px){
  .lb-picker{top:468px;padding-bottom:8px}
  .lb-picker textarea{margin-bottom:4px;max-height:52px}
  .lb-picker-result{padding:8px 10px;margin-bottom:4px;font-size:1.2rem}
  .lb-picker-controls{margin-bottom:4px}
}
.lb-picker-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 8px;cursor:grab;user-select:none;
}
.lb-picker-header:active{cursor:grabbing}
.lb-picker-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink);
}
.lb-picker-label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:4px;font-weight:600}
.lb-picker textarea{
  width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;
  font:400 .85rem 'Inter',sans-serif;outline:none;resize:vertical;margin-bottom:8px;
}
.lb-picker textarea:focus{border-color:var(--sage)}
.lb-picker-result{
  background:var(--cream);border-radius:10px;padding:16px 12px;margin-bottom:10px;
  text-align:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--ink);letter-spacing:-.02em;min-height:24px;
  transition:all .2s;
}
.lb-picker-result.spinning{color:var(--sage);opacity:.6}
.lb-picker-result.chosen{background:var(--butter);animation:pulse-timer .5s ease}
.lb-picker-controls{display:flex;gap:6px;margin-bottom:8px}
.lb-picker-controls button{flex:1;padding:8px 12px;font-size:.85rem}
.lb-picker-opt{
  display:flex;align-items:flex-start;gap:6px;font-size:.75rem;color:var(--muted);
  cursor:pointer;
}
.lb-picker-opt input{margin-top:2px;flex:none}

/* ===== KOSTKA D6 - widget z animacja 3D ===== */
.lb-dice{
  position:fixed;top:480px;right:16px;z-index:55;
  width:200px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:0 16px 16px;box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.lb-dice-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 8px;cursor:grab;user-select:none;
}
.lb-dice-header:active{cursor:grabbing}
.lb-dice-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink)}
.lb-dice-stage{
  display:flex;align-items:center;justify-content:center;
  padding:20px 0;perspective:400px;
}
.lb-dice-cube{
  position:relative;width:64px;height:64px;transform-style:preserve-3d;
  transform:rotateX(0deg) rotateY(0deg);
}
.lb-dice-face{
  position:absolute;width:64px;height:64px;background:var(--card);
  border:2.5px solid var(--sage);border-radius:12px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:10px;box-sizing:border-box;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.lb-dice-face .pip{width:10px;height:10px;border-radius:50%;background:var(--sage);justify-self:center;align-self:center}
/* Pozycjonowanie oczek per scianka (klasyczny uklad kostki) */
.lb-dice-f1 .pip{grid-column:2;grid-row:2}
.lb-dice-f2 .pip:nth-child(1){grid-column:1;grid-row:1}
.lb-dice-f2 .pip:nth-child(2){grid-column:3;grid-row:3}
.lb-dice-f3 .pip:nth-child(1){grid-column:1;grid-row:1}
.lb-dice-f3 .pip:nth-child(2){grid-column:2;grid-row:2}
.lb-dice-f3 .pip:nth-child(3){grid-column:3;grid-row:3}
.lb-dice-f4 .pip:nth-child(1){grid-column:1;grid-row:1}
.lb-dice-f4 .pip:nth-child(2){grid-column:3;grid-row:1}
.lb-dice-f4 .pip:nth-child(3){grid-column:1;grid-row:3}
.lb-dice-f4 .pip:nth-child(4){grid-column:3;grid-row:3}
.lb-dice-f5 .pip:nth-child(1){grid-column:1;grid-row:1}
.lb-dice-f5 .pip:nth-child(2){grid-column:3;grid-row:1}
.lb-dice-f5 .pip:nth-child(3){grid-column:2;grid-row:2}
.lb-dice-f5 .pip:nth-child(4){grid-column:1;grid-row:3}
.lb-dice-f5 .pip:nth-child(5){grid-column:3;grid-row:3}
.lb-dice-f6 .pip:nth-child(1){grid-column:1;grid-row:1}
.lb-dice-f6 .pip:nth-child(2){grid-column:3;grid-row:1}
.lb-dice-f6 .pip:nth-child(3){grid-column:1;grid-row:2}
.lb-dice-f6 .pip:nth-child(4){grid-column:3;grid-row:2}
.lb-dice-f6 .pip:nth-child(5){grid-column:1;grid-row:3}
.lb-dice-f6 .pip:nth-child(6){grid-column:3;grid-row:3}
/* Ustawienie scianek w przestrzeni 3D (szescian o boku 64px, wiec translacja 32px) */
.lb-dice-f1{transform:translateZ(32px)}
.lb-dice-f6{transform:rotateY(180deg) translateZ(32px)}
.lb-dice-f3{transform:rotateY(90deg) translateZ(32px)}
.lb-dice-f4{transform:rotateY(-90deg) translateZ(32px)}
.lb-dice-f2{transform:rotateX(90deg) translateZ(32px)}
.lb-dice-f5{transform:rotateX(-90deg) translateZ(32px)}
#lbDiceRoll{width:100%;padding:10px 16px;font-size:.9rem}

/* ===== SMALL TALK - rozgrzewka ===== */
.lb-smalltalk{
  position:fixed;top:356px;left:16px;z-index:55;
  width:280px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:0 18px 16px;box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.lb-smalltalk-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 8px;cursor:grab;user-select:none;
}
.lb-smalltalk-header:active{cursor:grabbing}
.lb-smalltalk-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink)}
.lb-smalltalk-body{
  background:var(--cream);border-radius:12px;padding:16px;margin-bottom:12px;
  min-height:90px;display:flex;flex-direction:column;justify-content:center;
}
.lb-smalltalk-cat{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.72rem;
  color:var(--sage);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.lb-smalltalk-q{
  font-size:1rem;color:var(--ink);line-height:1.5;margin:0;
  transition:opacity .15s;
}
.lb-smalltalk-levels{display:flex;gap:4px;margin-bottom:10px}
.lb-smalltalk-levels button{
  flex:1;border:1.5px solid var(--line);background:var(--cream);cursor:pointer;
  padding:6px 4px;border-radius:8px;font-size:.72rem;font-weight:600;color:var(--muted);
  font-family:'Bricolage Grotesque',sans-serif;transition:all .15s;
}
.lb-smalltalk-levels button:hover{border-color:var(--sage);color:var(--ink)}
.lb-smalltalk-levels button.active{background:var(--sage);color:#fff;border-color:var(--sage)}
.lb-smalltalk-controls{display:flex;gap:6px}
.lb-smalltalk-controls button{flex:1;padding:9px 10px;font-size:.82rem}

/* Participants panel - dodatkowe zamkniecie */

/* Na waskich ekranach (<1350px) toolbar wraca do mniejszych ikon,
   zeby wszystkie narzedzia zmiescily sie w jednym rzedzie */
@media(max-width:1350px){
  .lb-tool{width:32px;height:32px;border-radius:9px}
  .lb-tool svg{width:16px;height:16px}
  .lb-stamp{width:30px;height:30px;border-radius:9px;font-size:.92rem}
  .lb-swatch{width:20px;height:20px}
  .lb-toolbar{gap:3px;padding:6px clamp(10px,1.5vw,20px)}
}
@media(max-width:1220px){
  .lb-tool{width:29px;height:29px;border-radius:8px}
  .lb-tool svg{width:15px;height:15px}
  .lb-stamp{width:27px;height:27px;font-size:.85rem}
  .lb-swatch{width:18px;height:18px}
  .lb-toolbar{gap:2px}
  .lb-sep{margin:0 1px}
}

/* ===== GALERIA ZRZUTOW EKRANU - bento mosaic z chrome-barem ===== */
.shots{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.shots-grid{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:row dense;
  gap:20px;max-width:1180px;margin:0 auto;
}
.shot-card{
  grid-column:span 3;
  background:var(--card);border:1.5px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:0 4px 16px rgba(34,48,42,.06);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,border-color .25s;
  display:flex;flex-direction:column;
  border-top-width:4px;
}
.shot-card.shot-lg{grid-column:span 4}
.shot-card.shot-sm{grid-column:span 2}

/* Kolorowa gorna krawedz + poswiata na hover, wg przypisanego akcentu */
.accent-sage{border-top-color:var(--sage)}
.accent-sage:hover{box-shadow:0 16px 36px -8px rgba(127,182,133,.35);border-color:var(--sage)}
.accent-peach{border-top-color:var(--peach)}
.accent-peach:hover{box-shadow:0 16px 36px -8px rgba(242,164,141,.4);border-color:var(--peach)}
.accent-butter{border-top-color:var(--butter)}
.accent-butter:hover{box-shadow:0 16px 36px -8px rgba(247,201,72,.4);border-color:var(--butter)}
.accent-sky{border-top-color:var(--sky)}
.accent-sky:hover{box-shadow:0 16px 36px -8px rgba(143,184,222,.4);border-color:var(--sky)}
.shot-card:hover{transform:translateY(-5px)}

/* Mini "chrome bar" nad kazdym zrzutem - jak pasek przegladarki, spina z brandingiem.
   Delikatny gradient w kolorze akcentu zamiast plaskiego kremowego tla. */
.shot-chrome{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.accent-sage .shot-chrome{background:linear-gradient(135deg,var(--sage-soft),var(--cream))}
.accent-peach .shot-chrome{background:linear-gradient(135deg,var(--peach-soft),var(--cream))}
.accent-butter .shot-chrome{background:linear-gradient(135deg,var(--butter-soft),var(--cream))}
.accent-sky .shot-chrome{background:linear-gradient(135deg,var(--sky-soft),var(--cream))}
.shot-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.accent-sage .shot-dot{background:var(--sage)}
.accent-peach .shot-dot{background:var(--peach)}
.accent-butter .shot-dot{background:var(--butter)}
.accent-sky .shot-dot{background:var(--sky)}
.shot-chrome-label{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.72rem;
  color:var(--ink);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.shot-frame{
  position:relative;background:var(--cream);
  aspect-ratio:16/10;overflow:hidden;flex:none;
}
.shot-lg .shot-frame{aspect-ratio:16/9}
.shot-frame img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .35s ease;
}
.shot-frame:hover img{transform:scale(1.04)}
/* Podpowiedz "klik zeby powiekszyc" na hover */
.shot-frame::after{
  content:"🔍 Powiększ";
  position:absolute;bottom:10px;right:10px;
  background:rgba(34,48,42,.82);color:#fff;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.72rem;
  padding:5px 11px;border-radius:999px;
  opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;
  pointer-events:none;
}
.shot-frame:hover::after{opacity:1;transform:none}

.shot-body{padding:16px 18px 20px;flex:1}
.shot-card h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1rem;
  color:var(--ink);margin:0 0 6px;letter-spacing:-.01em;
}
.shot-lg h3{font-size:1.15rem}
.shot-card p{
  font-size:.85rem;color:var(--muted);line-height:1.5;margin:0;
}
@media(max-width:900px){
  .shots-grid{grid-template-columns:repeat(2,1fr)}
  .shot-card,.shot-card.shot-lg,.shot-card.shot-sm{grid-column:span 1}
}
@media(max-width:560px){
  .shots-grid{grid-template-columns:1fr;gap:16px}
}

/* ===== LIGHTBOX - powiekszanie zrzutow ekranu ===== */
.shot-lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(34,48,42,.88);
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.shot-lightbox.open{opacity:1;pointer-events:auto}
.shot-lightbox img{
  max-width:min(92vw,1100px);max-height:88vh;
  border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  transform:scale(.94);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  display:block;
}
.shot-lightbox.open img{transform:scale(1)}
.shot-lightbox-close{
  position:fixed;top:24px;right:28px;z-index:201;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;backdrop-filter:blur(4px);
}
.shot-lightbox-close:hover{background:rgba(255,255,255,.22)}

/* ===== MOJE KONTO - awatar, logo, historia lekcji ===== */
.langle-account{max-width:640px;margin:24px 0;display:flex;flex-direction:column;gap:20px}
.langle-account-notice{
  padding:12px 16px;border-radius:10px;margin-bottom:4px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.9rem;
}
.langle-account-notice.ok{background:var(--sage-soft);color:#2C5B35}
.langle-account-notice.err{background:var(--peach-soft);color:#8A3B24}
.langle-account-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:24px;
}
.langle-account-card h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.1rem;
  color:var(--ink);margin:0 0 6px;letter-spacing:-.01em;
}
.langle-account-sub{font-size:.88rem;color:var(--muted);margin:0 0 18px;line-height:1.5}
.langle-account-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.langle-avatar-preview{
  flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;
  background:var(--cream);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.langle-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
.langle-logo-preview{
  flex:none;width:120px;height:72px;border-radius:12px;overflow:hidden;
  background:var(--cream);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:8px;
}
.langle-logo-preview img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.langle-logo-placeholder{font-size:.78rem;color:var(--muted);text-align:center}
.langle-account-form{flex:1;min-width:220px}
.langle-account-form input[type="file"]{
  display:block;margin-bottom:10px;font-size:.85rem;color:var(--muted);width:100%;
}
.langle-account-hint{font-size:.78rem;color:var(--muted);margin:0 0 12px}
.langle-account-actions{display:flex;gap:8px}
.langle-account-actions .btn{padding:9px 18px;font-size:.85rem}
.langle-account-locked{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--butter-soft);color:#7A5A00;padding:14px 16px;border-radius:12px;
  font-weight:600;font-size:.88rem;
}

/* Siatka historii lekcji */
.langle-lesson-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;
}
.langle-lesson-card{
  display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--cream);transition:transform .2s,box-shadow .2s;
}
.langle-lesson-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(34,48,42,.1)}
.langle-lesson-thumb{
  aspect-ratio:4/3;background:var(--card);background-size:cover;background-position:top center;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  border-bottom:1px solid var(--line);
}
.langle-lesson-info{padding:10px 12px}
.langle-lesson-info strong{
  display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.85rem;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.langle-lesson-info span{font-size:.75rem;color:var(--muted)}
@media(max-width:600px){
  .langle-account-row{flex-direction:column}
}

/* ===== WOOCOMMERCE - branding Langle na CALYM sklepie (koszyk, produkt, konto) =====
   Wczesniej style byly tylko na stronie checkout (przez inc/langle-checkout.php),
   dlatego przyciski na Koszyku i stronie produktu zostaly fioletowe (domyslny
   kolor motywu/WC). Te reguly ladują sie wszedzie, wiec obejmuja caly sklep. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .button,
.woocommerce-checkout .button{
	background:#7FB685 !important;color:#fff !important;
	border:none !important;border-radius:999px !important;
	font-family:'Bricolage Grotesque',sans-serif !important;font-weight:700 !important;
	padding:13px 26px !important;font-size:.95rem !important;
	box-shadow:none !important;text-shadow:none !important;
	transition:transform .15s,background .15s !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
	background:#6FA476 !important;transform:translateY(-1px);color:#fff !important;
}
.woocommerce .button.alt,
.woocommerce #place_order{
	background:#7FB685 !important;
}
/* Przyciski "wylaczone" (np. Zaktualizuj koszyk zanim cos zmienisz) - wyszarzone */
.woocommerce .button.disabled,
.woocommerce .button:disabled{
	background:#DCEBDD !important;color:#8FA893 !important;cursor:not-allowed;
}
/* Linki w kolorze marki zamiast domyslnego fioletu motywu */
.woocommerce a:not(.button){color:#3F7A49}
.woocommerce table.shop_table{border-radius:12px;overflow:hidden;border:1px solid #ECE7DC}
.woocommerce table.shop_table th{background:#FBF9F4;font-family:'Bricolage Grotesque',sans-serif}

/* ===== CHECKOUT: szerszy, jednokolumnowy uklad (zamiast cisnietych 2 kolumn) ===== */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details{
	width:100% !important;max-width:640px;margin:0 auto;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
	width:100% !important;float:none !important;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order-table{
	max-width:640px;margin:0 auto;
}

/* ===== NAWIGACJA "Moje konto" (Kokpit / Subskrypcje / Moje lekcje / Szczegoly konta / Wyloguj) =====
   Renderowana w waskiej bocznej kolumnie - pelna szerokosc kazdego przycisku
   zamiast dopasowanych-do-tekstu "chipow" gwarantuje rowna siatke nawet gdy
   jeden podpis jest dluzszy i zawija sie do dwoch linii (np. "Szczegóły konta"). */
.woocommerce-MyAccount-navigation ul{
	list-style:none;margin:0 0 24px;padding:0;
	display:flex;flex-direction:column;gap:10px;
}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation li a{
	display:block;width:100%;box-sizing:border-box;text-align:center;
	padding:12px 20px;border-radius:999px;line-height:1.3;
	background:#FBF9F4;border:1.5px solid #ECE7DC;color:#22302A;
	font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.88rem;
	text-decoration:none;transition:all .15s;
}
.woocommerce-MyAccount-navigation li a:hover{border-color:#7FB685;color:#3F7A49;background:#F4F9F4}
.woocommerce-MyAccount-navigation li.is-active a{
	background:#7FB685;border-color:#7FB685;color:#fff;
	box-shadow:0 4px 12px rgba(127,182,133,.35);
}
/* Wyloguj sie: wizualnie odrozniony (spokojny, nie "niebezpieczny" czerwony -
   to zwykle wylogowanie, nie usuwanie konta) */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
	background:transparent;border-color:transparent;color:#8A7F6B;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover{
	background:#FBF3EE;border-color:#F2A48D;color:#A0432A;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{
	font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:#22302A;
}
.langle-account-settings-link{
	background:#F4F9F4 !important;border-color:#DCEBDD !important;
}

/* ===== Pasek zajetego miejsca (Moje lekcje) ===== */
.langle-quota-bar{
	width:100%;height:10px;border-radius:999px;background:#ECE7DC;overflow:hidden;
}
.langle-quota-fill{height:100%;border-radius:999px;transition:width .3s}

/* ===== Karta lekcji z przyciskiem usuwania (Moje lekcje) ===== */
.langle-lesson-card-wrap{position:relative}
.langle-lesson-del{
	position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--ink,#22302A);color:#fff;font-size:.7rem;text-decoration:none;
	opacity:0;transition:opacity .15s;z-index:2;
}
.langle-lesson-card-wrap:hover .langle-lesson-del{opacity:1}

/* ===== ZAWIESZENIE UCZNIA (suspend) - widzi, nie edytuje ===== */
.lb-suspended-banner{
  position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:70;
  background:#22302A;color:#fff;padding:10px 20px;border-radius:999px;
  font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:90vw;text-align:center;
}
/* Gdy zawieszony: narzedzia do rysowania/edycji wygaszone i niekliknialne -
   canvas ma juz pointer-events:none ustawiane w JS, tu dodatkowo wizualnie
   wygaszamy caly toolbar zeby bylo jasne ze nic teraz nie zadziala */
body.lb-suspended .lb-toolbar{opacity:.4;pointer-events:none}
body.lb-suspended .lb-item{pointer-events:none!important}

.lb-picker-live-hint{
  font-size:.72rem;color:#3F7A49;font-weight:600;margin:0 0 6px;
}
.lb-participant-suspend{
  border:1.5px solid #E8C468;background:#FBF3DC;color:#8A6D1F;
  border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:600;
  cursor:pointer;margin-right:6px;white-space:nowrap;
}
.lb-participant-suspend:hover{background:#F7E5AC}
.lb-participant-status.suspended{color:#8A6D1F;font-weight:600}

/* 3.15: keyboard visibility and reduced motion */
:where(a,button,input,select,textarea,[contenteditable]):focus-visible{outline:3px solid #315f3a;outline-offset:3px}
.lg-overlay:not(.open){visibility:hidden}
.lb-close,.lg-close{min-width:44px;min-height:44px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}