/*
  GeoSynap geo-scan · 诊断页样式
  ----------------------------------------------------------------
  業務意図：3 態（input / analyzing / results）+ モーダル + エラー態
  ① styles.css のトークンを再利用（teal / ink / mono / paper）
  ② シャープコーナー（border-radius 不使用）—— index.html と同じ世界観
  ③ レスポンシブ：1024 / 768 / 540 / 420 ブレークポイント
  詳細は .claude/specs/geo-scan/design.md §3
*/

/*
  業務意図：HTML 標準 [hidden] 属性は display: none と等価扱いの「はず」だが、
  .dx-modal-bg / .dx-screen に display: flex を当てているため CSS 詳細度で
  hidden が無視される（モーダルが起動時に表示されたままになる bug）。
  優先度を上げて確実に隠す。
*/
[hidden] { display: none !important; }

/* a11y: 表示しないが SR には読ませる */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* honeypot：人間からは完全に不可視 / Tab 不可能 */
.dx-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================ */
/* ホームへ戻る導線（診断ページ唯一の chrome）
   業務意図：診断ページはヘッダを持たない。入力に集中させたいので
   ブランド／ナビ／phase ラベルを全て排し、左上の戻りリンクだけ残す。
   通常フローに置くと <main> より上に body 地の帯（32px 方眼）が露出して
   境目が線に見えるので、absolute で main の左上に重ねる。
*/
body { position: relative; }
.dx-home-link {
  position: absolute;
  top: 24px;
  left: 32px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  text-decoration: none;
  transition: color 0.15s;
}
.dx-home-link:hover { color: var(--teal); }

@media (max-width: 540px) {
  .dx-home-link { top: 16px; left: 20px; }
}

/* ============================================================ */
/* 共通：dx-screen / dx-card                                      */
/* ============================================================ */
.dx-screen {
  padding-block: 60px 80px;
  padding-inline: 0;
  background: var(--bg);
  min-height: calc(100vh - 60px);
}
.dx-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.dx-card + .dx-card,
.dx-card + .dx-actions-section {
  border-top: none;
}

/* card-head：ink 背景 / 白テキスト */
.dx-card-head {
  background: var(--ink);
  color: var(--paper);
  padding: 15px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.dx-card-head-dark { background: #0b0f13; }
.dx-head-icon {
  width: 30px;
  height: 30px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dx-head-tag {
  font-family: var(--en);
  font-size: 22px;
  font-weight: 700;
  color: var(--teal);
  opacity: 0.35;
  letter-spacing: 0.12em;
  margin-left: auto;
}
.dx-head-watermark {
  font-family: var(--en);
  font-size: 32px;
  font-weight: 700;
  color: var(--paper);
  opacity: 0.1;
  letter-spacing: 0.14em;
  margin-left: auto;
}

/* ============================================================ */
/* Phase 1: Input                                                 */
/* 設計稿：入力画面は全幅エッジツーエッジ、border 周囲なし、上のみ細線 */
/* ============================================================ */
/* 業務意図：.dx-screen の灰色 background と上下 padding を確実に上書き。
   .dx-screen.dx-input で詳細度を 0,0,2,0 まで上げる（単独 .dx-input
   と詳細度同等で後勝ちだが、SafeOrder のため明示） */
.dx-screen.dx-input {
  padding: 0;
  background: var(--paper);
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: stretch;
}
.dx-input-card {
  background: var(--paper);
  border: none;
  border-top: 1px solid var(--line);
  padding-block: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-block: 0;
  min-height: calc(100vh - 56px);
  justify-content: center;
}
/* 入力画面のパンくず・「無料・登録不要」バッジは廃止。
   .dx-badge はエラー画面の「エラー」表示でのみ使用する。 */
.dx-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-paler);
  border: 1px solid var(--teal-light);
  padding: 4px 12px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--teal-3);
  letter-spacing: 0.12em;
  font-weight: 600;
}
.dx-badge-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.dx-input-h1 {
  /* font-family は指定しない —— 見出し本文が日本語（「GEO 即時スキャン」等）なので、
     styles.css の body が持つ --jp をそのまま継承させる。
     ここで --en（欧文専用スタック）を指定すると和文グリフが無くブラウザ既定へ
     フォールバックし、index.html の見出しと別書体になる。 */
  font-weight: 700;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.dx-input-h1 em {
  color: var(--teal-3);
  font-style: normal;
}
.dx-input-sub {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.dx-input-desc {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.9;
  margin: 0 0 44px;
  max-width: 720px;
}

.dx-url-row {
  display: flex;
  width: 100%;
  max-width: 720px;
  border: 1.5px solid var(--ink);
  margin: 0 0 18px;
}
.dx-url-input {
  flex: 1;
  padding: 20px 24px;
  font-family: var(--mono);
  font-size: 16px; /* 16px 以上で iOS Safari の自動 zoom を回避 */
  border: none;
  outline: none;
  background: var(--paper);
  color: var(--ink);
  min-width: 0;
}
.dx-url-input::placeholder { color: var(--ink-4); }
.dx-url-btn {
  padding: 20px 36px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--jp);
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-left: 1.5px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.dx-url-btn:hover { background: var(--teal-3); }
.dx-url-btn:disabled {
  background: var(--ink-4);
  cursor: not-allowed;
}

.dx-input-err {
  font-size: 13px;
  color: #b91c1c;
  margin: 0 0 20px;
}

.dx-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dx-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.dx-trust-item svg {
  color: var(--teal-3);
  flex-shrink: 0;
}

/* ============================================================ */
/* Phase 2: Analyzing                                             */
/* 設計稿：縦積み（spinner / steps / tip / note）→ 区切り線 → chips */
/* ============================================================ */
.dx-screen.dx-analyzing {
  padding: 0;
  background: var(--paper);
  min-height: calc(100vh - 56px);
  display: block;            /* 子要素を縦積み（横並びにしない） */
}
.dx-analyzing-card {
  width: 100%;
  border: none;
  background: var(--paper);
}
.dx-analyzing-card .dx-card-body {
  padding: 56px min(8vw, 120px) 44px;
}
.dx-spinner-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
@keyframes dx-spin { to { transform: rotate(360deg); } }
.dx-spinner {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 7px solid var(--line);
  border-top-color: var(--teal);
  border-right-color: #38b3b6;
  animation: dx-spin 1.1s linear infinite;
}
.dx-status-main {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  text-align: center;
}
.dx-status-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-align: center;
}
.dx-status-url {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--teal-3);
  text-align: center;
}

