:root{--bg:#171a26;--panel:#1f2333;--line:#2e3450;--fg:#e7e5df;--muted:#68728c;--accent:#4fd1c5;--bad:#ff6b81;--bad2:#8a3a49;--ok:#e7e5df}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Roboto Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;line-height:1.7}
a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* Zaglavlje */
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:26px;padding-bottom:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.7rem;color:var(--fg);text-decoration:none;letter-spacing:.01em}
.logo i{font-style:normal;color:var(--accent)}
.logo small{display:block;font-size:.6rem;color:var(--muted);font-weight:400;letter-spacing:.2em;margin-top:-6px}
nav.main{display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem}
nav.main a{color:var(--muted);text-decoration:none}
nav.main a:hover,nav.main a[aria-current]{color:var(--fg)}

/* Dok je tipkovnica na mobitelu otvorena, daj stranici prostor za pomicanje */
body.kbd{padding-bottom:65vh}

/* Gumb za instalaciju */
button.install{background:none;border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:1px 10px;font:inherit;font-size:.85rem;cursor:pointer;line-height:1.6}
button.install:hover{background:var(--accent);color:var(--bg)}
button.install[hidden]{display:none}
@media (max-width:760px){button.install{display:none!important}}
.install-cta{text-align:center;margin:6px 0 0}
.btn-install{background:var(--panel);color:var(--accent);border:1px solid var(--accent);border-radius:10px;padding:10px 18px;font:inherit;font-size:.85rem;cursor:pointer}
.btn-install:hover,.btn-install:focus-visible{background:var(--accent);color:var(--bg)}
.btn-install[hidden]{display:none}
#install-help{position:fixed;inset:0;background:rgba(10,12,20,.72);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
#install-help .box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;max-width:440px;width:100%;color:var(--fg)}
#install-help h2{margin:0 0 10px;font-size:1.15rem}
#install-help p,#install-help li{color:#aeb3c6;margin:6px 0}
#install-help .x{position:absolute;right:10px;top:6px;background:none;border:0;color:var(--muted);font-size:1.6rem;cursor:pointer;line-height:1}

/* Naslovi */
h1{font-size:1.05rem;font-weight:400;color:var(--muted);margin:26px 0 10px;text-align:center}
.page h1,.article h1{font-size:clamp(1.6rem,4vw,2.3rem);color:var(--fg);font-weight:700;text-align:left;margin:34px 0 8px;line-height:1.25}
h2{margin:42px 0 8px;font-size:1.3rem;color:var(--fg)}
h3{margin:24px 0 4px;color:var(--fg)}
p,li{color:#aeb3c6;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.lead{color:var(--muted);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.meta{color:var(--muted);font-size:.85rem}

/* Traka postavki */
.config{display:flex;justify-content:center;margin:12px 0 4px}
.pill{display:inline-flex;gap:2px;align-items:center;background:var(--panel);border-radius:10px;padding:6px 8px;flex-wrap:wrap;justify-content:center}
.pill .sep{width:4px;height:20px;background:var(--bg);border-radius:2px;margin:0 8px}
.pill button,.pill select{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;padding:6px 10px;border-radius:6px;cursor:pointer}
.pill button:hover,.pill select:hover{color:var(--fg)}
.pill button.active{color:var(--accent)}
.pill button[data-time]{font-size:1.1rem;padding:9px 14px}
.config2{margin-top:2px}
.pill button.locked{opacity:.45;cursor:not-allowed}
.pill select{appearance:none;-webkit-appearance:none;padding-right:10px;text-align:center}
.flags{display:flex;gap:4px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.pill .flag{background:none;border:0;padding:8px 9px 6px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font:inherit;font-size:.72rem;letter-spacing:.06em;opacity:.55;transition:opacity .15s,background .15s}
.pill .flag:hover{opacity:.9}
.pill .flag.active{opacity:1;color:var(--fg);background:var(--bg)}
.pill .flag svg{width:52px;height:35px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.14);display:block}
.pill .flag.active svg{box-shadow:0 0 0 2px var(--accent)}
.pill .flag:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:760px){.pill .flag svg{width:42px;height:28px}.flag{padding:6px 6px 4px}}
.pill select option{background:var(--panel);color:var(--fg)}

