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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fafaf9;
  color: #1c1917;
  padding: 24px;
}

.container {
  max-width: 520px;
  margin: 0 auto;
}

h1 { font-size: 1.5rem; margin-bottom: 4px; }
.subtitle { color: #78716c; font-size: 0.875rem; margin-bottom: 24px; }

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #44403c;
  margin-bottom: 4px;
  margin-top: 14px;
}

input, select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  font-size: 0.9rem;
  background: #fff;
}

input:focus, select:focus {
  outline: none;
  border-color: #b5343a;
  box-shadow: 0 0 0 2px rgba(181,52,58,0.1);
}

.row {
  display: flex;
  gap: 12px;
}

.row > div { flex: 1; }
.flex-2 { flex: 2 !important; }

button {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background: #b5343a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#spinner {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #78716c;
  font-size: 0.85rem;
}

#result {
  margin-top: 24px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
}

#result h3 {
  font-size: 0.8rem;
  color: #78716c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

#result pre {
  background: #f5f5f4;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

#error {
  margin-top: 16px;
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 0.85rem;
}

.hidden { display: none !important; }

a { color: #b5343a; }

.ref-table {
  margin-top: 32px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
}
.ref-table summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: #78716c;
}
.ref-table table {
  width: 100%;
  margin-top: 8px;
  font-size: 0.75rem;
  border-collapse: collapse;
}
.ref-table td {
  padding: 2px 6px;
  white-space: nowrap;
}
.ref-table td:nth-child(1),
.ref-table td:nth-child(4),
.ref-table td:nth-child(7),
.ref-table td:nth-child(10) {
  color: #b5343a;
  font-weight: 600;
  text-align: right;
  width: 28px;
}
.ref-table td:nth-child(3),
.ref-table td:nth-child(6),
.ref-table td:nth-child(9),
.ref-table td:nth-child(12) {
  color: #1c1917;
}
.ref-table td:nth-child(2),
.ref-table td:nth-child(5),
.ref-table td:nth-child(8),
.ref-table td:nth-child(11) {
  color: #78716c;
  font-family: monospace;
  font-size: 0.7rem;
}
/* v2 */