.dx-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.dx-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dx-step-line {
  width: 44px;
  height: 1px;
  background: var(--line);
  margin-top: 17px;
  flex-shrink: 0;
  transition: background 0.4s;
}
.dx-step-line.done { background: var(--teal); }
.dx-step-node {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-4);
  transition: all 0.35s;
}
.dx-step.active .dx-step-node {
  background: var(--teal);
  color: var(--paper);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(79, 192, 195, 0.18);
}
.dx-step.done .dx-step-node {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dx-step-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.dx-tip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--teal-paler);
  border: 1px solid var(--teal-light);
  padding: 16px 20px;
  color: var(--teal-3);
}
.dx-tip svg { flex-shrink: 0; margin-top: 2px; }
.dx-tip-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--teal-3);
  margin-bottom: 4px;
}
.dx-tip-text { font-size: 13px; color: var(--ink-2); }
.dx-analyzing-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  text-align: center;
  margin-top: 18px;
  letter-spacing: 0.08em;
}

/* 設計稿：分析中の chips カード（analyzing card 下） */
.dx-chips-card {
  width: 100%;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 24px min(8vw, 120px);
}
.dx-chips-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  font-weight: 600;
}
.dx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dx-chip {
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
  color: var(--ink-3);
  background: var(--bg);
  transition: all 0.3s;
}
.dx-chip.active {
  background: var(--teal-paler);
  border-color: var(--teal);
  color: var(--teal-3);
  font-weight: 600;
}
.dx-chip.active::before {
  content: '● ';
}

