/* UUID/GUID Generator. Needs /assets/css/modern-tool-cards.css (tokens + .cat-code accent). */
.uu, .uu *, .uu *::before, .uu *::after { box-sizing: border-box; }
.uu { display: grid; gap: 1rem; }

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

.uu-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); }
.uu-panel__head h3 { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.uu-panel__head > i { color: var(--accent); font-size: 1.1rem; }

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

.uu-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem; }
.uu-field { display: grid; gap: .35rem; }
.uu-field label { font-size: .8rem; font-weight: 600; color: var(--tc-muted); }
.uu-field input { width: 7rem; height: 2.5rem; padding: 0 .8rem; font: inherit; font-size: .92rem; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 10px; }
.uu-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.uu-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 600; color: var(--tc-text); cursor: pointer; height: 2.5rem; }
.uu-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }

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

.uu-list { display: grid; gap: .5rem; max-height: 24rem; overflow-y: auto; }
.uu-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem .9rem; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 10px; cursor: pointer;
}
.uu-row:hover { border-color: var(--accent); }
.uu-row code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .88rem; color: var(--tc-text); }
.uu-row i { color: var(--tc-muted); flex: 0 0 auto; }
.uu-row.is-copied { border-color: #16a34a; }
.uu-row.is-copied i { color: #16a34a; }

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