:root {
      --bg: #f3f4f6;
      --card: #ffffff;
      --text: #243b5a;
      --muted: #8b97ab;
      --line: #e4e8ef;
      --primary: #0d9867;
      --primary-dark: #0b8459;
      --chip-bg: #edf9f2;
      --chip-line: #9ee2bf;
      --success-bg: #eefaf2;
      --success-line: #cdeed8;
      --error-bg: #fff4f3;
      --error-line: #f2cac5;
      --shadow: 0 14px 40px rgba(26, 41, 64, 0.08);
      --radius: 22px;
      --hero-1: #10865d;
      --hero-2: #0f7d56;
      --advice-bg: #efe7d1;
      --advice-line: #e2d2a0;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: linear-gradient(180deg, #f7f8fb 0%, #f1f3f6 100%);
      color: var(--text);
    }
    .topbar {
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid #e7ebf1;
    }
    .topbar-inner {
      width: min(1460px, calc(100% - 28px));
      margin: 0 auto;
      padding: 10px 2px 14px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .brand-icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      background: linear-gradient(135deg, #0f9a68, #0b7f58);
      color: white;
      display: grid;
      place-items: center;
      box-shadow: 0 12px 24px rgba(13, 152, 103, 0.2);
      font-size: 1.5rem;
      flex: 0 0 auto;
    }
    .brand-title {
      margin: 0;
      font-size: 1.9rem;
      font-weight: 900;
      letter-spacing: -.02em;
      color: #1d2f2a;
    }
    .brand-subtitle {
      margin: 4px 0 0;
      color: #66756f;
      font-size: 1rem;
    }
    .page {
      width: min(1460px, calc(100% - 28px));
      margin: 24px auto 30px;
    }
    .hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--hero-1), var(--hero-2));
      color: white;
      border-radius: 36px;
      box-shadow: 0 22px 60px rgba(16, 93, 69, 0.22);
      padding: 38px 36px 38px;
      min-height: 420px;
    }
    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      pointer-events: none;
    }
    .hero::before {
      width: 390px;
      height: 390px;
      right: -120px;
      top: -140px;
    }
    .hero::after {
      width: 260px;
      height: 260px;
      left: -95px;
      bottom: -120px;
    }
    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
      gap: 28px;
      align-items: end;
    }
    .hero-badge {
      display: inline-block;
      background: rgba(255,255,255,.13);
      color: #fff;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: 1rem;
      padding: 10px 16px;
      border-radius: 999px;
      margin-bottom: 18px;
    }
    .hero h1 {
      margin: 0;
      font-size: clamp(2.4rem, 5vw, 4.5rem);
      line-height: .98;
      letter-spacing: -.04em;
      font-weight: 900;
      max-width: 760px;
    }
    .hero p.lead {
      margin: 18px 0 28px;
      max-width: 840px;
      font-size: clamp(1.15rem, 1.7vw, 1.28rem);
      line-height: 1.55;
      color: rgba(255,255,255,.92);
    }
    .steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      max-width: 760px;
    }
    .step {
      background: rgba(255,255,255,.11);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 24px;
      padding: 18px 18px 16px;
      min-height: 168px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .step-num {
      display: block;
      font-size: 2.15rem;
      line-height: 1;
      font-weight: 900;
      color: #72d4b5;
      margin-bottom: 14px;
      letter-spacing: -.04em;
    }
    .step h3 {
      margin: 0 0 8px;
      font-size: 1rem;
      line-height: 1.25;
      color: #fff;
    }
    .step p {
      margin: 0;
      color: rgba(255,255,255,.82);
      font-size: .98rem;
      line-height: 1.45;
    }
    .advice-card {
      align-self: end;
      background: var(--advice-bg);
      color: #4f5f5a;
      border: 1px solid var(--advice-line);
      border-radius: 28px;
      padding: 26px 28px;
      box-shadow: 0 18px 30px rgba(25, 35, 22, 0.08);
    }
    .advice-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 10px;
      font-weight: 900;
      font-size: 1.1rem;
      color: #856619;
    }
    .advice-block + .advice-block {
      border-top: 1px solid rgba(133, 102, 25, 0.15);
      margin-top: 14px;
      padding-top: 14px;
    }
    .advice-block h4 {
      margin: 0 0 6px;
      font-size: 1rem;
      color: #3b5467;
    }
    .advice-block p {
      margin: 0;
      font-size: .98rem;
      line-height: 1.5;
      color: #556978;
    }
    .content-wrap {
      margin-top: 26px;
      display: flex;
      justify-content: center;
    }
    .content-wrap .card {
      width: min(920px, 100%);
    }
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: 34px 36px 30px;
    }
    label {
      display: block;
      margin: 0 0 12px;
      font-size: 1rem;
      font-weight: 800;
      color: #2c486f;
      text-transform: uppercase;
      letter-spacing: .02em;
    }
    .field { margin-bottom: 28px; }
    input, select, button {
      font: inherit;
    }
    input[type="text"], input[type="file"], select {
      width: 100%;
      border: 1px solid #d7dde8;
      border-radius: 12px;
      padding: 16px 17px;
      background: #fff;
      color: #364b68;
      box-shadow: 0 3px 10px rgba(24, 39, 75, 0.03);
    }
    input[type="text"]::placeholder { color: #98a2b3; }
    input[type="text"]:focus, select:focus {
      outline: none;
      border-color: #7fd7b2;
      box-shadow: 0 0 0 4px rgba(13, 152, 103, 0.10);
    }
    .code-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 146px;
      gap: 16px;
      align-items: center;
    }
    .add-btn, .download-btn, .secondary-btn {
      border: 0;
      border-radius: 12px;
      padding: 16px 18px;
      font-weight: 700;
      cursor: pointer;
      transition: .16s ease;
    }
    .add-btn:hover, .download-btn:hover, .secondary-btn:hover { transform: translateY(-1px); }
    .add-btn {
      background: var(--primary);
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 12px 24px rgba(13, 152, 103, 0.18);
    }
    .plus {
      font-size: 1.6rem;
      line-height: 1;
      margin-top: -2px;
    }
    .import-box {
      position: relative;
      margin-top: 18px;
      border: 1.5px dashed #d7dde8;
      border-radius: 12px;
      background: #fff;
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #6f7e95;
      padding: 16px;
      cursor: pointer;
    }
    .import-box input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .import-inner {
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .import-line {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 1rem;
      color: #66758d;
    }
    .import-line svg { width: 20px; height: 20px; }
    .helper {
      margin-top: 10px;
      color: #98a2b3;
      text-align: center;
      font-size: .95rem;
    }
    .mapping-wrap { display: none !important; }
    .hidden { display: none !important; }
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 15px;
      border-radius: 10px;
      border: 1px solid var(--chip-line);
      background: var(--chip-bg);
      color: #0d5d43;
      font-weight: 700;
      font-size: 1rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .chip button {
      border: 0;
      background: transparent;
      color: #6ea18a;
      font-size: 1.25rem;
      line-height: 1;
      padding: 0;
      cursor: pointer;
    }
    .status {
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 14px;
      white-space: pre-wrap;
      border: 1px solid var(--line);
      background: #f8fafc;
      color: #4c607d;
    }
    .status.success { background: var(--success-bg); border-color: var(--success-line); color: #17613d; }
    .status.error { background: var(--error-bg); border-color: var(--error-line); color: #a0372d; }
    .progress-wrap {
      display: none;
      margin-top: 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fafcfe;
      padding: 14px 16px;
    }
    .progress-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      font-size: .95rem;
    }
    .progress-bar {
      height: 10px;
      border-radius: 999px;
      background: #e9eef5;
      overflow: hidden;
    }
    .progress-bar > div {
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, #0d9867, #4cb98f);
      transition: width .2s ease;
    }
    .progress-code {
      margin-top: 10px;
      color: #6d7c92;
      font-size: .92rem;
    }
    .download-row {
      margin-top: 26px;
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .download-btn {
      background: linear-gradient(135deg, #149364, #0b8358);
      color: white;
      min-width: 200px;
      box-shadow: 0 12px 24px rgba(13, 152, 103, 0.18);
    }
    .secondary-btn {
      background: #eef2f7;
      color: #40546f;
      border: 1px solid #d5deea;
      min-width: 200px;
      box-shadow: 0 8px 20px rgba(35, 52, 77, 0.06);
    }
    @media (max-width: 1080px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }
      .advice-card {
        max-width: 780px;
      }
    }
    @media (max-width: 760px) {
      .topbar-inner { width: min(100% - 16px, 1460px); }
      .brand-title { font-size: 1.55rem; }
      .brand-subtitle { font-size: .95rem; }
      .page { width: min(100% - 16px, 1460px); margin: 16px auto; }
      .hero { padding: 24px 18px; border-radius: 26px; min-height: auto; }
      .steps { grid-template-columns: 1fr; }
      .content-wrap .card { width: 100%; }
      .card { padding: 20px 18px; border-radius: 20px; }
      .code-row { grid-template-columns: 1fr; }
      .download-row { justify-content: stretch; }
      .download-btn { width: 100%; }
    }

.map-card {
  margin-top: 22px;
}
.map-head h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
  color: #294360;
}
.map-head p {
  margin: 0 0 14px;
  color: #728197;
}
#mapPreview {
  width: 100%;
  height: 520px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  background: #eef3f7;
}
@media (max-width: 760px) {
  #mapPreview {
    height: 380px;
  }
}

.footer-mini {
  margin-top: 40px;
  padding: 18px 10px;
  text-align: center;
  font-size: 0.85rem;
  color: #6b7c93;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.footer-mini a {
  color: #0d9867;
  font-weight: 500;
  text-decoration: none;
}

.footer-mini a:hover {
  text-decoration: underline;
}