/* UUID-Generator: Anzahl-Zeile, Ausgabe mit markierter Version/Variante, Aufbau-Karte. */
[data-tl="uuid"] [hidden] { display: none !important; }

.tl-uu-countrow { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.tl-uu-count { width: min(150px, 100%); }
.tl-uu-countrow .tl-chips { padding-bottom: 6px; }
[data-tl="uuid"] .tl-chip:disabled { opacity: .45; cursor: not-allowed; }
[data-tl="uuid"] .tl-input:disabled { opacity: .55; cursor: not-allowed; }

/* Ausgabe */
.tl-uu-out { min-height: 64px; max-height: 420px; font-size: 14px; line-height: 1.75; letter-spacing: .02em; }
.tl-uu-out:focus-visible { outline: 0; box-shadow: var(--tl-focus); }
.tl-uu-out.tl-uu-single { min-height: 0; padding: 30px 18px; font-size: clamp(15px, 2.3vw, 21px); font-weight: 500; text-align: center; letter-spacing: .03em; }
.tl-uu-ts { color: var(--code-string); }
.tl-uu-ver { color: var(--code-keyword); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tl-uu-var { color: var(--code-number); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.tl-uu-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-3); }
.tl-uu-key { display: inline-flex; align-items: center; gap: 6px; }
.tl-uu-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--code-bg); box-shadow: inset 0 0 0 3px currentColor; }
.tl-uu-key i.tl-uu-ts { color: var(--code-string); }
.tl-uu-key i.tl-uu-ver { color: var(--code-keyword); }
.tl-uu-key i.tl-uu-var { color: var(--code-number); }

/* Aufbau-Karte der geprüften UUID */
.tl-uu-map { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 2px; padding: 14px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line-soft); }
.tl-uu-seg { display: grid; gap: 5px; justify-items: center; min-width: 0; }
.tl-uu-seg b { display: block; padding: 5px 6px; font: 600 14px/1.2 var(--font-mono); letter-spacing: .04em; border-radius: 7px; color: var(--ink); background: var(--c-soft); box-shadow: inset 0 0 0 1px var(--c-line); overflow-wrap: anywhere; }
.tl-uu-seg small { font: 500 10.5px/1.2 var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.tl-uu-dash { padding: 5px 1px; font: 600 14px/1.2 var(--font-mono); color: var(--ink-3); }
.tl-uu-f-ts { --c-soft: hsl(152 60% 45% / .12); --c-line: hsl(152 60% 40% / .35); }
.tl-uu-f-ver { --c-soft: hsl(var(--tl-hue) 85% 60% / .18); --c-line: hsl(var(--tl-hue) 70% 50% / .55); }
.tl-uu-f-var { --c-soft: hsl(32 90% 55% / .14); --c-line: hsl(32 80% 45% / .45); }
.tl-uu-f-node { --c-soft: hsl(199 80% 50% / .12); --c-line: hsl(199 70% 45% / .4); }
.tl-uu-f-rand { --c-soft: var(--bg-sunken); --c-line: var(--line); }
.tl-uu-f-ver b { color: hsl(var(--tl-hue) 70% 40%); }
[data-theme="dark"] .tl-uu-f-ver b { color: hsl(var(--tl-hue) 90% 78%); }
@media (max-width: 520px) {
  .tl-uu-map { padding: 10px; }
  .tl-uu-seg b { font-size: 13px; padding: 4px 5px; }
  .tl-uu-out { font-size: 13px; }
}