.contact-page .faq-heading { padding:24px 0 30px; }
.contact-page .faq-heading h1 { font:800 clamp(28px,3.5vw,38px)/1.12 Arial,sans-serif; letter-spacing:-1px; }
.contact-page .faq-heading h1 span { color:var(--accent); }
.contact-badge { display:inline-block; padding:5px 9px; border:1px solid var(--card-border); border-radius:7px; color:var(--accent); background:var(--callout-bg); font:600 9px/1.6 ui-monospace,monospace; letter-spacing:1px; }
.contact-hero-link { display:inline-block; margin-top:16px; color:var(--accent); font-size:12px; }
html:not([data-theme="dark"]) .contact-page { background:#f1f3fa; --card-border:#dcdfee; --line:#e0e3ef; }
.contact-content { padding-top:30px; padding-bottom:48px; }
.contact-content h2 { color:var(--ink); font-size:22px; line-height:1.4; letter-spacing:-.4px; }
.contact-content p { color:var(--muted); font-size:14px; line-height:1.85; }
.contact-email { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px; border:1px solid var(--card-border); border-radius:18px; background:var(--card-bg); }
#supportContact { max-width:360px; }
#supportContact p { font-size:13px; }
.contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; scroll-margin-top:80px; }
.contact-grid article { padding:24px; border:1px solid var(--card-border); border-radius:18px; background:var(--card-bg); box-shadow:var(--card-shadow); }
.contact-grid h2 { font-size:18px; margin-top:18px; }
.contact-grid a { color:var(--accent); font-size:12px; font-weight:600; }
.contact-report { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; padding:30px; margin-top:30px; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); }
.contact-report ol { margin:0; padding-left:22px; }
.contact-report li { padding-left:8px; margin-bottom:18px; color:var(--accent); }
.contact-report li:last-child { margin-bottom:0; }
.contact-report strong { font-size:14px; color:var(--ink); }
.contact-report li p { font-size:13px; margin:5px 0 0; }
.contact-note { margin-top:24px; padding:22px 26px; border-radius:14px; border-left:3px solid var(--accent); background:var(--callout-bg); }
.contact-note strong { color:var(--ink); font-size:14px; }
.contact-note p { margin:8px 0 0; font-size:13px; }
.contact-callout { text-align:center; padding:28px; margin-top:24px; }
.contact-callout>div { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.contact-callout a,.contact-primary { display:inline-block; padding:11px 16px; border-radius:10px; font-size:12px; color:var(--accent); border:1px solid var(--card-border); background:var(--card-bg); }
.contact-callout .contact-primary,.contact-primary { background:var(--accent); color:#fff; }
.contact-page :is(a,button):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.contact-hero-actions { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.contact-hero-actions .contact-hero-link { margin:0; }
.contact-page .faq-heading>.contact-badge { background:#ded5ff; border-color:#b9a7ef; color:#4e319f; }
html[data-theme="dark"] .contact-page .faq-heading>.contact-badge { background:#382b61; border-color:#65508f; color:#ddd0ff; }
.contact-email { background:var(--callout-bg); }
.contact-grid article { border-top:3px solid var(--accent); }
.contact-grid article>a { display:block; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.contact-compose { margin-top:26px; padding:28px; border:1px solid var(--card-border); border-radius:18px; background:var(--card-bg); }
.contact-compose label { display:block; color:var(--ink); font-size:13px; font-weight:600; margin:18px 0 8px; }
.contact-compose :is(select,textarea,input) { width:100%; max-width:100%; padding:12px; border:1px solid var(--card-border); border-radius:9px; font:14px/1.7 Arial,sans-serif; color:var(--ink); background:var(--bg); }
.contact-compose textarea { resize:vertical; }
.contact-compose .contact-compose-hint { font-size:12px; }
.contact-compose-actions { display:flex; flex-wrap:wrap; gap:10px; }
.contact-compose button { padding:11px 16px; border:1px solid var(--card-border); border-radius:10px; background:var(--callout-bg); color:var(--accent); font:600 12px Arial,sans-serif; cursor:pointer; }
#supportDraftStatus { margin-bottom:0; font-size:12px; }
@media(max-width:760px) { .contact-email { flex-direction:column; align-items:stretch; gap:12px; } .contact-grid,.contact-report { grid-template-columns:1fr; } .contact-report { gap:18px; } }

.contact-compose button:disabled { opacity:.65; cursor:wait; }
.contact-compose #sendSupportRequest { background:var(--accent); color:#fff; }
.contact-compose input { box-sizing:border-box; }

.contact-compose #supportTopic {
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  min-height:52px;
  padding:13px 48px 13px 16px;
  border-radius:12px;
  border-color:color-mix(in srgb,var(--accent) 28%,var(--card-border));
  background-color:var(--callout-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237054ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  color:var(--ink);
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.contact-compose #supportTopic:hover { border-color:var(--accent); }
.contact-compose #supportTopic:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent);
}
.contact-compose #supportTopic:required:invalid { color:var(--muted); }
.contact-compose #supportTopic option { background:var(--card-bg); color:var(--ink); font-weight:400; }
html[data-theme="dark"] .contact-compose #supportTopic { color-scheme:dark; }
html:not([data-theme="dark"]) .contact-compose #supportTopic { color-scheme:light; }
@media (prefers-reduced-motion:reduce) { .contact-compose #supportTopic { transition:none; } }
.contact-topic-picker { position:relative; }
.contact-compose .contact-topic-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:13px 16px; border-radius:12px; border-color:color-mix(in srgb,var(--accent) 28%,var(--card-border)); color:var(--muted); font:600 14px/1.7 Arial,sans-serif; text-align:left; }
.contact-topic-trigger::after { content:''; width:8px; height:8px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); margin:0 4px 4px 16px; flex-shrink:0; }
.contact-topic-trigger[aria-expanded="true"]::after { transform:rotate(225deg); margin-bottom:0; }
.contact-compose .contact-topic-trigger.has-value { color:var(--ink); }
.contact-compose .contact-topic-trigger:hover,.contact-topic-trigger[aria-expanded="true"] { border-color:var(--accent); }
.contact-topic-options { position:absolute; z-index:20; top:calc(100% + 8px); left:0; right:0; padding:7px; border:1px solid var(--card-border); border-radius:14px; background:var(--card-bg); box-shadow:0 12px 32px #1b123524; max-height:260px; overflow:auto; }
.contact-topic-options[hidden] { display:none; }
.contact-topic-option { position:relative; padding:12px 38px 12px 14px; border-radius:9px; color:var(--ink); font:500 14px/1.5 Arial,sans-serif; cursor:pointer; }
.contact-topic-option:hover,.contact-topic-option.is-active { background:var(--callout-bg); color:var(--accent); }
.contact-topic-option[aria-selected="true"] { background:color-mix(in srgb,var(--accent) 14%,var(--card-bg)); color:var(--accent); font-weight:600; }
.contact-topic-option[aria-selected="true"]::after { content:'✓'; position:absolute; right:14px; }