/* Minimal, clean styling */
:root { --gap: 16px; --radius: 14px; --shadow: 0 8px 20px rgba(0,0,0,.08); }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif; line-height:1.5; }
.container { max-width: 900px; margin: 0 auto; padding: 24px; }
.header { display:flex; align-items:center; gap: var(--gap); margin-bottom: 8px; }
.logo { height: 148px; width:auto; }
.portrait { width: 110px; height:110px; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow); }
.notice { background: #fff7d6; border: 1px solid #ffe58f; padding: 12px 14px; border-radius: var(--radius); margin: 12px 0 20px; }
.intro { display:flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.card { background:#fff; border:1px solid #eee; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin: 18px 0; }
.card.center { text-align:center; }
h1,h2 { margin: 0 0 8px; }
.grid { display:grid; gap: 10px; margin: 10px 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid.two { grid-template-columns: 1fr 1fr; }
label { display:block; font-weight: 500; margin: 6px 0; }
input[type=text], input[type=email], textarea, select { width:100%; padding:10px; border:1px solid #ccc; border-radius: 10px; }
.checkbox { display:flex; align-items:center; gap:10px; font-weight: 500; }
.question { padding: 14px 0; border-bottom: 1px dashed #eee; }
.likert-row { display:flex; gap:10px; margin-top: 8px; }
.likert-item { display:flex; flex-direction:column; align-items:center; font-size: 12px; gap: 4px; }
.likert-item input { transform: scale(1.2); }
.actions { margin-top: 18px; }
button, .button { background:#111; color:#fff; border:0; padding: 10px 16px; border-radius: 12px; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .button:hover { opacity:.9; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid #eee; padding: 8px; text-align:left; vertical-align: top; }
.chip { display:inline-block; padding:4px 8px; border-radius:20px; border:1px solid #ddd; background:#fafafa; margin: 2px; font-size: 12px; }
.comment { border-bottom:1px solid #f0f0f0; padding:10px 0; }
.comment .meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size: 12px; color:#555; margin-bottom:4px; }
@media (max-width: 520px) { .intro { flex-direction:column; align-items:flex-start; } }