/* CY HQ, tamna terminal estetika. Bez vanjskih fontova i ikona. */
:root {
  --poz: #0a0e0a;
  --poz2: #0d140e;
  --tekst: #c8facc;
  --tekst-prigusen: #6f9c78;
  --akcent: #33ff66;
  --upozorenje: #ffb020;
  --rub: #1e3a24;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--poz);
  color: var(--tekst);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--akcent); text-decoration: none; }
.skriveno { display: none !important; }

/* ---------- PIN ekran ---------- */
.pin-ekran {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--poz);
  z-index: 10;
}
.pin-kutija {
  border: 1px solid var(--rub);
  background: var(--poz2);
  padding: 32px;
  width: min(340px, 90vw);
  text-align: center;
}
.pin-naslov { font-size: 28px; letter-spacing: 6px; color: var(--akcent); }
.pin-podnaslov { color: var(--tekst-prigusen); margin: 6px 0 22px; font-size: 12px; }
.pin-kutija input {
  width: 100%; padding: 10px; margin-bottom: 12px;
  background: var(--poz); color: var(--tekst);
  border: 1px solid var(--rub); font-family: var(--mono); font-size: 16px;
  text-align: center; letter-spacing: 8px;
}
.pin-kutija input:focus { outline: none; border-color: var(--akcent); }
.pin-kutija button {
  width: 100%; padding: 10px;
  background: transparent; color: var(--akcent);
  border: 1px solid var(--akcent); font-family: var(--mono); font-size: 14px;
  letter-spacing: 3px; cursor: pointer;
}
.pin-kutija button:hover { background: var(--akcent); color: var(--poz); }
.pin-greska { color: var(--upozorenje); min-height: 18px; margin-top: 10px; font-size: 12px; }

/* ---------- zaglavlje ---------- */
.zaglavlje {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rub);
  background: var(--poz2);
  position: sticky; top: 0; z-index: 5;
}
.zaglavlje-lijevo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.accounti { margin-bottom: 0; }
.accounti .gumb { font-size: 11px; padding: 4px 10px; }
.logo { font-size: 20px; letter-spacing: 5px; color: var(--akcent); }
.account { color: var(--tekst-prigusen); font-size: 12px; }
.tabovi { display: flex; flex-wrap: wrap; gap: 4px; }
.tabovi a {
  padding: 6px 12px; border: 1px solid var(--rub); color: var(--tekst-prigusen);
  font-size: 12px; letter-spacing: 2px;
}
.tabovi a:hover { color: var(--tekst); border-color: var(--tekst-prigusen); }
.tabovi a.aktivan { color: var(--poz); background: var(--akcent); border-color: var(--akcent); }

main { padding: 20px; max-width: 1200px; margin: 0 auto; }
.tab { display: none; }
.tab.aktivan { display: block; }

/* ---------- opci elementi ---------- */
h2 { font-size: 15px; letter-spacing: 3px; color: var(--akcent); margin: 26px 0 10px; font-weight: normal; }
h2:first-child { margin-top: 0; }
.prigusen { color: var(--tekst-prigusen); }
.napomena { color: var(--tekst-prigusen); font-size: 12px; margin: 8px 0 0; max-width: 80ch; }

.bedz {
  display: inline-block; padding: 1px 8px; margin-left: 8px;
  border: 1px solid var(--upozorenje); color: var(--upozorenje);
  font-size: 11px; letter-spacing: 1px; vertical-align: middle;
}
.bedz-tiho { border-color: var(--rub); color: var(--tekst-prigusen); }
.bedz-zeleni { border-color: var(--akcent); color: var(--akcent); }

.gumbi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.gumb {
  padding: 6px 12px; border: 1px solid var(--rub); background: transparent;
  color: var(--tekst-prigusen); font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.gumb:hover { color: var(--tekst); border-color: var(--tekst-prigusen); }
.gumb.aktivan { color: var(--poz); background: var(--akcent); border-color: var(--akcent); }

input[type="search"], input[type="text"] {
  padding: 6px 10px; background: var(--poz2); color: var(--tekst);
  border: 1px solid var(--rub); font-family: var(--mono); font-size: 13px; min-width: 220px;
}
input[type="search"]:focus, input[type="text"]:focus { outline: none; border-color: var(--akcent); }

/* ---------- kartice stanja ---------- */
.kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kartica { border: 1px solid var(--rub); background: var(--poz2); padding: 12px 14px; }
.kartica .oznaka { font-size: 11px; letter-spacing: 2px; color: var(--tekst-prigusen); }
.kartica .vrijednost { font-size: 22px; color: var(--tekst); margin: 4px 0 2px; }
.kartica .delta { font-size: 12px; }
.delta.gore { color: var(--akcent); }
.delta.dolje { color: var(--upozorenje); }
.delta.nula { color: var(--tekst-prigusen); }

/* ---------- graf ---------- */
.graf-okvir { border: 1px solid var(--rub); background: var(--poz2); padding: 12px; overflow-x: auto; }
.graf-legenda { display: flex; gap: 18px; font-size: 12px; margin-bottom: 6px; }
.graf-legenda span::before { content: "\2588"; margin-right: 6px; }
.legenda-cash::before { color: var(--akcent); }
.legenda-xp::before { color: var(--upozorenje); }

/* ---------- trake (ekrani, akcije) ---------- */
.trake { display: grid; gap: 4px; }
.traka { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 60px; align-items: center; gap: 10px; }
.traka .ime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.traka .sipka { background: #122115; height: 16px; }
.traka .sipka > div { background: var(--akcent); height: 100%; opacity: 0.75; }
.traka .broj { text-align: right; font-size: 12px; color: var(--tekst-prigusen); }
.dva-stupca { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; }

/* ---------- tablice ---------- */
.tablica-okvir { overflow-x: auto; border: 1px solid var(--rub); }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { padding: 5px 9px; text-align: left; border-bottom: 1px solid var(--rub); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--poz2); color: var(--akcent); cursor: pointer; user-select: none; font-weight: normal; }
th:hover { color: var(--tekst); }
th .strelica { color: var(--tekst-prigusen); }
tbody tr:hover { background: #10190f; }
td.broj { text-align: right; }

/* ---------- dnevnik ---------- */
.dan { margin-top: 22px; }
.dan-naslov { color: var(--akcent); border-bottom: 1px solid var(--rub); padding-bottom: 4px; letter-spacing: 2px; }
.lekcija { border: 1px solid var(--rub); background: var(--poz2); padding: 12px 14px; margin-top: 10px; }
.lekcija-naslov { color: var(--tekst); margin-bottom: 6px; }
.lekcija-tekst { color: var(--tekst-prigusen); max-width: 90ch; }
.lekcija-podnozje { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; }
.tag { border: 1px solid var(--rub); padding: 1px 7px; color: var(--tekst-prigusen); }

/* ---------- planovi ---------- */
.plan { border: 1px solid var(--rub); background: var(--poz2); padding: 14px 16px; margin-bottom: 16px; }
.plan-zaglavlje { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; }
.napredak { height: 6px; background: #122115; margin: 10px 0 14px; }
.napredak > div { height: 100%; background: var(--akcent); }
.cilj { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rub); }
.znak { font-size: 14px; }
.znak.gotovo { color: var(--akcent); }
.znak.u-tijeku { color: var(--upozorenje); }
.znak.nije-poceto { color: var(--tekst-prigusen); }
.cilj-napomena { color: var(--tekst-prigusen); font-size: 12px; }

/* mali napredak pojedinog auto cilja (unutar .cilj) */
.napredak-cilj { max-width: 320px; height: 5px; margin-top: 4px; }