:root { color: #171a29; background: #f7f7fb; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 88% 5%, #ebe8ff 0, transparent 30%), #f7f7fb; }
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.seo-page-shell { min-height: 100vh; }
.seo-site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 18px 0; background: rgba(247,247,251,.88); backdrop-filter: blur(16px); }
.seo-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.seo-brand > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #8274ff, #5946dc); font-weight: 900; box-shadow: 0 8px 20px rgba(91,72,222,.22); }
.seo-brand strong { font-size: 17px; letter-spacing: .08em; }
.seo-full-tool-link { border: 1px solid #dedbea; border-radius: 99px; padding: 9px 15px; color: #565b6c; background: #fff; font-size: 13px; text-decoration: none; }
.seo-header-links { display: flex; align-items: center; gap: 16px; font-size: 12px; }
.seo-header-links > a { text-decoration: none; }
.seo-page-shell main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.seo-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr); align-items: center; gap: 58px; min-height: 680px; padding: 58px 0 74px; }
.seo-eyebrow, .seo-section-kicker { margin: 0 0 14px; color: #6252de; font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.seo-hero-copy h1 { max-width: 640px; margin: 0; font-size: clamp(42px, 5.2vw, 72px); line-height: 1.08; letter-spacing: -.055em; }
.seo-hero-copy > p:not(.seo-eyebrow) { max-width: 600px; margin: 25px 0 0; color: #5b6070; font-size: 17px; line-height: 1.8; }
.seo-trust-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.seo-trust-row span { border: 1px solid #dfdced; border-radius: 99px; padding: 8px 12px; color: #555a6a; background: rgba(255,255,255,.75); font-size: 12px; }
.seo-quick-card { overflow: hidden; border: 1px solid #dfdceb; border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: 0 30px 85px rgba(48,39,100,.13); }
.seo-quick-launch { display: grid; place-items: center; min-height: 470px; padding: 48px; text-align: center; }
.seo-quick-badge { border-radius: 99px; padding: 7px 11px; color: #5d4fd7; background: #efedff; font-size: 12px; font-weight: 800; }
.seo-quick-launch h2 { margin: 20px 0 10px; font-size: 27px; letter-spacing: -.03em; }
.seo-quick-launch p { max-width: 420px; margin: 0; color: #676b79; font-size: 14px; line-height: 1.7; }
.seo-upload-button { display: flex; justify-content: center; width: min(100%, 390px); margin-top: 28px; border-radius: 14px; padding: 16px 20px; color: #fff; background: linear-gradient(115deg, #7868f2, #5845dc); font-size: 14px; font-weight: 800; box-shadow: 0 15px 30px rgba(91,72,222,.24); cursor: pointer; }
.seo-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seo-quick-launch small { margin-top: 13px; color: #858895; font-size: 11px; }
.seo-noscript, .quick-bootstrap-error { margin: 0; padding: 18px; color: #9d4049; background: #ffedef; text-align: center; }
.seo-noscript a, .quick-bootstrap-error a { margin-left: 4px; color: #5845dc; }
.seo-content-section { display: grid; gap: 28px; margin: 48px 0; border: 1px solid #e0deea; border-radius: 28px; padding: 46px; background: rgba(255,255,255,.86); box-shadow: 0 20px 55px rgba(41,35,78,.06); }
.seo-content-section h2, .seo-faq h2, .seo-related h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.035em; }
.seo-answer-card { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 18px; border-radius: 20px; padding: 30px; background: linear-gradient(145deg, #f3f1ff, #faf9ff); }
.seo-answer-card strong { color: #5b49db; font-size: 36px; }
.seo-answer-card span { color: #565b6b; font-weight: 750; }
.seo-answer-card p { grid-column: 1 / -1; margin: 8px 0 0; color: #666b7a; line-height: 1.8; }
.seo-simple-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.seo-simple-steps li { display: flex; align-items: center; gap: 11px; border: 1px solid #e5e2ef; border-radius: 14px; padding: 16px; background: #fff; font-size: 13px; }
.seo-simple-steps b { color: #6352df; font-size: 18px; }
.seo-capacity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.seo-capacity-grid article { display: grid; gap: 8px; border: 1px solid #e1deef; border-radius: 18px; padding: 25px; background: linear-gradient(145deg, #fff, #f7f6ff); }
.seo-capacity-grid strong { color: #5c4bda; font-size: 38px; }
.seo-capacity-grid small { font-size: 15px; }
.seo-capacity-grid span, .seo-section-copy { color: #646978; font-size: 14px; line-height: 1.8; }
.seo-section-copy { margin: 0; }
.seo-color-guide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.seo-color-guide span { display: grid; place-items: center; min-height: 92px; border: 1px solid #dcdae5; border-radius: 16px; font-weight: 800; box-shadow: inset 0 0 0 5px rgba(255,255,255,.35); }
.seo-faq { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); gap: 50px; margin: 74px 0; border: 1px solid #dfddea; border-radius: 28px; padding: 46px; background: #fff; }
.seo-faq details { border-bottom: 1px solid #e6e4ec; padding: 16px 0; }
.seo-faq summary { font-weight: 780; cursor: pointer; }
.seo-faq details p { margin: 11px 0 2px; color: #666b79; font-size: 13px; line-height: 1.75; }
.seo-faq details a { color: #5846d6; }
.seo-related { margin: 70px 0 85px; }
.seo-related > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 24px; }
.seo-related a { display: flex; justify-content: space-between; border: 1px solid #dfddea; border-radius: 16px; padding: 20px; background: #fff; font-weight: 750; text-decoration: none; }
.seo-related a span { color: #6655df; }
.seo-site-footer { display: flex; justify-content: space-between; width: min(1180px, calc(100% - 40px)); margin: 0 auto; border-top: 1px solid #dfdde7; padding: 28px 0 38px; color: #6b6f7c; font-size: 12px; }
.seo-site-footer a { color: #5948d5; }
.quick-editor { min-height: 520px; padding: 22px; }
.quick-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.quick-editor-head > div { display: flex; align-items: center; gap: 9px; min-width: 0; color: #4f5463; font-size: 12px; }
.quick-editor-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-editor-head > button { flex: none; border: 1px solid #dedbea; border-radius: 9px; padding: 8px 10px; color: #594ad2; background: #fff; font-size: 11px; cursor: pointer; }
.quick-status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #a9acb7; }
.quick-status-dot.processing, .quick-status-dot.importing { background: #7563e9; box-shadow: 0 0 0 5px rgba(117,99,233,.12); }
.quick-status-dot.ready { background: #4fbd84; box-shadow: 0 0 0 5px rgba(79,189,132,.12); }
.quick-status-dot.model-error { background: #d75a65; }
.quick-workspace { display: grid; min-height: 315px; border: 1px solid #e2dfe9; border-radius: 17px; overflow: hidden; background: #eeedf3; }
.quick-workspace.has-layout { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.quick-photo-preview { position: relative; display: grid; place-items: center; min-width: 0; padding: 21px; background-image: linear-gradient(45deg, #e6e5eb 25%, transparent 25%), linear-gradient(-45deg, #e6e5eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e5eb 75%), linear-gradient(-45deg, transparent 75%, #e6e5eb 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.crop-viewport { position: relative; display: grid; place-items: center; max-width: 100%; max-height: 350px; overflow: hidden; outline: 0; touch-action: none; cursor: grab; box-shadow: 0 12px 32px rgba(31,29,47,.18); }
.crop-viewport:active { cursor: grabbing; }
.crop-viewport:focus-visible { box-shadow: 0 0 0 3px rgba(101,84,226,.32), 0 12px 32px rgba(31,29,47,.18); }
.crop-viewport.is-disabled { cursor: wait; }
.crop-viewport canvas { display: block; max-width: 100%; max-height: 350px; width: auto; height: auto; background: #fff; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; }
.crop-grid i { position: absolute; background: rgba(255,255,255,.58); box-shadow: 0 0 1px rgba(0,0,0,.25); }
.crop-grid i:nth-child(1), .crop-grid i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
.crop-grid i:nth-child(1) { left: 33.333%; }
.crop-grid i:nth-child(2) { left: 66.666%; }
.crop-grid i:nth-child(3), .crop-grid i:nth-child(4) { left: 0; right: 0; height: 1px; }
.crop-grid i:nth-child(3) { top: 33.333%; }
.crop-grid i:nth-child(4) { top: 66.666%; }
.crop-drag-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); border-radius: 99px; padding: 5px 8px; color: #fff; background: rgba(30,29,42,.58); font-size: 9px; white-space: nowrap; pointer-events: none; }
.quick-processing-overlay { position: absolute; inset: 0; display: grid; place-content: center; place-items: center; gap: 12px; padding: 20px; color: #4f456f; background: rgba(245,243,253,.86); text-align: center; font-size: 12px; }
.quick-processing-overlay i, .quick-loading-placeholder i { width: 28px; height: 28px; border: 3px solid #d9d4f8; border-top-color: #6d5be3; border-radius: 50%; animation: quick-spin .8s linear infinite; }
.quick-layout-preview { display: grid; place-items: center; gap: 8px; min-width: 0; border-left: 1px solid #dfdde6; padding: 20px; background: #f7f6fa; }
.quick-layout-preview canvas { display: block; max-width: 100%; max-height: 300px; background: #fff; box-shadow: 0 10px 28px rgba(30,28,47,.16); }
.quick-layout-preview span { color: #717583; font-size: 10px; }
.quick-loading-placeholder { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 350px; color: #555a6a; }
.quick-controls { display: grid; gap: 13px; margin-top: 16px; }
.quick-spec-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; border-radius: 11px; padding: 4px; background: #f0eff5; }
.quick-spec-tabs button { border: 0; border-radius: 8px; padding: 9px; color: #656978; background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
.quick-spec-tabs button.selected { color: #5b4bd7; background: #fff; box-shadow: 0 3px 10px rgba(34,31,56,.08); }
.quick-backgrounds { display: flex; justify-content: center; gap: 9px; }
.quick-backgrounds button { display: grid; place-items: center; gap: 4px; border: 1px solid transparent; border-radius: 10px; padding: 6px 10px; color: #646877; background: transparent; font-size: 9px; cursor: pointer; }
.quick-backgrounds button.selected { border-color: #7b6bea; background: #f5f3ff; }
.quick-backgrounds i { width: 26px; height: 26px; border: 1px solid #d5d3dc; border-radius: 50%; }
.quick-backgrounds i.is-original { display: grid; place-items: center; color: #555a68; background: linear-gradient(135deg, #fff 0 50%, #e8e7ed 50%); font-size: 9px; font-style: normal; font-weight: 800; }
.seo-color-guide .is-original { color: #555a68; background: linear-gradient(135deg, #fff 0 50%, #e8e7ed 50%); }
.quick-readonly-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.quick-readonly-summary span { border-radius: 99px; padding: 6px 9px; color: #666a78; background: #f2f1f6; font-size: 9px; }
.quick-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; border-radius: 11px; padding: 11px; color: #9d4049; background: #ffedef; font-size: 10px; }
.quick-error strong { flex: 1 1 100%; }
.quick-error button, .quick-error a { border: 1px solid #e3b9bd; border-radius: 7px; padding: 6px 8px; color: #963e47; background: #fff; text-decoration: none; cursor: pointer; }
.quick-download { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 17px; border: 0; border-radius: 12px; padding: 14px 16px; color: #fff; background: linear-gradient(115deg, #7564ed, #5744d9); font-size: 12px; font-weight: 800; box-shadow: 0 12px 24px rgba(89,70,217,.22); cursor: pointer; }
.quick-download:disabled { opacity: .42; box-shadow: none; cursor: not-allowed; }
.quick-footer-note { margin: 11px 0 0; color: #7b7f8c; text-align: center; font-size: 9px; }
.quick-footer-note a { color: #5947d4; }
@keyframes quick-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .seo-site-header, .seo-page-shell main, .seo-site-footer { width: min(100% - 28px, 680px); }
  .seo-hero { grid-template-columns: 1fr; gap: 34px; min-height: 0; padding: 48px 0; }
  .seo-hero-copy h1 { font-size: clamp(38px, 10vw, 58px); }
  .seo-quick-launch { min-height: 400px; padding: 35px 22px; }
  .seo-content-section, .seo-faq { padding: 28px; }
  .seo-faq { grid-template-columns: 1fr; gap: 20px; }
  .seo-simple-steps, .seo-capacity-grid { grid-template-columns: 1fr; }
  .quick-workspace.has-layout { grid-template-columns: 1fr; }
  .quick-layout-preview { border-top: 1px solid #dfdde6; border-left: 0; }
  .quick-layout-preview canvas { max-height: 260px; }
}
@media (max-width: 560px) {
  .seo-site-header { padding: 13px 0; }
  .seo-full-tool-link { padding: 7px 11px; font-size: 11px; }
  .seo-hero { padding-top: 32px; }
  .seo-hero-copy > p:not(.seo-eyebrow) { font-size: 15px; }
  .seo-quick-card { border-radius: 20px; }
  .seo-content-section, .seo-faq { margin: 30px 0; border-radius: 20px; padding: 22px; }
  .seo-answer-card { grid-template-columns: 1fr; padding: 22px; }
  .seo-answer-card strong { font-size: 30px; }
  .seo-color-guide { grid-template-columns: repeat(2, 1fr); }
  .seo-related > div { grid-template-columns: 1fr; }
  .seo-site-footer { flex-direction: column; gap: 6px; }
  .quick-editor { min-height: 480px; padding: 14px; }
  .quick-workspace { min-height: 290px; }
  .quick-photo-preview { min-height: 280px; padding: 14px; }
  .crop-viewport, .crop-viewport canvas { max-height: 290px; }
  .quick-backgrounds { gap: 2px; }
  .quick-backgrounds button { padding: 5px 7px; }
}