/* ============================================================
   Tipkalica — dizajn sustav
   ============================================================ */

:root {
  /* Površine i tekst — svijetla tema */
  --bg:          #f6f7fb;
  --surface:     #ffffff;
  --surface-2:   #eef0f6;
  --border:      #d9dce6;
  --border-soft: #e8eaf1;
  --text:        #1a1d27;
  --muted:       #646b80;
  --faint:       #9aa1b4;

  /* Brend i stanja */
  --accent:      #4f46e5;
  --accent-soft: #e8e7fd;
  --accent-text: #ffffff;
  --ok:          #0d9f6e;
  --ok-soft:     #d8f5eb;
  --err:         #dc2626;
  --err-soft:    #fde2e2;
  --warn:        #b45309;
  --warn-soft:   #fdf0d5;

  /* Prsti — zrcalno: isti prst lijevo i desno ima istu boju */
  --f-pinky:   #e0518a;
  --f-ring:    #d97706;
  --f-middle:  #0d9f6e;
  --f-index:   #2563eb;
  --f-stretch: #7dabf8;
  --f-thumb:   #7c3aed;

  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 1px 2px rgba(20, 24, 40, .06), 0 4px 16px rgba(20, 24, 40, .06);
  --shadow-lg: 0 8px 40px rgba(20, 24, 40, .14);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --bg:          #0e1017;
    --surface:     #171a24;
    --surface-2:   #1f2330;
    --border:      #2c3142;
    --border-soft: #232735;
    --text:        #eef0f6;
    --muted:       #99a1b8;
    --faint:       #666e85;

    --accent:      #8b87ff;
    --accent-soft: #272443;
    --accent-text: #0e1017;
    --ok:          #2dd4a0;
    --ok-soft:     #13322a;
    --err:         #f87171;
    --err-soft:    #3a1d1f;
    --warn:        #fbbf24;
    --warn-soft:   #362a12;

    --f-pinky:   #f472b6;
    --f-ring:    #fbbf24;
    --f-middle:  #34d399;
    --f-index:   #60a5fa;
    --f-stretch: #2f6ec4;
    --f-thumb:   #a78bfa;

    --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --bg:          #0e1017;
  --surface:     #171a24;
  --surface-2:   #1f2330;
  --border:      #2c3142;
  --border-soft: #232735;
  --text:        #eef0f6;
  --muted:       #99a1b8;
  --faint:       #666e85;

  --accent:      #8b87ff;
  --accent-soft: #272443;
  --accent-text: #0e1017;
  --ok:          #2dd4a0;
  --ok-soft:     #13322a;
  --err:         #f87171;
  --err-soft:    #3a1d1f;
  --warn:        #fbbf24;
  --warn-soft:   #362a12;

  --f-pinky:   #f472b6;
  --f-ring:    #fbbf24;
  --f-middle:  #34d399;
  --f-index:   #60a5fa;
  --f-stretch: #2f6ec4;
  --f-thumb:   #a78bfa;

  --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);
}

/* ---------- Osnove ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Ljuska ---------- */

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-text);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
}

.topbar nav { display: flex; gap: 2px; margin-left: 8px; flex-wrap: wrap; }

.topbar nav a {
  padding: 6px 11px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 550;
  white-space: nowrap;
}
.topbar nav a:hover { background: var(--surface-2); color: var(--text); }
.topbar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.topbar .spacer { flex: 1; }

main { flex: 1; width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 16px 64px; }
.wrap-narrow { max-width: 620px; }

/* ---------- Gumbi i kontrole ---------- */

