/* VIAM Client™ — design system "Quiet Luxury". Przeniesione 1:1 z zatwierdzonego prototypu. */
:root{
  --gold:#B8965A;--gold-l:#D4B483;
  --charcoal:#1A1714;--charcoal-mid:#2C2620;--footer:#0D0B09;
  --cream:#FAF8F4;--ecru:#F5F0E8;--parchment:#E8DFC8;
  --wg:#665A4D;--wgl:#A89E92;
  --green:#2e9e84;--green-bg:rgba(46,158,132,.12);
  --amber:#C8923A;--amber-bg:rgba(200,146,58,.14);
  --red:#c0563c;--red-bg:rgba(192,86,60,.12);
  --line:#E8DFC8;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;background:var(--cream);color:var(--charcoal);overflow-x:hidden}
h1,h2,h3,h4{font-family:'Playfair Display',serif;font-weight:500;line-height:1.2}
a{color:inherit}
img{max-width:100%;display:block}
.gold-line{width:46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:.8rem 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Inter';font-weight:600;font-size:.82rem;border:none;border-radius:999px;cursor:pointer;padding:.85rem 1.6rem;transition:.3s var(--ease);text-decoration:none}
.btn-gold{background:linear-gradient(90deg,var(--gold),var(--gold-l));color:var(--charcoal);box-shadow:0 10px 24px rgba(184,150,90,.3)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-dark{background:var(--charcoal);color:var(--cream)}
.btn-dark:hover{background:var(--charcoal-mid)}
.btn-ghost{background:#fff;color:var(--charcoal);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{padding:.55rem 1.1rem;font-size:.76rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px}
.chip.green{background:var(--green-bg);color:var(--green)}
.chip.amber{background:var(--amber-bg);color:var(--amber)}
.chip.red{background:var(--red-bg);color:var(--red)}
.chip.gold{background:rgba(184,150,90,.14);color:var(--gold)}
.lbl{font-size:9px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}

/* a11y: wyraźny focus dla nawigacji klawiaturą + skip-link */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.side .navi:focus-visible{outline:2px solid var(--gold-l);outline-offset:-2px}
.content:focus{outline:none}
.skip-link{position:absolute;left:-9999px;top:auto;background:var(--charcoal);color:var(--cream);padding:.6rem 1rem;border-radius:.5rem;z-index:300;font-size:.85rem;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}

/* ===== LOGIN ===== */
#login{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:1.1fr .9fr;background:var(--charcoal)}
#login .art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:3.5rem;color:var(--cream)}
#login .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:grayscale(.5)}
#login .art::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--charcoal) 30%,rgba(26,23,20,.6))}
#login .art .z{position:relative;z-index:1}
#login .brand{font-family:'Playfair Display';font-size:1.5rem;letter-spacing:.18em}
#login .brand b{color:var(--gold-l);font-weight:600}
#login .art h2{font-size:2.4rem;color:var(--cream);max-width:14ch}
#login .art h2 em{font-style:italic;color:var(--gold-l)}
#login .art p{color:var(--wgl);max-width:34ch;margin-top:1rem}
#login .eco{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
#login .eco span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(212,180,131,.35);color:var(--gold-l);padding:.4rem .8rem;border-radius:999px}
#login .form{background:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:3.5rem clamp(1.5rem,5vw,4rem)}
#login .form .lbl{margin-bottom:1rem}
#login .form h1{font-size:2rem;margin-bottom:.4rem}
#login .form .sub{color:var(--wg);font-size:.9rem;margin-bottom:2rem}
.field{margin-bottom:1.2rem}
.field label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wg);margin-bottom:.5rem}
.field input{width:100%;font-family:'Inter';font-size:1rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:.7rem;background:#fff;transition:.2s}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,150,90,.15)}
#login .form .btn-gold{width:100%;margin-top:.6rem;padding:1.05rem}
#login .hint{font-size:.78rem;color:var(--wgl);text-align:center;margin-top:1.4rem}
#login .hint b{color:var(--gold)}
.login-error{background:var(--red-bg);color:var(--red);border:1px solid rgba(192,86,60,.3);border-radius:.7rem;padding:.8rem 1rem;font-size:.82rem;font-weight:600;margin-bottom:1.2rem}
@media(max-width:860px){#login{grid-template-columns:1fr}#login .art{display:none}}

/* ===== APP SHELL ===== */
#app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.side{background:var(--charcoal);color:var(--cream);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:1.6rem 1rem}
.side .brand{font-family:'Playfair Display';font-size:1.25rem;letter-spacing:.16em;padding:.4rem .8rem 1.2rem;border-bottom:1px solid rgba(212,180,131,.18)}
.side .brand b{color:var(--gold-l);font-weight:600}
.side .brand small{display:block;font-family:'Inter';font-size:.6rem;letter-spacing:.3em;color:var(--wgl);margin-top:.3rem;text-transform:uppercase}
.side nav{display:flex;flex-direction:column;gap:.2rem;margin-top:1.2rem;flex:1;overflow-y:auto}
.side .navi{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:.7rem;color:var(--wgl);font-size:.9rem;font-weight:500;cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:.2s;position:relative}
.side .navi:hover{background:rgba(255,255,255,.05);color:var(--cream)}
.side .navi.on{background:linear-gradient(90deg,rgba(184,150,90,.22),rgba(184,150,90,.05));color:var(--gold-l)}
.side .navi.on::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--gold-l)}
.side .navi .ic{width:18px;flex:0 0 auto;text-align:center;font-size:1rem}
.side .navi .bdg{margin-left:auto;background:var(--gold);color:var(--charcoal);font-size:.62rem;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 .3rem}
.side .who{display:flex;align-items:center;gap:.7rem;padding:.9rem;border-top:1px solid rgba(212,180,131,.18);margin-top:.6rem}
.side .who .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--charcoal);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:0 0 auto}
.side .who b{font-size:.82rem;display:block}
.side .who span{font-size:.68rem;color:var(--wgl)}
.side .logout{background:none;border:none;color:var(--wgl);cursor:pointer;font-size:1rem;margin-left:auto}
.side .logout:hover{color:var(--gold-l)}