/* Test */
.stats{display:flex;gap:22px;align-items:baseline;margin:34px auto 4px;max-width:1000px;font-variant-numeric:tabular-nums;min-height:2.6rem}
.stat{display:flex;align-items:baseline;gap:8px}
.stat b{font-size:2rem;color:var(--accent);line-height:1}
.stat small{color:var(--muted);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.stat.dim b{font-size:1.2rem;color:var(--muted)}
#test-area{position:relative;max-width:1000px;margin:0 auto;cursor:text}
#words{position:relative;height:calc(3 * 2.3em);overflow:hidden;font-size:1.65rem;line-height:2.3em;color:var(--muted);user-select:none;transition:filter .15s}
#words.blur{filter:blur(5px)}
.w{display:inline-block;margin-right:.55ch;border-bottom:2px solid transparent;line-height:1.25;padding:.3em 0;vertical-align:middle}
.l.ok{color:var(--fg)}
.l.bad{color:var(--bad)}
.l.extra{color:var(--bad2)}
.w.wrong{border-bottom-color:var(--bad)}
#caret{position:absolute;left:0;top:0;width:3px;height:1.7em;background:var(--accent);border-radius:2px;pointer-events:none;transition:transform .09s ease-out;animation:blink 1s step-end infinite}
#test-area.running #caret{animation:none}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){#caret{animation:none;transition:none}}
#typing-input{position:absolute;left:-9999px;top:0;opacity:0;width:1px;height:1px}
#focus-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--fg);font-size:1rem;pointer-events:none;text-align:center;padding:12px}
#focus-hint.hide{display:none}
#test-area.done #words{opacity:.25}
.restart-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:22px 0 6px}
#restart{background:var(--panel);border:0;color:var(--muted);font-size:2.6rem;line-height:1;cursor:pointer;padding:10px 34px 12px;border-radius:14px;transition:color .15s,background .15s,transform .15s}
#restart:focus-visible{color:var(--accent);background:var(--line)}
@media (hover:hover) and (pointer:fine){#restart:hover{color:var(--accent);background:var(--line);transform:rotate(90deg)}}
#restart.spin{animation:rspin .45s ease-out}
@keyframes rspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#restart.spin{animation:none}#restart:hover{transform:none}}
@media (max-width:760px){#restart{font-size:2.3rem;padding:8px 30px 10px}}
.hint{color:var(--muted);font-size:.8rem;text-align:center;margin:0}
kbd{background:var(--fg);color:var(--bg);border-radius:4px;padding:1px 6px;font-size:.75rem;font-family:inherit}

/* Rezultat (kao Monkeytype) */
#result{max-width:1000px;margin:26px auto 0;display:grid;grid-template-columns:auto 1fr;gap:10px 48px;align-items:start}
#result[hidden]{display:none}
.big{display:flex;flex-direction:column;gap:6px}
.big div small{display:block;color:var(--muted);font-size:1.3rem;line-height:1}
.big div b{font-size:5.2rem;color:var(--accent);line-height:1;font-weight:700}
.det{display:flex;gap:34px;flex-wrap:wrap;padding-top:6px}
.det div small{display:block;color:var(--muted);font-size:1rem}
.det div b{font-size:2rem;color:var(--accent);line-height:1.2;font-weight:700}
.res-extra{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.res-level{margin:0;font-size:1.05rem;color:var(--fg)}
.res-best{margin:0;color:var(--muted);font-size:.9rem}
.res-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{background:var(--panel);color:var(--fg);border:0;border-radius:8px;padding:10px 16px;font:inherit;font-size:.85rem;cursor:pointer}
.btn:hover{background:var(--line)}
.btn.primary{background:var(--accent);color:var(--bg);font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.res-actions input[type=text]{background:var(--panel);border:1px solid transparent;border-radius:8px;color:var(--fg);padding:10px 12px;font:inherit;font-size:.85rem;min-width:200px}
.res-actions input[type=text]:focus{outline:none;border-color:var(--accent)}

/* Lekcije i sadrzaj */
.lessons{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;justify-content:center}
.lessons button{background:var(--panel);border:0;color:var(--muted);font:inherit;font-size:.85rem;padding:8px 14px;border-radius:8px;cursor:pointer}
.lessons button:hover{color:var(--fg)}
.lessons button.active{color:var(--bg);background:var(--accent);font-weight:700}
.lesson-head{text-align:center;margin:14px 0 0}
.lesson-head h2{margin:6px 0 2px;font-size:1.2rem}
.lesson-head p{margin:0;font-size:.9rem;color:var(--muted)}
.card{background:var(--panel);border-radius:12px;padding:16px 20px;margin:12px 0}
.card a{font-weight:700;text-decoration:none}
.card p{margin:4px 0 0;color:var(--muted)}
table{border-collapse:collapse;width:100%;margin:16px 0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
th,td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;color:#aeb3c6}
th{color:var(--accent)}
.note{border-left:3px solid var(--accent);background:var(--panel);padding:8px 16px;border-radius:0 8px 8px 0}
.faq details{background:var(--panel);border-radius:10px;padding:12px 18px;margin:8px 0}
.faq summary{cursor:pointer;color:var(--fg)}
.faq p{margin:8px 0 0}
.kb{margin:18px 0;font-family:inherit}
.kb .row{display:flex;gap:6px;margin:6px 0}
.kb .o2{margin-left:24px}.kb .o3{margin-left:48px}
.kb span{min-width:38px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--panel);border-radius:6px;color:var(--muted)}
.kb .home{color:var(--accent);outline:1px solid var(--accent)}
.content{max-width:760px;margin:0 auto}
footer.site{margin-top:70px;padding:26px 0 34px;color:var(--muted);font-size:.8rem;text-align:center}
footer.site a{color:var(--muted);text-decoration:none;margin:0 8px}
footer.site a:hover{color:var(--fg)}

@media (max-width:760px){
  .wrap{padding:0 16px}
  #words{font-size:1.2rem}
  .stats{margin-top:22px}
  #result{grid-template-columns:1fr;gap:6px}
  .big div b{font-size:3.6rem}
  .det{gap:24px}
  .logo{font-size:1.4rem}
}