* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; min-height: 100vh; background: #f5f5f5; padding: 2rem 1rem; }
nav { max-width: 520px; margin: 0 auto 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
nav a { padding: .5rem 1rem; background: #e0e0e0; border-radius: .5rem; text-decoration: none; color: #333; font-size: .9rem; }
nav a.active { background: #111; color: #fff; }
nav a:hover:not(.active) { background: #ccc; }
.card { background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,.08); max-width: 520px; margin: 0 auto; }
h1 { font-size: 1.5rem; margin-bottom: .5rem; }
h2 { font-size: 1.1rem; margin-bottom: .75rem; color: #555; }
p { color: #666; margin-bottom: 1rem; line-height: 1.5; }
.section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
.btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn { padding: .6rem 1.25rem; background: #111; color: white; border: none; border-radius: .5rem; cursor: pointer; font-size: .9rem; }
.btn:hover { background: #333; }
.btn-secondary { background: #555; }
.btn-secondary:hover { background: #777; }
.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #e74c3c; }
.btn.selected { outline: 3px solid #4a9; }
.note { font-size: .82rem; color: #999; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; }
.feedback { font-size: .85rem; color: #4a9; min-height: 1.2em; margin-top: .5rem; }

/* Scroll box */
.scroll-box { height: 120px; overflow-y: auto; background: #fafafa; border: 1px solid #ddd; border-radius: .5rem; padding: .75rem; font-size: .85rem; color: #666; }

/* Toggle switch */
.switch { display: flex; align-items: center; gap: .75rem; cursor: pointer; }
.switch input { display: none; }
.slider { width: 40px; height: 22px; background: #ccc; border-radius: 11px; position: relative; transition: .2s; }
.slider::after { content: ''; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: .2s; }
.switch input:checked + .slider { background: #111; }
.switch input:checked + .slider::after { left: 20px; }

/* Accordion */
.accordion details { background: #fafafa; border: 1px solid #ddd; border-radius: .5rem; margin-bottom: .5rem; padding: .75rem; }
.accordion summary { cursor: pointer; font-weight: 600; }
.accordion summary:hover { color: #000; }
.accordion p { padding-top: .5rem; }

/* Counter */
.counter { display: flex; align-items: center; gap: 1rem; }
.counter span { font-size: 1.5rem; font-weight: 700; min-width: 2rem; text-align: center; }

/* Form */
.form .field { margin-bottom: 1rem; }
.form label { display: block; font-size: .85rem; font-weight: 600; color: #444; margin-bottom: .25rem; }
.form input, .form select, .form textarea { width: 100%; padding: .6rem .75rem; border: 1px solid #ddd; border-radius: .5rem; font-size: .9rem; font-family: inherit; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid #111; border-color: transparent; }