/* Alat: Koliko je cest Vas PIN? ALAT-PIN-2026-08-19 */
.pin-uvod { margin-bottom: 1rem; }
.pin-cinjenice {
  list-style: none; padding: 0; margin: 1.4rem 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
}
@media (max-width: 700px) { .pin-cinjenice { grid-template-columns: 1fr; } }
.pin-cinjenice li {
  background: #11161d; border: 1px solid #24333f; border-radius: 6px;
  padding: .7rem .9rem; font-size: .92rem;
}

.pin-sekcija { margin-top: 2.2rem; }
.pin-sekcija h2 { font-size: 1.15rem; margin: 0 0 .8rem; }

.pin-tabela {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem .9rem;
  background: #11161d; border: 1px solid #24333f; border-radius: 6px;
  padding: .9rem 1rem;
}
@media (max-width: 560px) { .pin-tabela { grid-template-columns: 1fr; } }
.pin-red { display: flex; align-items: baseline; gap: .6rem; font-size: .92rem; }
.pin-rang { color: #6b7887; min-width: 1.8rem; text-align: right; }
.pin-kod {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-weight: 700; color: #e8edf3; letter-spacing: .06em;
}
.pin-pct { color: #93a1b0; margin-left: auto; font-variant-numeric: tabular-nums; }

.pin-obrasci h3 { font-size: 1rem; margin: 1.2rem 0 .3rem; color: #00c8dc; }
.pin-obrasci p { margin: 0; font-size: .93rem; }

.pin-provera {
  margin-top: 2.4rem; padding: 1.2rem; border-radius: 8px;
  background: rgba(0, 200, 220, .05); border: 1px solid #24333f;
}
.pin-provera h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.pin-upozorenje {
  background: rgba(255, 179, 71, .1); border-left: 3px solid #ffb347;
  padding: .8rem 1rem; margin: 0 0 1.1rem; font-size: .93rem;
}
.pin-polje-red { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
#pin-polje {
  width: 8rem; padding: .6rem .8rem; text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.5rem; letter-spacing: .3em; border: 1px solid #3a4553;
  border-radius: 6px; background: #11161d; color: #e8edf3;
}
#pin-polje:focus { outline: 2px solid #00c8dc; outline-offset: 1px; }
/* Skrivanje je CISTO vizuelno - type ostaje "text". */
#pin-polje.pin-skriveno { -webkit-text-security: disc; text-security: disc; }
.pin-btn {
  padding: .6rem 1.2rem; border-radius: 6px; cursor: pointer;
  font-size: .95rem; font-weight: 600; border: 1px solid transparent;
  background: #00c8dc; color: #08111a;
}
.pin-btn:hover { background: #26d9ea; }
.pin-btn-sporedni { background: transparent; color: #b9c4d0; border-color: #3a4553; }
.pin-btn-sporedni:hover { border-color: #6b7887; color: #e8edf3; }
.pin-sitno { font-size: .85rem; color: #93a1b0; margin: .7rem 0 0; }

.pin-greska {
  margin-top: 1rem; padding: .7rem 1rem; border-radius: 6px;
  background: rgba(220, 70, 70, .1); border-left: 3px solid #dc4646;
}
.pin-rezultat {
  margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: 6px;
  background: #11161d; border-left: 3px solid #3a4553;
}
.pin-rezultat h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.pin-rezultat p { margin: 0; font-size: .93rem; }
.pin-nivo-visok { border-left-color: #dc4646; }
.pin-nivo-visok h3 { color: #ff7b6b; }
.pin-nivo-srednji { border-left-color: #ffb347; }
.pin-nivo-srednji h3 { color: #ffb347; }
.pin-nivo-bez { border-left-color: #6b7887; }

.pin-fusnota {
  margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid #24333f;
  font-size: .85rem; color: #93a1b0;
}
.pin-fusnota p { margin: 0 0 .6rem; }