/* Random Number Generator. Needs /assets/css/modern-tool-cards.css (tokens + .cat-misc accent). */
.rn, .rn *, .rn *::before, .rn *::after { box-sizing: border-box; }
.rn { display: grid; gap: 1rem; }
.rn [hidden] { display: none !important; }

.rn-panel { background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 20px; box-shadow: var(--tc-shadow); overflow: hidden; display: grid; }

.rn-panel__head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .9rem 1.25rem; background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); }
.rn-panel__head h3 { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.rn-panel__head > i { color: var(--accent); font-size: 1.1rem; }

.rn-body { display: grid; gap: 1.1rem; padding: 1.25rem; }

.rn-form { display: grid; gap: 1rem; }
.rn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.rn-row--options { align-items: center; }

.rn-field { display: grid; gap: .35rem; flex: 1 1 10rem; }
.rn-field--inline { flex: 0 0 auto; }
.rn-field label { font-size: .8rem; font-weight: 600; color: var(--tc-muted); }
.rn-field input {
  height: 2.6rem; padding: 0 .9rem; font: inherit; font-size: .95rem;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px;
  max-width: 10rem;
}
.rn-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.rn-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--tc-text); cursor: pointer; }
.rn-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; }

.rn-error { margin: 0; font-size: .85rem; font-weight: 600; color: #dc2626; }

.rn-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.rn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 2.6rem; padding: 0 1.3rem; font: inherit; font-size: .88rem; font-weight: 700;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; cursor: pointer;
}
.rn-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rn-btn--primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.rn-btn--primary:hover { color: #fff; filter: brightness(1.08); }
.rn-btn--ghost { background: transparent; }

.rn-results { display: grid; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--tc-border); }
.rn-results__head { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--tc-muted); }
.rn-chips { display: flex; flex-wrap: wrap; gap: .5rem; max-height: 18rem; overflow-y: auto; }
.rn-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; padding: .4rem .7rem; font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 10px;
}

.rn-foot { margin: 0; display: flex; gap: .5rem; font-size: .84rem; color: var(--tc-muted); }
.rn-foot i { color: var(--accent); margin-top: .15rem; }
.rn-foot code { font-size: .82em; }