.contact-shell{max-width:720px;margin:32px auto 48px}
.contact-panel{margin-top:18px;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.contact-panel h1,.remarks-heading h1{font-size:28px;font-weight:600;margin-bottom:24px}
.contact-panel>p{color:var(--muted);margin-bottom:16px}
.contact-form{display:grid;gap:24px}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-field{min-width:0}
.contact-field label{display:block;font-size:14px;margin-bottom:8px}
.contact-field label span,.field-help{color:var(--muted);font-size:12px}
.contact-field input,.contact-field textarea{width:100%;max-width:100%;border:1px solid var(--control-border);border-radius:5px;background:var(--paper);color:var(--ink);padding:12px;font:inherit;font-size:16px}
.contact-field input{min-height:48px}
.contact-field textarea{min-height:180px;resize:vertical}
.contact-field textarea:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.contact-field [aria-invalid="true"]{border-color:var(--danger-ink)}
.field-help,.field-error{margin-top:6px}
.field-error{color:var(--danger-ink);font-size:13px}
.contact-error{background:var(--danger-bg);color:var(--danger-ink);border:1px solid #86515c;border-radius:5px;padding:12px 16px;margin-bottom:24px}
.contact-submit,.contact-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid transparent;border-radius:5px;background:var(--teal);color:var(--button-ink);font-size:14px;font-weight:600;justify-self:start}
.contact-submit:hover{background:#a0eddf}
.contact-trap{display:none}
.remarks-shell{max-width:920px;margin:24px auto 48px}
.remarks-nav,.remarks-heading,.remark-header,.remarks-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.remarks-heading{margin:20px 0 24px}.remarks-heading h1{margin:0}
.remarks-heading p,.remarks-pagination{font-size:13px;color:var(--muted)}
.remark-card{margin:16px 0;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow-wrap:anywhere}
.remark-header h2{font-size:17px;margin-bottom:4px}
.remark-header time{color:var(--muted);font-size:12px}
.remark-status{font-size:12px;color:var(--muted);padding:4px 10px;border-radius:4px;background:var(--surface-raised)}
.remark-status.is-unread{color:var(--teal);background:var(--mint)}
.remark-email{font-size:14px;color:var(--muted);margin-top:16px}
.remark-text{white-space:pre-wrap;line-height:1.8;border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
.remark-action{margin-top:20px}
.contact-secondary{background:var(--surface-raised);color:var(--teal);border-color:var(--control-border);min-height:44px;padding:8px 16px}
.contact-secondary:hover{background:var(--mint)}
@media(max-width:700px){.contact-shell{margin-top:16px}.contact-panel{padding:22px 18px}.contact-panel h1,.remarks-heading h1{font-size:24px}.contact-fields{grid-template-columns:1fr}.contact-submit{width:100%}.remark-card{padding:18px}.remarks-heading{gap:8px}.remarks-nav{gap:4px 16px}}