.settings-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 20px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-color); }
.footer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 14px; font-weight: bold; text-decoration: none; cursor: pointer; transition-property: color; }
.footer-link:active, .footer-link:focus-visible { background: transparent; color: #4aa3ff; }
@media (hover: hover) and (pointer: fine) {
  .footer-link:hover { background: transparent; color: #4aa3ff; }
}
.footer-dialog { width: min(720px, calc(100vw - 20px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-primary); color: var(--text-primary); }
.footer-dialog[open] { display: flex; flex-direction: column; }
.footer-dialog::backdrop { background: rgba(0,0,0,.45); }
.footer-dialog [hidden] { display: none !important; }
html:has(.footer-dialog[open]) { overflow-y: hidden; }
.footer-dialog-header { padding: 20px; border-bottom: 1px solid var(--border-color); }
.footer-dialog-header h2 { font-size: 20px; font-weight: bold; }
.footer-dialog-content { overflow-y: auto; overscroll-behavior: contain; padding-block: 24px; }
.settings-footer .footer-link:focus-visible, .footer-dialog a:focus-visible, .footer-dialog button:focus-visible {
  outline: 2px solid #4aa3ff; outline-offset: -3px;
}

.contact-cards { display: flex; flex-direction: column; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 10px 20px; gap: 24px; }
.contact-card { min-width: 0; padding: 32px 24px; border-radius: 16px; border: 1px solid rgba(0,0,0,.08); background: #fff; color: var(--text-primary); box-shadow: 0 4px 20px rgba(0,0,0,.03); transition-property: border-color, background-color; }
html[data-theme="dark"] .contact-card { background: #181818; border-color: rgba(255,255,255,.08); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.contact-card a, a.contact-card { text-decoration: none; }
.contact-card a, .contact-badge, .contact-title, .contact-x-action, .contact-symbol, .contact-symbol * { color: inherit; transition: none; }
.contact-email-card { min-height: 178px; }
.contact-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.contact-badge { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: #f3f4f6; }
html[data-theme="dark"] .contact-badge { background: #262626; }
.footer-dialog .contact-title { font-size: 18px; font-weight: bold; }
.contact-email-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 50px; padding: 12px 16px; border-radius: 8px; background: #f9fafb; border: 1px solid rgba(0,0,0,.05); }
html[data-theme="dark"] .contact-email-row { background: #111; border-color: rgba(255,255,255,.05); }
.contact-email-row .contact-email-link, .contact-x-action { color: #4aa3ff; font-size: 16px; font-weight: bold; }
.contact-email-link { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.contact-copy { display: flex; align-items: center; flex-shrink: 0; gap: 4px; min-height: 0; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted-text-color); font: inherit; font-size: 13px; font-weight: normal; cursor: pointer; transition-property: color; }
.contact-copy * { color: inherit; transition: none; }
.contact-copy:hover, .contact-copy:active { background: transparent; color: #212121; }
html[data-theme="dark"] .contact-copy:hover, html[data-theme="dark"] .contact-copy:active { color: #fff; }
.contact-symbol { display: flex; align-items: center; flex-shrink: 0; }
.contact-symbol[hidden] { display: none; }
.contact-x-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 112px; }
.contact-x-main { display: flex; flex: 1 1 160px; align-items: center; gap: 16px; }
.contact-x-action { display: flex; align-items: center; gap: 8px; }