.main{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem clamp(1.2rem,3vw,2.4rem);background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .ttl h1{font-size:1.4rem}
.topbar .ttl p{font-size:.8rem;color:var(--wg)}
.topbar .acts{display:flex;align-items:center;gap:.7rem}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.05rem;position:relative;transition:.2s}
.icon-btn:hover{border-color:var(--gold)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:.6rem;cursor:pointer;font-size:1.1rem}
.notif-wrap{position:relative}
.notif-panel{position:absolute;right:0;top:calc(100% + .5rem);width:300px;max-width:86vw;background:#fff;border:1px solid var(--line);border-radius:1rem;box-shadow:0 16px 40px rgba(26,23,20,.14);padding:.6rem;display:none;z-index:30}
.notif-panel.on{display:block}
.notif-head{font-size:.8rem;font-weight:600;color:var(--wg);display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.notif-empty{font-size:.84rem;color:var(--wg);padding:.8rem .6rem;text-align:center}
.notif-item{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:'Inter';font-size:.82rem;color:var(--charcoal);padding:.6rem;border-radius:.6rem;line-height:1.4}
.notif-item:hover{background:var(--ecru)}
.content{padding:clamp(1.2rem,3vw,2.4rem);flex:1}
.view{display:none;animation:fade .4s var(--ease)}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{background:#fff;border:1px solid var(--line);border-radius:1.1rem;padding:1.5rem}
.grid{display:grid;gap:1.2rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:2rem 0 1rem}
.sec-h:first-child{margin-top:0}
.sec-h h2{font-size:1.3rem}
.sec-h h2 em{font-style:italic;color:var(--gold)}

/* stat cards */
.stat{display:flex;flex-direction:column;gap:.3rem}
.stat .lbl{margin-bottom:.4rem}
.stat .big{font-family:'Playfair Display';font-size:2.2rem;color:var(--charcoal);line-height:1}
.stat .meta{font-size:.78rem;color:var(--wg)}
.stat.accent{background:linear-gradient(160deg,rgba(184,150,90,.12),var(--charcoal));color:var(--cream);border-color:transparent}
.stat.accent .big{color:var(--gold-l)}
.stat.accent .meta{color:var(--wgl)}

/* schedule / calendar list */
.cal{display:flex;flex-direction:column;gap:.7rem}
.post{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1rem 1.2rem;transition:.2s}
.post:hover{border-color:var(--gold);box-shadow:0 10px 24px rgba(26,23,20,.06)}
.post .date{flex:0 0 auto;text-align:center;width:54px}
.post .date .d{font-family:'Playfair Display';font-size:1.5rem;line-height:1}
.post .date .m{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wg)}
.post .thumb{width:54px;height:54px;border-radius:.7rem;object-fit:cover;flex:0 0 auto}
.post .body{flex:1;min-width:0}
.post .body b{font-size:.95rem;display:block}
.post .body span{font-size:.78rem;color:var(--wg)}
.post .right{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex:0 0 auto}

/* schedule: toggle + filters + calendar */
.cal-toggle{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
.cal-toggle .btn.on{border-color:var(--gold);color:var(--gold)}
.sched-cal{display:none}
.sched-cal.on{display:block}
.sched-list.off{display:none}
.cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;min-width:560px}
.cal-grid .wd{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wg);text-align:center;padding:.3rem 0}
.cal-cell{min-height:78px;border:1px solid var(--line);border-radius:.6rem;padding:.35rem;background:#fff}
.cal-cell.empty{background:transparent;border:none}
.cal-cell .dn{font-size:.7rem;color:var(--wg);font-weight:600}
.cal-ev{font-size:.64rem;margin-top:.2rem;padding:.2rem .35rem;border-radius:.35rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev[onclick]{cursor:pointer}
.cal-ev.amber{background:var(--amber-bg);color:var(--amber)}
.cal-ev.green{background:var(--green-bg);color:var(--green)}
.cal-ev.gold{background:rgba(184,150,90,.14);color:var(--gold)}

/* approval cards */
.appr{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;background:#fff;border:1px solid var(--line);border-radius:1.1rem;overflow:hidden;margin-bottom:1.2rem}
.appr .vis{background:var(--ecru)}
.appr .vis img{width:100%;height:100%;object-fit:cover;min-height:150px}
.appr .bd{padding:1.3rem 1.4rem 1.4rem}
.appr .bd .top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.appr .cap{font-size:.9rem;color:var(--wg);margin:.7rem 0 1rem;white-space:pre-line}
.appr .acts{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.appr .note{width:100%;margin-top:.9rem;font-family:'Inter';font-size:.86rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:.7rem;resize:vertical;min-height:0;height:42px;transition:.2s}
.appr .note:focus{outline:none;border-color:var(--gold)}
.appr.done .bd{opacity:.6}

/* docs */
.doc{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1rem 1.2rem;transition:.2s}
.doc:hover{border-color:var(--gold)}
.doc .fic{width:42px;height:42px;border-radius:.6rem;display:grid;place-items:center;font-size:1.1rem;flex:0 0 auto;background:var(--ecru);color:var(--gold)}
.doc .body{flex:1}
.doc .body b{font-size:.9rem;display:block}
.doc .body span{font-size:.74rem;color:var(--wg)}

/* chat */
.chat{display:grid;grid-template-rows:1fr auto;height:62vh;background:#fff;border:1px solid var(--line);border-radius:1.1rem;overflow:hidden}
.chat .stream{padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.chat .msg{max-width:74%;padding:.8rem 1.1rem;border-radius:1.1rem;font-size:.9rem;line-height:1.5}
.chat .msg .t{display:block;font-size:.66rem;color:var(--wgl);margin-top:.4rem}
.chat .msg.them{background:var(--ecru);align-self:flex-start;border-bottom-left-radius:.3rem}
.chat .msg.me{background:var(--charcoal);color:var(--cream);align-self:flex-end;border-bottom-right-radius:.3rem}
.chat .msg.me .t{color:var(--wgl)}
.chat .day{align-self:center;font-size:.7rem;color:var(--wgl);background:var(--ecru);padding:.2rem .8rem;border-radius:999px}
.chat .compose{display:flex;gap:.7rem;padding:1rem;border-top:1px solid var(--line);background:var(--cream)}
.chat .compose input{flex:1;font-family:'Inter';font-size:.95rem;padding:.8rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:#fff}
.chat .compose input:focus{outline:none;border-color:var(--gold)}
.chat .compose .send{width:46px;height:46px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--charcoal);cursor:pointer;font-size:1.1rem;flex:0 0 auto}
.advisor{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:1.1rem;padding:1rem 1.3rem;margin-bottom:1.2rem}
.advisor .av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--charcoal);display:grid;place-items:center;font-weight:700}
.advisor b{display:block;font-size:.95rem}
.advisor span{font-size:.78rem;color:var(--wg)}

/* courses */
.course{background:#fff;border:1px solid var(--line);border-radius:1.1rem;overflow:hidden;transition:.3s var(--ease)}
.course:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,23,20,.08)}
.course .ph{aspect-ratio:16/9;position:relative;overflow:hidden}
.course .ph img{width:100%;height:100%;object-fit:cover}
.course .ph .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(26,23,20,.5))}
.course .ph .pr{position:absolute;left:1rem;right:1rem;bottom:.9rem;height:5px;border-radius:999px;background:rgba(255,255,255,.3)}
.course .ph .pr i{display:block;height:100%;border-radius:999px;background:var(--gold-l)}
.course .bd{padding:1.2rem 1.3rem 1.4rem}
.course .bd .lbl{margin-bottom:.5rem}
.course .bd b{font-family:'Playfair Display';font-size:1.05rem;display:block;margin-bottom:.4rem}
.course .bd span{font-size:.78rem;color:var(--wg)}

/* contract / timeline */
.tl{position:relative;margin-left:1rem;padding-left:1.6rem;border-left:1px solid var(--line)}
.tl .it{position:relative;padding-bottom:1.5rem}
.tl .it::before{content:'';position:absolute;left:-1.95rem;top:.2rem;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--gold)}
.tl .it.done::before{background:var(--gold)}
.tl .it b{font-size:.92rem}
.tl .it span{font-size:.78rem;color:var(--wg);display:block}

/* toast */
#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(120%);background:var(--charcoal);color:var(--cream);padding:.9rem 1.5rem;border-radius:999px;font-size:.86rem;z-index:200;transition:.4s var(--ease);box-shadow:0 16px 40px rgba(0,0,0,.3);border-left:3px solid var(--gold)}
#toast.on{transform:translateX(-50%) translateY(0)}
#ovl{position:fixed;inset:0;background:rgba(26,23,20,.5);z-index:40;display:none}
#ovl.on{display:block}

/* lightbox — podgląd grafiki posta na pełnym ekranie */
img.zoomable{cursor:zoom-in}
#lightbox{position:fixed;inset:0;background:rgba(13,11,9,.9);z-index:250;display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
#lightbox.on{display:flex}
#lightbox img{max-width:92vw;max-height:90vh;border-radius:.6rem;box-shadow:0 24px 70px rgba(0,0,0,.55)}
#lightbox .lb-close{position:absolute;top:1rem;right:1.4rem;color:var(--cream);font-size:2rem;background:none;border:none;cursor:pointer;line-height:1}

/* spinner na przycisku podczas wysyłki */
.btn .spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px;margin-right:.4rem}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:980px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  #app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:50;width:260px;transform:translateX(-100%);transition:.3s var(--ease)}
  .side.open{transform:none}
  .burger{display:block}
  .g3,.g4,.g2{grid-template-columns:1fr}
  .appr{grid-template-columns:1fr}
  .appr .vis img{min-height:180px}
  .topbar .ttl h1{font-size:1.15rem}
}
.demo-banner{background:var(--amber-bg);color:var(--amber);text-align:center;font-size:.74rem;font-weight:600;letter-spacing:.05em;padding:.5rem;border-bottom:1px solid var(--line)}