*{box-sizing:border-box} :root{--blue:#204791;--red:#bc1c35;--ink:#24364d;--pale:#e7effa}body{margin:0;font-family:Arial,sans-serif;color:var(--ink);background:repeating-linear-gradient(135deg,#f7f9fc 0 5px,#edf2f8 5px 7px);line-height:1.65}.shell{max-width:1160px;margin:auto;padding:20px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0 22px;border-bottom:3px solid var(--red)}.publisher img{width:110px;max-height:70px;object-fit:contain}.home{font-weight:800;font-size:13px}.script-switch{display:flex;gap:5px}button,.button{font:inherit;cursor:pointer;border-radius:7px;border:2px solid var(--blue);padding:10px 16px;background:var(--pale);color:var(--blue);font-weight:700;text-decoration:none;display:inline-block}button[aria-pressed=true],.primary{background:var(--blue);color:#fff}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:4px}a{color:var(--blue)}h1,h2,h3{line-height:1.2}h1{font-size:clamp(30px,5vw,48px);color:var(--red)}h2{color:var(--blue)}.hero{display:grid;grid-template-columns:340px 1fr;gap:42px;align-items:center;margin:36px 0}.szs-logo{display:block;width:100%;border-radius:12px}.eyebrow{font-weight:800;letter-spacing:.08em;font-size:12px;color:var(--blue)}.levels{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.levels button{min-width:42px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.exercise{background:#fff;border:1px solid #cbd8e9;border-top:4px solid var(--blue);border-radius:10px;padding:22px;display:flex;flex-direction:column;box-shadow:0 4px 12px #20479108}.exercise:has(a){border-top-color:var(--red)}.exercise h3{font-size:21px;margin:20px 0 10px}.exercise h3 a{text-decoration:none}.exercise p{font-size:15px;margin:0 0 24px}.card-top{display:flex;justify-content:space-between;align-items:center}.number{font-weight:bold;font-size:24px;color:#a3b4cb}.badge{font-size:12px;background:var(--pale);padding:3px 9px;border-radius:20px}.card-link,.soon{margin-top:auto;font-size:12px;font-weight:800;letter-spacing:.05em}.soon{color:#647388}.book-section{display:grid;grid-template-columns:1fr 240px;gap:40px;align-items:center;margin:48px 0;padding:30px;background:#fff;border:2px solid var(--blue);border-radius:12px}.cover-open{padding:0;border:0;background:none}.cover-open img{width:100%;display:block}.game-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.game-links a{display:flex;align-items:center;flex-direction:column;text-align:center;background:#fff;border:2px solid var(--blue);border-radius:10px;padding:18px;text-decoration:none;font-size:13px;font-weight:800}.game-links img{height:95px;width:110px;object-fit:contain;margin-bottom:14px}footer{border-top:3px solid var(--red);padding-top:25px;margin-top:40px}footer h2{font-size:18px;text-align:center;margin-bottom:25px}.credit{text-align:center;font-size:12px}.article{max-width:900px;margin:28px auto;background:white;padding:clamp(20px,5vw,48px);border:1px solid #ccd8e9;border-radius:12px}.article p{text-align:left}.meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#566b85}.languages{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}.languages a{padding:6px 10px;text-decoration:none;border:1px solid #b9cbe2;border-radius:5px;font-size:13px}.languages a[aria-current=true]{background:var(--blue);color:white}.cir-cta{display:flex;align-items:center;justify-content:center;gap:15px;margin:20px 0}.cir-cta img{width:65px;height:65px;object-fit:contain}.audio{margin:15px 0}.audio-status{font-size:13px;color:#66758a;margin-left:10px}.draft{font-size:12px;color:#62728a}.test-copy{line-height:2.9;font-size:18px}.blank{display:inline-block;min-width:2ch;width:4ch;border:0;border-bottom:2px solid var(--blue);border-radius:3px;font:inherit;color:var(--blue);text-align:center;background:#edf3fc;padding:1px 2px;max-width:12ch}.blank.correct{background:#e3f3e7;border-color:#257442}.blank.wrong{background:#fff0ef;border-color:var(--red)}.test-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.feedback{padding:15px;background:var(--pale);margin-top:20px}.solutions{white-space:pre-wrap}dialog{border:2px solid var(--blue);border-radius:10px;max-width:95vw;width:1100px;max-height:95vh}dialog::backdrop{background:#142b4bc9}.cover-scroll{overflow:auto;max-height:70vh}.cover-scroll img{width:100%;max-width:none}[hidden]{display:none!important}@media(max-width:760px){.shell{padding:12px}header{flex-wrap:wrap;gap:12px}.home{order:3;width:100%;text-align:center}.publisher img{width:85px}.hero{grid-template-columns:1fr;gap:15px;margin:22px 0}.hero>a{max-width:310px;margin:auto}.cards{grid-template-columns:1fr 1fr}.book-section{grid-template-columns:1fr;padding:22px}.cover-open{max-width:220px;margin:auto}.game-links{grid-template-columns:1fr}.game-links a{flex-direction:row;text-align:left;gap:20px}.game-links img{margin:0;width:75px;height:75px}.cir-cta{flex-direction:column}.cir-cta .button{text-align:center}.meta{flex-wrap:wrap}}@media(max-width:450px){.cards{grid-template-columns:1fr}}
.mini-brand img{width:64px;height:64px;object-fit:contain;border-radius:6px}.mini-brand{flex-shrink:0}@media(max-width:760px){.mini-brand img{width:50px;height:50px}.script-switch{margin-left:auto}}

/* Test: po jedna plava crtica za svako slovo. */
.test-copy{color:#111}.test-copy p{line-height:3}.blank{font-family:monospace;font-size:1em;letter-spacing:.5ch;text-align:left;box-sizing:content-box;width:calc(var(--slots)*1.5ch);min-width:0;max-width:none;padding:2px 0 5px;margin:0 1px;border:0;border-radius:2px;color:#204791;background-color:#e5eefb;background-image:linear-gradient(90deg,#204791 0 1ch,transparent 1ch 1.5ch);background-size:1.5ch 2px;background-repeat:repeat-x;background-position:left bottom;caret-color:#204791}.blank::placeholder{color:transparent}.blank.correct{background-color:#e5eefb;color:#204791;border:0}.blank.wrong{background-color:#ffe5e5;color:#b51629;background-image:linear-gradient(90deg,#b51629 0 1ch,transparent 1ch 1.5ch);border:0}.blank:focus{outline:2px solid #204791;outline-offset:3px}

/* Polja u istom fontu i redu sa celom recju. */
.test-copy,.test-copy p{line-height:2.25;color:#111}.test-word{white-space:nowrap;display:inline-block}.gap{display:inline-block;position:relative;vertical-align:baseline;width:var(--gap-width);height:1.35em;background:#e5eefb;border-radius:2px}.test-copy .gap .blank{position:relative;z-index:1;display:inline-block;box-sizing:border-box;font:inherit;letter-spacing:normal;text-align:left;color:#111;background:transparent!important;border:0!important;padding:0;margin:0;width:100%;min-width:0;max-width:none;height:1.35em;line-height:1.35;vertical-align:baseline;border-radius:2px;caret-color:#111}.gap-lines{position:absolute;inset:0;display:flex;align-items:flex-end;gap:.1em;pointer-events:none;padding:0 .03em .16em}.gap-line{flex:1;min-width:0;border-bottom:1.5px solid #204791;height:0}.gap-line.filled{visibility:hidden}.test-copy .gap .blank.correct{color:#111}.test-copy .gap:has(.blank.wrong){background:#ffe5e5}.test-copy .gap .blank.wrong{color:#b51629}.gap:has(.blank.wrong) .gap-line{border-color:#b51629}.test-copy .blank:focus{outline:2px solid #204791;outline-offset:2px}

/* Vidljiv razmak oko cele reci, bez razdvajanja nastavka od osnove. */
.test-copy .test-word{margin-inline:0 .12em}.test-copy .test-word.whole-word{margin-inline:.3em}.test-copy .test-word.whole-word .gap{box-shadow:inset 1px 0 #b9cde9,inset -1px 0 #b9cde9}

/* Zajednicko zaglavlje digitalnog izdanja. */
.szs-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:28px}.digital-brand,.order-book{display:flex;flex-direction:column;align-items:center;text-decoration:none;text-align:center;line-height:1.35;font-weight:800}.digital-brand{width:135px;flex:none;font-size:11px}.digital-brand img{width:100px;height:100px;object-fit:contain;border-radius:7px;margin-bottom:7px}.digital-brand small{font-size:10px;font-weight:600;letter-spacing:.06em}.szs-header .publisher{margin-right:auto}.szs-header .publisher img{width:110px;max-height:80px}.order-book{font-size:11px;gap:7px;flex:none}.order-book img{width:64px;height:90px;object-fit:contain}.szs-header .script-switch{margin-left:8px}@media(max-width:760px){.szs-header{gap:15px;justify-content:space-between}.digital-brand{width:112px;font-size:10px}.digital-brand img{width:80px;height:80px}.digital-brand small{font-size:9px}.szs-header .publisher{margin:0}.szs-header .publisher img{width:80px}.order-book{font-size:10px}.order-book img{width:52px;height:74px}.szs-header .script-switch{flex-basis:100%;margin:0;justify-content:center}}

.szs-home .digital-brand{width:185px}.szs-home .digital-brand img{width:150px;height:150px}.hero-order{text-align:center;text-decoration:none}.hero-order .szs-logo{width:220px;max-width:100%;margin:0 auto 15px}.hero-order .button{font-size:13px}@media(max-width:760px){.szs-home .digital-brand{width:145px}.szs-home .digital-brand img{width:110px;height:110px}.szs-home .publisher img{width:66px}.szs-home .szs-header{gap:10px}}

/* Krupan prepoznatljiv znak na svim stranicama SZS. */
.szs-header .digital-brand,.szs-home .digital-brand{width:280px;font-size:13px}.szs-header .digital-brand img,.szs-home .digital-brand img{width:260px;height:260px}.szs-header .digital-brand small{font-size:12px}@media(max-width:760px){.szs-header .digital-brand,.szs-home .digital-brand{width:100%;font-size:13px}.szs-header .digital-brand img,.szs-home .digital-brand img{width:250px;height:250px;max-width:85vw}.szs-header .publisher{margin-right:auto}.szs-header .script-switch{flex-basis:100%}}

/* Jedno stalno mesto i ista velicina znaka: poseban red iznad zaglavlja. */
.digital-brand-row{display:flex;justify-content:center;padding:24px 0 20px}.digital-brand-row .digital-brand,.szs-home .digital-brand-row .digital-brand{display:flex;align-items:center;width:280px;font-size:13px}.digital-brand-row .digital-brand img,.szs-home .digital-brand-row .digital-brand img{width:260px;height:260px}.digital-brand-row .digital-brand small{font-size:12px}.szs-header{gap:24px}.szs-header .publisher{margin-right:auto}.szs-header .script-switch{margin-left:auto}@media(max-width:760px){.digital-brand-row{padding:16px 0}.digital-brand-row .digital-brand img,.szs-home .digital-brand-row .digital-brand img{width:250px;height:250px;max-width:85vw}.szs-header .script-switch{flex-basis:auto;margin-left:0}.szs-header{justify-content:space-between;gap:12px}}