.uuid-workspace { border: 1px solid rgba(103, 118, 166, .24); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 28, 53, .94), rgba(6, 14, 33, .96)); box-shadow: 0 25px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); overflow: hidden; }
.uuid-controls { padding: 23px 25px; display: grid; grid-template-columns: 160px auto auto 1fr; align-items: end; gap: 20px; border-bottom: 1px solid rgba(101, 116, 160, .18); background: rgba(16, 26, 51, .62); }.uuid-controls > div { display: grid; gap: 8px; }.uuid-controls label { color: #b9bed2; font-size: 12px; }.uuid-controls select { height: 42px; padding: 0 13px; color: #f7f8ff; border: 1px solid #35415f; border-radius: 9px; outline: 0; background: #0a1329; }.uuid-controls select:focus { border-color: #42d67e; box-shadow: 0 0 0 3px rgba(66, 214, 126, .1); }
.option-toggle { height: 42px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }.option-toggle input { width: 17px; height: 17px; accent-color: #3ed67b; }.option-toggle span { color: #d4d7e5; font-size: 13px; white-space: nowrap; }.generate-button { height: 42px; min-width: 173px; justify-self: end; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #06130c; border: 0; border-radius: 9px; background: linear-gradient(135deg, #58e58d, #2ec66d); box-shadow: 0 9px 23px rgba(48, 205, 113, .2); font-size: 13px; font-weight: 750; cursor: pointer; transition: transform .18s ease, filter .18s ease; }.generate-button:hover { transform: translateY(-1px); filter: brightness(1.07); }
.uuid-results-heading { padding: 22px 25px 14px; display: flex; align-items: center; justify-content: space-between; }.uuid-results-heading h2 { margin: 0; font-size: 17px; }.uuid-results-heading p { margin: 5px 0 0; color: #858ba3; font-size: 12px; }.copy-all-button { height: 36px; padding: 0 13px; color: #9fe6bb; border: 1px solid rgba(69, 208, 124, .38); border-radius: 8px; background: rgba(40, 169, 94, .08); font-size: 12px; cursor: pointer; }.copy-all-button:hover { background: rgba(40, 169, 94, .16); }.copy-all-button:disabled { opacity: .45; cursor: default; }
.uuid-list { padding: 0 25px 8px; display: grid; gap: 8px; }.uuid-row { min-height: 51px; padding: 6px 8px 6px 13px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; border: 1px solid rgba(91, 107, 151, .18); border-radius: 9px; background: rgba(4, 11, 28, .64); }.uuid-index { color: #4fd882; font: 600 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }.uuid-row code { overflow: hidden; color: #e4e7f5; font-size: 14px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }.uuid-row button { height: 35px; min-width: 73px; padding: 0 10px; color: #aeb5cb; border: 1px solid rgba(101, 114, 155, .25); border-radius: 7px; background: rgba(21, 31, 56, .72); font-size: 11px; cursor: pointer; }.uuid-row button:hover { color: white; border-color: rgba(75, 215, 130, .42); }.uuid-status { min-height: 36px; margin: 0; padding: 4px 25px 14px; color: #55db88; font-size: 12px; }
.uuid-information { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.uuid-information article { padding: 18px; display: flex; gap: 13px; border: 1px solid rgba(94, 107, 149, .15); border-radius: 11px; background: rgba(16, 26, 49, .58); }.uuid-information article > span { color: #4bd880; font-size: 21px; }.uuid-information h2 { margin: 0 0 5px; font-size: 13px; }.uuid-information p { margin: 0; color: #9298ad; font-size: 12px; line-height: 1.55; }
@media (max-width: 860px) {
  .uuid-information { grid-template-columns: 1fr; }
  .uuid-information article { min-width: 0; }
  .uuid-information article > div { min-width: 0; }
  .uuid-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .generate-button { width: 100%; justify-self: stretch; }
}
@media (max-width: 560px) {
  .uuid-controls { padding: 18px; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  .uuid-controls > div, .option-toggle, .generate-button { min-width: 0; }
  .option-toggle { height: 29px; }
  .generate-button { min-width: 0; margin-top: 4px; }
  .uuid-results-heading { padding: 19px 17px 13px; gap: 10px; }
  .uuid-results-heading > div { min-width: 0; }
  .copy-all-button { min-width: 42px; padding: 0 10px; font-size: 0; white-space: nowrap; }
  .copy-all-button::after { content: "Copy"; font-size: 11px; }
  .uuid-list { padding: 0 10px 8px; }
  .uuid-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; padding-left: 9px; }
  .uuid-row code { font-size: 11px; }
  .uuid-row button { min-width: 37px; font-size: 13px; }
  .uuid-row button span { display: none; }
  .uuid-status { padding-left: 17px; }
}