/* Quiriz tools — interactive tool-page styles. Layers on top of /blog/blog.css
   (same tokens). Kept dependency-free; all tools run in the browser. */

.tool-app {
  border: 1px solid var(--border-hov); border-radius: 14px;
  background: var(--surface); padding: 1.5rem 1.5rem 1.75rem;
  margin: 2rem 0;
}
.tool-app .row { display: flex; gap: 1rem; flex-wrap: wrap; }
.tool-app .col { flex: 1 1 260px; min-width: 0; }

.tool-app label.fld { display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--ink-mute); margin: 0 0 0.4rem; letter-spacing: 0.01em; }

.tool-app textarea {
  width: 100%; min-height: 190px; resize: vertical;
  background: #0a0e1a; color: #cfe0f0; border: 1px solid var(--border);
  border-radius: 8px; padding: 0.75rem 0.85rem;
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  font-size: 0.85rem; line-height: 1.55;
}
.tool-app textarea:focus { outline: none; border-color: var(--accent-2); }
.tool-app textarea[readonly] { background: #080b14; color: #a9e2c4; }

.tool-app input[type="number"], .tool-app select {
  background: #0a0e1a; color: var(--ink); border: 1px solid var(--border);
  border-radius: 7px; padding: 0.5rem 0.6rem; font-size: 0.9rem; width: 100%;
}
.tool-app input[type="number"]:focus, .tool-app select:focus {
  outline: none; border-color: var(--accent-2); }

.tool-app .controls { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap;
  align-items: center; margin: 1.1rem 0; }
.tool-app .opt { display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; color: var(--ink-mute); cursor: pointer; }
.tool-app .opt input { accent-color: var(--accent); width: 16px; height: 16px; }

.tool-app .cols { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0; }
.tool-app .cols .opt { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.35rem 0.6rem; font-size: 0.82rem; }

.tool-app .actions { display: flex; gap: 0.75rem; flex-wrap: wrap;
  align-items: center; margin-top: 1.1rem; }
.tool-app .btn {
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border-hov);
  padding: 0.6rem 1.15rem; border-radius: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tool-app .btn:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }
.tool-app .btn.primary { color: #fff; background: var(--accent); border-color: var(--accent-2); }
.tool-app .btn.primary:hover { background: #5c8bbd; }

.tool-app .stat { font-size: 0.88rem; color: var(--ink-mute); margin-left: auto; }
.tool-app .stat b { color: var(--accent-2); }
.tool-app .copied { color: #6fcf97 !important; }

.tool-app .out-group { margin-top: 1.25rem; }
.tool-app .out-group h3 { font-size: 0.95rem; margin: 0 0 0.4rem;
  display: flex; align-items: baseline; gap: 0.5rem; }
.tool-app .out-group h3 .n { font-size: 0.8rem; color: var(--ink-soft); font-weight: 500; }

.tool-app .note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.9rem; }
.tool-app .note b { color: var(--ink-mute); }

.privacy-badge { display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: #6fcf97; background: rgba(111,207,151,0.08);
  border: 1px solid rgba(111,207,151,0.2); border-radius: 999px;
  padding: 0.3rem 0.8rem; margin-bottom: 1rem; }

/* tools hub cards reuse .hub-grid / .post-card from blog.css */
.tool-tag { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6fcf97; font-weight: 600; }