.complaint-portal-page { min-height: 100vh; margin: 0; border-top: var(--band-h) solid var(--band); background: var(--canvas); color: var(--ink); }
.complaint-site-header { width: min(1180px, calc(100% - 32px)); margin: 18px auto 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-top: 3px solid var(--navy-700); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); }
.complaint-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.complaint-brand > span:last-child { display: grid; gap: 2px; }
.complaint-brand b { font-size: var(--text-section); }.complaint-brand small { color: var(--muted); font-size: var(--text-secondary); }
.complaint-layout { width: min(1180px, calc(100% - 32px)); margin: 16px auto 24px; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(310px, .9fr); gap: 16px; align-items: start; }
.complaint-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); }
.complaint-card-header { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }.complaint-card-header h1,.complaint-card-header h2 { margin: 4px 0 6px; font-size: 1.3125rem; }.complaint-card-header p:last-child { margin: 0; color: var(--muted); font-size: var(--text-ui); line-height: var(--leading-relaxed); }
.complaint-public-form { padding: 20px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.complaint-public-form .field { margin: 0; }.complaint-public-form textarea { min-height: 128px; }
.complaint-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); cursor: pointer; }.complaint-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--teal); }.complaint-check span { display: grid; gap: 3px; }.complaint-check small { color: var(--muted); font-size: var(--text-secondary); font-weight: var(--weight-medium); }
.complaint-region { display: grid; gap: 3px; padding: 13px 15px; border-left: 3px solid var(--teal); border-radius: var(--radius); background: var(--canvas); }.complaint-region span { color: var(--muted); font-size: var(--text-meta); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; }.complaint-region strong { font-size: var(--text-ui); }.complaint-region small { color: var(--muted); font-size: var(--text-secondary); }
.complaint-submit-row { display: flex; justify-content: flex-end; padding-top: 4px; }.complaint-submit-row .btn { min-width: 190px; }.complaint-honeypot { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }
.complaint-side-column { display: grid; gap: 16px; position: sticky; top: 16px; }.tracking-public-form { padding: 18px 20px 20px; display: grid; gap: 14px; }.tracking-public-form .field { margin: 0; }.tracking-public-form .btn { width: 100%; }
.tracking-result { margin: 0 20px 20px; padding: 15px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); background: var(--canvas); }.tracking-result h3 { margin: 2px 0 12px; font-size: var(--text-section); }.tracking-result dl { display: grid; grid-template-columns: 92px 1fr; gap: 8px; margin: 0; font-size: var(--text-ui); }.tracking-result dt { color: var(--muted); }.tracking-result dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.complaint-receipt { padding: 20px; }.complaint-receipt h2 { margin: 3px 0 12px; }.complaint-receipt > p { color: var(--muted); font-size: var(--text-ui); line-height: var(--leading-relaxed); }.complaint-receipt dl { display: grid; grid-template-columns: 110px 1fr; gap: 9px; padding: 14px; border-radius: var(--radius); background: var(--canvas); font-size: var(--text-ui); }.complaint-receipt dt { color: var(--muted); }.complaint-receipt dd { margin: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }.receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.complaint-footer { width: min(1180px, calc(100% - 32px)); margin: 0 auto 28px; color: var(--muted); font-size: var(--text-meta); text-align: center; }
.complaint-portal-page .form-error { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: #fff1f2; color: #a92e3c; }.complaint-portal-page button[disabled] { cursor: wait; opacity: .7; }
@media (max-width: 820px) { .complaint-layout { grid-template-columns: 1fr; }.complaint-side-column { position: static; }.complaint-public-form { grid-template-columns: 1fr; }.complaint-public-form .field-full { grid-column: 1; }.complaint-site-header { align-items: flex-start; }.complaint-site-header > .btn { padding-inline: 10px; font-size: var(--text-ui); } }
@media (max-width: 480px) { .complaint-site-header,.complaint-layout,.complaint-footer { width: min(100% - 20px, 1180px); }.complaint-site-header { margin-top: 10px; }.complaint-brand small { display: none; }.complaint-public-form,.complaint-card-header { padding-left: 16px; padding-right: 16px; }.receipt-actions { grid-template-columns: 1fr; } }
@media print { body.print-receipt > :not(.complaint-layout), body.print-receipt .complaint-form-card, body.print-receipt .complaint-track-card { display: none!important; } body.print-receipt .complaint-layout,body.print-receipt .complaint-side-column { display: block; width: 100%; margin: 0; } body.print-receipt .complaint-receipt { display: block!important; border: 1px solid #bbb; box-shadow: none; } body.print-receipt .receipt-actions { display: none; } }