/* ============================================================ */
/* Phase 3: Results                                               */
/* ============================================================ */
/* 設計稿：結果画面の各カードは左右ボーダー無し、エッジツーエッジ */
.dx-results { padding: 0; }
.dx-results > .site-container > .dx-card {
  border-left: none;
  border-right: none;
  border-top: none;
}
.dx-results > .site-container > .dx-actions-section {
  border: none;
  border-top: 1px solid var(--ink);
}
.dx-score-body {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 56px;
  padding: 48px min(6vw, 80px) 0;
  align-items: start;
}
.dx-gauge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.dx-gauge-wrap {
  position: relative;
  display: inline-block;
}
.dx-gauge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.dx-gauge-num {
  font-family: var(--en);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.dx-gauge-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.dx-gauge-desc {
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.75;
  max-width: 220px;
  margin: 0;
}

.dx-breakdown-title {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.dx-breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dx-brow-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.dx-brow-name {
  font-family: var(--en);
  font-size: 12px;
  font-weight: 600;
}
/* 設計稿：英ラベルの後ろ（）内に日本語、その下行に小さく日本語説明 */
.dx-brow-name-jp {
  display: inline;
  font-family: var(--jp);
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 2px;
}
.dx-brow-val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.dx-brow-jp {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.dx-brow-track {
  height: 4px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.dx-brow-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--teal-3);
  transition: width 1.3s ease-out;
}

.dx-score-cta-row { padding: 28px min(6vw, 80px) 40px; }
.dx-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px;
  background: var(--teal);
  color: var(--paper);
  font-family: var(--jp);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s;
}
.dx-cta-btn:hover {
  background: var(--teal-3);
  transform: translateY(-1px);
}
/* 再スキャン導線。主 CTA（メール受け取り）より弱く見せる為に枠線のみ */
.dx-cta-link {
  display: block;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  text-align: center;
  font-family: var(--jp);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.dx-cta-link:hover { border-color: var(--teal); color: var(--teal-3); }

.dx-summary-body {
  padding: 36px min(6vw, 80px);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.95;
}
.dx-summary-tag {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--teal-3);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.dx-summary-body p { margin: 0; }

/* Actions：設計稿対応の tab + priority head + 等幅コードブロック */
.dx-actions-section {
  background: var(--paper);
  overflow: hidden;
}

/* Tabs（改善アクション / 改善提案） */
.dx-tabs {
  display: flex;
  border-bottom: 1px solid var(--ink);
}
.dx-tab {
  padding: 14px 28px;
  font-family: var(--jp);
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.15s;
}
.dx-tab:hover { background: var(--paper); }
.dx-tab.active {
  background: var(--ink);
  color: var(--paper);
}
.dx-tab-badge {
  display: inline-block;
  margin-left: 8px;
  background: var(--teal);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  vertical-align: 1px;
}
.dx-proposals {
  padding: 32px min(6vw, 80px);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.85;
}

/* 高優先度 ribbon */
.dx-priority-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px min(6vw, 80px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #c84040;
  letter-spacing: 0.1em;
  background: rgba(200, 64, 64, 0.04);
  border-bottom: 1px solid rgba(200, 64, 64, 0.12);
}

.dx-action-item {
  padding: 24px min(6vw, 80px);
  border-bottom: 1px solid #e6e9ed;
  background: var(--paper);
}
.dx-action-item:last-child { border-bottom: none; }
.dx-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dx-action-cat {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  letter-spacing: 0.08em;
  background: var(--teal-paler);
  color: var(--teal-3);
  border: 1px solid var(--teal-light);
}
.dx-action-name {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
}
.dx-action-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0 0 10px;
}
.dx-action-url {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--teal-3);
  margin-bottom: 12px;
  word-break: break-all;
}
.dx-action-code {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.75;
  white-space: pre-wrap;
}

/* 設計稿：ロック区域は「ぼかしの裏地 + 中央 360px のオーバーレイ card」 */
.dx-lock-wrap {
  position: relative;
}
.dx-blurred {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.dx-lock-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 36px 44px;
  text-align: center;
  width: 360px;
  max-width: calc(100% - 32px);
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.14);
}
.dx-lock-icon {
  width: 56px;
  height: 56px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.dx-lock-title {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}
.dx-lock-desc {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 0 0 20px;
}
.dx-lock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  background: var(--teal);
  color: var(--paper);
  font-family: var(--jp);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.dx-lock-btn:hover { background: var(--teal-3); }

/* ============================================================ */
/* Error                                                          */
/* ============================================================ */
.dx-error-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* ============================================================ */
/* Modal                                                          */
/* ============================================================ */
.dx-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dx-modal {
  background: var(--paper);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--ink);
}
.dx-modal-head {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 16px;
}
.dx-modal-x {
  background: none;
  border: none;
  color: var(--ink-4);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  font-family: var(--mono);
  transition: color 0.15s;
}
.dx-modal-x:hover { color: var(--paper); }
.dx-modal-form,
.dx-modal-success { padding: 32px 36px; }
.dx-modal-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.dx-field { margin-bottom: 20px; }
.dx-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.dx-req {
  color: var(--teal-3);
  margin-left: 2px;
}
.dx-field-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  font-family: var(--jp);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.dx-field-input:focus {
  border-color: var(--teal);
  background: var(--paper);
}
.dx-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 6px;
  letter-spacing: 0.08em;
}
.dx-modal-err {
  font-size: 13px;
  color: #b91c1c;
  margin: 0 0 16px;
}
.dx-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px;
  background: var(--teal);
  color: var(--paper);
  font-family: var(--jp);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 8px;
  transition:
    background 0.15s,
    transform 0.15s;
}
.dx-submit:hover {
  background: var(--teal-3);
  transform: translateY(-1px);
}
.dx-submit:disabled {
  background: var(--ink-4);
  cursor: not-allowed;
  transform: none;
}
.dx-privacy {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.08em;
  line-height: 1.6;
}
.dx-modal-success { text-align: center; }
.dx-success-icon {
  width: 64px;
  height: 64px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 20px;
}
.dx-success-title {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 12px;
}
.dx-success-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0;
}

