:root {
  --bg: #FCFBF8;
  --fg: #373435;
  --muted: #6b6668;
  --accent: #01CFFF;
  --border: rgba(55, 52, 53, 0.15);
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --muted-bg: #f3f1ec;
  --destructive: #e5484d;
}
[data-theme="dark"] {
  --bg: #161616;
  --fg: #FCFBF8;
  --muted: #a09b9d;
  --accent: #01CFFF;
  --border: rgba(252, 251, 248, 0.15);
  --card-bg: #1f1f1f;
  --input-bg: #232323;
  --muted-bg: #2a2a2a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}
.container { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.header { border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.logo { height: 32px; width: auto; }
.logo-dark-mode { display: none; }
[data-theme="dark"] .logo-light-mode { display: none; }
[data-theme="dark"] .logo-dark-mode { display: block; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: inline-block; }

.main { padding: 32px 24px; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.subtitle { color: var(--muted); margin: 0 0 24px; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 0 0 1px rgba(1, 207, 255, 0.05);
}
.card + .card { margin-top: 24px; }

form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 13px; font-weight: 500; color: var(--fg); }

select, input, textarea {
  font-family: inherit;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(1, 207, 255, 0.15);
}
textarea { resize: vertical; min-height: 120px; }
.counter { text-align: right; font-size: 12px; color: var(--muted); }

.phone-row { display: flex; gap: 8px; align-items: stretch; }
.prefix {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}
.hint { font-size: 12px; color: var(--muted); margin: 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); }

.btn-primary {
  font-family: inherit;
  background: var(--accent);
  color: #00131a;
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #00131a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.response { border-color: rgba(1, 207, 255, 0.5); }
.response.error { border-color: rgba(229, 72, 77, 0.5); }
.response h2 { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.response pre {
  background: var(--muted-bg);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}