:root {
  --abc-bg: #0b1016;
  --abc-soft: #101821;
  --abc-panel: #111923;
  --abc-text: #f4f7fa;
  --abc-muted: #a5b0bc;
  --abc-line: #2c3947;
  --abc-accent: #65d9ff;
}

html { scroll-padding-top: 76px; }
body { font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif; background: var(--abc-bg); color: var(--abc-text); }
body::before { display: none !important; }

.aive-abc-hero {
  min-height: 0 !important;
  padding: 142px 24px 94px !important;
  color: #fff;
  background: #07111d !important;
}
.aive-abc-hero::before,
.aive-abc-hero::after { display: none !important; }
.aive-abc-hero .aive-hero-shell {
  width: min(1200px, 100%);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
  align-items: center;
  gap: 74px;
}
.aive-abc-hero .aive-hero-copy { max-width: 680px; }
.aive-abc-hero .hero-badge {
  margin: 0 0 28px;
  color: #65d9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}
.aive-abc-hero .hero-title {
  margin: 0;
  color: #fff !important;
  font-size: clamp(50px, 5.1vw, 76px) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}
.aive-abc-hero .hero-title-accent {
  display: block;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.aive-abc-hero .hero-subtitle {
  max-width: 650px;
  margin: 31px 0 0;
  display: block !important;
  color: #bac4ce !important;
  font-size: 17px !important;
  line-height: 1.82 !important;
}
.aive-abc-hero .hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.aive-abc-hero .btn-primary,
.aive-abc-hero .btn-outline {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #425163 !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
}
.aive-abc-hero .btn-primary { color: #07111d !important; border-color: #fff !important; background: #fff !important; }
.aive-abc-hero .btn-primary:hover { color: #07111d !important; background: #e9eef2 !important; transform: translateY(-1px); }
.aive-abc-hero .btn-outline:hover { border-color: #fff !important; transform: translateY(-1px); }
.aive-trust-note { margin: 22px 0 0; color: #81909f; font-size: 12px; line-height: 1.65; }

.aive-workflow-preview { border: 1px solid #344454; background: #0b1825; }
.aive-preview-head {
  min-height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid #344454;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #65d9ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}
.aive-preview-head small { color: #748392; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.aive-workflow-preview ol { margin: 0; padding: 0; list-style: none; }
.aive-workflow-preview li { min-height: 108px; padding: 24px 20px; border-bottom: 1px solid #2a3948; display: grid; grid-template-columns: 42px 1fr; gap: 16px; }
.aive-workflow-preview li:last-child { border-bottom: 0; }
.aive-workflow-preview li > span { color: #65d9ff; font-size: 11px; font-weight: 800; }
.aive-workflow-preview strong { display: block; color: #fff; font-size: 20px; }
.aive-workflow-preview p { margin: 8px 0 0; color: #98a5b2; font-size: 13px; line-height: 1.6; }

.aive-abc-method { padding: 104px 24px; color: var(--abc-text); background: var(--abc-bg); }
.aive-abc-method .container { width: min(1200px, 100%); }
.aive-abc-heading { margin-bottom: 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .66fr); align-items: end; gap: 76px; }
.aive-abc-heading > span { grid-column: 1 / -1; color: var(--abc-accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.aive-abc-heading h2 { margin: 0; color: var(--abc-text); font-size: clamp(43px, 5vw, 66px); line-height: 1; letter-spacing: -.06em; }
.aive-abc-heading p { margin: 0; color: var(--abc-muted); font-size: 16px; line-height: 1.82; }
.aive-abc-cards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--abc-text); border-bottom: 1px solid var(--abc-line); }
.aive-abc-cards article { min-height: 265px; padding: 25px 24px; border-right: 1px solid var(--abc-line); }
.aive-abc-cards article:last-child { border-right: 0; }
.aive-abc-cards span { color: var(--abc-accent); font-size: 10px; font-weight: 800; }
.aive-abc-cards h3 { margin: 70px 0 12px; color: var(--abc-text); font-size: 25px; letter-spacing: -.03em; }
.aive-abc-cards p { margin: 0; color: var(--abc-muted); font-size: 14px; line-height: 1.75; }
.aive-sample-note { margin-top: 42px; padding: 26px 0; border-top: 1px solid var(--abc-line); border-bottom: 1px solid var(--abc-line); display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 28px; }
.aive-sample-note strong { font-size: 16px; }
.aive-sample-note p { margin: 0; color: var(--abc-muted); font-size: 14px; line-height: 1.7; }
.aive-sample-note a { color: var(--abc-text); font-size: 13px; text-decoration: none; white-space: nowrap; }

.workspace-section { padding: 100px 24px 110px !important; background: var(--abc-soft) !important; }
.workspace-section .container { width: min(1200px, 100%); }
.aive-workspace-heading { margin-bottom: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .66fr); align-items: end; gap: 76px; }
.aive-workspace-heading > span { grid-column: 1 / -1; color: var(--abc-accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.aive-workspace-heading h2 { margin: 0 !important; color: var(--abc-text) !important; font-size: clamp(44px, 5vw, 66px) !important; line-height: 1 !important; letter-spacing: -.06em; }
.aive-workspace-heading p { margin: 0; color: var(--abc-muted); font-size: 15px; line-height: 1.75; }
.aive-usage-badge:not(:empty) { margin: 0 0 18px; padding: 6px 10px; display: inline-block; border: 1px solid var(--abc-line); color: var(--abc-muted); font-size: 12px; }
.workspace-tabs { margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0 !important; overflow: visible !important; border: 1px solid var(--abc-line); background: var(--abc-panel) !important; box-shadow: none !important; }
.workspace-tabs .tab { min-height: 56px; padding: 0 14px !important; border: 0 !important; border-right: 1px solid var(--abc-line) !important; border-radius: 0 !important; justify-content: center; color: var(--abc-muted) !important; background: transparent !important; box-shadow: none !important; }
.workspace-tabs .tab:last-child { border-right: 0 !important; }
.workspace-tabs .tab.active { color: #fff !important; background: #141619 !important; }
.workspace-tabs .tab .icon { width: 17px; height: 17px; }
.tab-content { margin-top: 18px !important; }
.workspace-grid,
.writing-container,
.check-container,
.hotspot-container { gap: 18px !important; }
.input-panel,
.output-panel,
.writing-sidebar,
.writing-main,
.check-input-area,
.check-output-area,
.hotspot-container { border: 1px solid var(--abc-line) !important; border-radius: 0 !important; color: var(--abc-text) !important; background: var(--abc-panel) !important; box-shadow: none !important; }
.input-panel,
.output-panel,
.check-input-area,
.check-output-area { padding: 30px !important; }
.input-panel h3,
.output-panel h3,
.check-input-area h3,
.hotspot-header h3 { color: var(--abc-text) !important; }
.panel-desc,
.check-input-area > p { color: var(--abc-muted) !important; line-height: 1.65; }
.generate-btn { border-radius: 0 !important; color: #fff !important; background: #141619 !important; box-shadow: none !important; }
.generate-btn:hover { transform: translateY(-1px) !important; box-shadow: none !important; }
.secondary-btn { border: 1px solid var(--abc-line) !important; color: var(--abc-text) !important; background: transparent !important; }
input,
textarea,
select { border-radius: 0 !important; }
.hotspot-header { align-items: flex-start !important; }
.hotspot-header .panel-desc { max-width: 620px; margin: 8px 0 0; }
.hotspot-item { border-radius: 0 !important; box-shadow: none !important; }

.site-footer.aive-yh-footer { border-top: 1px solid var(--abc-line); }
@media (max-width: 980px) {
  .aive-abc-hero .aive-hero-shell { grid-template-columns: 1fr; gap: 48px; }
  .aive-abc-hero .aive-hero-copy { max-width: 760px; }
  .aive-abc-heading,
  .aive-workspace-heading { grid-template-columns: 1fr; gap: 24px; }
  .aive-abc-cards { grid-template-columns: repeat(2, 1fr); }
  .aive-abc-cards article:nth-child(2) { border-right: 0; }
  .aive-abc-cards article:nth-child(n + 3) { border-top: 1px solid var(--abc-line); }
  .aive-sample-note { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 720px) {
  .aive-abc-hero { padding: 108px 18px 68px !important; }
  .aive-abc-hero .aive-hero-shell { gap: 38px; }
  .aive-abc-hero .hero-badge { margin-bottom: 20px; font-size: 9px; }
  .aive-abc-hero .hero-title { font-size: 45px !important; line-height: .98 !important; }
  .aive-abc-hero .hero-subtitle { margin-top: 24px; font-size: 15px !important; line-height: 1.74 !important; }
  .aive-abc-hero .hero-actions { margin-top: 28px; display: grid; }
  .aive-abc-hero .btn-primary,
  .aive-abc-hero .btn-outline { width: 100%; }
  .aive-trust-note { margin-top: 18px; }
  .aive-preview-head { padding: 0 14px; }
  .aive-workflow-preview li { min-height: 0; padding: 20px 16px; grid-template-columns: 34px 1fr; }
  .aive-workflow-preview strong { font-size: 18px; }

  .aive-abc-method { padding: 70px 18px; }
  .aive-abc-heading { margin-bottom: 38px; }
  .aive-abc-heading h2,
  .aive-workspace-heading h2 { font-size: 40px !important; line-height: 1.02 !important; }
  .aive-abc-heading p,
  .aive-workspace-heading p { font-size: 14px; line-height: 1.72; }
  .aive-abc-cards { grid-template-columns: 1fr; }
  .aive-abc-cards article { min-height: 0; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--abc-line); }
  .aive-abc-cards article:last-child { border-bottom: 0; }
  .aive-abc-cards article:nth-child(n + 3) { border-top: 0; }
  .aive-abc-cards h3 { margin-top: 30px; }
  .aive-sample-note { margin-top: 32px; padding: 22px 0; }

  .workspace-section { padding: 70px 18px 78px !important; }
  .aive-workspace-heading { margin-bottom: 28px; }
  .workspace-tabs { grid-template-columns: repeat(2, 1fr); }
  .workspace-tabs .tab:nth-child(2) { border-right: 0 !important; }
  .workspace-tabs .tab:nth-child(n + 3) { border-top: 1px solid var(--abc-line) !important; }
  .input-panel,
  .output-panel,
  .check-input-area,
  .check-output-area { padding: 22px 18px !important; }
  .hotspot-header { gap: 16px !important; }
}