/* Svakodnevni alati: dob, datumi, QR kod i lozinke (uz zajednički kalkulator.css) */

.field > textarea {
  width: 100%; min-height: 7rem; padding: 0.6rem 0.8rem; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink); line-height: 1.45;
}
.counter-text { color: var(--ink-soft); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }

.result-value.is-date { font-size: clamp(2.2rem, 7vw, 3.6rem); }

/* ---------- QR kod ---------- */
.qr-preview {
  display: grid; place-items: center; padding: 1.25rem;
  background: #fff; border-radius: 12px; border: 1px solid var(--line);
}
.qr-preview canvas { width: min(100%, 18rem); height: auto; image-rendering: pixelated; }
.qr-empty { color: #8a93a8; text-align: center; padding: 4rem 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.actions .btn { flex: 1 1 10rem; }
.btn-secondary {
  background: var(--surface); color: var(--pen);
  border: 1.5px solid var(--pen);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--pen) 7%, var(--surface)); }

/* ---------- Lozinke ---------- */
.range-row { display: grid; grid-template-columns: 1fr 3.2rem; gap: 0.8rem; align-items: center; }
.range-row input[type="range"] { width: 100%; accent-color: var(--pen); }
.range-row output { font-weight: 800; font-size: 1.3rem; text-align: right; font-variant-numeric: tabular-nums; }

.passwords { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.passwords li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: center;
  padding: 0.55rem 0.55rem 0.55rem 0.85rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.passwords code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: 1.05rem; overflow-wrap: anywhere; color: var(--ink);
}
.passwords li:first-child { border-color: var(--pen); box-shadow: 0 0 0 1px var(--pen); }
.passwords li:first-child code { font-size: 1.2rem; font-weight: 600; }
.copy-btn {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  border-radius: 8px; padding: 0.45rem 0.75rem; cursor: pointer; font-weight: 600; font-size: 0.9rem;
  min-width: 6.5rem;
}
.copy-btn:hover { color: var(--pen); border-color: var(--pen); }
.copy-btn.is-done { color: var(--pen); border-color: var(--pen); }

.meter { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 5px; transition: width 0.25s; }
.meter .slaba { background: var(--red); }
.meter .srednja { background: #d1a33a; }
.meter .jaka { background: #2f9e6a; }
.meter .vrlo-jaka { background: var(--pen); }
@media (prefers-reduced-motion: reduce) { .meter span { transition: none; } }