/* HVMBAK TERMINAL — narzędzie do treści teczek + podgląd terminala. Kroje i kolory jak na landingu (papier, tusz, ostre rogi). */
@font-face{font-family:'HVMBAK Pro';font-style:normal;font-weight:900;font-display:block;src:url(fonts/HVMBAK-Pro.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-0103, U+0108-0117, U+011A-0140, U+0145-0159, U+015C-0178, U+017D-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:block;src:url(fonts/archivo-pl.woff2) format('woff2');unicode-range:U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:block;src:url(fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --black:#0d0d0d; --orange:#C2410C; --baby:#8CC7EE; --bordo:#7A1F2B; --papier:#eceef0;
  --display:'HVMBAK Pro','Archivo',sans-serif; --text-wdth:75%;
  --inter:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --kreska:rgba(13,13,13,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--black);font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:16px;line-height:1.4;overflow-x:clip}
button,input{font:inherit;color:inherit}
.etyk{margin:0;font-family:var(--inter);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(13,13,13,.55)}
.pdz-h{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:1.02;letter-spacing:0;color:var(--black)}

/* ─ pasek u góry ─ */
.pasek{position:sticky;top:0;z-index:20;background:rgba(236,238,240,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--kreska)}
.pasek .wn{max-width:1320px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pasek h1{margin:0 auto 0 0;font-family:var(--display);font-weight:900;font-size:20px;line-height:1;text-transform:uppercase}
.pasek h1 small{display:block;margin-top:5px;font-family:var(--inter);font-weight:600;font-size:10px;letter-spacing:.08em;color:rgba(13,13,13,.55)}
.ster{display:flex;align-items:center;gap:6px}
.ster .etyk{margin-right:2px}
.seg{display:inline-flex;border:1px solid rgba(13,13,13,.25)}
.seg button{padding:7px 10px;border:0;background:transparent;font-family:var(--inter);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:rgba(13,13,13,.6)}
.seg button+button{border-left:1px solid rgba(13,13,13,.25)}
.seg button.akt{background:var(--black);color:#fff}
.guz{padding:8px 14px;border:1px solid rgba(13,13,13,.25);background:transparent;font-family:var(--inter);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.guz.pelny{background:var(--black);color:#fff;border-color:var(--black)}
.guz:hover{background:rgba(13,13,13,.06)}
.guz.pelny:hover{background:#000}
.licznik{font-family:var(--inter);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(13,13,13,.6)}

/* ─ wstęp ─ */
.wstep{max-width:1320px;margin:0 auto;padding:30px 20px 6px}
.wstep p{max-width:62ch;margin:0;font-size:16.5px;line-height:1.45}
.wstep p+p{margin-top:8px}

/* ─ części i karty ─ */
.czesc{max-width:1320px;margin:0 auto;padding:26px 20px 10px}
.czesc>.naglowek{display:flex;align-items:baseline;gap:14px;padding:0 0 12px;border-bottom:1px solid var(--black);margin-bottom:18px}
.czesc>.naglowek .pdz-h{font-size:clamp(22px,2.2vw,30px)}
.siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.karta{background:#fff;border:1px solid rgba(13,13,13,.1);box-shadow:0 2px 8px rgba(13,13,13,.06);padding:22px 24px 18px;display:flex;flex-direction:column;min-width:0}
.karta header{margin-bottom:14px}
.karta header .pdz-h{font-size:clamp(20px,2.3vw,32px);margin:8px 0 6px}
.karta .lekcje{margin:0;font-family:var(--inter);font-stretch:normal;font-size:11.5px;line-height:1.4;color:rgba(13,13,13,.55)}
.karta .lekcje i{font-style:normal;color:var(--bordo)}
.linie{list-style:none;margin:0;padding:0;border-top:1px solid var(--kreska)}
.linie li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:8px 0 7px;border-bottom:1px solid var(--kreska);cursor:pointer;user-select:none;-webkit-user-select:none}
.linie li:hover{background:rgba(13,13,13,.03)}
.linie .nr{font-family:var(--inter);font-stretch:normal;font-weight:600;font-size:10px;letter-spacing:.08em;line-height:1;color:rgba(13,13,13,.45)}
.linie .t{font-size:15.5px;line-height:1.3}
.linie li.usun .t{text-decoration:line-through;text-decoration-thickness:1px;color:rgba(13,13,13,.32)}
.linie li.usun .nr{color:rgba(13,13,13,.2)}
.linie .zn{font-family:var(--inter);font-stretch:normal;font-weight:600;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(13,13,13,.4);white-space:nowrap}
.linie li.usun .zn{color:var(--bordo)}
.linie li.wlasna .zn{color:var(--orange)}
.linie .ed{margin-left:8px;padding:3px 7px;border:1px solid rgba(13,13,13,.18);background:#fff;font-family:var(--inter);font-size:12px;line-height:1;color:rgba(13,13,13,.55);cursor:pointer;vertical-align:middle}
.linie .ed:hover{border-color:var(--black);color:var(--black)}
.linie li.zm .zn{color:var(--orange)}
.linie li.edycja{cursor:default;background:rgba(13,13,13,.03)}
.linie li.edycja .t input{width:100%;padding:6px 8px;border:1px solid var(--black);background:#fff;border-radius:0;font-size:15px;font-stretch:var(--text-wdth)}
.linie li.edycja .t input:focus{outline:none}
.linie li.wlasna .x{margin-left:8px;padding:0;border:0;background:none;font-family:var(--inter);font-weight:600;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(13,13,13,.4);cursor:pointer}
.linie li.wlasna .x:hover{color:var(--bordo)}
.dodaj{display:flex;gap:8px;margin-top:12px}
.dodaj input{flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(13,13,13,.25);background:#fff;border-radius:0;font-size:15px;font-stretch:var(--text-wdth)}
.dodaj input:focus{outline:2px solid var(--black);outline-offset:-1px}
.karta footer{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--kreska)}
.karta footer .licznik{margin-right:auto}

/* ─ podgląd (okno jak na landingu) ─ */
.lk{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.lk-tlo{position:absolute;inset:0;background:rgba(13,13,13,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:none}
.lk-kartka{position:relative;width:min(640px,100%);max-height:min(86vh,820px);display:flex;flex-direction:column;background:#fff;color:var(--black);border:1px solid rgba(13,13,13,.1);
  box-shadow:0 40px 80px -30px rgba(13,13,13,.55),0 2px 8px rgba(13,13,13,.08);padding:30px 34px 26px;animation:lk-wej .32s cubic-bezier(.2,.8,.2,1)}
@keyframes lk-wej{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lk-etyk{margin:0 0 12px}
.lk-h{font-size:clamp(26px,3vw,36px);margin:0 0 18px}
.lk-stopka{display:flex;gap:10px;margin-top:18px}
.lk-stopka .guz{padding:12px 18px}
.lk-stopka .guz.zamknij{margin-left:auto}
/* ekran telefonu w podglądzie na komputerze */
.lk.tel{align-items:center}
.lk.tel .ekran{position:relative;width:390px;height:780px;max-height:92vh;background:var(--papier);border:1px solid rgba(13,13,13,.22);box-shadow:0 40px 80px -30px rgba(13,13,13,.6);overflow:hidden;display:flex;align-items:flex-end}
.lk.tel .ekran::before{content:'';position:absolute;inset:0;background:rgba(13,13,13,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lk.tel .lk-kartka{width:100%;max-height:84%;padding:24px 18px 20px;animation-name:lk-wej-tel}
.lk.tel .lk-h{font-size:26px;margin-bottom:14px}
.lk.tel .lk-stopka .guz{padding:13px 14px;flex:1}
.lk.tel .lk-stopka .guz.zamknij{margin-left:0}
@keyframes lk-wej-tel{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ─ terminal ─ */
.term{font-family:var(--mono);font-size:11.5px;line-height:1.55;background:var(--term-tlo,#0d0d0d);color:var(--term-tekst,#e6e6e6);padding:14px 16px;height:360px;min-height:120px;overflow:auto;
  white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border:1px solid var(--term-ramka,transparent)}
.term .w{min-height:1.55em}
.term .szum{color:var(--term-szum,rgba(255,255,255,.4))}
.term .cmd{color:var(--term-cmd,#8CC7EE)}
.term .ok{color:var(--term-ok,#9cc59c)}
.term .akcent{color:var(--term-akcent,#f0863f)}
.term .prompt{color:var(--term-cmd,#8CC7EE)}
.term .kursor{display:inline-block;width:.6em;height:1.05em;margin-left:1px;background:currentColor;vertical-align:-.18em}
.term.koniec .kursor{animation:mig 1.1s steps(1) infinite}
@keyframes mig{50%{opacity:0}}
.term.jasny{--term-tlo:#f6f6f3;--term-tekst:#0d0d0d;--term-szum:rgba(13,13,13,.42);--term-cmd:#2a6f9e;--term-ok:#3b7a3b;--term-akcent:#C2410C;--term-ramka:rgba(13,13,13,.18)}
/* okno = cały panel jako terminal (pasek tytułu z kropkami) */
.lk-kartka.okno{background:#0d0d0d;color:#e6e6e6;border-color:rgba(255,255,255,.12);padding:0}
.lk-kartka.okno .lk-etyk,.lk-kartka.okno .lk-h{display:none}
.lk-kartka.okno .belka{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55)}
.lk-kartka.okno .belka i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.lk-kartka.okno .belka i:first-child{background:#e0623d}.lk-kartka.okno .belka i:nth-child(2){background:#e6b04c}.lk-kartka.okno .belka i:nth-child(3){background:#6bbf6b}
.lk-kartka.okno .belka span{margin-left:6px}
.lk-kartka.okno .term{height:420px}
.lk-kartka.okno .lk-stopka{padding:12px 14px 14px;margin:0;border-top:1px solid rgba(255,255,255,.1)}
.lk-kartka.okno .lk-stopka .guz{border-color:rgba(255,255,255,.3);color:#fff}
.lk-kartka.okno .lk-stopka .guz:hover{background:rgba(255,255,255,.08)}
.lk-kartka.okno.jasny{background:#f6f6f3;color:var(--black);border-color:rgba(13,13,13,.14)}
.lk-kartka.okno.jasny .belka{border-color:rgba(13,13,13,.12);color:rgba(13,13,13,.55)}
.lk-kartka.okno.jasny .lk-stopka{border-color:rgba(13,13,13,.12)}
.lk-kartka.okno.jasny .lk-stopka .guz{border-color:rgba(13,13,13,.3);color:var(--black)}
.lk-kartka:not(.okno) .belka{display:none}
html.lk-lock{overflow:hidden}

/* ─ telefon (prawdziwy) ─ */
@media(max-width:820px){
  .pasek{position:static}                 /* siedem przełączników przyklejonych u góry zasłaniało pół ekranu telefonu */
  .pasek .wn{padding:10px 14px;gap:8px 12px}
  .pasek h1{font-size:17px}
  .wstep,.czesc{padding-left:14px;padding-right:14px}
  .siatka{grid-template-columns:1fr;gap:14px}
  .karta{padding:18px 16px 14px}
  .karta header .pdz-h{font-size:20px}   /* HVMBAK Pro jest szeroki: „AUTOMATYZACJA” w 24 px nie mieściło się w karcie 360 px */
  .linie .t{font-size:15px}
  .linie .ed{padding:6px 9px;font-size:14px}
  .lk{padding:0;align-items:flex-end}
  .lk .ekran{display:contents}
  .lk .ekran::before{display:none}
  .lk-kartka{width:100%;max-height:84vh;padding:22px 16px calc(18px + env(safe-area-inset-bottom));animation-name:lk-wej-tel}
  .lk-h{font-size:22px;margin-bottom:14px}
  .term{height:46vh;font-size:11px}
  .lk-kartka.okno .term{height:52vh}
  .lk-stopka{flex-wrap:wrap}
  .lk-stopka .guz{flex:1;padding:13px 10px}
  .lk-stopka .guz.zamknij{margin-left:0;flex-basis:100%}
}
@media(max-width:1100px) and (min-width:821px){.siatka{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lk-kartka{animation:none}.term.koniec .kursor{animation:none}}