/* ============================================================ */
/* Responsive                                                     */
/* ============================================================ */
@media (max-width: 1024px) {
  .dx-score-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .dx-screen { padding-block: 40px 60px; }
  .dx-input-card { padding-block: 48px; }
  .dx-input-h1 { font-size: clamp(36px, 9vw, 56px); }
  .dx-card-body { padding: 36px 20px !important; }
  .dx-steps { gap: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .dx-step-label { font-size: 8px; }
  .dx-summary-body, .dx-action-item { padding-left: 20px; padding-right: 20px; }
  .dx-score-cta-row { padding-left: 20px; padding-right: 20px; }
  .topbar .dx-target-url { max-width: 32vw; font-size: 10px; }
}
@media (max-width: 540px) {
  .dx-url-row { flex-direction: column; border: none; gap: 12px; }
  .dx-url-input,
  .dx-url-btn { border: 1.5px solid var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .dx-spinner { animation: none; border-color: var(--teal); }
  .dx-brow-fill { transition: none; }
}

/* 運営主体を本文にも明示し、Organization 構造化データと表示内容を一致させる。 */
.dx-operator {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: #111a1d;
  color: #b6c3c5;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.dx-operator a { color: #dff5f4; text-underline-offset: 3px; }
.dx-operator a:hover { color: #78d3d5; }
@media (max-width: 540px) {
  .dx-operator { flex-direction: column; align-items: center; }
}

/* ============================================================ */
/* Dark surface refinements — shared tokens live in styles.css   */
/* ============================================================ */

main,
.dx-screen,
.dx-input-card,
.dx-analyzing-card,
.dx-chips-card {
  background-color: var(--bg);
}
.dx-screen.dx-input {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 78% 22%, rgba(55, 154, 158, 0.23), transparent 38%),
    linear-gradient(145deg, #0f1719 0%, #101a1c 58%, #0b1416 100%);
}
.dx-screen.dx-analyzing {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 22% 42%, rgba(48, 136, 141, 0.2), transparent 42%);
}
.dx-screen.dx-results {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 82% 18%, rgba(54, 151, 155, 0.18), transparent 36%);
}
.dx-screen.dx-error {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% 35%, rgba(79, 192, 195, 0.12), transparent 36%);
}
.dx-input-card,
.dx-analyzing-card,
.dx-chips-card { background: transparent; }

.dx-card,
.dx-actions-section,
.dx-action-item,
.dx-lock-overlay,
.dx-modal {
  background: rgba(18, 30, 33, 0.96);
  border-color: var(--line);
}
.dx-card-head,
.dx-card-head-dark,
.dx-modal-head {
  background: #091113;
  color: #f7f8f4;
}
.dx-input-h1,
.dx-action-name,
.dx-lock-title,
.dx-success-title,
.dx-label { color: var(--ink); }

.dx-url-row {
  background: rgba(18, 30, 33, 0.94);
  border-color: rgba(224, 241, 241, 0.44);
}
.dx-url-input,
.dx-field-input {
  background: rgba(9, 17, 19, 0.76);
  color: var(--ink);
  border-color: var(--line);
}
.dx-url-input::placeholder { color: #87989a; }
.dx-field-input:focus { background: #0d1719; }

.dx-url-btn,
.dx-cta-btn,
.dx-lock-btn,
.dx-submit {
  background: var(--teal);
  color: #071113;
  border-color: var(--teal);
}
.dx-url-btn:hover,
.dx-cta-btn:hover,
.dx-lock-btn:hover,
.dx-submit:hover { background: #68cdd0; }

.dx-tip,
.dx-chip,
.dx-tab,
.dx-action-code {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line);
}
.dx-chip.active,
.dx-action-cat {
  background: rgba(79, 192, 195, 0.12);
  border-color: rgba(79, 192, 195, 0.45);
  color: #71d2d4;
}
.dx-tab:hover { background: rgba(79, 192, 195, 0.08); }
.dx-tab.active {
  background: var(--teal);
  color: #071113;
}
.dx-tab-badge {
  background: #071113;
  color: #dff5f4;
}
.dx-lock-icon { background: #091113; }
.dx-modal-bg { background: rgba(3, 8, 9, 0.82); }
.dx-modal-x { color: #aebbbc; }
.dx-success-icon { color: #071113; }