:root { color-scheme: light dark; --bg: #f4f6ff; --card: #ffffff; --ink: #18213b; --muted: #707a91; --accent: #5e63f2; --line: #e5e8f3; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app { max-width: 680px; margin: auto; padding: max(22px, env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }
.hero { padding: 8px 3px 18px; }
h1 { margin: 3px 0 7px; font-size: 28px; line-height: 1.15; letter-spacing: -.5px; }
h2 { margin: 0 0 7px; font-size: 17px; }
.eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .09em; }
.muted, .note { color: var(--muted); font-size: 14px; margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 17px; margin: 12px 0; box-shadow: 0 5px 18px rgba(42, 53, 93, .05); }
.field { display: grid; gap: 7px; font-size: 14px; color: var(--muted); }
input[type="text"], input:not([type]), textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: inherit; padding: 13px; font: inherit; outline: none; resize: vertical; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94,99,242,.12); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.choices button { text-align: left; border: 1px solid var(--line); background: transparent; color: inherit; padding: 12px; border-radius: 13px; font: inherit; }
.choices button b, .choices button small { display: block; } .choices button small { color: var(--muted); margin-top: 2px; font-size: 12px; }
.choices button.selected { border-color: var(--accent); background: rgba(94,99,242,.1); }
.row-card, .privacy-card { display: flex; gap: 15px; justify-content: space-between; align-items: center; }
.switch { position: relative; flex: 0 0 auto; width: 53px; height: 32px; } .switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #aab1c4; transition: .2s; } .switch span::after { content: ""; position: absolute; width: 24px; height: 24px; left: 4px; top: 4px; border-radius: 50%; background: white; transition: .2s; }
.switch input:checked + span { background: var(--accent); } .switch input:checked + span::after { transform: translateX(21px); } .switch input:disabled + span { opacity: .45; }
.subtle { border: 0; background: #f0f1f8; color: var(--ink); padding: 10px 12px; border-radius: 11px; font: 600 13px inherit; } .danger { color: #b53051; }
.primary { background: var(--accent); color: white; }
.note { padding: 0 4px 12px; font-size: 12px; }
.inline-note { padding: 0; margin: 8px 0 12px; }
.memory-list { display: grid; gap: 8px; margin: 12px 0; }
.memory-item { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--card) 85%, var(--bg)); }
.memory-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-controls, .memory-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.memory-controls { margin-top: 9px; }
.memory-actions { margin-top: 12px; justify-content: space-between; }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 0; font: 600 13px inherit; }
.danger-text { color: #b53051; }
.empty-memory { color: var(--muted); font-size: 14px; margin: 10px 0; }
.editor { scroll-margin-top: 12px; }
.hidden { display: none; }
.danger-card { border-color: rgba(181,48,81,.25); }
.save { width: 100%; border: 0; border-radius: 15px; padding: 15px; background: var(--accent); color: white; font: 700 16px inherit; box-shadow: 0 8px 20px rgba(94,99,242,.24); } .save:disabled, button:disabled { opacity: .55; }
.status { min-height: 24px; margin: 12px 4px 0; text-align: center; font-size: 14px; } .success { color: #16844a; } .error { color: #bd2d4f; } .warning { color: #a56c0a; }
@media (max-width: 370px) { .choices { grid-template-columns: 1fr; } }