.graphic-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 20px;
}

.graphic-title { margin: 18px 0 8px; text-align: center; }
.graphic-sub { max-width: 760px; margin: 0 auto 28px; color: #667085; text-align: center; line-height: 1.7; }
.graphic-card { display: grid; grid-template-columns: minmax(360px, 470px) minmax(0, 1fr); overflow: hidden; background: #fff; border-radius: 24px; box-shadow: 0 15px 45px #1111; }
.graphic-form, .graphic-result { padding: 32px; }
.graphic-form { border-right: 1px solid #eef0f4; }
.graphic-result { min-height: 650px; background: #fafbfc; }
.form-section { margin-bottom: 26px; }
.form-section-title { margin: 0 0 14px; color: #222; font-size: 17px; }
.field { margin-bottom: 15px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #dfe3ea; border-radius: 10px; background: #fff; font: inherit; }
.field textarea { min-height: 78px; resize: vertical; }
.field-hint { display: block; margin-top: 6px; color: #98a2b3; font-size: 12px; }
.upload { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; border: 2px dashed #d9deea; border-radius: 14px; }
.upload > button { min-height: 72px; border: 0; border-radius: 10px; background: #f6f7fb; font-size: 25px; cursor: pointer; }
.thumb { position: relative; aspect-ratio: 1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.thumb button { position: absolute; top: 2px; right: 2px; border: 0; border-radius: 50%; background: #111b; color: #fff; cursor: pointer; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.graphic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.graphic-grid img { width: 100%; border-radius: 10px; }
.result-empty { display: grid; min-height: 580px; place-items: center; color: #98a2b3; text-align: center; }
.faq-wrap { max-width: none; margin: 56px 0 0; padding: 72px max(20px, calc((100% - 1180px) / 2)); background: #f7f8fb; }
.faq-heading { max-width: 680px; margin: 0 auto 34px; text-align: center; }
.faq-eyebrow { display: inline-block; margin-bottom: 10px; color: #4f46e5; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.faq-wrap h2 { margin: 0 0 10px; color: #1f2937; font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.faq-heading p { margin: 0; color: #667085; line-height: 1.7; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.faq-item { overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 16px 36px rgba(31, 41, 55, 0.08); }
.faq-q { display: flex; align-items: center; width: 100%; min-height: 104px; justify-content: space-between; gap: 24px; margin: 0; padding: 24px 30px; border: 1px solid transparent; border-radius: 26px; background: #fff; color: #1f2937; font: inherit; font-size: 19px; font-weight: 750; line-height: 1.45; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.faq-q:hover, .faq-q:focus-visible, .faq-item.open .faq-q { border-color: #dfe4ff; background: #fdfdff; outline: none; }
.faq-icon { display: grid; flex: 0 0 56px; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: #eef1ff; color: #4f46e5; font-size: 34px; font-weight: 400; line-height: 1; transition: transform .25s ease, background .25s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: #e4e8ff; }
.faq-a { display: grid; grid-template-rows: 0fr; padding: 0 30px; color: #667085; font-size: 16px; line-height: 1.8; transition: grid-template-rows .25s ease, padding .25s ease; }
.faq-a > * { overflow: hidden; margin: 0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; padding: 0 30px 26px; }

@media (max-width: 800px) {
  .graphic-card { grid-template-columns: 1fr; }
  .graphic-form { border-right: 0; border-bottom: 1px solid #eef0f4; }
  .graphic-form, .graphic-result { padding: 22px; }
  .faq-wrap { margin-top: 36px; padding: 48px 16px; }
  .faq-list { grid-template-columns: 1fr; gap: 14px; }
  .faq-q { min-height: 88px; padding: 20px; border-radius: 20px; }
  .faq-item { border-radius: 20px; }
  .faq-icon { flex-basis: 42px; width: 42px; height: 42px; font-size: 27px; }
  .faq-a { padding: 0 20px; }
  .faq-item.open .faq-a { padding: 0 20px 22px; }
}
/* 按钮样式 */
        .btn {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            border: none;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-primary {
            background: #4f46e5;
            color: white;
            margin-top: 10px;
        }

        .btn-primary:hover {
            background: #4338ca;
        }

        .btn-primary:disabled {
            background: #a5b4fc;
            cursor: not-allowed;
        }

        .btn-secondary {
            background: #f3f4f6;
            color: #4b5563;
            border: 1px solid #e5e7eb;
        }

        .btn-secondary:hover {
            background: #e5e7eb;
        }

        .btn-dark {
            background: #1f2937;
            color: white;
            flex: 2;
        }

        .btn-dark:hover {
            background: #111827;
        }