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

:root {
  --bg: #ffffff;
  --fg: #000000;
  --hint: #999999;
  --btn: #efefef;
  --btn-fg: #000000;
  --primary: #2ea6ff;
  --primary-fg: #ffffff;
  --border: #e0e0e0;
  --error: #e53935;
}

body.dark {
  --bg: #17212b;
  --fg: #f5f5f5;
  --hint: #7d8b98;
  --btn: #2b5278;
  --btn-fg: #ffffff;
  --border: #2b5278;
}

body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 12px; }

#app { max-width: 480px; margin: 0 auto; }
.screen { display: none; animation: fade .15s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.logo { font-size: 24px; font-weight: 700; text-align: center; padding: 24px 0 8px; }
.welcome { text-align: center; color: var(--hint); margin-bottom: 20px; }
h2 { font-size: 20px; margin: 14px 0 12px; }
p { line-height: 1.45; margin-bottom: 14px; }

.menu { display: flex; flex-direction: column; gap: 10px; }

.btn {
  display: block; width: 100%; border: none; border-radius: 10px;
  padding: 14px 16px; font-size: 15px; cursor: pointer; text-align: center;
  text-decoration: none; background: var(--btn); color: var(--btn-fg);
}
.btn:active { opacity: .75; }
.btn.primary { background: var(--primary); color: var(--primary-fg); font-weight: 600; margin-top: 18px; }
.btn.primary:disabled { opacity: .5; }

.back { background: none; border: none; color: var(--primary); font-size: 15px; cursor: pointer; padding: 8px 0; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; padding: 12px; font-size: 15px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); color: var(--fg); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px; border-radius: 18px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 14px; cursor: pointer;
}
.chip.selected { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

.summary { background: var(--btn); border-radius: 10px; padding: 14px; font-size: 15px; }
.summary .row { display: flex; padding: 6px 0; border-bottom: 1px solid var(--border); }
.summary .row:last-child { border-bottom: none; }
.summary .k { width: 45%; color: var(--hint); font-size: 13px; }
.summary .v { width: 55%; word-break: break-word; }

.error { color: var(--error); font-size: 14px; margin-top: 10px; text-align: center; }

.success-icon { font-size: 56px; text-align: center; padding: 40px 0 12px; }
#screen-success { text-align: center; }