:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  color: #182026;
  background: #f4f7f6;
  --primary: #14735f;
  --primary-dark: #0d5949;
  --accent: #d98b2b;
  --line: #d9e2df;
  --muted: #66736f;
  --surface: #ffffff;
  --danger: #b42318;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f4f7f6; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

.support-header { min-height: 68px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border-bottom: 1px solid var(--line); }
.support-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.support-brand > span { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--primary); border-radius: 7px; }
.support-brand svg { width: 20px; }
.support-brand strong { font-size: 17px; }
.support-header nav { display: flex; align-items: center; gap: 22px; }
.support-header nav a { color: #52605c; font-size: 14px; text-decoration: none; }
.support-header nav a:hover { color: var(--primary); }

.support-shell { width: min(1060px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 36px; }
.support-heading { max-width: 680px; margin-bottom: 28px; }
.support-heading > p { margin: 0 0 8px; color: var(--primary); font-size: 14px; font-weight: 700; }
.support-heading h1 { margin: 0; font-size: 34px; line-height: 1.35; letter-spacing: 0; }
.support-heading span { display: block; margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.75; }

.support-notice { margin-bottom: 20px; padding: 14px 16px; display: flex; gap: 10px; align-items: center; border: 1px solid; border-radius: 7px; background: #fff; font-size: 14px; }
.support-notice svg { width: 20px; flex: 0 0 auto; }
.support-notice.success { color: #176346; border-color: #a9d7c6; background: #f0faf6; }
.support-notice.error { color: var(--danger); border-color: #efb9b5; background: #fff6f5; }

.support-created { margin-bottom: 24px; padding: 22px; display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: center; color: #153f36; border: 1px solid #9bc9ba; border-radius: 8px; background: #ecf8f4; }
.support-created > div { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--primary); border-radius: 8px; }
.support-created > div svg { width: 25px; }
.support-created section p, .support-created section h2, .support-created section span { margin: 0; }
.support-created section p { font-size: 13px; font-weight: 700; color: var(--primary); }
.support-created section h2 { margin-top: 3px; font-size: 20px; }
.support-created section span { display: block; margin-top: 6px; color: #557269; font-size: 13px; line-height: 1.55; }
.support-created dl { margin: 0; display: flex; gap: 12px; }
.support-created dl div { min-width: 172px; padding: 10px 13px; background: #fff; border: 1px solid #cce2da; border-radius: 6px; }
.support-created dt { color: var(--muted); font-size: 12px; }
.support-created dd { margin: 4px 0 0; font-family: Consolas, monospace; font-size: 17px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }

.support-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); gap: 20px; align-items: start; }
.support-panel, .support-ticket { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.support-panel { padding: 24px; }
.support-panel > header { margin-bottom: 22px; display: flex; gap: 12px; align-items: center; }
.support-panel > header > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); background: #eaf4f1; border-radius: 7px; }
.support-panel > header svg { width: 20px; }
.support-panel h2, .support-panel p { margin: 0; }
.support-panel h2 { font-size: 19px; }
.support-panel header p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.support-form { display: grid; gap: 16px; }
.support-form label { display: grid; gap: 7px; color: #303b38; font-size: 14px; font-weight: 700; }
.support-form input, .support-form select, .support-form textarea { width: 100%; padding: 11px 12px; color: #182026; border: 1px solid #cbd6d2; border-radius: 6px; background: #fff; outline: none; }
.support-form textarea { resize: vertical; line-height: 1.65; }
.support-form input:focus, .support-form select:focus, .support-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20, 115, 95, .12); }
.support-form button, .support-reply-form button { min-height: 44px; padding: 0 18px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; color: #fff; border: 0; border-radius: 6px; background: var(--primary); font-weight: 700; }
.support-form button:hover, .support-reply-form button:hover { background: var(--primary-dark); }
.support-form button.secondary { color: var(--primary-dark); border: 1px solid #9ac6ba; background: #edf7f4; }
.support-form button.secondary:hover { background: #deeee9; }
.support-form button svg, .support-reply-form button svg { width: 18px; }
.support-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.lookup-panel aside { margin-top: 22px; padding: 14px; display: flex; gap: 10px; color: #66501f; border: 1px solid #ead49f; border-radius: 6px; background: #fffaf0; }
.lookup-panel aside svg { width: 19px; flex: 0 0 auto; }
.lookup-panel aside strong { font-size: 13px; }
.lookup-panel aside p { margin-top: 5px; font-size: 12px; line-height: 1.65; }

.support-ticket { margin-bottom: 20px; overflow: hidden; }
.support-ticket > header { padding: 20px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.support-ticket header p, .support-ticket header h2 { margin: 0; }
.support-ticket header p { color: var(--muted); font-family: Consolas, monospace; font-size: 13px; }
.support-ticket header h2 { margin-top: 4px; font-size: 20px; }
.status { padding: 6px 10px; color: #55615d; border-radius: 5px; background: #edf1f0; font-size: 13px; font-weight: 700; }
.status.submitted, .status.accepted, .status.in_progress { color: #12604f; background: #e6f4f0; }
.status.waiting_user { color: #83530f; background: #fff2d7; }
.status.resolved { color: #176346; background: #e9f7f0; }
.ticket-detail { padding: 20px 22px; }
.ticket-detail strong, .support-conversation h3 { font-size: 14px; }
.ticket-detail p { margin: 8px 0 0; font-size: 15px; line-height: 1.8; }
.ticket-detail small { display: block; margin-top: 10px; color: var(--muted); }
.support-conversation { padding: 0 22px 20px; }
.support-conversation h3 { margin: 0 0 12px; }
.support-conversation article { margin-top: 10px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; }
.support-conversation article > span { color: var(--muted); font-size: 13px; padding-top: 9px; }
.support-conversation article > div { padding: 10px 12px; border-radius: 6px; background: #f3f6f5; }
.support-conversation article.platform > div { border: 1px solid #b8d8ce; background: #edf7f4; }
.support-conversation article p { margin: 0; font-size: 14px; line-height: 1.7; }
.support-conversation article small { display: block; margin-top: 6px; color: var(--muted); }
.support-waiting, .support-ended { margin: 0 22px 20px; padding: 12px 14px; display: flex; gap: 9px; align-items: center; color: var(--muted); border-radius: 6px; background: #f3f6f5; font-size: 13px; }
.support-waiting svg, .support-ended svg { width: 18px; }
.support-reply-form { padding: 18px 22px; display: grid; grid-template-columns: 1fr 148px; gap: 12px; align-items: end; border-top: 1px solid var(--line); background: #fafcfc; }
.support-reply-form label { display: grid; gap: 7px; font-size: 14px; font-weight: 700; }
.support-reply-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd6d2; border-radius: 6px; resize: vertical; }

.support-footer { width: min(1060px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 30px; display: flex; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); font-size: 13px; }
.support-footer a { text-decoration: none; }

@media (max-width: 820px) {
  .support-created { grid-template-columns: 44px 1fr; }
  .support-created dl { grid-column: 1 / -1; }
  .support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .support-header { min-height: 60px; padding: 0 16px; }
  .support-brand strong { font-size: 15px; }
  .support-header nav { gap: 12px; }
  .support-header nav a:last-child { display: none; }
  .support-shell { width: calc(100% - 28px); padding-top: 32px; }
  .support-heading h1 { font-size: 27px; }
  .support-heading span { font-size: 14px; }
  .support-panel { padding: 19px 16px; }
  .support-created { padding: 17px 15px; gap: 12px; }
  .support-created dl { display: grid; width: 100%; }
  .support-created dl div { min-width: 0; }
  .support-created dd { font-size: 15px; }
  .support-ticket > header, .ticket-detail { padding-left: 16px; padding-right: 16px; }
  .support-conversation { padding-left: 16px; padding-right: 16px; }
  .support-waiting, .support-ended { margin-left: 16px; margin-right: 16px; }
  .support-reply-form { padding: 16px; grid-template-columns: 1fr; }
  .support-footer { width: calc(100% - 28px); }
}