:root {
  color-scheme: dark;
  --bg: #06090d;
  --card: #111822;
  --text: #f5f7fb;
  --muted: #aeb7c3;
  --accent: #f5c542;
  --danger: #ff4d4d;
  --border: rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #17202d, var(--bg)); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { width: min(760px, 100%); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 32px; }
.card { background: rgba(17, 24, 34, .92); border: 1px solid var(--border); border-radius: 24px; padding: 20px; margin: 16px 0; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.brand-row { display: flex; gap: 16px; align-items: center; }
.app-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
h1 { margin: 0; font-size: clamp(30px, 8vw, 54px); line-height: 1; }
h2 { margin: 0 0 16px; font-size: 22px; }
.muted { color: var(--muted); margin: 8px 0 0; }
label { display: grid; gap: 8px; margin: 14px 0; color: var(--muted); font-weight: 600; }
input, textarea { width: 100%; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: #080d13; color: var(--text); font: inherit; }
textarea { resize: vertical; }
button { width: 100%; border: 0; border-radius: 16px; padding: 14px 16px; background: var(--accent); color: #171100; font-weight: 800; font-size: 16px; cursor: pointer; }
button.secondary { background: #d7e8ff; color: #06111d; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.result { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.32); white-space: pre-line; }
@media (max-width: 520px) { .brand-row { align-items: flex-start; } .actions { grid-template-columns: 1fr; } }