.btn {
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .13s, border-color .13s, transform .06s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { color: var(--err); border-color: var(--err); background: transparent; }
.btn-danger:hover { background: var(--err-soft); }
.btn-sm { padding: 5px 10px; font-size: .84rem; border-radius: 7px; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .875rem; }
.tiny  { font-size: .8rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 14px; }
.row-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.notice {
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: .9rem;
  border: 1px solid transparent;
}
.notice-warn { background: var(--warn-soft); color: var(--warn); border-color: currentColor; }
.notice-err  { background: var(--err-soft);  color: var(--err);  border-color: currentColor; }
.notice-ok   { background: var(--ok-soft);   color: var(--ok);   border-color: currentColor; }
.notice-info { background: var(--accent-soft); color: var(--accent); border-color: currentColor; }

/* ---------- Virtualna tipkovnica ---------- */

.keyboard {
  --unit: min(4.6vw, 52px);
  --gap: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: calc(var(--gap) * 2.5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  user-select: none;
  width: fit-content;
  margin: 0 auto;
}

.kb-row { display: flex; gap: var(--gap); }

.key {
  width: calc(var(--unit) * var(--w, 1) + var(--gap) * (var(--w, 1) - 1));
  height: var(--unit);
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: calc(var(--unit) * .36);
  color: var(--muted);
  position: relative;
  transition: background .09s, color .09s, border-color .09s, transform .06s;
}

.key-filler { background: transparent; border-color: transparent; }
.key-special { font-family: var(--sans); font-size: calc(var(--unit) * .27); }

/* Kvačice na F i J */
.key-bump::after {
  content: "";
  position: absolute;
  bottom: calc(var(--unit) * .13);
  width: calc(var(--unit) * .3);
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .5;
}

/* Bojanje po prstu — aktivira se klasom na .keyboard */
.keyboard.show-fingers .key[data-finger="l5"],
.keyboard.show-fingers .key[data-finger="r5"] { color: var(--f-pinky);  border-color: var(--f-pinky); }
.keyboard.show-fingers .key[data-finger="l4"],
.keyboard.show-fingers .key[data-finger="r4"] { color: var(--f-ring);   border-color: var(--f-ring); }
.keyboard.show-fingers .key[data-finger="l3"],
.keyboard.show-fingers .key[data-finger="r3"] { color: var(--f-middle); border-color: var(--f-middle); }
.keyboard.show-fingers .key[data-finger="l2"],
.keyboard.show-fingers .key[data-finger="r2"] { color: var(--f-index);  border-color: var(--f-index); }
.keyboard.show-fingers .key[data-stretch="1"] { color: var(--f-stretch); border-color: var(--f-stretch); }
.keyboard.show-fingers .key[data-finger="thumb"] { color: var(--f-thumb); border-color: var(--f-thumb); }
.keyboard.show-fingers .key-filler { border-color: transparent; }

/* Tipka koju treba pritisnuti.
   Selektor mora nadjačati bojanje po prstu (.keyboard.show-fingers .key[data-finger])
   koje ima specifičnost (0,4,0) — inače slovo ostane u boji prsta na obojenoj
   podlozi i praktički se ne vidi. */
.keyboard .key.is-target,
.keyboard.show-fingers .key.is-target,
.keyboard.show-fingers .key.is-target[data-stretch="1"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  transform: translateY(1px);
  box-shadow: 0 0 0 3px var(--accent-soft);
  z-index: 1;
}
.keyboard .key.is-target .key-shift { color: var(--accent-text); opacity: .7; }

/* Tipka koja je fizički pritisnuta */
.key.is-down {
  transform: translateY(2px);
  border-bottom-width: 1px;
  background: var(--surface-2);
}
.keyboard .key.is-error,
.keyboard.show-fingers .key.is-error,
.keyboard.show-fingers .key.is-error[data-stretch="1"] {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
  z-index: 2;
}

/* Home pozicija */
.key.is-home { box-shadow: inset 0 -3px 0 var(--border); }

.key-main  { line-height: 1; }
.key-shift {
  position: absolute;
  top: calc(var(--unit) * .11);
  right: calc(var(--unit) * .13);
  font-size: calc(var(--unit) * .24);
  opacity: .45;
  line-height: 1;
}

/* Legenda prstiju */
.finger-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.finger-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.finger-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- Prikaz ruku ---------- */

.hands { display: flex; gap: 34px; justify-content: center; margin: 14px 0 0; }
.hand { display: flex; gap: 5px; align-items: flex-end; }
.hand-right { flex-direction: row-reverse; }
.finger-bar {
  width: 15px;
  border-radius: 8px 8px 3px 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background .1s, height .1s;
}
.finger-bar[data-len="1"] { height: 34px; }
.finger-bar[data-len="2"] { height: 46px; }
.finger-bar[data-len="3"] { height: 52px; }
.finger-bar[data-len="4"] { height: 44px; }
.finger-bar[data-len="thumb"] { height: 24px; width: 24px; border-radius: 8px; }
.finger-bar.is-active { background: var(--accent); border-color: var(--accent); }

/* ---------- Polje za tipkanje ---------- */

.typer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: var(--shadow);
}
.typer.is-blurred .typer-text { filter: blur(4px); opacity: .5; }

.typer-text {
  font-family: var(--mono);
  font-size: 1.45rem;
  line-height: 2.05;
  letter-spacing: .01em;
  white-space: pre-wrap;
  word-break: break-word;
  transition: filter .18s, opacity .18s;
}

.ch { position: relative; border-radius: 3px; color: var(--faint); }
.ch-done    { color: var(--muted); }
.ch-wrong   { color: var(--err); background: var(--err-soft); text-decoration: underline wavy var(--err); }
.ch-space   { }
.ch-space.ch-wrong::before { content: "␣"; position: absolute; inset: 0; color: var(--err); }

.ch-current {
  color: var(--text);
  background: var(--accent-soft);
}
.ch-current::after {
  content: "";
  position: absolute;
  left: -2px; top: -.18em; bottom: -.18em;
  width: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  animation: caret 1.05s steps(2, jump-none) infinite;
}
@keyframes caret { 0%, 45% { opacity: 1; } 50%, 95% { opacity: .15; } }

.typer-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-radius: var(--radius-lg);
  text-align: center;
  padding: 20px;
  cursor: pointer;
}
.typer-overlay strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }

/* Traka statistike iznad teksta */
.hud {
  display: flex;
  gap: 26px;
  align-items: baseline;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hud-item { display: flex; flex-direction: column; gap: 1px; }
.hud-val {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hud-lab { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; }
.hud-val.is-ok  { color: var(--ok); }
.hud-val.is-bad { color: var(--err); }

.progress-track {
  height: 5px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 18px;
}
.progress-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .2s; }

/* ---------- Mreža lekcija ---------- */

.phase + .phase { margin-top: 34px; }
.phase-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.phase-head h2 { margin: 0; }
.phase-desc { color: var(--muted); font-size: .92rem; margin: 0 0 14px; max-width: 70ch; }

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 11px;
}

.lesson-card {
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color .13s, transform .07s, box-shadow .13s;
}
.lesson-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.lesson-card[disabled] { opacity: .5; cursor: not-allowed; transform: none; border-color: var(--border); box-shadow: none; }
.lesson-card.is-done { border-color: var(--ok); }

.lesson-no { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; }
.lesson-title { font-weight: 600; font-size: .96rem; line-height: 1.3; }
.lesson-keys { display: flex; gap: 4px; flex-wrap: wrap; }
.kbd {
  font-family: var(--mono);
  font-size: .78rem;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.lesson-foot { display: flex; gap: 10px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: auto; }

/* ---------- Tablica ---------- */

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); }
table.data th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 650; }
table.data td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Obrasci ---------- */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: .84rem; font-weight: 600; color: var(--muted); }
.field input, .field select {
  font: inherit;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field .hint { font-size: .8rem; color: var(--faint); }

/* ---------- Pomoćno ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .wrap { padding: 18px 16px 48px; }
  .typer { padding: 20px 18px; }
  .typer-text { font-size: 1.2rem; line-height: 1.95; }
  .keyboard { --unit: min(6.2vw, 40px); }
  .hud { gap: 18px; }
  .hud-val { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}