:root{
    --paper:#f3efe6; --paper-2:#ece6d8; --ink:#22201b; --ink-soft:#4a463d;
    --rule:#cfc7b4; --rule-strong:#b3a98f; --green:#2f6b45; --green-bg:#e4efe4;
    --red:#a33227; --red-bg:#f4e2df; --gold:#9a6b1f; --accent:#1f3a5f;
    --shadow:0 1px 0 #fff, 0 2px 14px rgba(40,34,20,.10);
  }
  *{box-sizing:border-box} html,body{margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    -webkit-font-smoothing:antialiased;line-height:1.55;min-height:100vh}
  .wrap{max-width:1080px;margin:0 auto;padding:28px 22px 80px}
  header.mast{border-bottom:3px double var(--rule-strong);padding-bottom:14px;margin-bottom:8px;
    display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .mast h1{font-weight:800;letter-spacing:.3px;font-size:clamp(26px,4.4vw,42px);margin:0;line-height:1.02}
  .mast .sub{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
  .stamp{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold);border:1.5px solid var(--gold);border-radius:3px;padding:6px 10px;transform:rotate(-2deg);white-space:nowrap}
  .screen{display:none;animation:fade .35s ease}.screen.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .lede{font-size:17px;color:var(--ink-soft);max-width:70ch;margin:18px 0 20px}

  /* ---- pasek postępu nauki ---- */
  .mastery{background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;margin:0 0 22px;box-shadow:var(--shadow)}
  .mastery .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .mastery .lbl{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
  .mastery .big{font-size:26px;font-weight:800;line-height:1}
  .mbar{height:12px;background:var(--paper);border:1px solid var(--rule);border-radius:99px;overflow:hidden;display:flex}
  .mbar i{display:block;height:100%}
  .mbar .m-ok{background:var(--green)} .mbar .m-mid{background:var(--gold)} .mbar .m-bad{background:var(--red)}
  .mlegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink-soft)}
  .mlegend span i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
  .mstats{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px dotted var(--rule);
    font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-soft)}
  .mstats b{color:var(--ink);font-size:14px}

  .modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:13px;margin-bottom:14px}
  .mode{text-align:left;cursor:pointer;background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;
    padding:15px 15px 13px;box-shadow:var(--shadow);transition:transform .12s,border-color .12s;font-family:inherit;color:inherit}
  .mode:hover{transform:translateY(-2px);border-color:var(--rule-strong)}
  .mode:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
  .mode[disabled]{opacity:.42;cursor:not-allowed;transform:none}
  .mode .k{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .mode .t{font-size:18px;font-weight:700;margin:6px 0 3px}
  .mode .d{font-size:13.5px;color:var(--ink-soft)}

  .lenrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 16px}
  .lenrow .lbl{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
  .chip{font-family:ui-monospace,Menlo,monospace;font-size:13px;border:1.5px solid var(--rule-strong);background:var(--paper-2);
    color:var(--ink);border-radius:99px;padding:6px 14px;cursor:pointer;transition:background .12s,color .12s}
  .chip:hover{border-color:var(--accent)}
  .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .chip:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
  .chip.sm{font-size:12px;padding:5px 11px}
  .chip.gold{border-color:var(--gold);color:var(--gold)}
  .chip.gold.on{background:var(--gold);color:var(--paper);border-color:var(--gold)}

  .index h2,.review h2,.statsec h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace;
    color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:8px;margin:26px 0 4px}
  .catlist{list-style:none;margin:0;padding:0;columns:2;column-gap:34px}
  @media(max-width:700px){.catlist{columns:1}}
  .catlist li{break-inside:avoid;display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dotted var(--rule);cursor:pointer}
  .catlist li:hover .cname{text-decoration:underline}
  .catlist .num{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--gold);min-width:2.5ch}
  .catlist .cname{flex:1;font-size:15px}
  .catlist .cnt{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
  .catlist .minibar{width:56px;height:6px;background:var(--paper-2);border:1px solid var(--rule);border-radius:99px;overflow:hidden;flex:none}
  .catlist .minibar>i{display:block;height:100%;background:var(--green)}
  .catlist .minibar>i.mid{background:var(--gold)} .catlist .minibar>i.low{background:var(--red)}

  .qtop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0 4px;flex-wrap:wrap}
  .crumb{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
  .crumb b{color:var(--accent)}
  .ledger{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-soft)}
  .ledger .ok{color:var(--green)}.ledger .no{color:var(--red)}
  .progress{height:6px;background:var(--paper-2);border:1px solid var(--rule);border-radius:99px;overflow:hidden;margin:10px 0 22px}
  .progress>i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
  .card{background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;padding:24px 26px 22px;box-shadow:var(--shadow);position:relative}
  .kat-tag{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
    margin-bottom:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .qid{color:var(--ink-soft);border:1px solid var(--rule-strong);border-radius:4px;padding:1px 6px;letter-spacing:.08em}
  .seen-tag{color:var(--ink-soft);text-transform:none;letter-spacing:.02em}
  .badge{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    background:var(--accent);color:var(--paper);border-radius:4px;padding:2px 7px;vertical-align:middle}
  .badge.warn{background:var(--red)}
  .badge.exam{background:var(--gold)}
  .qtext{font-size:clamp(18px,2.5vw,23px);font-weight:700;line-height:1.34;margin:0 0 20px}
  .qtext .warn{color:var(--red)}
  .opts{display:flex;flex-direction:column;gap:10px}
  .opt{display:flex;gap:13px;align-items:flex-start;text-align:left;background:var(--paper);border:1.5px solid var(--rule);
    border-radius:9px;padding:13px 15px;cursor:pointer;font-family:inherit;font-size:16px;color:var(--ink);transition:border-color .12s,background .12s;width:100%}
  .opt:hover:not(.locked){border-color:var(--accent)}
  .opt:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
  .opt .letter{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:14px;background:var(--paper-2);
    border:1px solid var(--rule);border-radius:6px;min-width:26px;height:26px;display:grid;place-items:center;color:var(--ink-soft);flex:none;margin-top:1px}
  .opt.correct{background:var(--green-bg);border-color:var(--green)}
  .opt.correct .letter{background:var(--green);color:#fff;border-color:var(--green)}
  .opt.wrong{background:var(--red-bg);border-color:var(--red)}
  .opt.wrong .letter{background:var(--red);color:#fff;border-color:var(--red)}
  .opt.locked{cursor:default}.opt.dim{opacity:.5}
  .verdict{margin-top:20px;border-top:1px solid var(--rule);padding-top:16px;display:none}
  .verdict.show{display:block;animation:fade .3s}
  .verdict .tag{font-weight:800;font-size:16px;margin-bottom:6px}
  .verdict.good .tag{color:var(--green)}.verdict.bad .tag{color:var(--red)}
  .verdict .exp{font-size:15px;color:var(--ink-soft);max-width:72ch}
  .verdict .meta{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink-soft);margin-top:10px;padding-top:8px;border-top:1px dotted var(--rule)}

  .desc-hint{font-size:15px;color:var(--ink-soft);margin:0 0 16px;font-style:italic}
  .reveal-btn{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    border:1.5px solid var(--accent);background:transparent;color:var(--accent);padding:11px 18px;border-radius:8px;cursor:pointer}
  .reveal-btn:hover{background:var(--accent);color:var(--paper)}
  .model{display:none;margin-top:4px}
  .model.show{display:block;animation:fade .3s}
  .model ol{margin:6px 0 0;padding-left:22px}
  .model li{padding:5px 0;font-size:15.5px;border-bottom:1px dotted var(--rule)}
  .self{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px;display:none}
  .self.show{display:block}
  .self .q{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
  .self-btns{display:flex;gap:8px;flex-wrap:wrap}
  .self-btns .chip{border-color:var(--rule)}

  .qbar{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
  .btn{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:8px;cursor:pointer;transition:opacity .12s}
  .btn:hover{opacity:.86}.btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
  .btn.danger{background:transparent;color:var(--red);border-color:var(--red)}
  .btn[disabled]{opacity:.4;cursor:not-allowed}
  .btn.sm{padding:8px 14px;font-size:12px}

  .result{text-align:center;padding:20px 0}
  .score-big{font-size:clamp(52px,11vw,96px);font-weight:800;line-height:1;letter-spacing:-1px}
  .score-pct{font-family:ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}
  .verdict-line{font-size:20px;margin:20px 0 8px;font-weight:700}
  .bars{max-width:680px;margin:26px auto 0;text-align:left}
  .bar-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px dotted var(--rule)}
  .bar-row .bn{flex:1;font-size:14px}
  .bar-row .track{width:120px;height:8px;background:var(--paper-2);border:1px solid var(--rule);border-radius:99px;overflow:hidden;flex:none}
  .bar-row .track>i{display:block;height:100%;background:var(--green)}
  .bar-row .track>i.low{background:var(--red)}.bar-row .track>i.mid{background:var(--gold)}
  .bar-row .frac{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-soft);min-width:46px;text-align:right}

  .study-cat{margin:24px 0 0}
  .study-cat>h3{font-size:18px;font-weight:800;border-bottom:2px solid var(--rule-strong);padding-bottom:6px;margin:0 0 4px}
  .study-q{padding:13px 0;border-bottom:1px dotted var(--rule)}
  .study-q .qq{font-weight:700;font-size:15.5px}
  .study-q .idtag{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--gold);margin-right:6px}
  .study-q .aa{color:var(--green);font-size:14.5px;margin-top:4px}
  .study-q .ee{color:var(--ink-soft);font-size:13.5px;margin-top:3px}
  .study-q ol{margin:5px 0 0;padding-left:20px}
  .study-q ol li{font-size:14.5px;color:var(--green);padding:2px 0}

  /* ---- zakuwanie ---- */
  .slots{list-style:none;margin:0 0 20px;padding:0;counter-reset:s}
  .slots li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px dotted var(--rule)}
  .slots li::before{content:counter(s) ".";font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-soft);min-width:2.2ch;padding-top:3px}
  .slots .txt{flex:1;font-size:15.5px;line-height:1.45}
  .slots li.hidden .txt{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--rule-strong);letter-spacing:.08em;word-break:break-word}
  .slots li.hint .txt{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--gold);letter-spacing:.08em;word-break:break-word}
  .slots li.done .txt{color:var(--green)}
  .slots li.done::before{content:"✓";color:var(--green);font-weight:700}
  .slots li.shown .txt{color:var(--red)}
  .slots li.shown::before{content:"✗";color:var(--red);font-weight:700}
  .slots li.flash{animation:flash .5s}
  @keyframes flash{from{background:var(--green-bg)}to{background:transparent}}
  .dl-input{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
  .dl-input input{flex:1;min-width:240px;font-family:inherit;font-size:16px;color:var(--ink);
    background:var(--paper);border:1.5px solid var(--rule-strong);border-radius:9px;padding:12px 14px}
  .dl-input input:focus{outline:none;border-color:var(--accent)}
  .dl-msg{min-height:22px;margin-top:10px;font-size:14px;color:var(--ink-soft)}
  .dl-msg.bad{color:var(--red)}
  .dl-msg.good{color:var(--green)}
  .dl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dotted var(--rule)}
  .dl-done{display:none;margin-top:20px;border-top:1px solid var(--rule);padding-top:16px}
  .dl-done.show{display:block;animation:fade .3s}
  .dl-done .tag{font-weight:800;font-size:17px;margin-bottom:6px}
  .dl-done .exp{font-size:15px;color:var(--ink-soft);max-width:72ch}
  .drl-badge{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-soft);white-space:nowrap}

  /* ---- arkusz egzaminacyjny ---- */
  .exam-head{background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;margin-bottom:22px;box-shadow:var(--shadow)}
  .exam-head .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
  .exam-head h3{margin:0;font-size:21px;font-weight:800}
  .exam-meta{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-soft)}
  .exam-meta b{color:var(--ink)}
  .clock{font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:700;color:var(--accent);letter-spacing:.06em}
  .exam-sec{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:8px;margin:30px 0 6px}
  .eq{padding:18px 0;border-bottom:1px dotted var(--rule)}
  .eq .num{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--gold);margin-bottom:5px}
  .eq .qq{font-size:16.5px;font-weight:700;line-height:1.4;margin-bottom:12px}
  .eopts{display:flex;flex-direction:column;gap:7px}
  .eopt{display:flex;gap:11px;align-items:flex-start;text-align:left;background:var(--paper);border:1.5px solid var(--rule);
    border-radius:8px;padding:10px 13px;cursor:pointer;font-family:inherit;font-size:15px;color:var(--ink);width:100%}
  .eopt:hover:not(.locked){border-color:var(--accent)}
  .eopt .let{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:13px;background:var(--paper-2);
    border:1px solid var(--rule);border-radius:50%;min-width:23px;height:23px;display:grid;place-items:center;color:var(--ink-soft);flex:none;margin-top:1px}
  .eopt.sel{border-color:var(--accent);background:#e9eef5}
  .eopt.sel .let{background:var(--accent);color:var(--paper);border-color:var(--accent)}
  .eopt.locked{cursor:default}
  .eopt.good{background:var(--green-bg);border-color:var(--green)}
  .eopt.good .let{background:var(--green);color:#fff;border-color:var(--green)}
  .eopt.bad{background:var(--red-bg);border-color:var(--red)}
  .eopt.bad .let{background:var(--red);color:#fff;border-color:var(--red)}
  .eq textarea{width:100%;min-height:120px;font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);
    background:var(--paper);border:1.5px solid var(--rule-strong);border-radius:9px;padding:12px 14px;resize:vertical}
  .eq textarea:focus{outline:none;border-color:var(--accent)}
  .eq .verd{margin-top:11px;padding-top:10px;border-top:1px dotted var(--rule);font-size:14px;color:var(--ink-soft)}
  .eq .verd .ok{color:var(--green);font-weight:700}
  .eq .verd .no{color:var(--red);font-weight:700}
  .eq ul.gr{list-style:none;margin:8px 0 0;padding:0}
  .eq ul.gr li{padding:4px 0;font-size:14.5px;display:flex;gap:9px}
  .eq ul.gr li.hit{color:var(--green)} .eq ul.gr li.miss{color:var(--red)}
  .lines-tag{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    background:var(--gold);color:var(--paper);border-radius:4px;padding:2px 7px;vertical-align:middle;white-space:nowrap}
  .eq ul.gr li.tog{cursor:pointer;border-radius:6px;padding:4px 6px;margin-left:-6px}
  .eq ul.gr li.tog:hover{background:var(--paper)}
  .score-card .hint-line{margin-top:12px;padding-top:10px;border-top:1px dotted var(--rule);
    font-size:13.5px;color:var(--ink-soft);max-width:74ch}
  .exam-submit{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:28px}
  .score-card{background:var(--paper-2);border:1px solid var(--rule-strong);border-radius:12px;padding:20px 22px;margin-bottom:24px;box-shadow:var(--shadow)}
  .score-card .big{font-size:38px;font-weight:800;line-height:1.1}
  .score-card .lines{display:flex;gap:26px;flex-wrap:wrap;margin-top:10px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--ink-soft)}
  .score-card .lines b{color:var(--ink);font-size:15px}

  table.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
  table.tbl th{text-align:left;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft);border-bottom:1.5px solid var(--rule-strong);padding:8px 8px 8px 0;font-weight:600}
  table.tbl td{padding:8px 8px 8px 0;border-bottom:1px dotted var(--rule);vertical-align:top}
  table.tbl td.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:nowrap}
  table.tbl td.qq{max-width:520px}
  .scroller{overflow-x:auto}
  .pillbad{color:var(--red);font-weight:700}
  .pillok{color:var(--green);font-weight:700}
  .empty{color:var(--ink-soft);font-style:italic;padding:16px 0}

  footer{margin-top:40px;border-top:1px solid var(--rule);padding-top:14px;font-family:ui-monospace,Menlo,monospace;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .backlink{background:none;border:none;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--gold);cursor:pointer;padding:0}
  .backlink:hover{text-decoration:underline}
  .warnbox{background:var(--red-bg);border:1px solid var(--red);border-radius:9px;padding:13px 15px;font-size:14px;margin:16px 0}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ================= dodatki: menu przedmiotów, logowanie, nawigacja ======= */
  .mast-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .topnav{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-soft);display:flex;gap:12px;align-items:center}
  .topnav a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
  .topnav a:hover{color:var(--ink)}
  .topnav span:not(:empty){border:1px solid var(--rule-strong);border-radius:99px;padding:3px 10px;color:var(--ink)}

  .blad-bazy{max-width:620px;margin:80px auto;padding:26px 28px;background:var(--paper-2);
    border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow)}
  .blad-bazy h2{margin-top:0}

  /* --- kafelki przedmiotów --- */
  .przedmioty{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:15px;margin:22px 0 10px}
  .przedmiot{position:relative;text-align:left;cursor:pointer;background:var(--paper-2);border:1px solid var(--rule);
    border-radius:10px;padding:17px 17px 15px;box-shadow:var(--shadow);transition:transform .12s,border-color .12s;
    font-family:inherit;color:inherit;display:block;text-decoration:none}
  .przedmiot:hover{transform:translateY(-2px);border-color:var(--rule-strong)}
  .przedmiot .nazwa{font-size:20px;font-weight:700;margin:0 0 4px;line-height:1.2}
  .przedmiot .opis{font-size:13.5px;color:var(--ink-soft);min-height:2.6em}
  .przedmiot .liczby{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--gold);margin-top:10px}
  .przedmiot .pasek{height:7px;background:var(--paper);border:1px solid var(--rule);border-radius:99px;
    overflow:hidden;margin-top:11px}
  .przedmiot .pasek i{display:block;height:100%;background:var(--green)}
  .przedmiot .postep{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-soft);margin-top:6px}
  .przedmiot .znacznik{position:absolute;top:12px;right:12px;font-family:ui-monospace,Menlo,monospace;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
    border:1px solid var(--accent);border-radius:99px;padding:2px 8px}
  .przedmiot .usun{position:absolute;bottom:12px;right:12px;background:none;border:none;cursor:pointer;
    font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--red);opacity:.6}
  .przedmiot .usun:hover{opacity:1;text-decoration:underline}

  .panel{background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;padding:20px 22px;
    box-shadow:var(--shadow);margin:26px 0}
  .panel h2{margin-top:0}
  .panel p{font-size:14.5px;color:var(--ink-soft);max-width:78ch}
  .panel code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--paper);
    border:1px solid var(--rule);border-radius:4px;padding:1px 5px}
  .rzad{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
  .komunikat{margin-top:12px;font-size:14px;min-height:1.3em}
  .komunikat.ok{color:var(--green)} .komunikat.zle{color:var(--red)}

  /* --- logowanie --- */
  .login{max-width:430px;margin:9vh auto 0;padding:30px 30px 26px;background:var(--paper-2);
    border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow)}
  .login h1{margin:0 0 4px;font-size:30px}
  .login .sub{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
  .pole{display:block;margin-bottom:14px}
  .pole span{display:block;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
  .pole input{width:100%;font-family:inherit;font-size:17px;padding:10px 12px;border:1px solid var(--rule-strong);
    border-radius:7px;background:var(--paper);color:var(--ink)}
  .pole input:focus{outline:2.5px solid var(--accent);outline-offset:1px}

  /* --- tabela kont w panelu administratora --- */
  table.konta{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px}
  table.konta th{text-align:left;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;
    padding:0 12px 8px 0;border-bottom:1px solid var(--rule)}
  table.konta td{padding:11px 12px 11px 0;border-bottom:1px dotted var(--rule);vertical-align:middle}
  table.konta tr:last-child td{border-bottom:none}
  table.konta .imie{font-weight:700;white-space:nowrap}
  table.konta .ja{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);
    border-radius:99px;padding:1px 7px;margin-left:6px;font-weight:400}
  table.konta .kod code{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;
    background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:3px 7px;
    user-select:all;white-space:nowrap}
  table.konta .rola{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
  table.konta .akcje{text-align:right;white-space:nowrap}
  table.konta .akcje .chip{margin-left:6px}
  .chip.usun{color:var(--red);border-color:var(--red)}

  /* --- strona przedmiotu: wgrywanie i lista materiałów --- */
  .upload{border:2px dashed var(--rule-strong);border-radius:12px;padding:22px 18px;text-align:center;
    background:var(--paper);margin:16px 0 4px;transition:border-color .12s,background .12s}
  .upload.nad{border-color:var(--accent);background:var(--green-bg)}
  .upload-glowny{margin:0 0 6px;font-size:17px;color:var(--ink-soft)}
  .upload-drobne{margin:4px 0 0;font-size:13.5px;color:var(--ink-soft)}
  .upload-drobne:last-child{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.04em;margin-top:10px}

  .kolejka-wiersz{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:14px}
  .kolejka-wiersz .kn{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kolejka-wiersz .pasek{flex:0 0 160px;height:7px;background:var(--paper);border:1px solid var(--rule);
    border-radius:99px;overflow:hidden}
  .kolejka-wiersz .pasek i{display:block;height:100%;background:var(--accent);transition:width .15s}
  .kolejka-wiersz .ks{flex:0 0 62px;text-align:right;font-family:ui-monospace,Menlo,monospace;
    font-size:11.5px;color:var(--ink-soft)}
  .kolejka-wiersz.ok .pasek i{background:var(--green)}
  .kolejka-wiersz.zle .pasek i{background:var(--red)}
  .kolejka-wiersz.zle .ks{color:var(--red)}

  ul.lista-plikow{list-style:none;margin:18px 0 0;padding:0}
  ul.lista-plikow li{display:flex;align-items:center;gap:12px;padding:11px 0;
    border-bottom:1px dotted var(--rule)}
  ul.lista-plikow li:last-child{border-bottom:none}
  ul.lista-plikow .nazwa{flex:1 1 auto;font-size:16px;color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--rule-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  ul.lista-plikow .nazwa:hover{color:var(--accent);border-color:var(--accent)}
  ul.lista-plikow .meta{flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
    color:var(--ink-soft);white-space:nowrap}
  @media (max-width:620px){
    ul.lista-plikow li{flex-wrap:wrap}
    ul.lista-plikow .nazwa{flex:1 1 100%}
    .kolejka-wiersz .pasek{flex:0 0 90px}
  }