/* 按参考截图设置居民列表、诉求表单与登录页面。 */
.resident-body {
  --red: #b40000;
  --red-dark: #9c0000;
  background: #f2f2f2;
  color: #333;
}
.mobile-header { background: #b40000; }
.header-inner { height: 44px; max-width: 720px; padding: 0 10px; }
.header-inner h1 { font-size: 17px; font-weight: 600; letter-spacing: 1px; }
.header-inner .icon-button { width: 32px; height: 36px; }
.header-inner .icon { width: 25px; height: 25px; stroke-width: 1.4; }
.header-spacer { width: 32px; }
.resident-main { max-width: 720px; padding: 10px 8px 85px; }
.directory-search { padding: 16px 39px; background: #fff; border-radius: 10px; margin: 0 -3px 12px; }
.directory-search .search-box { height: 34px; border: 0; border-radius: 24px; background: #f2f2f2; padding: 0 10px; gap: 5px; }
.directory-search .search-box .icon { width: 17px; height: 17px; color: #777; }
.directory-search input { height: 34px; min-height: 34px; padding: 0; font-size: 15px; }
.directory-search input::placeholder { color: #999; }
.contact-grid { grid-template-columns: 1fr; gap: 12px; margin: 0; }
.contact-card {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 27px;
  min-height: 193px;
  padding: 19px 24px 12px 16px;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
}
.contact-card:hover { box-shadow: none; }
.contact-card > .avatar.large { position: relative; top: 15px; width: 88px; height: 88px; align-self: center; border: 0; box-shadow: none; font-size: 25px; }
.contact-info { min-width: 0; }
.contact-info h3 { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0 0 18px; }
.contact-info p { display: flex; align-items: baseline; gap: 13px; margin: 0; font-size: 15px; line-height: 1.5; }
.contact-info p + p { margin-top: 10px; }
.contact-info p > span { color: #999; flex-shrink: 0; }
.contact-info p > a { font-size: 14px; overflow-wrap: anywhere; }
.contact-actions { grid-column: 2; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; margin: 0; border: 0; align-self: end; }
.contact-actions .button { background: #ff3333; border: 0; border-radius: 22px; min-height: 30px; padding: 2px 5px; font-size: 15px; font-weight: 400; box-shadow: none; }
.contact-actions .button:hover { background: #ed2929; }
.bottom-nav { padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); gap: 0; background: #fff; border: 0; backdrop-filter: none; }
.bottom-nav a { flex: 1; max-width: 300px; min-width: 0; gap: 1px; font-size: 14px; line-height: 1.4; color: #777; }
.bottom-nav .icon { height: 24px; width: 24px; stroke-width: 1.4; }
.bottom-nav a.active { color: #258ce8; }
.bottom-nav a.active::before { display: none; }
.form-page { background: #fff; }
.form-page .resident-main { padding: 17px 16px 90px; }
.reference-form { background: #fff; }
.reference-row { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; padding: 11px 0; border-bottom: 1px solid #eee; min-height: 63px; font-size: 16px; }
.reference-row > span { font-size: 16px; font-weight: 400; }
.reference-row input,
.reference-row textarea { border: 1px solid #e7e7e7; border-radius: 3px; min-height: 40px; padding: 8px 10px; font-size: 16px; line-height: 1.5; box-shadow: inset 0 0 2px #eee; }
.reference-row input::placeholder,
.reference-row textarea::placeholder { color: #bfbfbf; }
.reference-row textarea { height: 67px; min-height: 67px; resize: none; }
.reference-row .record-button { width: min(100%, 225px); min-height: 40px; margin-left: 4px; padding: 7px; background: #b40000; color: #fff; border: 0; border-radius: 0; font-size: 16px; font-weight: 600; }
.reference-row .record-button.recording { background: #d52323; }
.reference-audio { padding: 17px 0 17px 66px; min-height: 60px; border-bottom: 1px solid #eee; }
.reference-audio .audio-preview { font-size: 16px; color: #333; min-height: 26px; }
.reference-audio audio { width: 100%; max-width: 300px; }
.reference-upload { padding: 18px 0 15px; border-bottom: 1px solid #eee; }
.upload-heading { display: flex; align-items: center; gap: 5px; font-size: 17px; line-height: 1.7; }
.upload-heading .icon { width: 17px; height: 17px; color: #278ee6; }
.upload-limit { font-size: 15px; }
.image-upload-area { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 5px 0; }
.reference-form .upload-grid { gap: 12px; }
.reference-form .upload-tile { height: 90px; width: 90px; border: 0; border-radius: 3px; background: #f5f5f7; color: #777; gap: 10px; font-size: 15px; }
.reference-form .upload-tile .icon { width: 28px; height: 28px; color: #777; stroke-width: 2.4; }
.reference-form .upload-preview { width: 90px; height: 90px; }
.reference-form #video-picker { margin: 19px 5px 0; border: 1px dashed #ddd; border-radius: 8px; background: #fff; }
.reference-form .video-preview { margin-top: 15px; }
.reference-form .category-row { font-size: 14px; }
.reference-form .category-options { gap: 10px; }
.reference-form .category-options span { padding: 6px 10px; border-radius: 3px; font-size: 14px; }
.reference-form .form-recipient { font-size: 13px; margin-top: 16px; color: #777; }
.reference-form .upload-help { font-size: 11px; margin: 8px 0; color: #999; }
.reference-form .file-fallback { display: block; font-size: 12px; color: #777; margin: 8px 0 15px; }
.reference-form .submit-button { min-height: 43px; border-radius: 3px; background: #b40000; font-size: 17px; font-weight: 400; }
.resident-body .history-card,
.resident-body .detail-card { border: 0; border-radius: 8px; box-shadow: none; }
.resident-body .page-intro .eyebrow { display: none; }
.resident-body .page-intro h2 { font-size: 19px; }
.resident-body .info-note { color: #888; background: transparent; border: 0; border-radius: 0; padding: 8px; }
.resident-body .info-note > .icon { display: none; }
.resident-body .success-card { border: 0; box-shadow: none; border-radius: 8px; }
.resident-body .success-card .eyebrow { display: none; }

/* 登录页保留截图中的紫色插画和三行输入框。 */
.admin-body:has(.reference-login) { background: #fff; }
.reference-login-header { height: 44px; background: #b40000; }
.reference-login { max-width: 414px; margin: 0 auto; padding: 0 26px 16px; }
.reference-login-banner { display: block; width: 100%; height: auto; }
.reference-login-fields { padding: 21px 27px; margin-top: 38px; border-radius: 12px; background: #fff; box-shadow: 0 15px 50px 8px #8375eb23; }
.reference-login .field { margin: 0; gap: 0; }
.reference-login .field input { min-height: 50px; height: 50px; border: 0; padding: 9px 0; border-radius: 0; font-size: 16px; color: #444; background: transparent; }
.reference-login .field input::placeholder { color: #bfbfbf; }
.reference-login .password-input input { padding-right: 30px; }
.reference-login .password-input .icon-button { width: 25px; height: 32px; top: 9px; right: 0; color: #aaa; }
.reference-login .password-input .icon { width: 18px; height: 18px; }
.reference-login .captcha-input { align-items: center; gap: 5px; }
.reference-login .captcha-input > button { border: 1px solid #eee; border-radius: 5px; flex-shrink: 0; }
.reference-login .captcha-input img { width: 94px; height: 31px; }
.reference-login-button { margin-top: 38px; min-height: 55px; border-radius: 12px; background: linear-gradient(100deg, #746fe0, #8d87f7); box-shadow: 0 8px 25px #8178e932; color: #fff; font-size: 22px; letter-spacing: 2px; font-weight: 600; }
.reference-login-button:hover { background: #7b75e7; }
.reference-login .form-error { margin: 0; }
.reference-login .form-error:not(:empty) { margin-top: 14px; font-size: 13px; }

/* 后台保留必要的管理表格和操作，去掉宣传装饰。 */
.admin-page-heading .eyebrow,
.dashboard-banner,
.dashboard-bottom,
.admin-footer,
.sidebar-label,
.scope-note,
.panel-heading h2 > span,
.stat-icon,
.stat-bottom { display: none; }
.admin-brand { margin-bottom: 28px; }
.admin-brand { white-space: normal; font-size: 15px; letter-spacing: 0; }
.admin-brand .brand-mark { flex-shrink: 0; }
.admin-brand > span:last-child { min-width: 0; line-height: 1.6; }
.stats-grid { margin-bottom: 24px; }
.stat-card { border-radius: 5px; box-shadow: none; }
.stat-card:hover { transform: none; }
.panel { border-radius: 5px; }
.admin-page-heading p { display: none; }
.admin-page-heading h1 { margin: 0; font-size: 22px; }
.modal::backdrop { backdrop-filter: none; }

.community-entry { text-align: center; }
.community-entry h3 { margin: 0; font-size: 18px; }
.community-qr { display: block; width: 240px; max-width: 100%; height: auto; margin: 12px auto 22px; }
.community-entry .field { text-align: left; margin-bottom: 16px; }
.community-entry input[readonly] { background: #fafafa; font-size: 13px; }
.entry-notice { padding: 10px 12px; margin-bottom: 16px; background: #fff8e9; color: #8f6b2d; font-size: 12px; text-align: left; line-height: 1.8; }
.entry-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
.entry-actions .button { font-size: 13px; }

@media (max-width: 380px) {
  .contact-card { grid-template-columns: 98px minmax(0, 1fr); column-gap: 11px; padding-right: 17px; }
  .contact-card > .avatar.large { width: 80px; height: 80px; }
  .contact-info h3 { font-size: 15px; }
  .contact-info p { font-size: 14px; gap: 11px; }
  .contact-info p > a { font-size: 13px; }
  .contact-actions { gap: 10px; }
  .contact-actions .button { font-size: 14px; }
  .upload-limit { font-size: 13px; }
  .reference-login { padding-right: 24px; padding-left: 24px; }
  .reference-login-fields { padding-right: 22px; padding-left: 22px; }
}
@media (max-width: 340px) {
  .contact-card { grid-template-columns: 78px minmax(0, 1fr); padding-left: 12px; padding-right: 12px; }
  .contact-card > .avatar.large { width: 70px; height: 70px; font-size: 21px; }
  .contact-info p { gap: 7px; font-size: 13px; }
  .contact-info p > a { font-size: 12px; }
  .contact-actions .button { font-size: 12px; }
  .reference-row { grid-template-columns: 55px minmax(0, 1fr); }
  .reference-audio { padding-left: 55px; }
  .reference-row .record-button { margin-left: 0; }
  .upload-heading { font-size: 15px; }
  .upload-limit { font-size: 12px; }
}