* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0a0a0f;
  color: #c0c0c0;
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1 {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
  color: #e0e0e0;
}

p {
  margin-bottom: 2rem;
  color: #888;
  font-size: 0.85rem;
}

.flag-input {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: center;
}

.c {
  min-width: 0;
  width: 2.4vw;
  max-width: 32px;
  height: 40px;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  border: 2px solid #333;
  border-radius: 4px;
  background: #141420;
  color: #888;
  outline: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  caret-color: transparent;
}

#copy {
  margin-top: 1.5rem;
  padding: 0.5rem 1.2rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  border: 2px solid #333;
  border-radius: 4px;
  background: #141420;
  color: #c0c0c0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

#copy:disabled {
  opacity: 0.3;
  cursor: default;
}

#copy:not(:disabled):hover {
  border-color: #2ecc71;
  color: #2ecc71;
}

.c:focus {
  border-color: #555;
  background: #1a1a2e;
}

.c:not([value=""]):not(:placeholder-shown) {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.c[pattern]:not([value=""]):valid {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
}

.flag-input > .c:nth-child(3)[value="\74"],
.flag-input > .c:nth-child(18)[value="1"],
.flag-input:has(> .c:nth-child(5)[value="{"]) > .c:nth-child(6)[value="c"],
.flag-input > .c:nth-child(7)[value="\35"],
.flag-input > .c:nth-child(7)[value="\35"] ~ .c:nth-child(8)[value="5"],
.flag-input > .c:nth-child(10)[value="0"],
.flag-input > .c:nth-child(29)[value="8"],
.flag-input:has(> .c:nth-child(12):valid) > .c:nth-child(13)[value="\79"],
.flag-input > .c:nth-child(15)[value="v"],
.flag-input > .c:nth-child(11)[value="\6e"],
.flag-input:has(> .c:nth-child(16):valid) > .c:nth-child(17)[value="l"],
.flag-input > .c:nth-child(5)[value="{"],
.flag-input > .c:nth-child(19)[value="\64"],
.flag-input > .c:nth-child(19)[value="\64"] ~ .c:nth-child(20)[value="4"],
.flag-input > .c:nth-child(22)[value="1"],
.flag-input > .c:nth-child(2)[value="\63"],
.flag-input:has(> .c:nth-child(23)[value="0"]) > .c:nth-child(24)[value="\6e"],
.flag-input > .c:nth-child(25)[value="\5f"],
.flag-input > .c:nth-child(27)[value="\36"],
.flag-input > .c:nth-child(27)[value="\36"] ~ .c:nth-child(28)[value="6"],
.flag-input > .c:nth-child(23)[value="0"],
.flag-input > .c:nth-child(30)[value="\65"],
.flag-input:has(> .c:nth-child(30)[value="\65"]) > .c:nth-child(31)[value="e"],
.flag-input > .c:nth-child(33)[value="0"],
.flag-input > .c:nth-child(34)[value="}"] {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
}