.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.contact-form-card, .contact-aside { min-width: 0; }
.contact-form-card > h2 { margin: 0 0 16px; }
.contact-aside { display: grid; gap: 20px; }
.contact-aside a { overflow-wrap: anywhere; }
.contact-aside .btn { display: flex; width: 100%; margin-top: 16px; font-size: .875rem; }
.contact-form-card form { margin-top: 24px; scroll-margin-top: 100px; }
.contact-form-card label { display: block; margin-bottom: 20px; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.contact-form-card label span { font-weight: 400; color: var(--muted-foreground); font-size: .75rem; }
.contact-form-card input, .contact-form-card select, .contact-form-card textarea { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font: inherit; font-weight: 400; }
.contact-form-card textarea { resize: vertical; line-height: 1.7; }
.contact-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-form-card .contact-hint { margin: -8px 0 24px; font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); }
.contact-alert { padding: 16px; border: 1px solid var(--primary); border-radius: var(--radius-md); background: var(--secondary); color: var(--foreground); }
.contact-alert.is-error { border-color: var(--destructive); }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-quick-help { margin-top: 32px; }
.contact-quick-help h2 { margin-bottom: 16px; font-size: 1.25rem; }
.contact-quick-help > div { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-quick-help a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
@media (max-width: 1023px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } .contact-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .contact-field-row, .contact-aside { grid-template-columns: minmax(0, 1fr); gap: 0; } .contact-aside { gap: 20px; } .contact-form-card form > .btn { width: 100%; min-height: 44px; } .contact-quick-help a { width: 100%; } }
.contact-aside .guide-support-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.contact-aside .guide-support-card h2 { margin: 0 0 12px; font-size: 1.125rem; line-height: 1.5; }
.contact-aside .guide-support-card p { margin: 0 0 12px; color: var(--muted-foreground); font-size: .875rem; line-height: 1.7; }
.contact-aside .guide-support-card > a:not(.btn) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; }
.contact-form-card form > .btn-primary { background: var(--primary); color: var(--primary-foreground); }
.contact-form-card form > .btn-primary:hover { background: var(--color-primary-hover); }
.contact-quick-help > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) { .contact-quick-help > div { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .contact-quick-help > div { grid-template-columns: minmax(0, 1fr); } }