/* ===========================================
   経営者AI診断 - スタイル
   =========================================== */

:root {
  --color-bg: #F7F6F2;
  --color-surface: #FFFFFF;
  --color-navy: #1B3A5C;
  --color-navy-light: #2A527A;
  --color-accent: #2563EB;
  --color-gold: #C8962A;
  --color-text: #111827;
  --color-text-mute: #6B7280;
  --color-text-soft: #374151;
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.10);
  --radius: 12px;
  --radius-sm: 8px;

  --font-jp: 'Noto Sans JP', "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: #060607; min-height: 100%; }

body {
  font-family: var(--font-jp);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.7;
  overflow-x: hidden;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px;
  position: relative;
}

/* =============== 画面切替 =============== */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; animation: fadeIn 0.35s ease both; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============== スタート画面 =============== */
.brand {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--color-text-mute);
  text-align: center;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.hero-title {
  text-align: center;
  margin-bottom: 24px;
}

.hero-tag {
  display: inline-block;
  font-size: 13px;
  color: var(--color-navy);
  background: rgba(27, 58, 92, 0.07);
  border: 1px solid rgba(27, 58, 92, 0.15);
  padding: 4px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
  font-weight: 600;
}

.hero-main {
  display: block;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  line-height: 1.35;
}

.hero-lead {
  text-align: center;
  color: var(--color-text-soft);
  font-size: 16px;
  margin-bottom: 40px;
  line-height: 1.8;
}

.rank-preview {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.rank-chip {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-mute);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, border-color 0.2s;
}

.rank-chip span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.rank-chip:hover { transform: translateY(-3px); border-color: var(--color-navy); }

.rank-S { color: var(--color-gold); border-color: rgba(200, 150, 42, 0.4); }
.rank-A { color: #4B5563; border-color: rgba(75, 85, 99, 0.3); }
.rank-B { color: var(--color-accent); border-color: rgba(37, 99, 235, 0.3); }
.rank-C { color: var(--color-navy); border-color: rgba(27, 58, 92, 0.3); }
.rank-D { color: #6366F1; border-color: rgba(99, 102, 241, 0.3); }
.rank-E { color: var(--color-text-mute); border-color: var(--color-border); }

.meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-mute);
}

.type-preview {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-mute);
  margin-bottom: 32px;
  margin-top: -16px;
}

.type-preview strong {
  color: var(--color-navy);
  font-weight: 700;
}

/* スタート画面の価値リスト */
.value-list {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.value-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.value-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-navy);
  color: white;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.value-item strong {
  display: block;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 4px;
}

.value-item p {
  font-size: 13px;
  color: var(--color-text-mute);
  line-height: 1.7;
}

.sources {
  margin-top: 56px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.sources-label {
  font-size: 12px;
  color: var(--color-text-mute);
  margin-bottom: 6px;
}

.sources-list {
  font-size: 11px;
  color: var(--color-text-mute);
  line-height: 1.6;
}

/* =============== ボタン =============== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.18s;
  letter-spacing: 0.02em;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-navy);
  color: white;
  box-shadow: 0 2px 8px rgba(27, 58, 92, 0.25);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-navy-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(27, 58, 92, 0.3);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-soft);
  border: 1.5px solid var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.btn-text {
  background: transparent;
  color: var(--color-text-mute);
  text-decoration: underline;
  padding: 8px 16px;
}

.btn-text:hover { color: var(--color-navy); }

.btn-lg {
  padding: 17px 48px;
  font-size: 17px;
  display: block;
  margin: 0 auto;
  min-width: 240px;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* =============== 属性入力画面 =============== */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-mute);
  font-family: var(--font-en);
  letter-spacing: 0.05em;
}

.step small {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--color-text-mute);
}

.step.active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: white;
}

.step.active small {
  color: rgba(255, 255, 255, 0.85);
}

.step-divider {
  width: 24px;
  height: 1px;
  background: var(--color-border);
}

.profile-title {
  text-align: center;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.profile-lead {
  text-align: center;
  color: var(--color-text-soft);
  font-size: 14px;
  margin-bottom: 36px;
  line-height: 1.8;
}

.profile-lead strong {
  color: var(--color-navy);
  font-weight: 700;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 36px;
}

.profile-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.profile-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-chip {
  padding: 9px 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.profile-chip:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.profile-chip.selected {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: white;
}

.profile-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.profile-footer .btn { flex: 1; max-width: 240px; }

.pc-task-form {
  gap: 24px;
}

.pc-task-options {
  gap: 10px;
}

.pc-task-chip {
  line-height: 1.45;
}

.pc-task-other {
  margin: -12px 0 32px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.pc-task-other textarea {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--color-text);
  resize: vertical;
  min-height: 88px;
}

.pc-task-other textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.1);
}

.pc-task-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-mute);
  line-height: 1.7;
}

/* 結果ページの属性バー */
.result-profile-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 12px;
}

.profile-bar-label {
  font-weight: 700;
  color: var(--color-text-mute);
  letter-spacing: 1px;
  font-family: var(--font-en);
  text-transform: uppercase;
  font-size: 11px;
}

.profile-bar-chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--color-bg);
  color: var(--color-text-soft);
  border-radius: 99px;
  font-weight: 600;
  font-size: 12px;
}

/* =============== 質問画面 =============== */
.quiz-header { margin-bottom: 40px; }

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--color-text-mute);
  font-family: var(--font-en);
}

.part-tag {
  background: rgba(27, 58, 92, 0.08);
  color: var(--color-navy);
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-family: var(--font-jp);
  font-weight: 600;
}

.progress-bar-wrap {
  height: 4px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-navy);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.quiz-encourage {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(27, 58, 92, 0.05);
  border-left: 3px solid var(--color-navy);
  font-size: 13px;
  color: var(--color-navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 600;
  animation: fadeIn 0.4s ease;
}

.question-text {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--color-text);
}

.question-hint {
  font-size: 13px;
  color: var(--color-text-mute);
  margin-bottom: 28px;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

.option {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: var(--color-text-soft);
  box-shadow: var(--shadow-sm);
}

.option:hover {
  border-color: var(--color-navy);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}

.option.selected {
  background: rgba(27, 58, 92, 0.05);
  border-color: var(--color-navy);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.option-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  transition: all 0.18s;
  display: grid;
  place-items: center;
}

.option.selected .option-marker {
  border-color: var(--color-navy);
  background: var(--color-navy);
}

.option.selected .option-marker::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* チェックボックス用（複数選択） */
.option.multi .option-marker {
  border-radius: 4px;
}
.option.multi.selected .option-marker::after {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
}

.quiz-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.quiz-footer .btn { flex: 1; max-width: 200px; }

/* =============== 結果画面 =============== */
.result-hero {
  text-align: center;
  padding: 40px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 28px;
  box-shadow: var(--shadow-card);
}

.result-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--color-text-mute);
  letter-spacing: 3px;
  margin-bottom: 24px;
  text-transform: uppercase;
  font-family: var(--font-en);
}

.result-rank-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.result-character {
  width: 180px;
  height: 180px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.result-character.placeholder {
  display: grid;
  place-items: center;
  background: var(--color-bg);
  border: 1.5px dashed var(--color-border);
  text-align: center;
}

.placeholder-rank {
  font-family: var(--font-en);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-navy);
}

.placeholder-label {
  font-size: 11px;
  color: var(--color-text-mute);
  margin-top: 8px;
  letter-spacing: 1px;
}

.result-rank-info { text-align: left; }

.rank-letter {
  font-family: var(--font-en);
  font-size: clamp(72px, 13vw, 108px);
  font-weight: 900;
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: -0.05em;
}

.result-rank-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-soft);
  margin-top: 4px;
}

.result-type-code {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-navy);
  background: var(--color-bg);
  border: 1.5px solid var(--color-navy);
  border-radius: var(--radius-sm);
  letter-spacing: 0.4em;
  font-family: var(--font-jp);
}

.result-type-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  background: var(--color-navy);
  border-radius: 99px;
  letter-spacing: 0.02em;
}

/* 4軸の傾向バー */
.axis-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 28px;
  padding: 20px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.axis-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.axis-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.axis-name {
  color: var(--color-text-mute);
  font-weight: 600;
}

.axis-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.axis-char {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--color-navy);
  color: white;
  font-weight: 800;
  font-size: 13px;
  border-radius: 4px;
}

.axis-label {
  color: var(--color-text);
  font-weight: 700;
  font-size: 13px;
}

.axis-strength {
  color: var(--color-text-mute);
  font-family: var(--font-en);
  font-size: 12px;
}

.axis-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.axis-pole-left,
.axis-pole-right {
  font-size: 11px;
  color: var(--color-text-mute);
  font-weight: 600;
  white-space: nowrap;
}

.axis-pole-left.active,
.axis-pole-right.active {
  color: var(--color-navy);
}

.axis-bar-track {
  position: relative;
  height: 6px;
  background: var(--color-border);
  border-radius: 99px;
}

.axis-bar-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  transition: left 0.5s ease;
}

.disclaimer {
  margin-top: 12px;
  font-size: 10px;
  color: var(--color-text-mute);
  line-height: 1.6;
}

.result-score {
  font-family: var(--font-en);
  font-size: 15px;
  color: var(--color-text-mute);
  margin-top: 4px;
}

.result-headline {
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-navy);
}

.result-description {
  color: var(--color-text-soft);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.85;
}

.result-visual-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: -10px 0 28px;
}

.result-visual-card {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.result-visual-card strong,
.result-visual-card span {
  display: block;
}

.result-visual-card strong {
  margin: 10px 0 4px;
  color: var(--color-navy);
  font-size: 14px;
}

.result-visual-card > span {
  color: var(--color-text-mute);
  font-size: 12px;
  line-height: 1.7;
}

.mini-illust {
  position: relative;
  width: 58px;
  height: 42px;
  border-radius: 12px;
  background: rgba(27, 58, 92, 0.06);
  overflow: hidden;
}

.mini-illust span {
  position: absolute;
  display: block;
  background: var(--color-navy);
}

.mini-illust-score span {
  bottom: 9px;
  width: 8px;
  border-radius: 99px 99px 4px 4px;
}

.mini-illust-score span:nth-child(1) { left: 13px; height: 13px; opacity: 0.45; }
.mini-illust-score span:nth-child(2) { left: 25px; height: 20px; opacity: 0.72; }
.mini-illust-score span:nth-child(3) { left: 37px; height: 27px; opacity: 1; }

.mini-illust-work span {
  width: 24px;
  height: 10px;
  left: 17px;
  border-radius: 99px;
}

.mini-illust-work span:nth-child(1) { top: 8px; opacity: 0.4; }
.mini-illust-work span:nth-child(2) { top: 16px; opacity: 0.7; }
.mini-illust-work span:nth-child(3) { top: 24px; opacity: 1; }

.mini-illust-next span {
  width: 13px;
  height: 13px;
  top: 15px;
  border-radius: 50%;
}

.mini-illust-next span:nth-child(1) { left: 8px; opacity: 0.45; }
.mini-illust-next span:nth-child(2) { left: 23px; opacity: 0.72; }
.mini-illust-next span:nth-child(3) { left: 38px; opacity: 1; }

.pc-task-impact {
  margin: 18px 0 28px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(27, 58, 92, 0.96), rgba(37, 99, 235, 0.88));
  color: white;
  border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(27, 58, 92, 0.24);
}

.pc-task-detail {
  margin: 18px 0 28px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(27, 58, 92, 0.96), rgba(37, 99, 235, 0.88));
  color: white;
  border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(27, 58, 92, 0.24);
}

.detail-topbar {
  margin-bottom: 16px;
}

.detail-topbar .btn {
  width: fit-content;
}

.pc-impact-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.pc-impact-head-compact {
  margin-bottom: 12px;
}

.pc-impact-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}

.pc-impact-head h3 {
  font-size: clamp(19px, 3vw, 24px);
  line-height: 1.4;
  margin-top: 3px;
}

.pc-impact-count {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 800;
}

.pc-impact-mini-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.pc-impact-mini-map::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-50%);
}

.pc-impact-mini-map span {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: white;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.pc-impact-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.pc-impact-bucket {
  margin-top: 14px;
}

.pc-impact-bucket-title {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 800;
}

.pc-impact-summary {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
}

.pc-impact-summary-compact {
  margin-bottom: 18px;
}

.pc-detail-visual-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 20px;
}

.pc-detail-visual-card {
  padding: 14px 12px;
  min-height: 150px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.pc-detail-visual-card strong,
.pc-detail-visual-card span,
.pc-detail-visual-card b {
  display: block;
}

.pc-detail-visual-card strong {
  margin-top: 10px;
  color: white;
  font-size: 13px;
  line-height: 1.5;
}

.pc-detail-visual-card span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.5;
}

.pc-detail-visual-card b {
  margin-top: 10px;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 99px;
  background: white;
  color: var(--color-navy);
  font-size: 12px;
}

.pc-detail-icon {
  position: relative;
  width: 46px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.pc-detail-icon span {
  position: absolute;
  display: block;
  background: white;
}

.pc-detail-icon-quick span:nth-child(1) {
  width: 24px;
  height: 8px;
  left: 11px;
  top: 10px;
  border-radius: 99px;
}

.pc-detail-icon-quick span:nth-child(2) {
  width: 17px;
  height: 8px;
  left: 11px;
  top: 22px;
  border-radius: 99px;
  opacity: 0.7;
}

.pc-detail-icon-data span:nth-child(1) {
  inset: 9px 10px auto;
  height: 2px;
  box-shadow: 0 8px 0 white, 0 16px 0 white;
}

.pc-detail-icon-data span:nth-child(2) {
  top: 7px;
  bottom: 7px;
  left: 22px;
  width: 2px;
  opacity: 0.7;
}

.pc-detail-icon-tool span:nth-child(1) {
  width: 14px;
  height: 14px;
  left: 8px;
  top: 12px;
  border-radius: 50%;
}

.pc-detail-icon-tool span:nth-child(2) {
  width: 18px;
  height: 4px;
  left: 21px;
  top: 17px;
  border-radius: 99px;
  box-shadow: -3px 9px 0 rgba(255, 255, 255, 0.7);
}

.pc-detail-icon-review span:nth-child(1) {
  width: 24px;
  height: 18px;
  left: 11px;
  top: 10px;
  border-radius: 5px;
  opacity: 0.5;
}

.pc-detail-icon-review span:nth-child(2) {
  width: 18px;
  height: 9px;
  left: 14px;
  top: 15px;
  border: 2px solid white;
  border-top: 0;
  border-right: 0;
  background: transparent;
  transform: rotate(-45deg);
}

.pc-impact-detail-btn {
  max-width: 280px;
  margin: 0;
  background: white;
  color: var(--color-navy);
  box-shadow: none;
}

.pc-impact-detail-btn:hover {
  background: rgba(255, 255, 255, 0.92);
}

.pc-impact-item {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
}

.pc-impact-tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 800;
}

.pc-impact-item strong,
.pc-impact-other strong {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.pc-impact-item span,
.pc-impact-other span,
.pc-impact-more {
  display: block;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.84);
}

.pc-impact-more {
  margin-top: 12px;
}

.pc-impact-other {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
}

.pc-impact-consult {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.8;
}

/* タイプ詳細セクション */
.type-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-card);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-mute);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: var(--font-en);
}

.type-name {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.type-tagline {
  font-size: 15px;
  color: var(--color-text-soft);
  font-style: italic;
  margin-bottom: 20px;
}

.type-description {
  font-size: 15px;
  color: var(--color-text-soft);
  line-height: 1.9;
  margin-bottom: 28px;
}

.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.type-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 20px;
}

.type-card-strength {
  border-left: 3px solid var(--color-navy);
}

.type-card-blindspot {
  border-left: 3px solid var(--color-gold);
}

.type-card-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-en);
  margin-bottom: 12px;
}

.type-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.type-card li {
  font-size: 14px;
  color: var(--color-text-soft);
  line-height: 1.7;
  padding: 6px 0 6px 16px;
  position: relative;
}

.type-card-strength li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-navy);
  font-weight: 800;
}

.type-card-blindspot li::before {
  content: "!";
  position: absolute;
  left: 2px;
  color: var(--color-gold);
  font-weight: 800;
}

.action-plan {
  background: rgba(27, 58, 92, 0.04);
  border: 1px solid rgba(27, 58, 92, 0.12);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
}

.action-plan-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-en);
  margin-bottom: 8px;
}

.action-plan p {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.85;
}

/* チャートセクション */
.chart-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.chart-section h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-en);
}

.chart-wrap {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
}

.chart-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-top: 20px;
  font-size: 13px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-soft);
}

.chart-legend > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-legend strong {
  font-family: var(--font-en);
  margin-left: auto;
  color: var(--color-navy);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.dot-A { background: #2563EB; }
.dot-B { background: #1B3A5C; }
.dot-C { background: #6366F1; }
.dot-D { background: #C8962A; }

/* 全体分布 */
.distribution-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.distribution-section h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-en);
}

.distribution-headline {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-soft);
  margin-bottom: 24px;
}

.distribution-headline strong {
  color: var(--color-navy);
  font-weight: 800;
}

.distribution-bars {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 3px;
  height: 220px;
  align-items: end;
  margin-bottom: 12px;
}

.dist-col {
  min-width: 0;
}

.dist-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}

.dist-marker {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy);
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 99px;
  white-space: nowrap;
  z-index: 2;
}

.dist-marker::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: var(--color-navy);
}

.dist-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 1px;
}

.dist-bar {
  width: 100%;
  background: var(--color-border);
  border-radius: 3px 3px 0 0;
  transition: height 0.5s ease;
  min-height: 2px;
}

.dist-col-you .dist-bar {
  background: var(--color-navy);
  box-shadow: 0 0 12px rgba(27,58,92,0.3);
}

.dist-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  font-size: 9px;
}

.dist-rank {
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--color-text-mute);
  font-size: 10px;
  white-space: nowrap;
}

.dist-col-you .dist-rank {
  color: var(--color-navy);
}

.dist-pct {
  color: var(--color-text-mute);
  font-size: 8px;
  white-space: nowrap;
  font-family: var(--font-en);
  letter-spacing: -0.02em;
}

.distribution-note {
  font-size: 11px;
  color: var(--color-text-mute);
  text-align: right;
  margin-top: 4px;
}

/* ランク別テーマでの分布セクション色適用 */
body[data-rank]:not([data-rank="E"]) .distribution-section {
  background: var(--glass-bg-soft, var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur, 24px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px));
  border: 1px solid var(--glass-border-soft, var(--glass-border));
}

body[data-rank]:not([data-rank="E"]) .distribution-section h3 { color: rgba(255,255,255,0.6); }
body[data-rank]:not([data-rank="E"]) .distribution-headline { color: rgba(255,255,255,0.85); }
body[data-rank]:not([data-rank="E"]) .distribution-headline strong { color: #fff; }
body[data-rank]:not([data-rank="E"]) .dist-bar { background: rgba(255,255,255,0.15); }
body[data-rank]:not([data-rank="E"]) .dist-rank,
body[data-rank]:not([data-rank="E"]) .dist-pct,
body[data-rank]:not([data-rank="E"]) .distribution-note { color: rgba(255,255,255,0.55); }
body[data-rank]:not([data-rank="E"]) .dist-marker { background: rgba(255,255,255,0.9); color: #000; }
body[data-rank]:not([data-rank="E"]) .dist-marker::after { background: rgba(255,255,255,0.9); }

/* ランク別の "あなた" バー色 */
body[data-rank="S"] .dist-col-you .dist-bar { background: #7dd3fc; box-shadow: 0 0 16px rgba(125,211,252,0.5); }
body[data-rank="A"] .dist-col-you .dist-bar { background: #5eead4; box-shadow: 0 0 16px rgba(94,234,212,0.4); }
body[data-rank="B"] .dist-col-you .dist-bar { background: #b4a762; box-shadow: 0 0 12px rgba(132,127,68,0.3); }
body[data-rank="C"] .dist-col-you .dist-bar { background: #fb923c; box-shadow: 0 0 16px rgba(251,146,60,0.4); }
body[data-rank="D"] .dist-col-you .dist-bar { background: #c084fc; box-shadow: 0 0 16px rgba(192,132,252,0.4); }
body[data-rank="E"] .dist-col-you .dist-bar { background: #ef4444; box-shadow: 0 0 16px rgba(239,68,68,0.5); }
body[data-rank="S"] .dist-col-you .dist-rank { color: #7dd3fc; }
body[data-rank="A"] .dist-col-you .dist-rank { color: #5eead4; }
body[data-rank="B"] .dist-col-you .dist-rank { color: #c9bc78; }
body[data-rank="C"] .dist-col-you .dist-rank { color: #fb923c; }
body[data-rank="D"] .dist-col-you .dist-rank { color: #c084fc; }
body[data-rank="E"] .dist-col-you .dist-rank { color: #ef4444; }

/* Eランク（変更不可テーマと整合） */
body[data-rank="E"] .distribution-section {
  background: rgba(26,0,0,0.7);
  border: 1px solid rgba(239,68,68,0.3);
}
body[data-rank="E"] .distribution-section h3 { color: rgba(239,68,68,0.7); }
body[data-rank="E"] .distribution-headline { color: rgba(255,255,255,0.85); }
body[data-rank="E"] .distribution-headline strong { color: #fca5a5; }
body[data-rank="E"] .dist-bar { background: rgba(239,68,68,0.2); }
body[data-rank="E"] .dist-rank,
body[data-rank="E"] .dist-pct,
body[data-rank="E"] .distribution-note { color: rgba(255,255,255,0.5); }
body[data-rank="E"] .dist-marker { background: #ef4444; color: white; }
body[data-rank="E"] .dist-marker::after { background: #ef4444; }

/* 次の一手 */
.next-step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.next-step-card h3 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-en);
}

.next-step-card p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-soft);
}

/* CTAセクション */
.cta-section { margin-bottom: 40px; }

.cta-section h3 {
  text-align: center;
  font-size: 17px;
  margin-bottom: 20px;
  color: var(--color-text);
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cta-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.cta-card-paid {
  border-color: rgba(200, 150, 42, 0.35);
}

.cta-card-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--color-navy);
  color: white;
}

.cta-card-paid .cta-card-tag {
  background: var(--color-gold);
  color: white;
}

.cta-card h4 {
  font-size: 17px;
  margin-bottom: 8px;
  margin-top: 20px;
  color: var(--color-text);
}

.cta-card p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-mute);
  margin-bottom: 16px;
  min-height: 80px;
}

/* シェアセクション */
.share-section {
  text-align: center;
  margin-bottom: 40px;
}

.share-section h3 {
  font-size: 17px;
  margin-bottom: 6px;
  color: var(--color-text);
}

.share-lead {
  color: var(--color-text-mute);
  font-size: 14px;
  margin-bottom: 20px;
}

.share-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-share {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, opacity 0.15s;
  color: white;
}

.btn-share:hover { transform: translateY(-2px); opacity: 0.9; }

.btn-x { background: #000000; }
.btn-line { background: #06C755; }
.btn-fb { background: #1877F2; }
.btn-instagram {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}
.btn-copy { background: var(--color-text-soft); }

/* リテイク */
.retake-section {
  text-align: center;
  margin-bottom: 32px;
}

.result-footer {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-mute);
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}

/* =============== プレビューバー =============== */
#preview-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 99px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  font-family: var(--font-en);
  font-size: 12px;
}

.preview-bar-label {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  letter-spacing: 2px;
  padding: 0 8px;
  font-size: 10px;
}

.preview-bar-link {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 800;
  font-size: 11px;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.preview-bar-link:hover {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

.preview-bar-link.active {
  background: white;
  color: #111827;
}

.preview-bar-exit {
  margin-left: 8px;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border-radius: 99px;
  font-size: 11px;
  transition: all 0.15s;
}

.preview-bar-exit:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* =============== ランク別テーマ（Glassmorphism + Mesh Gradient） =============== */
/*
 * テーマ：「AI成熟度によって、空気・透明感・生命感が失われていく」
 * S/A：澄んだ空気・強い透明感・発光
 * B  ：少し濁る・彩度低下
 * C  ：赤が侵食・ノイズ追加
 * D  ：透明感ほぼ消失・圧迫感
 * E  ：既存（災害級アラート）
 */

body[data-rank] {
  position: relative;
  overflow-x: hidden;
}

/* メッシュグラデーション層（背景全体） */
body[data-rank]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--mesh-gradient);
}

/* ノイズ／フェード層（必要に応じて重ねる） */
body[data-rank]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--rank-overlay, transparent);
  opacity: var(--rank-overlay-opacity, 0);
}

/* 結果コンテンツとプレビューバーを前面に */
body[data-rank] .container,
body[data-rank] #preview-bar {
  position: relative;
  z-index: 1;
}

/* Glassmorphism共通：結果カードはフロステッドガラス（Eは対象外） */
body[data-rank]:not([data-rank="E"]) .result-hero {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(var(--glass-saturate, 140%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px)) saturate(var(--glass-saturate, 140%));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

body[data-rank]:not([data-rank="E"]) .type-section,
body[data-rank]:not([data-rank="E"]) .chart-section,
body[data-rank]:not([data-rank="E"]) .next-step-card {
  background: var(--glass-bg-soft, var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur, 24px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px));
  border: 1px solid var(--glass-border-soft, var(--glass-border));
}

/* --- S: 未来企業 / 最先端（シアン × 白 × 淡青・最大透明感） --- */
body[data-rank="S"] {
  background: #0a1929;
  color: rgba(255,255,255,0.95);
  --glass-bg: rgba(10,25,41,0.55);
  --glass-bg-soft: rgba(10,25,41,0.45);
  --glass-border: rgba(125,211,252,0.35);
  --glass-border-soft: rgba(125,211,252,0.2);
  --glass-shadow: 0 0 60px rgba(56,189,248,0.15), 0 8px 40px rgba(0,0,0,0.3);
  --glass-blur: 30px;
  --glass-saturate: 160%;
  --mesh-gradient:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(125,211,252,0.55) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(255,255,255,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(59,130,246,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 90% 80%, rgba(186,230,253,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 0% 70%, rgba(8,145,178,0.4) 0%, transparent 60%);
}

[data-rank="S"] .result-tag { color: rgba(125,211,252,0.8); letter-spacing: 4px; }
[data-rank="S"] .rank-letter {
  color: #7dd3fc;
  text-shadow: 0 0 40px rgba(125,211,252,0.7), 0 0 80px rgba(56,189,248,0.4);
}
[data-rank="S"] .result-rank-title { color: rgba(255,255,255,0.85); }
[data-rank="S"] .result-type-code {
  color: #bae6fd; border-color: rgba(125,211,252,0.5);
  background: rgba(125,211,252,0.08);
}
[data-rank="S"] .result-type-badge { background: linear-gradient(90deg, #0891b2, #06b6d4); }
[data-rank="S"] .result-score { color: rgba(186,230,253,0.7); }
[data-rank="S"] .result-headline { color: #e0f2fe; }
[data-rank="S"] .result-description { color: rgba(255,255,255,0.78); }
[data-rank="S"] .result-character { border-color: rgba(125,211,252,0.4); box-shadow: 0 0 30px rgba(125,211,252,0.3); }
[data-rank="S"] .section-label,
[data-rank="S"] .chart-section h3,
[data-rank="S"] .next-step-card h3 { color: rgba(186,230,253,0.7); }
[data-rank="S"] .type-name { color: #e0f2fe; }
[data-rank="S"] .type-tagline,
[data-rank="S"] .type-description,
[data-rank="S"] .next-step-card p { color: rgba(255,255,255,0.75); }

/* --- A: 優秀 / 安定（ティール × 青緑・落ち着いた透明感） --- */
body[data-rank="A"] {
  background: #062a26;
  color: rgba(255,255,255,0.95);
  --glass-bg: rgba(6,42,38,0.55);
  --glass-bg-soft: rgba(6,42,38,0.45);
  --glass-border: rgba(94,234,212,0.3);
  --glass-border-soft: rgba(94,234,212,0.18);
  --glass-shadow: 0 0 50px rgba(20,184,166,0.12), 0 8px 32px rgba(0,0,0,0.3);
  --glass-blur: 26px;
  --glass-saturate: 150%;
  --mesh-gradient:
    radial-gradient(ellipse 75% 55% at 20% 25%, rgba(20,184,166,0.5) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 85% 20%, rgba(94,234,212,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 85% 75% at 50% 95%, rgba(13,148,136,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 90% 75%, rgba(45,212,191,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 0% 65%, rgba(15,118,110,0.45) 0%, transparent 60%);
}

[data-rank="A"] .result-tag { color: rgba(94,234,212,0.75); letter-spacing: 4px; }
[data-rank="A"] .rank-letter {
  color: #5eead4;
  text-shadow: 0 0 30px rgba(94,234,212,0.5), 0 0 60px rgba(20,184,166,0.25);
}
[data-rank="A"] .result-rank-title { color: rgba(255,255,255,0.82); }
[data-rank="A"] .result-type-code { color: #99f6e4; border-color: rgba(94,234,212,0.45); background: rgba(94,234,212,0.08); }
[data-rank="A"] .result-type-badge { background: linear-gradient(90deg, #0d9488, #14b8a6); }
[data-rank="A"] .result-score { color: rgba(153,246,228,0.7); }
[data-rank="A"] .result-headline { color: #ccfbf1; }
[data-rank="A"] .result-description { color: rgba(255,255,255,0.75); }
[data-rank="A"] .result-character { border-color: rgba(94,234,212,0.35); box-shadow: 0 0 24px rgba(20,184,166,0.2); }
[data-rank="A"] .section-label,
[data-rank="A"] .chart-section h3,
[data-rank="A"] .next-step-card h3 { color: rgba(153,246,228,0.7); }
[data-rank="A"] .type-name { color: #ccfbf1; }
[data-rank="A"] .type-tagline,
[data-rank="A"] .type-description,
[data-rank="A"] .next-step-card p { color: rgba(255,255,255,0.72); }

/* ===========================================
   B/C/D は「警告ポスター／診断書」風のクリニカル設計
   ・明るい白〜灰背景で安っぽさと事務的さを残す
   ・上部に工事現場の警告ストライプ
   ・等幅フォントで「診断結果」のドキュメント感
   ・高級感を出さない（dark glow禁止）
   =========================================== */

/* --- B: 少し危険（くすんだマスタード × オリーブ・空気が淀む） --- */
body[data-rank="B"] {
  background: #14140a;
  color: rgba(255,255,255,0.88);
  --glass-bg: rgba(22,22,12,0.7);
  --glass-bg-soft: rgba(22,22,12,0.6);
  --glass-border: rgba(132,127,68,0.28);
  --glass-border-soft: rgba(132,127,68,0.16);
  --glass-shadow: 0 0 20px rgba(101,98,55,0.06), 0 8px 24px rgba(0,0,0,0.45);
  --glass-blur: 16px;
  --glass-saturate: 85%;
  --mesh-gradient:
    radial-gradient(ellipse 65% 45% at 18% 22%, rgba(101,98,55,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 85% 25%, rgba(87,83,46,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 75% 65% at 50% 95%, rgba(64,60,32,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(132,127,68,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 70%, rgba(54,50,26,0.45) 0%, transparent 60%);
  --rank-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rank-overlay-opacity: 0.12;
}

[data-rank="B"] .result-tag { color: rgba(180,167,98,0.6); letter-spacing: 3px; }
[data-rank="B"] .rank-letter {
  color: #b4a762;
  text-shadow: none;
}
[data-rank="B"] .result-rank-title { color: rgba(255,255,255,0.65); }
[data-rank="B"] .result-type-code { color: #c9bc78; border-color: rgba(132,127,68,0.35); background: rgba(101,98,55,0.08); }
[data-rank="B"] .result-type-badge { background: #6b6334; }
[data-rank="B"] .result-score { color: rgba(180,167,98,0.55); }
[data-rank="B"] .result-headline { color: #d4c98a; }
[data-rank="B"] .result-description { color: rgba(255,255,255,0.62); }
[data-rank="B"] .result-character { border-color: rgba(132,127,68,0.25); box-shadow: none; }
[data-rank="B"] .section-label,
[data-rank="B"] .chart-section h3,
[data-rank="B"] .next-step-card h3 { color: rgba(180,167,98,0.55); }
[data-rank="B"] .type-name { color: #d4c98a; }
[data-rank="B"] .type-tagline,
[data-rank="B"] .type-description,
[data-rank="B"] .next-step-card p { color: rgba(255,255,255,0.6); }

/* --- C: 危機が見え始める（焦げ橙 × スモーク赤・赤が侵食・ノイズ追加） --- */
body[data-rank="C"] {
  background: #1a0a04;
  color: rgba(255,255,255,0.9);
  --glass-bg: rgba(26,10,4,0.72);
  --glass-bg-soft: rgba(26,10,4,0.62);
  --glass-border: rgba(194,65,12,0.4);
  --glass-border-soft: rgba(194,65,12,0.22);
  --glass-shadow: 0 0 40px rgba(153,27,27,0.12), 0 8px 28px rgba(0,0,0,0.5);
  --glass-blur: 14px;
  --glass-saturate: 100%;
  --mesh-gradient:
    radial-gradient(ellipse 65% 45% at 18% 22%, rgba(194,65,12,0.5) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 25%, rgba(153,27,27,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 50% 95%, rgba(127,29,29,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(180,83,9,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 70%, rgba(124,45,18,0.5) 0%, transparent 60%);
  --rank-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rank-overlay-opacity: 0.22;
}

[data-rank="C"] .result-tag { color: rgba(251,146,60,0.7); letter-spacing: 3px; }
[data-rank="C"] .rank-letter {
  color: #fb923c;
  text-shadow: 0 0 28px rgba(194,65,12,0.5);
}
[data-rank="C"] .result-rank-title { color: rgba(255,255,255,0.7); }
[data-rank="C"] .result-type-code { color: #fdba74; border-color: rgba(194,65,12,0.5); background: rgba(194,65,12,0.1); }
[data-rank="C"] .result-type-badge { background: linear-gradient(90deg, #9a3412, #c2410c); }
[data-rank="C"] .result-score { color: rgba(253,186,116,0.65); }
[data-rank="C"] .result-headline { color: #fed7aa; }
[data-rank="C"] .result-description { color: rgba(255,255,255,0.68); }
[data-rank="C"] .result-character { border-color: rgba(194,65,12,0.4); box-shadow: 0 0 22px rgba(153,27,27,0.18); }
[data-rank="C"] .section-label,
[data-rank="C"] .chart-section h3,
[data-rank="C"] .next-step-card h3 { color: rgba(251,146,60,0.65); }
[data-rank="C"] .type-name { color: #fed7aa; }
[data-rank="C"] .type-tagline,
[data-rank="C"] .type-description,
[data-rank="C"] .next-step-card p { color: rgba(255,255,255,0.68); }

/* --- D: 崩壊寸前（紫黒 × ダークマゼンタ・透明感ほぼ消失・重い暗さ） --- */
body[data-rank="D"] {
  background: #0a0410;
  color: rgba(255,255,255,0.88);
  --glass-bg: rgba(15,5,20,0.88);
  --glass-bg-soft: rgba(15,5,20,0.8);
  --glass-border: rgba(131,24,67,0.5);
  --glass-border-soft: rgba(131,24,67,0.28);
  --glass-shadow: 0 0 50px rgba(76,29,149,0.18), 0 12px 36px rgba(0,0,0,0.6);
  --glass-blur: 8px;
  --glass-saturate: 90%;
  --mesh-gradient:
    radial-gradient(ellipse 60% 45% at 18% 22%, rgba(76,29,149,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 85% 22%, rgba(131,24,67,0.5) 0%, transparent 55%),
    radial-gradient(ellipse 80% 75% at 50% 100%, rgba(0,0,0,0.85) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(86,18,90,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 80% 65% at 0% 70%, rgba(45,8,55,0.6) 0%, transparent 60%);
  --rank-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rank-overlay-opacity: 0.35;
}

[data-rank="D"] .result-tag { color: rgba(216,180,254,0.65); letter-spacing: 3px; }
[data-rank="D"] .rank-letter {
  color: #c084fc;
  text-shadow: 0 0 35px rgba(168,85,247,0.7), 0 0 70px rgba(131,24,67,0.4);
}
[data-rank="D"] .result-rank-title { color: rgba(255,255,255,0.7); }
[data-rank="D"] .result-type-code { color: #d8b4fe; border-color: rgba(168,85,247,0.5); background: rgba(76,29,149,0.18); }
[data-rank="D"] .result-type-badge { background: linear-gradient(90deg, #6b21a8, #831843); }
[data-rank="D"] .result-score { color: rgba(216,180,254,0.55); }
[data-rank="D"] .result-headline { color: #e9d5ff; }
[data-rank="D"] .result-description { color: rgba(255,255,255,0.62); }
[data-rank="D"] .result-character { border-color: rgba(168,85,247,0.4); box-shadow: 0 0 25px rgba(76,29,149,0.25); }
[data-rank="D"] .section-label,
[data-rank="D"] .chart-section h3,
[data-rank="D"] .next-step-card h3 { color: rgba(216,180,254,0.6); }
[data-rank="D"] .type-name { color: #e9d5ff; }
[data-rank="D"] .type-tagline,
[data-rank="D"] .type-description,
[data-rank="D"] .next-step-card p { color: rgba(255,255,255,0.62); }

/* --- E: 災害級・緊急赤色灯（変更不可・元のデザイン） --- */
body[data-rank="E"] {
  background: #050000;
  color: rgba(255,255,255,0.9);
  --aurora-fade: rgba(5, 0, 0, 0.7);
  --aurora-speed: 15s;
}

body[data-rank="E"]::before {
  inset: -10%;
  filter: blur(50px);
  opacity: 0.85;
  background-size: 200%, 150%;
  background-position: 50% 50%, 50% 50%;
  background-image:
    repeating-linear-gradient(100deg, transparent 0%, transparent 5%, rgba(255,255,255,0.08) 8%, transparent 11%, transparent 16%),
    repeating-linear-gradient(100deg, #ef4444 5%, #000000 12%, #dc2626 18%, #7f1d1d 24%, #ff0000 30%);
}

[data-rank="E"] .result-hero {
  background: linear-gradient(135deg, #1a0000 0%, #220000 60%, #1a0000 100%);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 60px rgba(239,68,68,0.2), 0 8px 40px rgba(0,0,0,0.6);
}
[data-rank="E"] .result-tag { color: rgba(239,68,68,0.7); }
[data-rank="E"] .rank-letter {
  color: #ef4444;
  animation: pulse-red 2s ease-in-out infinite;
  text-shadow: 0 0 40px rgba(239,68,68,0.6);
}

@keyframes pulse-red {
  0%, 100% { text-shadow: 0 0 30px rgba(239,68,68,0.5); }
  50%       { text-shadow: 0 0 60px rgba(239,68,68,0.9), 0 0 100px rgba(239,68,68,0.4); }
}

[data-rank="E"] .result-rank-title { color: rgba(255,255,255,0.7); }
[data-rank="E"] .result-type-code { color: #ef4444; border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.08); }
[data-rank="E"] .result-type-badge { background: linear-gradient(90deg, #dc2626, #ef4444); }
[data-rank="E"] .result-score { color: rgba(239,68,68,0.65); }
[data-rank="E"] .result-headline { color: #fca5a5; }
[data-rank="E"] .result-description { color: rgba(255,255,255,0.65); }
[data-rank="E"] .result-character { border-color: rgba(239,68,68,0.4); box-shadow: 0 0 24px rgba(239,68,68,0.2); }

[data-rank="E"] .next-step-card {
  border-left-color: #ef4444;
  background: rgba(239,68,68,0.04);
}

/* =============== レスポンシブ =============== */
@media (max-width: 600px) {
  .container { padding: 36px 16px; }
  .result-rank-display { gap: 16px; }
  .result-character { width: 130px; height: 130px; }
  .result-rank-info { text-align: center; }
  .cta-grid { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: 1fr; }
  .quiz-footer .btn { padding: 12px 16px; font-size: 14px; }
  .option { padding: 14px 16px; font-size: 14px; }
  .type-section { padding: 24px 20px; }
  .pc-task-impact { padding: 18px; }
  .pc-impact-head { flex-direction: column; }
  .pc-impact-count { align-self: flex-start; }
}


/* =============== Result Rank Theme v2 =============== */
body[data-rank] {
  --rank-bg: #07101d;
  --rank-accent: #7dd3fc;
  --rank-accent-2: #f8fafc;
  --rank-warn: #f4c95d;
  --rank-text: rgba(255, 255, 255, 0.9);
  --rank-text-soft: rgba(255, 255, 255, 0.68);
  --rank-text-mute: rgba(255, 255, 255, 0.48);
  --glass-bg: rgba(9, 20, 34, 0.62);
  --glass-bg-soft: rgba(9, 20, 34, 0.48);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-border-soft: rgba(255, 255, 255, 0.14);
  --glass-blur: 22px;
  --glass-saturate: 135%;
  --glass-shadow: 0 22px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --section-shadow: 0 16px 46px rgba(0, 0, 0, 0.34);
  --bar-bg: rgba(255, 255, 255, 0.14);
  --hero-sheen: 0.55;
  --rank-overlay-opacity: 1;
  color: var(--rank-text);
}
body[data-rank]::before { background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.3)), var(--mesh-gradient); background-color: var(--rank-bg); }
body[data-rank]::after { background: var(--rank-overlay, transparent); mix-blend-mode: normal; }
body[data-rank] .container { max-width: 760px; }
body[data-rank] .result-profile-bar,
body[data-rank] .result-hero,
body[data-rank] .type-section,
body[data-rank] .chart-section,
body[data-rank] .distribution-section,
body[data-rank] .next-step-card,
body[data-rank] .cta-card { background: var(--glass-bg-soft); border: 1px solid var(--glass-border-soft); box-shadow: var(--section-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
body[data-rank] .result-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 32%), var(--glass-bg); border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
body[data-rank] .result-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 48%, transparent 100%), radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--rank-accent) 32%, transparent), transparent 30%); opacity: var(--hero-sheen); }
body[data-rank] .result-rank-display,
body[data-rank] .result-headline,
body[data-rank] .result-description,
body[data-rank] .result-tag { position: relative; z-index: 1; }
body[data-rank] .result-tag,
body[data-rank] .section-label,
body[data-rank] .chart-section h3,
body[data-rank] .distribution-section h3,
body[data-rank] .next-step-card h3 { color: var(--rank-text-mute); }
body[data-rank] .rank-letter { color: var(--rank-accent-2); letter-spacing: -0.03em; text-shadow: 0 0 22px color-mix(in srgb, var(--rank-accent) 65%, transparent), 0 0 70px color-mix(in srgb, var(--rank-accent) 34%, transparent); }
body[data-rank] .result-rank-title,
body[data-rank] .result-score,
body[data-rank] .profile-bar-label,
body[data-rank] .profile-bar-chip { color: var(--rank-text-soft); }
body[data-rank] .result-headline,
body[data-rank] .type-name { color: var(--rank-accent-2); }
body[data-rank] .result-description,
body[data-rank] .type-tagline,
body[data-rank] .type-description,
body[data-rank] .next-step-card p,
body[data-rank] .distribution-headline,
body[data-rank] .cta-card p,
body[data-rank] .share-lead,
body[data-rank] .result-footer,
body[data-rank] .disclaimer { color: var(--rank-text-soft); }
body[data-rank] .distribution-headline strong { color: var(--rank-accent-2); }
body[data-rank] .result-type-code { color: var(--rank-accent-2); background: color-mix(in srgb, var(--rank-accent) 12%, transparent); border-color: color-mix(in srgb, var(--rank-accent) 56%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
body[data-rank] .result-type-badge,
body[data-rank] .axis-char,
body[data-rank] .btn-primary { background: linear-gradient(135deg, var(--rank-accent), var(--rank-accent-2)); color: var(--rank-button-text, #07111f); }
body[data-rank] .result-character { background: rgba(255,255,255,0.08); border-color: color-mix(in srgb, var(--rank-accent) 40%, transparent); box-shadow: 0 18px 42px rgba(0,0,0,0.34), 0 0 28px color-mix(in srgb, var(--rank-accent) 24%, transparent); }
body[data-rank] .axis-bars,
body[data-rank] .type-card,
body[data-rank] .action-plan { background: rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.1); }
body[data-rank] .axis-name,
body[data-rank] .axis-pole-left,
body[data-rank] .axis-pole-right,
body[data-rank] .axis-strength,
body[data-rank] .type-card-label,
body[data-rank] .dist-rank,
body[data-rank] .dist-pct,
body[data-rank] .distribution-note { color: var(--rank-text-mute); }
body[data-rank] .axis-label,
body[data-rank] .axis-pole-left.active,
body[data-rank] .axis-pole-right.active,
body[data-rank] .action-plan-label,
body[data-rank] .chart-legend strong,
body[data-rank] .dist-col-you .dist-rank { color: var(--rank-accent-2); }
body[data-rank] .axis-bar-track { background: rgba(255,255,255,0.14); }
body[data-rank] .axis-bar-marker { background: var(--rank-accent); border-color: rgba(255,255,255,0.84); }
body[data-rank] .type-card-strength { border-left-color: var(--rank-accent); }
body[data-rank] .type-card-blindspot,
body[data-rank] .next-step-card { border-left-color: var(--rank-warn); }
body[data-rank] .type-card li,
body[data-rank] .action-plan p,
body[data-rank] .chart-legend,
body[data-rank] .cta-section h3,
body[data-rank] .cta-card h4,
body[data-rank] .share-section h3 { color: var(--rank-text); }
body[data-rank] .dist-bar { background: var(--bar-bg); }
body[data-rank] .dist-col-you .dist-bar { background: linear-gradient(180deg, var(--rank-accent-2), var(--rank-accent)); box-shadow: 0 0 18px color-mix(in srgb, var(--rank-accent) 58%, transparent); }
body[data-rank] .dist-marker { background: var(--rank-accent-2); color: var(--rank-button-text, #07111f); }
body[data-rank] .dist-marker::after { background: var(--rank-accent-2); }
body[data-rank] .btn-secondary { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--rank-text); }
body[data-rank] .btn-text { color: var(--rank-text-soft); }
body[data-rank] .result-footer { border-top-color: rgba(255,255,255,0.14); }

body[data-rank="S"] { --rank-bg: #07101d; --rank-accent: #7dd3fc; --rank-accent-2: #fff7d6; --rank-warn: #f5d77a; --rank-button-text: #06111f; --glass-bg: rgba(7,17,31,0.46); --glass-bg-soft: rgba(9,22,39,0.34); --glass-border: rgba(255,247,214,0.42); --glass-border-soft: rgba(125,211,252,0.24); --glass-blur: 34px; --glass-saturate: 175%; --glass-shadow: 0 0 0 1px rgba(255,247,214,0.16), 0 28px 92px rgba(56,189,248,0.22), 0 18px 54px rgba(0,0,0,0.42); --section-shadow: 0 18px 60px rgba(8,47,73,0.32); --hero-sheen: 0.9; --bar-bg: rgba(224,242,254,0.16); --mesh-gradient: radial-gradient(circle at 20% 10%, rgba(255,247,214,0.5), transparent 22%), radial-gradient(circle at 80% 16%, rgba(125,211,252,0.7), transparent 30%), radial-gradient(circle at 54% 78%, rgba(14,165,233,0.55), transparent 44%), radial-gradient(circle at 8% 88%, rgba(255,255,255,0.34), transparent 28%), linear-gradient(135deg, #05101f 0%, #0b2a45 42%, #0b1424 100%); --rank-overlay: linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,0.08) 48%, transparent 54%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 38%); }
body[data-rank="S"] .rank-letter { color: #fff7d6; text-shadow: 0 0 24px rgba(255,247,214,0.82), 0 0 78px rgba(125,211,252,0.62); }
body[data-rank="A"] { --rank-bg: #041a1f; --rank-accent: #2dd4bf; --rank-accent-2: #ccfbf1; --rank-warn: #a7f3d0; --rank-button-text: #041412; --glass-bg: rgba(3,31,38,0.58); --glass-bg-soft: rgba(5,37,42,0.46); --glass-border: rgba(94,234,212,0.34); --glass-border-soft: rgba(45,212,191,0.2); --glass-blur: 28px; --glass-saturate: 155%; --section-shadow: 0 18px 56px rgba(0,95,100,0.22); --mesh-gradient: radial-gradient(circle at 15% 18%, rgba(94,234,212,0.44), transparent 30%), radial-gradient(circle at 88% 22%, rgba(14,116,144,0.58), transparent 36%), radial-gradient(circle at 52% 90%, rgba(20,184,166,0.36), transparent 48%), linear-gradient(155deg, #021416 0%, #06343c 44%, #021b24 100%); --rank-overlay: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 34%), repeating-linear-gradient(92deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px); }
body[data-rank="B"] { --rank-bg: #1b1308; --rank-accent: #f4c95d; --rank-accent-2: #fde68a; --rank-warn: #fb923c; --rank-button-text: #1a1004; --rank-text: rgba(255,248,224,0.88); --rank-text-soft: rgba(255,241,196,0.66); --rank-text-mute: rgba(255,224,148,0.46); --glass-bg: rgba(30,19,8,0.72); --glass-bg-soft: rgba(31,23,12,0.6); --glass-border: rgba(244,201,93,0.32); --glass-border-soft: rgba(244,201,93,0.17); --glass-blur: 18px; --glass-saturate: 102%; --section-shadow: 0 18px 48px rgba(0,0,0,0.42); --hero-sheen: 0.38; --bar-bg: rgba(244,201,93,0.13); --mesh-gradient: radial-gradient(ellipse at 22% 20%, rgba(244,201,93,0.42), transparent 30%), radial-gradient(ellipse at 76% 28%, rgba(217,119,6,0.35), transparent 32%), linear-gradient(180deg, rgba(13,22,36,0.52) 0%, rgba(27,19,8,0.08) 38%, rgba(45,24,9,0.55) 100%), linear-gradient(145deg, #120f09 0%, #35210d 52%, #17100a 100%); --rank-overlay: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px), radial-gradient(circle at 50% 100%, rgba(245,158,11,0.16), transparent 42%); }
body[data-rank="B"] .rank-letter { color: #f4c95d; text-shadow: 0 0 22px rgba(244,201,93,0.22); }
body[data-rank="C"] { --rank-bg: #170806; --rank-accent: #fb923c; --rank-accent-2: #fed7aa; --rank-warn: #ef4444; --rank-button-text: #1b0905; --rank-text: rgba(255,238,218,0.9); --rank-text-soft: rgba(255,214,180,0.66); --rank-text-mute: rgba(255,184,117,0.48); --glass-bg: rgba(29,9,5,0.78); --glass-bg-soft: rgba(31,13,8,0.66); --glass-border: rgba(251,146,60,0.38); --glass-border-soft: rgba(239,68,68,0.22); --glass-blur: 13px; --glass-saturate: 115%; --section-shadow: 0 18px 52px rgba(0,0,0,0.5); --hero-sheen: 0.3; --bar-bg: rgba(251,146,60,0.16); --mesh-gradient: radial-gradient(circle at 15% 18%, rgba(251,146,60,0.5), transparent 28%), radial-gradient(circle at 86% 20%, rgba(127,29,29,0.58), transparent 34%), radial-gradient(circle at 48% 86%, rgba(68,64,60,0.46), transparent 48%), linear-gradient(150deg, #100605 0%, #3a1008 48%, #090605 100%); --rank-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.38 0 0 0 0 0.18 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(115deg, transparent 0 30%, rgba(239,68,68,0.14) 30% 34%, transparent 34% 100%); }
body[data-rank="D"] { --rank-bg: #07080c; --rank-accent: #9ca3af; --rank-accent-2: #e5e7eb; --rank-warn: #a855f7; --rank-button-text: #08090d; --rank-text: rgba(238,242,255,0.86); --rank-text-soft: rgba(209,213,219,0.62); --rank-text-mute: rgba(156,163,175,0.5); --glass-bg: rgba(7,8,12,0.9); --glass-bg-soft: rgba(10,12,18,0.82); --glass-border: rgba(156,163,175,0.28); --glass-border-soft: rgba(168,85,247,0.2); --glass-blur: 7px; --glass-saturate: 82%; --section-shadow: 0 20px 58px rgba(0,0,0,0.64); --hero-sheen: 0.18; --bar-bg: rgba(156,163,175,0.14); --mesh-gradient: radial-gradient(circle at 20% 16%, rgba(75,85,99,0.42), transparent 29%), radial-gradient(circle at 86% 20%, rgba(88,28,135,0.44), transparent 31%), linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 16px), linear-gradient(165deg, #050608 0%, #151821 44%, #07080c 100%); --rank-overlay: repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 13px), linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.58)); }
body[data-rank="D"] .rank-letter { color: #e5e7eb; text-shadow: 0 0 18px rgba(168,85,247,0.36), 0 0 52px rgba(0,0,0,0.8); }
body[data-rank="E"] { --rank-bg: #030000; --rank-accent: #ef4444; --rank-accent-2: #fecaca; --rank-warn: #ffffff; --rank-button-text: #220000; --rank-text: rgba(255,235,235,0.9); --rank-text-soft: rgba(255,205,205,0.66); --rank-text-mute: rgba(248,113,113,0.58); --glass-bg: rgba(28,0,0,0.88); --glass-bg-soft: rgba(23,0,0,0.76); --glass-border: rgba(239,68,68,0.58); --glass-border-soft: rgba(239,68,68,0.34); --glass-blur: 9px; --glass-saturate: 130%; --glass-shadow: 0 0 0 1px rgba(239,68,68,0.3), 0 0 72px rgba(239,68,68,0.24), 0 22px 64px rgba(0,0,0,0.62); --section-shadow: 0 18px 54px rgba(0,0,0,0.6); --hero-sheen: 0.22; --bar-bg: rgba(239,68,68,0.18); --mesh-gradient: radial-gradient(circle at 18% 16%, rgba(239,68,68,0.72), transparent 28%), radial-gradient(circle at 82% 24%, rgba(127,29,29,0.74), transparent 34%), radial-gradient(circle at 50% 90%, rgba(255,255,255,0.12), transparent 30%), linear-gradient(135deg, #030000 0%, #270202 48%, #050000 100%); --rank-overlay: repeating-linear-gradient(105deg, transparent 0 18px, rgba(239,68,68,0.16) 18px 24px, transparent 24px 42px), linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55)); }
body[data-rank="E"]::before { inset: 0; filter: none; opacity: 1; background-size: auto; background-position: center; }
body[data-rank="E"] .rank-letter { animation: none; color: #fecaca; text-shadow: 0 0 22px rgba(239,68,68,0.8), 0 0 76px rgba(220,38,38,0.5); }
@media (max-width: 600px) { body[data-rank] .result-hero, body[data-rank] .type-section, body[data-rank] .chart-section, body[data-rank] .distribution-section, body[data-rank] .next-step-card { padding-left: 18px; padding-right: 18px; } body[data-rank] .distribution-bars { gap: 2px; height: 188px; } body[data-rank] .dist-marker { font-size: 9px; padding: 2px 5px; } }
/* =============== Result Rank Theme v2 refinements =============== */
body[data-rank] {
  --rank-text: rgba(255, 255, 255, 0.96);
  --rank-text-soft: rgba(255, 255, 255, 0.82);
  --rank-text-mute: rgba(255, 255, 255, 0.64);
}
body[data-rank] .result-hero,
body[data-rank] .type-section,
body[data-rank] .chart-section,
body[data-rank] .distribution-section,
body[data-rank] .next-step-card,
body[data-rank] .cta-card {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body[data-rank] .profile-bar-chip {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body[data-rank] .result-type-badge {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  vertical-align: top;
}
body[data-rank] .result-type-code {
  max-width: 100%;
  overflow-wrap: anywhere;
}
body[data-rank="C"] { --rank-text-soft: rgba(255, 226, 204, 0.84); --rank-text-mute: rgba(255, 198, 148, 0.66); }
body[data-rank="C"]::after { opacity: 0.62; }
body[data-rank="D"] { --rank-text-soft: rgba(229, 231, 235, 0.82); --rank-text-mute: rgba(209, 213, 219, 0.64); }
body[data-rank="E"] { --rank-text-soft: rgba(255, 218, 218, 0.84); --rank-text-mute: rgba(252, 165, 165, 0.72); --rank-overlay: repeating-linear-gradient(105deg, transparent 0 28px, rgba(239,68,68,0.1) 28px 34px, transparent 34px 58px), linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.38)); }
body[data-rank="E"]::after { opacity: 0.72; }
@media (max-width: 600px) {
  body[data-rank] .result-rank-display {
    flex-direction: column;
    gap: 18px;
  }
  body[data-rank] .result-character {
    margin-left: auto;
    margin-right: auto;
  }
  body[data-rank] .result-rank-info {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  body[data-rank] .result-type-code {
    letter-spacing: 0.22em;
  }
  body[data-rank] .rank-letter {
    font-size: clamp(68px, 24vw, 96px);
  }
}

/* Final override: keep the shipped design in a restrained report style. */
body[data-rank="S"] { --rank-accent: #9a7530 !important; --rank-accent-2: #6f551f !important; }
body[data-rank="A"] { --rank-accent: #2f6f5e !important; --rank-accent-2: #254f45 !important; }
body[data-rank="B"] {
  --rank-accent: #b7791f !important;
  --rank-accent-2: #7c4a12 !important;
  --mesh-gradient:
    radial-gradient(ellipse 60% 45% at 18% 18%, rgba(180, 83, 9, 0.44) 0%, transparent 56%),
    radial-gradient(ellipse 58% 42% at 84% 22%, rgba(71, 85, 105, 0.54) 0%, transparent 58%),
    radial-gradient(ellipse 80% 62% at 50% 100%, rgba(120, 53, 15, 0.44) 0%, transparent 62%),
    linear-gradient(155deg, #0f1115 0%, #252018 45%, #121821 100%) !important;
  --rank-overlay:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(180, 83, 9, 0.12), transparent 40%, rgba(71, 85, 105, 0.16)) !important;
}

body[data-rank="C"] {
  --rank-accent: #2f7d6b !important;
  --rank-accent-2: #1f5d51 !important;
  --mesh-gradient:
    radial-gradient(ellipse 62% 46% at 20% 18%, rgba(45, 120, 100, 0.46) 0%, transparent 56%),
    radial-gradient(ellipse 54% 40% at 82% 24%, rgba(148, 163, 184, 0.24) 0%, transparent 60%),
    radial-gradient(ellipse 78% 64% at 48% 100%, rgba(22, 101, 85, 0.46) 0%, transparent 62%),
    linear-gradient(155deg, #071310 0%, #173d35 48%, #0d201d 100%) !important;
  --rank-overlay:
    linear-gradient(135deg, rgba(236, 253, 245, 0.06), transparent 34%, rgba(20, 184, 166, 0.08)),
    radial-gradient(circle at 50% 85%, rgba(20, 184, 166, 0.12), transparent 46%) !important;
}
body[data-rank="D"] { --rank-accent: #8b5d54 !important; --rank-accent-2: #673f39 !important; }
body[data-rank="E"] { --rank-accent: #8c3d3d !important; --rank-accent-2: #642d2d !important; }

body[data-rank],
body[data-rank] .screen {
  background: #060607 !important;
}

body[data-rank]::before,
body[data-rank]::after,
body[data-rank] .result-hero::before,
body[data-rank] .result-hero::after {
  display: none !important;
  content: none !important;
}

body[data-rank]::before,
body[data-rank]::after {
  display: block !important;
  content: "" !important;
}

body[data-rank] .result-hero,
body[data-rank] .result-profile-bar,
body[data-rank] .result-visual-card,
body[data-rank] .pc-task-impact,
body[data-rank] .pc-task-detail,
body[data-rank] .type-section,
body[data-rank] .chart-section,
body[data-rank] .distribution-section,
body[data-rank] .next-step-card,
body[data-rank] .cta-card {
  background: #fffdf8 !important;
  border: 1px solid #ddd7ca !important;
  box-shadow: 0 8px 26px rgba(23, 33, 43, 0.07) !important;
  color: #17212b !important;
  backdrop-filter: none !important;
}

body[data-rank] .pc-task-impact,
body[data-rank] .pc-task-detail {
  background: #f8f4ea !important;
}

body[data-rank] .rank-letter,
body[data-rank="S"] .rank-letter,
body[data-rank="A"] .rank-letter,
body[data-rank="B"] .rank-letter,
body[data-rank="C"] .rank-letter,
body[data-rank="D"] .rank-letter,
body[data-rank="E"] .rank-letter {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--rank-accent) !important;
  color: var(--rank-accent) !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

body[data-rank] .result-hero *,
body[data-rank] .result-profile-bar *,
body[data-rank] .result-visual-card *,
body[data-rank] .pc-task-impact *,
body[data-rank] .pc-task-detail *,
body[data-rank] .type-section *,
body[data-rank] .chart-section *,
body[data-rank] .distribution-section *,
body[data-rank] .next-step-card *,
body[data-rank] .cta-card * {
  text-shadow: none !important;
  filter: none !important;
}

body[data-rank] .result-tag,
body[data-rank] .section-label,
body[data-rank] .profile-bar-label,
body[data-rank] .pc-impact-label {
  color: #6e7884 !important;
}

body[data-rank] .result-headline,
body[data-rank] .result-rank-title,
body[data-rank] .type-name,
body[data-rank] .chart-section h3,
body[data-rank] .distribution-section h3,
body[data-rank] .next-step-card h3,
body[data-rank] .pc-impact-head h3,
body[data-rank] .pc-impact-summary,
body[data-rank] .pc-impact-consult,
body[data-rank] .pc-impact-bucket-title,
body[data-rank] .pc-impact-item strong,
body[data-rank] .pc-detail-visual-card strong {
  color: #18324a !important;
}

body[data-rank] .result-description,
body[data-rank] .result-score,
body[data-rank] .type-description,
body[data-rank] .distribution-headline,
body[data-rank] .next-step-card p,
body[data-rank] .result-visual-card > span,
body[data-rank] .pc-impact-item span,
body[data-rank] .pc-detail-visual-card span {
  color: #344252 !important;
}

body[data-rank] .result-rank-title,
body[data-rank] .profile-bar-chip,
body[data-rank] .pc-impact-count,
body[data-rank] .pc-impact-bucket-title,
body[data-rank] .pc-impact-tag,
body[data-rank] .pc-detail-visual-card b {
  background: #ede5d4 !important;
  border: 1px solid #d8ceb9 !important;
  color: #18324a !important;
}

body[data-rank] .pc-impact-summary,
body[data-rank] .pc-impact-item,
body[data-rank] .pc-impact-other,
body[data-rank] .pc-detail-visual-card,
body[data-rank] .pc-impact-mini-map span {
  background: #fffdf8 !important;
  border-color: #ded6c6 !important;
  color: #344252 !important;
}

body[data-rank] .mini-illust,
body[data-rank] .pc-detail-icon {
  background: #f1ece1 !important;
}

body[data-rank] .mini-illust span,
body[data-rank] .pc-detail-icon span {
  background: var(--rank-accent) !important;
}

body[data-rank] .pc-detail-icon-review span:nth-child(2) {
  background: transparent !important;
  border-color: var(--rank-accent) !important;
}

body[data-rank] .result-character {
  border: 1px solid #d8d0c0 !important;
  background: #f5f1e8 !important;
  box-shadow: none !important;
}

body[data-rank] .axis-bar-fill,
body[data-rank] .dist-col-you .dist-bar,
body[data-rank] .axis-bar-marker,
body[data-rank] .dist-marker,
body[data-rank] .dist-marker::after {
  background: var(--rank-accent) !important;
  border-color: var(--rank-accent) !important;
  box-shadow: none !important;
}

/* B/C-only redesign. Keep this after the shared final overrides. */
body[data-rank="B"] {
  --rank-accent: #b7791f !important;
  --rank-accent-2: #7c4a12 !important;
  --mesh-gradient:
    radial-gradient(ellipse 60% 45% at 18% 18%, rgba(180, 83, 9, 0.44) 0%, transparent 56%),
    radial-gradient(ellipse 58% 42% at 84% 22%, rgba(71, 85, 105, 0.54) 0%, transparent 58%),
    radial-gradient(ellipse 80% 62% at 50% 100%, rgba(120, 53, 15, 0.44) 0%, transparent 62%),
    linear-gradient(155deg, #0f1115 0%, #252018 45%, #121821 100%) !important;
  --rank-overlay:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(180, 83, 9, 0.12), transparent 40%, rgba(71, 85, 105, 0.16)) !important;
}

body[data-rank="C"] {
  --rank-accent: #2f7d6b !important;
  --rank-accent-2: #1f5d51 !important;
  --mesh-gradient:
    radial-gradient(ellipse 62% 46% at 20% 18%, rgba(45, 120, 100, 0.46) 0%, transparent 56%),
    radial-gradient(ellipse 54% 40% at 82% 24%, rgba(148, 163, 184, 0.24) 0%, transparent 60%),
    radial-gradient(ellipse 78% 64% at 48% 100%, rgba(22, 101, 85, 0.46) 0%, transparent 62%),
    linear-gradient(155deg, #071310 0%, #173d35 48%, #0d201d 100%) !important;
  --rank-overlay:
    linear-gradient(135deg, rgba(236, 253, 245, 0.06), transparent 34%, rgba(20, 184, 166, 0.08)),
    radial-gradient(circle at 50% 85%, rgba(20, 184, 166, 0.12), transparent 46%) !important;
}

/* ============================================================
   Professional report theme
   AI-like glow/gradient effects are intentionally restrained here.
   ============================================================ */
:root {
  --color-bg: #f7f5ef;
  --color-surface: #fffdf8;
  --color-navy: #18324a;
  --color-navy-light: #244661;
  --color-accent: #8a6a35;
  --color-gold: #9a7530;
  --color-text: #17212b;
  --color-text-soft: #344252;
  --color-text-mute: #6e7884;
  --color-border: #ddd7ca;
  --color-border-light: #ece7dc;
  --shadow-sm: 0 1px 2px rgba(23, 33, 43, 0.05);
  --shadow-card: 0 8px 26px rgba(23, 33, 43, 0.07);
  --shadow-md: 0 14px 34px rgba(23, 33, 43, 0.1);
  --radius: 10px;
  --radius-sm: 8px;
}

body {
  background:
    linear-gradient(180deg, #faf8f1 0%, #f7f5ef 52%, #f2eee4 100%) !important;
  color: var(--color-text) !important;
}

body[data-rank]::before,
body[data-rank]::after,
.result-hero::before,
.result-hero::after {
  display: none !important;
  content: none !important;
}

body[data-rank] .container,
body[data-rank] #preview-bar {
  position: relative;
  z-index: 1;
}

body[data-rank] .result-hero *,
body[data-rank] .result-profile-bar *,
body[data-rank] .pc-task-impact *,
body[data-rank] .pc-task-detail *,
body[data-rank] .type-section *,
body[data-rank] .chart-section *,
body[data-rank] .distribution-section *,
body[data-rank] .next-step-card * {
  text-shadow: none !important;
  filter: none !important;
}

body[data-rank="S"] { --rank-accent: #9a7530 !important; --rank-accent-2: #6f551f !important; }
body[data-rank="A"] { --rank-accent: #2f6f5e !important; --rank-accent-2: #254f45 !important; }
body[data-rank="B"] { --rank-accent: #3f6d87 !important; --rank-accent-2: #2f5368 !important; }
body[data-rank="C"] { --rank-accent: #8a6f3d !important; --rank-accent-2: #604d2c !important; }
body[data-rank="D"] { --rank-accent: #8b5d54 !important; --rank-accent-2: #673f39 !important; }
body[data-rank="E"] { --rank-accent: #8c3d3d !important; --rank-accent-2: #642d2d !important; }

.brand {
  color: #687484;
}

.hero-tag,
.part-tag,
.profile-bar-chip,
.rank-chip,
.pc-impact-count,
.pc-impact-bucket-title,
.pc-impact-tag {
  box-shadow: none !important;
}

.hero-tag {
  background: #f1eee5;
  border-color: #d8d0c0;
  color: var(--color-navy);
}

.hero-main {
  color: var(--color-navy);
  letter-spacing: 0;
}

.rank-chip {
  background: #fffdf8;
  border-color: #d7d1c5;
  color: #526173;
}

.rank-chip:hover {
  transform: none;
  border-color: var(--color-navy);
}

.rank-S,
.rank-A,
.rank-B,
.rank-C,
.rank-D,
.rank-E {
  color: #526173;
}

.rank-S { border-color: rgba(154, 117, 48, 0.42); color: #8a6a35; }

.type-preview,
.result-profile-bar,
.type-section,
.chart-section,
.distribution-section,
.next-step-card,
.cta-card,
.result-visual-card,
.pc-task-impact,
.pc-task-detail {
  background: rgba(255, 253, 248, 0.96) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--color-text) !important;
  backdrop-filter: none !important;
}

.result-hero,
body[data-rank] .result-hero {
  background: #fffdf8 !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--color-text) !important;
  backdrop-filter: none !important;
}

.result-tag,
body[data-rank] .result-tag {
  color: var(--color-text-mute) !important;
  letter-spacing: 0.18em !important;
  opacity: 1 !important;
}

.result-character,
body[data-rank] .result-character {
  border: 1px solid #d8d0c0 !important;
  background: #f5f1e8 !important;
  box-shadow: none !important;
  filter: none !important;
}

.rank-letter,
body[data-rank] .rank-letter,
body[data-rank="S"] .rank-letter,
body[data-rank="A"] .rank-letter,
body[data-rank="B"] .rank-letter,
body[data-rank="C"] .rank-letter,
body[data-rank="D"] .rank-letter,
body[data-rank="E"] .rank-letter {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--rank-accent, var(--color-navy)) !important;
  color: var(--rank-accent, var(--color-navy)) !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.result-rank-title,
body[data-rank] .result-rank-title {
  color: var(--color-text-soft) !important;
  background: #f4efe4 !important;
  border: 1px solid #ded6c6 !important;
  border-radius: 999px;
  padding: 6px 12px;
  width: fit-content;
  margin: 10px auto 0;
}

.result-score,
body[data-rank] .result-score,
.result-description,
body[data-rank] .result-description,
.type-description,
body[data-rank] .type-description,
.distribution-headline,
body[data-rank] .distribution-headline,
.next-step-card p,
body[data-rank] .next-step-card p {
  color: var(--color-text-soft) !important;
}

.result-headline,
body[data-rank] .result-headline,
.type-name,
body[data-rank] .type-name,
.chart-section h3,
body[data-rank] .chart-section h3,
.distribution-section h3,
body[data-rank] .distribution-section h3,
.next-step-card h3,
body[data-rank] .next-step-card h3,
.cta-section h3 {
  color: var(--color-navy) !important;
  text-shadow: none !important;
}

.result-visual-strip {
  margin-top: -8px;
}

.result-visual-card,
body[data-rank] .result-visual-card {
  background: #fffdf8 !important;
}

.result-visual-card strong,
body[data-rank] .result-visual-card strong {
  color: var(--color-navy) !important;
}

.result-visual-card > span,
body[data-rank] .result-visual-card > span {
  color: var(--color-text-mute) !important;
}

.mini-illust,
body[data-rank] .mini-illust,
.pc-detail-icon {
  background: #f1ece1 !important;
}

.mini-illust span,
body[data-rank] .mini-illust span,
.pc-detail-icon span {
  background: var(--rank-accent, var(--color-accent)) !important;
}

.pc-detail-icon-review span:nth-child(2) {
  background: transparent !important;
  border-color: var(--rank-accent, var(--color-accent)) !important;
}

.pc-detail-icon-data span:nth-child(1) {
  box-shadow:
    0 8px 0 var(--rank-accent, var(--color-accent)),
    0 16px 0 var(--rank-accent, var(--color-accent)) !important;
}

.pc-detail-icon-tool span:nth-child(2) {
  box-shadow: -3px 9px 0 color-mix(in srgb, var(--rank-accent, var(--color-accent)) 68%, transparent) !important;
}

.pc-task-impact,
.pc-task-detail {
  background: #f8f4ea !important;
}

.pc-impact-label,
.pc-impact-head h3,
.pc-impact-summary,
.pc-impact-consult,
.pc-impact-bucket-title,
.pc-impact-item strong,
.pc-impact-other strong,
.pc-detail-visual-card strong {
  color: var(--color-navy) !important;
}

.pc-impact-summary,
.pc-impact-item,
.pc-impact-other,
.pc-detail-visual-card {
  background: #fffdf8 !important;
  border-color: #ded6c6 !important;
  color: var(--color-text-soft) !important;
}

.pc-impact-item span,
.pc-impact-other span,
.pc-impact-more,
.pc-detail-visual-card span {
  color: var(--color-text-soft) !important;
}

.pc-impact-count,
.pc-impact-bucket-title,
.pc-impact-tag,
.pc-detail-visual-card b {
  background: #ede5d4 !important;
  border-color: #d8ceb9 !important;
  color: var(--color-navy) !important;
}

.pc-impact-mini-map::before {
  background: #d8ceb9;
}

.pc-impact-mini-map span {
  background: #fffdf8 !important;
  border-color: #d8ceb9 !important;
  color: var(--color-navy) !important;
}

.pc-impact-detail-btn,
.btn-primary,
.cta-card .btn-primary {
  background: var(--color-navy) !important;
  color: #fffdf8 !important;
  box-shadow: 0 8px 20px rgba(24, 50, 74, 0.16) !important;
}

.btn-secondary,
.cta-card .btn-secondary {
  background: #fffdf8 !important;
  border-color: #d8d0c0 !important;
  color: var(--color-navy) !important;
  box-shadow: none !important;
}

.axis-bars,
body[data-rank] .axis-bars {
  background: #f8f4ea !important;
  border-color: #ded6c6 !important;
}

.axis-bar-fill,
body[data-rank] .axis-bar-fill,
.dist-col-you .dist-bar,
body[data-rank] .dist-col-you .dist-bar {
  background: var(--rank-accent, var(--color-accent)) !important;
  box-shadow: none !important;
}

.axis-bar-marker,
body[data-rank] .axis-bar-marker {
  border-color: var(--rank-accent, var(--color-accent)) !important;
  box-shadow: none !important;
}

.dist-bar {
  background: #d8d0c0 !important;
}

.dist-marker,
body[data-rank] .dist-marker,
.dist-marker::after,
body[data-rank] .dist-marker::after {
  background: var(--rank-accent, var(--color-accent)) !important;
  color: #fffdf8 !important;
}

.btn-share {
  border: 1px solid #d8d0c0 !important;
  box-shadow: none !important;
}

.btn-x,
.btn-line,
.btn-fb,
.btn-instagram,
.btn-copy {
  background: #fffdf8 !important;
  color: var(--color-navy) !important;
}

#preview-bar {
  background: rgba(255, 253, 248, 0.96) !important;
  border-color: #d8d0c0 !important;
  box-shadow: var(--shadow-sm) !important;
}
/* Mobile axis-bar containment */
@media (max-width: 600px) {
  body[data-rank] .axis-bars {
    padding: 14px;
    overflow: hidden;
  }
  body[data-rank] .axis-row-head {
    gap: 10px;
    align-items: flex-start;
  }
  body[data-rank] .axis-result {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 62%;
  }
  body[data-rank] .axis-label {
    max-width: 92px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    text-align: right;
  }
  body[data-rank] .axis-bar {
    grid-template-columns: minmax(34px, 48px) minmax(0, 1fr) minmax(34px, 48px);
    gap: 6px;
  }
  body[data-rank] .axis-pole-left,
  body[data-rank] .axis-pole-right {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.25;
  }
  body[data-rank] .axis-pole-right {
    text-align: right;
  }
  body[data-rank] .chart-legend {
    grid-template-columns: 1fr;
  }
}
/* Stronger mobile containment for axis labels */
@media (max-width: 600px) {
  body[data-rank] .axis-row-head {
    flex-direction: column;
    align-items: stretch;
  }
  body[data-rank] .axis-result {
    justify-content: flex-start;
    max-width: 100%;
  }
  body[data-rank] .axis-label {
    max-width: none;
    text-align: left;
  }
  body[data-rank] .axis-bar {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }
  body[data-rank] .axis-bar-track {
    min-width: 0;
  }
}
/* Japanese text and narrow viewport wrapping */
body[data-rank] .result-hero,
body[data-rank] .type-section,
body[data-rank] .chart-section,
body[data-rank] .distribution-section,
body[data-rank] .next-step-card,
body[data-rank] .cta-card {
  min-width: 0;
}
body[data-rank] .result-headline,
body[data-rank] .result-description,
body[data-rank] .type-name,
body[data-rank] .type-tagline,
body[data-rank] .type-description,
body[data-rank] .next-step-card p,
body[data-rank] .distribution-headline,
body[data-rank] .cta-card h4,
body[data-rank] .cta-card p {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}
@media (max-width: 600px) {
  body[data-rank] .result-headline {
    max-width: 100%;
    font-size: 21px;
    line-height: 1.55;
  }
  body[data-rank] .result-description {
    font-size: 14px;
    line-height: 1.85;
  }
  body[data-rank] .axis-bar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }
  body[data-rank] .axis-bar-marker {
    width: 12px;
    height: 12px;
  }
}
/* Final mobile headline wrapping */
@media (max-width: 600px) {
  body[data-rank] .result-headline,
  body[data-rank] .type-name {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}
/* Axis score display */
.axis-score-result {
  gap: 6px;
}
.axis-score-value {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-navy);
}
.axis-score-bar .axis-bar-track {
  overflow: hidden;
}
.axis-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: var(--color-navy);
  opacity: 0.18;
  transition: width 0.5s ease;
}
body[data-rank] .axis-score-value {
  color: var(--rank-accent-2);
  text-shadow: 0 0 16px color-mix(in srgb, var(--rank-accent) 42%, transparent);
}
body[data-rank] .axis-bar-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--rank-accent) 72%, transparent), color-mix(in srgb, var(--rank-accent-2) 78%, transparent));
  opacity: 0.46;
}
body[data-rank] .axis-score-bar .axis-pole-left,
body[data-rank] .axis-score-bar .axis-pole-right {
  font-family: var(--font-en);
  font-weight: 800;
}
@media (max-width: 600px) {
  .axis-score-value {
    font-size: 17px;
  }
  body[data-rank] .axis-score-bar {
    grid-template-columns: 24px minmax(0, 1fr) 32px;
  }
}
/* Hide four-letter type-code display */
.result-type-code {
  display: none !important;
}
/* Remove type-classification UI; keep only four-axis score section */
.result-type-badge,
.type-name,
.type-tagline,
.type-description,
.type-grid,
.action-plan {
  display: none !important;
}
.type-section .section-label {
  margin-bottom: 18px;
}
.type-section .axis-bars {
  margin-top: 0;
  margin-bottom: 0;
}
/* S-rank axis score contrast */
body[data-rank="S"] .type-section {
  background: linear-gradient(180deg, rgba(2, 16, 31, 0.76), rgba(3, 25, 45, 0.68));
  border-color: rgba(224, 242, 254, 0.42);
  box-shadow: 0 0 0 1px rgba(255, 247, 214, 0.1), 0 22px 70px rgba(2, 8, 23, 0.45);
}
body[data-rank="S"] .type-section .section-label {
  color: rgba(255, 247, 214, 0.82);
}
body[data-rank="S"] .axis-bars {
  background: rgba(1, 10, 22, 0.58);
  border-color: rgba(186, 230, 253, 0.24);
}
body[data-rank="S"] .axis-name {
  color: rgba(224, 242, 254, 0.9);
}
body[data-rank="S"] .axis-score-value {
  color: #fff7d6;
  text-shadow: 0 0 14px rgba(255, 247, 214, 0.42), 0 0 28px rgba(125, 211, 252, 0.32);
}
body[data-rank="S"] .axis-score-bar .axis-pole-left,
body[data-rank="S"] .axis-score-bar .axis-pole-right {
  color: rgba(224, 242, 254, 0.62);
}
body[data-rank="S"] .axis-bar-track {
  height: 9px;
  background: rgba(4, 12, 24, 0.88);
  border: 1px solid rgba(186, 230, 253, 0.24);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55);
}
body[data-rank="S"] .axis-bar-fill {
  background: linear-gradient(90deg, #38bdf8 0%, #bae6fd 62%, #fff7d6 100%);
  opacity: 0.9;
  box-shadow: 0 0 18px rgba(125, 211, 252, 0.42);
}
body[data-rank="S"] .axis-bar-marker {
  width: 16px;
  height: 16px;
  background: #fff7d6;
  border-color: #0f2744;
  box-shadow: 0 0 0 2px rgba(186, 230, 253, 0.68), 0 0 18px rgba(255, 247, 214, 0.7);
}
@media (max-width: 600px) {
  body[data-rank="S"] .axis-bar-track {
    height: 10px;
  }
  body[data-rank="S"] .axis-bar-marker {
    width: 15px;
    height: 15px;
  }
}
/* S-rank axis text readability */
body[data-rank="S"] .type-section {
  text-shadow: none;
}
body[data-rank="S"] .type-section .section-label {
  color: #f8fafc;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}
body[data-rank="S"] .axis-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}
body[data-rank="S"] .axis-score-value {
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82), 0 0 14px rgba(125, 211, 252, 0.42);
}
body[data-rank="S"] .axis-score-bar .axis-pole-left,
body[data-rank="S"] .axis-score-bar .axis-pole-right {
  color: #e0f2fe;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.78);
}
@media (max-width: 600px) {
  body[data-rank="S"] .axis-name {
    font-size: 14px;
  }
  body[data-rank="S"] .axis-score-value {
    font-size: 19px;
  }
}
/* B-rank: make the amber theme feel more cautionary than premium */
body[data-rank="B"] {
  --rank-bg: #141107;
  --rank-accent: #d6b64a;
  --rank-accent-2: #f2d27a;
  --rank-warn: #ef7d22;
  --rank-text: rgba(255, 242, 201, 0.86);
  --rank-text-soft: rgba(230, 210, 158, 0.68);
  --rank-text-mute: rgba(200, 174, 102, 0.58);
  --glass-bg: rgba(25, 20, 9, 0.82);
  --glass-bg-soft: rgba(22, 20, 10, 0.72);
  --glass-border: rgba(214, 182, 74, 0.28);
  --glass-border-soft: rgba(160, 133, 53, 0.22);
  --glass-blur: 12px;
  --glass-saturate: 78%;
  --section-shadow: 0 18px 50px rgba(0, 0, 0, 0.54), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  --hero-sheen: 0.18;
  --bar-bg: rgba(214, 182, 74, 0.11);
  --mesh-gradient:
    radial-gradient(ellipse at 20% 18%, rgba(173, 137, 38, 0.34), transparent 28%),
    radial-gradient(ellipse at 78% 26%, rgba(101, 84, 30, 0.36), transparent 30%),
    linear-gradient(180deg, rgba(5, 8, 11, 0.62) 0%, rgba(20, 17, 7, 0.16) 42%, rgba(41, 28, 8, 0.58) 100%),
    linear-gradient(145deg, #0d0d08 0%, #2a210b 50%, #120f08 100%);
  --rank-overlay:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(239, 125, 34, 0.055) 34px 36px, transparent 36px 70px),
    radial-gradient(circle at 50% 100%, rgba(239, 125, 34, 0.16), transparent 42%);
}
body[data-rank="B"] .result-hero,
body[data-rank="B"] .type-section,
body[data-rank="B"] .chart-section,
body[data-rank="B"] .distribution-section,
body[data-rank="B"] .next-step-card,
body[data-rank="B"] .cta-card {
  background-image: linear-gradient(180deg, rgba(255, 232, 151, 0.04), rgba(0, 0, 0, 0.1));
  border-style: solid;
  border-color: rgba(170, 138, 48, 0.32);
}
body[data-rank="B"] .result-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 0 46%, rgba(239, 125, 34, 0.11) 46% 48%, transparent 48% 100%);
  opacity: 0.9;
}
body[data-rank="B"] .rank-letter {
  color: #d6b64a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 14px rgba(214, 182, 74, 0.16);
}
body[data-rank="B"] .result-headline,
body[data-rank="B"] .type-section .section-label {
  color: #f2d27a;
}
body[data-rank="B"] .axis-bar-fill,
body[data-rank="B"] .dist-col-you .dist-bar {
  background: linear-gradient(180deg, #f2d27a, #c08b28);
  box-shadow: 0 0 10px rgba(214, 182, 74, 0.26);
}
/* B-rank caution readability balance */
body[data-rank="B"]::after {
  opacity: 0.42;
}
body[data-rank="B"] {
  --rank-text: rgba(255, 239, 196, 0.94);
  --rank-text-soft: rgba(255, 225, 166, 0.82);
  --rank-text-mute: rgba(238, 197, 101, 0.72);
}
body[data-rank="B"] .result-hero,
body[data-rank="B"] .type-section,
body[data-rank="B"] .chart-section,
body[data-rank="B"] .distribution-section,
body[data-rank="B"] .next-step-card,
body[data-rank="B"] .cta-card {
  background-color: rgba(24, 18, 7, 0.7);
}
body[data-rank="B"] .result-tag,
body[data-rank="B"] .section-label,
body[data-rank="B"] .chart-section h3,
body[data-rank="B"] .distribution-section h3,
body[data-rank="B"] .next-step-card h3 {
  color: rgba(242, 210, 122, 0.82);
}
body[data-rank="B"] .result-rank-title,
body[data-rank="B"] .result-score,
body[data-rank="B"] .axis-name,
body[data-rank="B"] .axis-score-value,
body[data-rank="B"] .result-description,
body[data-rank="B"] .distribution-headline {
  color: rgba(255, 239, 196, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}
body[data-rank="B"] .result-headline {
  color: #f5d36f;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78);
}
body[data-rank="B"] .axis-bars {
  background: rgba(10, 8, 4, 0.5);
}
body[data-rank="B"] .axis-bar-track {
  background: rgba(10, 8, 4, 0.72);
  border: 1px solid rgba(242, 210, 122, 0.16);
}
body[data-rank="B"] .axis-score-bar .axis-pole-left,
body[data-rank="B"] .axis-score-bar .axis-pole-right {
  color: rgba(242, 210, 122, 0.62);
}
/* B-rank: remove luxury, make it feel like a caution report */
body[data-rank="B"] {
  --rank-bg: #1b1a12;
  --rank-accent: #b8a14a;
  --rank-accent-2: #d2bf68;
  --rank-warn: #b46920;
  --rank-button-text: #191609;
  --rank-text: rgba(235, 222, 178, 0.9);
  --rank-text-soft: rgba(214, 199, 154, 0.78);
  --rank-text-mute: rgba(183, 164, 95, 0.68);
  --glass-bg: rgba(29, 28, 19, 0.88);
  --glass-bg-soft: rgba(31, 30, 20, 0.82);
  --glass-border: rgba(133, 117, 52, 0.34);
  --glass-border-soft: rgba(112, 103, 58, 0.28);
  --glass-blur: 3px;
  --glass-saturate: 52%;
  --glass-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.018);
  --section-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.018);
  --hero-sheen: 0.04;
  --bar-bg: rgba(120, 105, 46, 0.18);
  --mesh-gradient:
    linear-gradient(180deg, rgba(20, 22, 16, 0.96) 0%, rgba(35, 31, 15, 0.92) 52%, rgba(22, 19, 10, 0.98) 100%),
    radial-gradient(circle at 18% 18%, rgba(123, 104, 40, 0.16), transparent 30%);
  --rank-overlay:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(180,150,50,0.045) 0 1px, transparent 1px 36px);
}
body[data-rank="B"] .result-hero,
body[data-rank="B"] .type-section,
body[data-rank="B"] .chart-section,
body[data-rank="B"] .distribution-section,
body[data-rank="B"] .next-step-card,
body[data-rank="B"] .cta-card,
body[data-rank="B"] .result-profile-bar {
  background: rgba(31, 30, 20, 0.86);
  border: 1px solid rgba(122, 111, 61, 0.34);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(3px) saturate(52%);
  -webkit-backdrop-filter: blur(3px) saturate(52%);
}
body[data-rank="B"] .result-hero::before {
  opacity: 0.08;
}
body[data-rank="B"] .result-hero::after {
  opacity: 0.38;
  background: linear-gradient(135deg, transparent 0 46%, rgba(180, 105, 32, 0.12) 46% 47.5%, transparent 47.5% 100%);
}
body[data-rank="B"] .rank-letter {
  color: #b8a14a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
}
body[data-rank="B"] .result-headline,
body[data-rank="B"] .type-section .section-label,
body[data-rank="B"] .result-tag {
  color: #d2bf68;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.68);
}
body[data-rank="B"] .result-character {
  border-color: rgba(122, 111, 61, 0.45);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
  filter: saturate(0.82) contrast(0.94);
}
body[data-rank="B"] .axis-bars {
  background: rgba(20, 19, 13, 0.76);
  border-color: rgba(104, 94, 49, 0.46);
}
body[data-rank="B"] .axis-bar-fill,
body[data-rank="B"] .dist-col-you .dist-bar {
  background: linear-gradient(90deg, #8e7b34, #c2a84c);
  box-shadow: none;
}
body[data-rank="B"] .axis-bar-marker {
  background: #d2bf68;
  border-color: #1b1a12;
  box-shadow: none;
}
body[data-rank="B"] .result-type-badge,
body[data-rank="B"] .axis-char,
body[data-rank="B"] .btn-primary {
  background: #b8a14a;
  color: #191609;
}
/* B-rank: dull the remaining gold tones */
body[data-rank="B"] {
  --rank-accent: #a99a4b;
  --rank-accent-2: #c9bb78;
  --rank-warn: #a6642a;
}
body[data-rank="B"] .rank-letter {
  color: #a99a4b;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.88);
}
body[data-rank="B"] .result-headline,
body[data-rank="B"] .result-rank-title,
body[data-rank="B"] .result-score,
body[data-rank="B"] .type-section .section-label,
body[data-rank="B"] .result-tag,
body[data-rank="B"] .axis-score-value,
body[data-rank="B"] .axis-name {
  color: #c9bb78;
}
body[data-rank="B"] .axis-bar-fill,
body[data-rank="B"] .dist-col-you .dist-bar {
  background: linear-gradient(90deg, #756a34, #aaa052);
}
body[data-rank="B"] .axis-bar-marker {
  background: #c9bb78;
}
body[data-rank="B"] .result-hero,
body[data-rank="B"] .type-section,
body[data-rank="B"] .chart-section,
body[data-rank="B"] .distribution-section,
body[data-rank="B"] .next-step-card,
body[data-rank="B"] .cta-card,
body[data-rank="B"] .result-profile-bar {
  border-color: rgba(112, 106, 64, 0.38);
}
/* B-rank: no yellow, use stagnant gray-green caution */
body[data-rank="B"] {
  --rank-bg: #101612;
  --rank-accent: #7f9f86;
  --rank-accent-2: #b8c7b7;
  --rank-warn: #8ba38d;
  --rank-button-text: #0d130f;
  --rank-text: rgba(225, 235, 222, 0.9);
  --rank-text-soft: rgba(197, 211, 196, 0.78);
  --rank-text-mute: rgba(152, 171, 154, 0.68);
  --glass-bg: rgba(16, 22, 18, 0.9);
  --glass-bg-soft: rgba(18, 24, 20, 0.84);
  --glass-border: rgba(127, 159, 134, 0.3);
  --glass-border-soft: rgba(102, 125, 106, 0.26);
  --glass-blur: 3px;
  --glass-saturate: 48%;
  --glass-shadow: 0 10px 26px rgba(0, 0, 0, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.018);
  --section-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.018);
  --hero-sheen: 0.03;
  --bar-bg: rgba(127, 159, 134, 0.14);
  --mesh-gradient:
    linear-gradient(180deg, rgba(13, 18, 15, 0.98) 0%, rgba(22, 29, 24, 0.94) 52%, rgba(13, 17, 14, 0.98) 100%),
    radial-gradient(circle at 18% 18%, rgba(92, 118, 98, 0.18), transparent 30%);
  --rank-overlay:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(127,159,134,0.045) 0 1px, transparent 1px 36px);
}
body[data-rank="B"] .result-hero,
body[data-rank="B"] .type-section,
body[data-rank="B"] .chart-section,
body[data-rank="B"] .distribution-section,
body[data-rank="B"] .next-step-card,
body[data-rank="B"] .cta-card,
body[data-rank="B"] .result-profile-bar {
  background: rgba(18, 24, 20, 0.86);
  border: 1px solid rgba(102, 125, 106, 0.34);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(3px) saturate(48%);
  -webkit-backdrop-filter: blur(3px) saturate(48%);
}
body[data-rank="B"] .result-hero::before {
  opacity: 0.06;
}
body[data-rank="B"] .result-hero::after {
  opacity: 0.45;
  background: linear-gradient(135deg, transparent 0 46%, rgba(127, 159, 134, 0.12) 46% 47.5%, transparent 47.5% 100%);
}
body[data-rank="B"] .rank-letter {
  color: #8ba38d;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.86);
}
body[data-rank="B"] .result-headline,
body[data-rank="B"] .result-rank-title,
body[data-rank="B"] .result-score,
body[data-rank="B"] .type-section .section-label,
body[data-rank="B"] .result-tag,
body[data-rank="B"] .axis-score-value,
body[data-rank="B"] .axis-name {
  color: #c5d3c4;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.72);
}
body[data-rank="B"] .result-description,
body[data-rank="B"] .distribution-headline,
body[data-rank="B"] .next-step-card p {
  color: rgba(213, 225, 211, 0.8);
}
body[data-rank="B"] .result-character {
  border-color: rgba(102, 125, 106, 0.46);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
  filter: saturate(0.72) contrast(0.92);
}
body[data-rank="B"] .axis-bars {
  background: rgba(10, 14, 12, 0.76);
  border-color: rgba(102, 125, 106, 0.46);
}
body[data-rank="B"] .axis-bar-track {
  background: rgba(6, 9, 8, 0.72);
  border: 1px solid rgba(127, 159, 134, 0.14);
}
body[data-rank="B"] .axis-bar-fill,
body[data-rank="B"] .dist-col-you .dist-bar {
  background: linear-gradient(90deg, #526b58, #8ba38d);
  box-shadow: none;
}
body[data-rank="B"] .axis-bar-marker {
  background: #b8c7b7;
  border-color: #101612;
  box-shadow: none;
}
body[data-rank="B"] .axis-score-bar .axis-pole-left,
body[data-rank="B"] .axis-score-bar .axis-pole-right {
  color: rgba(184, 199, 183, 0.6);
}
body[data-rank="B"] .result-type-badge,
body[data-rank="B"] .axis-char,
body[data-rank="B"] .btn-primary {
  background: #8ba38d;
  color: #0d130f;
}
body[data-rank="B"] .dist-marker,
body[data-rank="B"] .dist-marker::after {
  background: #b8c7b7;
}
body[data-rank="B"] .dist-col-you .dist-rank {
  color: #b8c7b7;
}
/* B-rank gray-green readability lift */
body[data-rank="B"]::after {
  opacity: 0.28;
}
body[data-rank="B"] {
  --rank-text: rgba(236, 245, 234, 0.96);
  --rank-text-soft: rgba(219, 233, 217, 0.86);
  --rank-text-mute: rgba(176, 198, 179, 0.74);
}
body[data-rank="B"] .result-hero,
body[data-rank="B"] .type-section,
body[data-rank="B"] .chart-section,
body[data-rank="B"] .distribution-section,
body[data-rank="B"] .next-step-card,
body[data-rank="B"] .cta-card,
body[data-rank="B"] .result-profile-bar {
  background: rgba(22, 31, 25, 0.82);
  border-color: rgba(132, 158, 136, 0.42);
}
body[data-rank="B"] .rank-letter {
  color: #9fb7a1;
}
body[data-rank="B"] .result-headline,
body[data-rank="B"] .result-rank-title,
body[data-rank="B"] .result-score,
body[data-rank="B"] .type-section .section-label,
body[data-rank="B"] .result-tag,
body[data-rank="B"] .axis-score-value,
body[data-rank="B"] .axis-name {
  color: #dcebd9;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}
body[data-rank="B"] .result-description,
body[data-rank="B"] .distribution-headline,
body[data-rank="B"] .next-step-card p {
  color: rgba(225, 238, 222, 0.86);
}
body[data-rank="B"] .axis-bars {
  background: rgba(13, 19, 15, 0.64);
}
body[data-rank="B"] .axis-bar-fill,
body[data-rank="B"] .dist-col-you .dist-bar {
  background: linear-gradient(90deg, #6a836f, #a2b9a4);
}
body[data-rank="B"] .axis-bar-marker {
  background: #dcebd9;
}

/* =============== Rank Only Result Design =============== */
.type-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 10px 16px;
  border: 1px solid rgba(27, 58, 92, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}
.type-preview strong {
  color: var(--color-navy);
}
body[data-rank] .result-hero {
  padding: 46px 32px 40px;
}
body[data-rank] .result-rank-display {
  gap: 28px;
}
body[data-rank] .result-rank-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
body[data-rank] .rank-letter {
  font-size: 112px;
  line-height: 0.88;
  letter-spacing: 0;
}
body[data-rank] .result-rank-title {
  display: inline-flex;
  max-width: 100%;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--rank-accent) 34%, transparent);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 16px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
body[data-rank] .result-score {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
}
body[data-rank] .result-headline {
  margin-top: 28px;
}
body[data-rank] .type-section .section-label {
  letter-spacing: 0;
}
@media (max-width: 600px) {
  .type-preview {
    width: 100%;
    margin-bottom: 24px;
    line-height: 1.7;
  }
  body[data-rank] .result-hero {
    padding: 34px 18px 30px;
  }
  body[data-rank] .result-rank-display {
    gap: 18px;
  }
  body[data-rank] .result-rank-info {
    align-items: center;
  }
  body[data-rank] .rank-letter {
    font-size: 84px;
  }
  body[data-rank] .result-rank-title {
    justify-content: center;
    text-align: center;
  }
}


/* =============== Rank Only Mobile Polish =============== */
@media (max-width: 600px) {
  body[data-rank] .result-hero,
  body[data-rank] .type-section,
  body[data-rank] .chart-section,
  body[data-rank] .distribution-section,
  body[data-rank] .next-step-card,
  body[data-rank] .cta-card,
  body[data-rank] .result-profile-bar {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body[data-rank] .result-headline {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.62;
    text-align: center;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  body[data-rank] .result-description {
    width: 100%;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.85;
    overflow-wrap: anywhere;
  }
  body[data-rank] .axis-bars {
    padding: 14px 12px;
  }
  body[data-rank] .axis-score-bar {
    grid-template-columns: 18px minmax(0, 1fr) 28px;
    gap: 5px;
    width: 100%;
    min-width: 0;
  }
  body[data-rank] .axis-score-bar .axis-pole-left,
  body[data-rank] .axis-score-bar .axis-pole-right {
    font-size: 9px;
    min-width: 0;
    white-space: nowrap;
  }
  body[data-rank] .axis-score-bar .axis-pole-right {
    text-align: right;
  }
  body[data-rank] .axis-bar-track {
    min-width: 0;
  }
}

/* ============================================================
 * Rank Theme FINAL — Game Rank-Up Aesthetic (2026-05-21)
 * 経営者向けゲームランクアップ画面風。各ランクが「その階位の勲章」
 * S=神話級 / A=覇者級 / B=精鋭級 / C=中堅級 / D=入門級 / E=警戒級
 * ============================================================ */

/* ===== Common framework (S/A/B/C only — D/E は前回の設計を維持) ===== */
body[data-rank="S"]::before,
body[data-rank="A"]::before,
body[data-rank="B"]::before,
body[data-rank="C"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--rank-bg);
  background-image: var(--mesh-gradient);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: rank-bg-drift 24s ease-in-out infinite alternate;
}
body[data-rank="S"]::after,
body[data-rank="A"]::after,
body[data-rank="B"]::after,
body[data-rank="C"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--rank-overlay, transparent);
  opacity: var(--rank-overlay-opacity, 1);
  mix-blend-mode: screen;
}

@keyframes rank-bg-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(1%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-rank="S"]::before,
  body[data-rank="A"]::before,
  body[data-rank="B"]::before,
  body[data-rank="C"]::before,
  body[data-rank="S"] .result-hero::after,
  body[data-rank="A"] .result-hero::after,
  body[data-rank="B"] .result-hero::after,
  body[data-rank="C"] .result-hero::after,
  body[data-rank="S"] .rank-letter,
  body[data-rank="A"] .rank-letter,
  body[data-rank="B"] .rank-letter,
  body[data-rank="C"] .rank-letter {
    animation: none !important;
  }
}

@keyframes rank-letter-glow {
  0%, 100% { filter: drop-shadow(0 0 18px var(--rank-glow, rgba(255,255,255,0.4))) drop-shadow(0 0 38px var(--rank-glow-soft, rgba(255,255,255,0.2))); }
  50%      { filter: drop-shadow(0 0 28px var(--rank-glow, rgba(255,255,255,0.6))) drop-shadow(0 0 70px var(--rank-glow-soft, rgba(255,255,255,0.35))); }
}

@keyframes rank-rays-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Light rays behind hero card (S/A/B/C only) */
body[data-rank="S"] .result-hero,
body[data-rank="A"] .result-hero,
body[data-rank="B"] .result-hero,
body[data-rank="C"] .result-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body[data-rank="S"] .result-hero::after,
body[data-rank="A"] .result-hero::after,
body[data-rank="B"] .result-hero::after,
body[data-rank="C"] .result-hero::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--rank-ray, rgba(255,255,255,0.06)) 20deg,
    transparent 40deg,
    transparent 60deg,
    var(--rank-ray, rgba(255,255,255,0.06)) 80deg,
    transparent 100deg,
    transparent 180deg,
    var(--rank-ray, rgba(255,255,255,0.05)) 200deg,
    transparent 220deg,
    transparent 280deg,
    var(--rank-ray, rgba(255,255,255,0.05)) 300deg,
    transparent 320deg,
    transparent 360deg
  );
  animation: rank-rays-rotate 180s linear infinite;
  will-change: transform;
  pointer-events: none;
  opacity: 0.55;
}

/* Letter glow per rank (S/A/B/C) */
body[data-rank="S"] .rank-letter,
body[data-rank="A"] .rank-letter,
body[data-rank="B"] .rank-letter,
body[data-rank="C"] .rank-letter {
  animation: rank-letter-glow 3.5s ease-in-out infinite;
}

/* Card surface — refined glass (S/A/B/C only) */
body[data-rank="S"] .result-hero,
body[data-rank="A"] .result-hero,
body[data-rank="B"] .result-hero,
body[data-rank="C"] .result-hero,
body[data-rank="S"] .type-section,
body[data-rank="A"] .type-section,
body[data-rank="B"] .type-section,
body[data-rank="C"] .type-section,
body[data-rank="S"] .chart-section,
body[data-rank="A"] .chart-section,
body[data-rank="B"] .chart-section,
body[data-rank="C"] .chart-section,
body[data-rank="S"] .distribution-section,
body[data-rank="A"] .distribution-section,
body[data-rank="B"] .distribution-section,
body[data-rank="C"] .distribution-section,
body[data-rank="S"] .next-step-card,
body[data-rank="A"] .next-step-card,
body[data-rank="B"] .next-step-card,
body[data-rank="C"] .next-step-card,
body[data-rank="S"] .cta-card,
body[data-rank="A"] .cta-card,
body[data-rank="B"] .cta-card,
body[data-rank="C"] .cta-card,
body[data-rank="S"] .result-profile-bar,
body[data-rank="A"] .result-profile-bar,
body[data-rank="B"] .result-profile-bar,
body[data-rank="C"] .result-profile-bar {
  background: var(--rank-card-bg, rgba(8, 12, 24, 0.72));
  border: 1px solid var(--rank-card-border, rgba(255, 255, 255, 0.16));
  box-shadow:
    0 0 0 1px var(--rank-card-edge, rgba(255, 255, 255, 0.04)),
    0 22px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Text (S/A/B/C only) */
body[data-rank="S"],
body[data-rank="A"],
body[data-rank="B"],
body[data-rank="C"] {
  color: rgba(255, 255, 255, 0.94);
}
body[data-rank="S"] .result-headline,
body[data-rank="A"] .result-headline,
body[data-rank="B"] .result-headline,
body[data-rank="C"] .result-headline,
body[data-rank="S"] .result-rank-title,
body[data-rank="A"] .result-rank-title,
body[data-rank="B"] .result-rank-title,
body[data-rank="C"] .result-rank-title,
body[data-rank="S"] .result-score,
body[data-rank="A"] .result-score,
body[data-rank="B"] .result-score,
body[data-rank="C"] .result-score,
body[data-rank="S"] .axis-name,
body[data-rank="A"] .axis-name,
body[data-rank="B"] .axis-name,
body[data-rank="C"] .axis-name,
body[data-rank="S"] .axis-score-value,
body[data-rank="A"] .axis-score-value,
body[data-rank="B"] .axis-score-value,
body[data-rank="C"] .axis-score-value,
body[data-rank="S"] .type-section .section-label,
body[data-rank="A"] .type-section .section-label,
body[data-rank="B"] .type-section .section-label,
body[data-rank="C"] .type-section .section-label,
body[data-rank="S"] .result-tag,
body[data-rank="A"] .result-tag,
body[data-rank="B"] .result-tag,
body[data-rank="C"] .result-tag {
  color: var(--rank-headline, #ffffff) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}
body[data-rank="S"] .result-description,
body[data-rank="A"] .result-description,
body[data-rank="B"] .result-description,
body[data-rank="C"] .result-description,
body[data-rank="S"] .distribution-headline,
body[data-rank="A"] .distribution-headline,
body[data-rank="B"] .distribution-headline,
body[data-rank="C"] .distribution-headline,
body[data-rank="S"] .next-step-card p,
body[data-rank="A"] .next-step-card p,
body[data-rank="B"] .next-step-card p,
body[data-rank="C"] .next-step-card p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* Axis bars unified gradient (S/A/B/C only) */
body[data-rank="S"] .axis-bar-fill,
body[data-rank="A"] .axis-bar-fill,
body[data-rank="B"] .axis-bar-fill,
body[data-rank="C"] .axis-bar-fill,
body[data-rank="S"] .dist-col-you .dist-bar,
body[data-rank="A"] .dist-col-you .dist-bar,
body[data-rank="B"] .dist-col-you .dist-bar,
body[data-rank="C"] .dist-col-you .dist-bar {
  background: linear-gradient(90deg, var(--rank-accent), var(--rank-headline, #fff)) !important;
  box-shadow: 0 0 14px var(--rank-glow-soft, rgba(255,255,255,0.25)) !important;
}
body[data-rank="S"] .axis-bar-marker,
body[data-rank="A"] .axis-bar-marker,
body[data-rank="B"] .axis-bar-marker,
body[data-rank="C"] .axis-bar-marker {
  background: var(--rank-headline, #fff) !important;
  box-shadow: 0 0 0 2px var(--rank-glow, rgba(255,255,255,0.3)) !important;
}

/* ===== S: 神話級 — Iridescent Mythic ===== */
body[data-rank="S"] {
  --rank-bg: #03050f;
  --rank-accent: #fef08a;
  --rank-headline: #fff7d6;
  --rank-glow: rgba(254, 240, 138, 0.55);
  --rank-glow-soft: rgba(125, 211, 252, 0.45);
  --rank-ray: rgba(254, 240, 138, 0.18);
  --rank-card-bg: rgba(6, 12, 28, 0.62);
  --rank-card-border: rgba(254, 240, 138, 0.32);
  --rank-card-edge: rgba(125, 211, 252, 0.18);
  --mesh-gradient:
    radial-gradient(ellipse 60% 50% at 18% 12%, rgba(254, 240, 138, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 82% 18%, rgba(125, 211, 252, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 95%, rgba(240, 171, 252, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 90% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 55%),
    linear-gradient(160deg, #050818 0%, #0a1438 45%, #060a1f 100%);
  --rank-overlay:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 35%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='40' cy='80' r='1.2' opacity='0.7'/%3E%3Ccircle cx='130' cy='220' r='0.8' opacity='0.5'/%3E%3Ccircle cx='280' cy='60' r='1.5' opacity='0.8'/%3E%3Ccircle cx='340' cy='180' r='0.9' opacity='0.6'/%3E%3Ccircle cx='90' cy='320' r='1.1' opacity='0.55'/%3E%3Ccircle cx='220' cy='280' r='0.7' opacity='0.4'/%3E%3Ccircle cx='370' cy='340' r='1.3' opacity='0.65'/%3E%3Ccircle cx='180' cy='140' r='0.6' opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
  --rank-overlay-opacity: 0.85;
}
body[data-rank="S"] .rank-letter {
  background: linear-gradient(135deg, #fef08a 0%, #ffffff 40%, #67e8f9 70%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== A: 覇者級 — Royal Purple × Gold ===== */
body[data-rank="A"] {
  --rank-bg: #110625;
  --rank-accent: #c084fc;
  --rank-headline: #fbbf24;
  --rank-glow: rgba(168, 85, 247, 0.55);
  --rank-glow-soft: rgba(251, 191, 36, 0.4);
  --rank-ray: rgba(251, 191, 36, 0.16);
  --rank-card-bg: rgba(20, 8, 38, 0.7);
  --rank-card-border: rgba(192, 132, 252, 0.35);
  --rank-card-edge: rgba(251, 191, 36, 0.14);
  --mesh-gradient:
    radial-gradient(ellipse 65% 50% at 20% 18%, rgba(124, 58, 237, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 82% 20%, rgba(251, 191, 36, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 80% 65% at 50% 100%, rgba(192, 38, 211, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 80%, rgba(88, 28, 135, 0.55) 0%, transparent 55%),
    linear-gradient(160deg, #0a0420 0%, #2e0a52 45%, #110428 100%);
}
body[data-rank="A"] .rank-letter {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== B: 精鋭級 — Sapphire × Silver ===== */
body[data-rank="B"] {
  --rank-bg: #03081f !important;
  --rank-accent: #60a5fa !important;
  --rank-headline: #e0f2fe !important;
  --rank-glow: rgba(59, 130, 246, 0.55) !important;
  --rank-glow-soft: rgba(186, 230, 253, 0.35) !important;
  --rank-ray: rgba(96, 165, 250, 0.18) !important;
  --rank-card-bg: rgba(6, 14, 38, 0.72) !important;
  --rank-card-border: rgba(96, 165, 250, 0.4) !important;
  --rank-card-edge: rgba(186, 230, 253, 0.18) !important;
  --mesh-gradient:
    radial-gradient(ellipse 65% 50% at 18% 18%, rgba(29, 78, 216, 0.7) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 82% 22%, rgba(56, 189, 248, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 80% 65% at 50% 100%, rgba(30, 64, 175, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 75%, rgba(203, 213, 225, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #02051a 0%, #0a1f54 45%, #02071f 100%) !important;
}
body[data-rank="B"] .rank-letter {
  background: linear-gradient(135deg, #ffffff 0%, #93c5fd 45%, #1d4ed8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ===== C: 中堅級 — Emerald × Jade ===== */
body[data-rank="C"] {
  --rank-bg: #021a14 !important;
  --rank-accent: #34d399 !important;
  --rank-headline: #d1fae5 !important;
  --rank-glow: rgba(16, 185, 129, 0.5) !important;
  --rank-glow-soft: rgba(132, 204, 22, 0.35) !important;
  --rank-ray: rgba(52, 211, 153, 0.16) !important;
  --rank-card-bg: rgba(5, 26, 20, 0.72) !important;
  --rank-card-border: rgba(52, 211, 153, 0.4) !important;
  --rank-card-edge: rgba(132, 204, 22, 0.15) !important;
  --mesh-gradient:
    radial-gradient(ellipse 65% 50% at 18% 18%, rgba(16, 185, 129, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 82% 22%, rgba(132, 204, 22, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 80% 65% at 50% 100%, rgba(5, 150, 105, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 75%, rgba(20, 184, 166, 0.4) 0%, transparent 55%),
    linear-gradient(160deg, #021410 0%, #084a36 45%, #021a13 100%) !important;
}
body[data-rank="C"] .rank-letter {
  background: linear-gradient(135deg, #ecfccb 0%, #34d399 50%, #047857 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* D / E は前回のデザインを維持するため、最終ブロックでの上書きをしない。
   共通の framework / アニメーション / カード装飾は適用されるが、配色は前回のまま。 */

/* Result character (the illustration) frame styling (S/A/B/C のみ — D/E は前回のキャラ枠を維持) */
body[data-rank="S"] .result-character,
body[data-rank="A"] .result-character,
body[data-rank="B"] .result-character,
body[data-rank="C"] .result-character {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--rank-accent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 30px var(--rank-glow),
    0 18px 42px rgba(0, 0, 0, 0.5);
}

/* Result tag (e.g., "あなたの診断結果") — refined (S/A/B/C only) */
body[data-rank="S"] .result-tag,
body[data-rank="A"] .result-tag,
body[data-rank="B"] .result-tag,
body[data-rank="C"] .result-tag {
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

body[data-rank] .result-visual-card {
  background: color-mix(in srgb, var(--rank-card-bg, rgba(255,255,255,0.12)) 82%, transparent);
  border-color: var(--rank-card-border, rgba(255,255,255,0.2));
  color: var(--rank-text, white);
}

body[data-rank] .result-visual-card strong {
  color: var(--rank-text, white);
}

body[data-rank] .result-visual-card > span {
  color: var(--rank-text-soft, rgba(255,255,255,0.76));
}

body[data-rank] .mini-illust {
  background: color-mix(in srgb, var(--rank-accent, #fff) 14%, transparent);
}

body[data-rank] .mini-illust span {
  background: var(--rank-accent, white);
}

/* 2026-06 UI polish: reduce taps, make deselection obvious, and stabilize rank layout */
.profile-chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pc-task-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  width: 100%;
}

.pc-task-chip {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
}

.option {
  min-height: 64px;
}

.option.selected,
.profile-chip.selected {
  transform: translateY(-1px);
}

.share-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  max-width: 680px;
  margin: 0 auto;
}

.btn-share {
  min-height: 42px;
}

.result-rank-display,
body[data-rank] .result-rank-display {
  display: grid;
  grid-template-columns: minmax(132px, 180px) minmax(180px, max-content);
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.result-rank-info,
body[data-rank] .result-rank-info {
  text-align: center;
  min-width: 180px;
}

.rank-letter,
body[data-rank] .rank-letter {
  display: inline-block;
  letter-spacing: -0.01em !important;
  padding: 0 0.08em;
  min-width: 1.35em;
  text-align: center;
}

@media (max-width: 600px) {
  .profile-options {
    gap: 10px;
  }

  .profile-chip {
    min-height: 44px;
  }

  .pc-task-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-rank-display,
  body[data-rank] .result-rank-display {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .result-rank-info,
  body[data-rank] .result-rank-info {
    min-width: 0;
  }

  .rank-letter,
  body[data-rank] .rank-letter {
    font-size: clamp(72px, 22vw, 96px);
  }

  .result-visual-strip,
  .pc-detail-visual-map {
    grid-template-columns: 1fr;
  }

  .result-visual-card,
  .pc-detail-visual-card {
    min-height: auto;
  }
}

/* Final final override: this block must stay at the end of the file. */
body[data-rank="S"] { --rank-accent: #9a7530 !important; --rank-accent-2: #6f551f !important; }
body[data-rank="A"] { --rank-accent: #2f6f5e !important; --rank-accent-2: #254f45 !important; }
body[data-rank="B"] { --rank-accent: #3f6d87 !important; --rank-accent-2: #2f5368 !important; }
body[data-rank="C"] { --rank-accent: #8a6f3d !important; --rank-accent-2: #604d2c !important; }
body[data-rank="D"] { --rank-accent: #8b5d54 !important; --rank-accent-2: #673f39 !important; }
body[data-rank="E"] { --rank-accent: #8c3d3d !important; --rank-accent-2: #642d2d !important; }

body[data-rank]::before,
body[data-rank]::after {
  display: block !important;
  content: "" !important;
}

body[data-rank] .result-hero::before,
body[data-rank] .result-hero::after {
  display: none !important;
  content: none !important;
}

body[data-rank] .result-hero,
body[data-rank] .result-profile-bar,
body[data-rank] .result-visual-card,
body[data-rank] .pc-task-impact,
body[data-rank] .pc-task-detail,
body[data-rank] .type-section,
body[data-rank] .chart-section,
body[data-rank] .distribution-section,
body[data-rank] .next-step-card,
body[data-rank] .cta-card {
  background: rgba(255, 253, 248, 0.9) !important;
  border: 1px solid rgba(221, 215, 202, 0.72) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
  color: #17212b !important;
  backdrop-filter: blur(10px) saturate(110%) !important;
}

body[data-rank] .pc-task-impact,
body[data-rank] .pc-task-detail {
  background: rgba(248, 244, 234, 0.92) !important;
}

body[data-rank] .rank-letter,
body[data-rank="S"] .rank-letter,
body[data-rank="A"] .rank-letter,
body[data-rank="B"] .rank-letter,
body[data-rank="C"] .rank-letter,
body[data-rank="D"] .rank-letter,
body[data-rank="E"] .rank-letter {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--rank-accent) !important;
  color: var(--rank-accent) !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

body[data-rank] .result-hero *,
body[data-rank] .result-profile-bar *,
body[data-rank] .result-visual-card *,
body[data-rank] .pc-task-impact *,
body[data-rank] .pc-task-detail *,
body[data-rank] .type-section *,
body[data-rank] .chart-section *,
body[data-rank] .distribution-section *,
body[data-rank] .next-step-card *,
body[data-rank] .cta-card * {
  text-shadow: none !important;
  filter: none !important;
}

body[data-rank] .result-tag,
body[data-rank] .section-label,
body[data-rank] .profile-bar-label,
body[data-rank] .pc-impact-label {
  color: #6e7884 !important;
}

body[data-rank] .result-headline,
body[data-rank] .result-rank-title,
body[data-rank] .type-name,
body[data-rank] .chart-section h3,
body[data-rank] .distribution-section h3,
body[data-rank] .next-step-card h3,
body[data-rank] .pc-impact-head h3,
body[data-rank] .pc-impact-summary,
body[data-rank] .pc-impact-consult,
body[data-rank] .pc-impact-bucket-title,
body[data-rank] .pc-impact-item strong,
body[data-rank] .pc-detail-visual-card strong {
  color: #18324a !important;
}

body[data-rank] .result-description,
body[data-rank] .result-score,
body[data-rank] .type-description,
body[data-rank] .distribution-headline,
body[data-rank] .next-step-card p,
body[data-rank] .result-visual-card > span,
body[data-rank] .pc-impact-item span,
body[data-rank] .pc-detail-visual-card span {
  color: #344252 !important;
}

body[data-rank] .result-rank-title,
body[data-rank] .profile-bar-chip,
body[data-rank] .pc-impact-count,
body[data-rank] .pc-impact-bucket-title,
body[data-rank] .pc-impact-tag,
body[data-rank] .pc-detail-visual-card b {
  background: #ede5d4 !important;
  border: 1px solid #d8ceb9 !important;
  color: #18324a !important;
}

body[data-rank] .pc-impact-summary,
body[data-rank] .pc-impact-item,
body[data-rank] .pc-impact-other,
body[data-rank] .pc-detail-visual-card,
body[data-rank] .pc-impact-mini-map span {
  background: #fffdf8 !important;
  border-color: #ded6c6 !important;
  color: #344252 !important;
}

body[data-rank] .mini-illust,
body[data-rank] .pc-detail-icon {
  background: #f1ece1 !important;
}

body[data-rank] .mini-illust span,
body[data-rank] .pc-detail-icon span {
  background: var(--rank-accent) !important;
}

body[data-rank] .pc-detail-icon-review span:nth-child(2) {
  background: transparent !important;
  border-color: var(--rank-accent) !important;
}

body[data-rank] .result-character {
  border: 1px solid #d8d0c0 !important;
  background: #f5f1e8 !important;
  box-shadow: none !important;
}

body[data-rank] .axis-bar-fill,
body[data-rank] .dist-col-you .dist-bar,
body[data-rank] .axis-bar-marker,
body[data-rank] .dist-marker,
body[data-rank] .dist-marker::after {
  background: var(--rank-accent) !important;
  border-color: var(--rank-accent) !important;
  box-shadow: none !important;
}

/* =========================================================================
   FINAL OVERRIDE (true end of file) — B / C differentiation only.
   The file repeats rank themes many times; earlier blocks reintroduced a
   blue (B) / green (C) "AI glow" look. This block, placed at the genuine
   end, wins. Keep the background drama; only retune the palette.
   - B: amber + slate (business report / caution tone), drop the blue
   - C: sage + teal (a calmer "beginning / opening up" tone), drop the green
   S / A / D / E are intentionally NOT touched here.
   ========================================================================= */

/* ----- B rank : amber / slate ----- */
body[data-rank="B"] {
  --rank-accent: #d4953a !important;        /* rich brass gold (was muddy mustard) */
  --rank-accent-2: #f3cf86 !important;       /* light champagne gold */
  --rank-glow: rgba(212, 149, 58, 0.55) !important;
  --rank-glow-soft: rgba(255, 214, 130, 0.34) !important;
  --rank-card-border: rgba(212, 149, 58, 0.42) !important;
  /* Deep warm bronze field + ember glow from below = "achievement / one tier
     below the top". Slate grey removed (it read cheap and sleepy). */
  --mesh-gradient:
    radial-gradient(ellipse 56% 42% at 16% 16%, rgba(217, 145, 50, 0.5) 0%, transparent 54%),
    radial-gradient(ellipse 50% 38% at 86% 20%, rgba(146, 92, 30, 0.6) 0%, transparent 56%),
    radial-gradient(ellipse 96% 72% at 50% 106%, rgba(194, 102, 24, 0.52) 0%, transparent 60%),
    linear-gradient(160deg, #140d05 0%, #2f1e0a 46%, #14100a 100%) !important;
  --rank-overlay:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 110%, rgba(245, 158, 11, 0.24), transparent 48%) !important;
}
/* Warm metallic gold letter (champagne -> bronze). Warm-only, so it reads as a
   "B medal" rather than the cheap blue AI gradient we removed. */
body[data-rank="B"] .rank-letter {
  background: linear-gradient(162deg, #e8bb63 0%, #c2862c 46%, #8a5b16 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #a86f1c !important;
  text-shadow:
    0 2px 20px rgba(212, 149, 58, 0.42),
    0 0 60px rgba(212, 149, 58, 0.22) !important;
}

/* ----- C rank : sage / teal ----- */
body[data-rank="C"] {
  --rank-accent: #2f7d6b !important;
  --rank-accent-2: #5ba896 !important;
  --rank-glow: rgba(47, 125, 107, 0.46) !important;
  --rank-glow-soft: rgba(148, 163, 184, 0.3) !important;
  --rank-card-border: rgba(47, 125, 107, 0.4) !important;
  --mesh-gradient:
    radial-gradient(ellipse 62% 46% at 20% 18%, rgba(45, 120, 100, 0.46) 0%, transparent 56%),
    radial-gradient(ellipse 54% 40% at 82% 24%, rgba(148, 163, 184, 0.24) 0%, transparent 60%),
    radial-gradient(ellipse 78% 64% at 48% 100%, rgba(22, 101, 85, 0.46) 0%, transparent 62%),
    linear-gradient(155deg, #071310 0%, #173d35 48%, #0d201d 100%) !important;
  --rank-overlay:
    linear-gradient(135deg, rgba(236, 253, 245, 0.06), transparent 34%, rgba(20, 184, 166, 0.08)),
    radial-gradient(circle at 50% 85%, rgba(20, 184, 166, 0.12), transparent 46%) !important;
}
body[data-rank="C"] .rank-letter {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #2f7d6b !important;
  color: #2f7d6b !important;
  text-shadow:
    0 0 22px rgba(47, 125, 107, 0.45),
    0 0 64px rgba(47, 125, 107, 0.24) !important;
}
/* =========================================================================
   RESULT REVEAL MOTION — drama for the "your result" moment.
   Staggered fade-up + a rank-letter pop. Respects reduced-motion.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .result-hero.reveal .result-tag          { animation: rt-fade-up 0.5s 0.04s both; }
  .result-hero.reveal .result-rank-display  { animation: rt-fade-up 0.6s 0.12s both; }
  .result-hero.reveal .rank-letter          { animation: rt-rank-pop 0.9s 0.20s both; }
  .result-hero.reveal .result-rank-title    { animation: rt-fade-up 0.5s 0.46s both; }
  .result-hero.reveal .result-score         { animation: rt-fade-up 0.5s 0.56s both; }
  .result-hero.reveal .result-headline      { animation: rt-fade-up 0.55s 0.66s both; }
  .result-hero.reveal .result-description   { animation: rt-fade-up 0.55s 0.78s both; }
}
@keyframes rt-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rt-rank-pop {
  0%   { opacity: 0; transform: scale(0.55); filter: blur(7px); }
  55%  { opacity: 1; transform: scale(1.14); filter: blur(0); }
  74%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
/* =========================================================================
   RANK MOSAIC REVEAL — ランク表示を不透明なモザイクタイルの格子で覆い、
   タイルをランダムに消して下のランクを露出させる演出（軽量・実モザイク感）。
   JS(playRankMosaicReveal)が .mosaic-grid を生成し、.clearing で消す。
   ========================================================================= */
.result-rank-display.mosaic-host { position: relative; }
.mosaic-grid {
  position: absolute;
  inset: -6px;
  z-index: 6;
  pointer-events: none;
  display: grid;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.mosaic-grid span {
  background: #0a0c10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.mosaic-grid.clearing span { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .mosaic-grid { display: none; }
}

body[data-rank] #screen-result #result-score.score-slot-spinning {
  display: inline-block;
  min-width: 10.5em;
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
  font-variant-numeric: tabular-nums;
  animation: score-slot-rattle 0.13s steps(2, end) infinite;
}

@keyframes score-slot-rattle {
  0%   { transform: translateY(-1px); filter: blur(0.45px); letter-spacing: 0.01em; }
  50%  { transform: translateY(1px);  filter: blur(0);      letter-spacing: 0.035em; }
  100% { transform: translateY(0);    filter: blur(0.3px);  letter-spacing: 0.015em; }
}
/* =========================================================================
   READABILITY FIX — result cards are cream (#fffdf8 / #f8f4ea) for ALL ranks,
   but much of the text still used old dark-card light colors (light blue /
   white / light gold) => contrast 1.0-1.8. Force warm-dark ink here.
   Verified: every rank S-E uses cream cards, so dark text is safe.
   ========================================================================= */
body[data-rank] #screen-result .section-label,
body[data-rank] #screen-result .type-section h3,
body[data-rank] #screen-result .chart-section h3,
body[data-rank] #screen-result .distribution-section h3,
body[data-rank] #screen-result .next-step-card h3,
body[data-rank] #screen-result .axis-name,
body[data-rank] #screen-result .axis-score-value,
body[data-rank] #screen-result .chart-legend,
body[data-rank] #screen-result .chart-legend strong,
body[data-rank] #screen-result .distribution-headline,
body[data-rank] #screen-result .distribution-headline strong,
body[data-rank] #screen-result .dist-rank,
body[data-rank] #screen-result .dist-pct,
body[data-rank] #screen-result .dist-col-you .dist-rank,
body[data-rank] #screen-result .type-card-label,
body[data-rank] #screen-result .action-plan-label,
body[data-rank] #screen-result #type-action-plan {
  color: #2c2620 !important;
  -webkit-text-fill-color: #2c2620 !important;
}
/* secondary / less important text — mid grey, still >= ~3.5:1 on cream */
body[data-rank] #screen-result .axis-pole-left,
body[data-rank] #screen-result .axis-pole-right,
body[data-rank] #screen-result .distribution-note {
  color: #756c5f !important;
  -webkit-text-fill-color: #756c5f !important;
}
/* "you are here" marker: neutral dark pill, always legible on cream */
body[data-rank] #screen-result .dist-marker {
  background: #2c2620 !important;
  color: #fffdf8 !important;
}
body[data-rank] #screen-result .dist-marker::after {
  background: #2c2620 !important;
}
/* --- CTA block: section title is on the dark page bg (light text);
       the cards are cream (dark ink). Two opposite fixes. --- */
body[data-rank] #screen-result .cta-section h3 {
  color: #f5efe0 !important;
  -webkit-text-fill-color: #f5efe0 !important;
}
body[data-rank] #screen-result .cta-card h4 {
  color: #2c2620 !important;
  -webkit-text-fill-color: #2c2620 !important;
}
body[data-rank] #screen-result .cta-card p {
  color: #5a5248 !important;
  -webkit-text-fill-color: #5a5248 !important;
}
/* =========================================================================
   START SCREEN GLOW-UP (2) — make the first impression inviting.
   Static upgrades always on; motion is reduced-motion safe.
   ========================================================================= */
#screen-start { position: relative; isolation: isolate; }
#screen-start::before {
  content: "";
  position: absolute; inset: -10% 0 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 30% at 16% 6%, rgba(200,150,42,0.18) 0%, transparent 60%),
    radial-gradient(46% 32% at 88% 12%, rgba(37,99,235,0.13) 0%, transparent 62%),
    radial-gradient(64% 40% at 50% 110%, rgba(27,58,92,0.10) 0%, transparent 60%);
}

#screen-start .brand { color: var(--color-navy); opacity: 0.72; }

#screen-start .hero-tag {
  background: linear-gradient(135deg, rgba(200,150,42,0.16), rgba(37,99,235,0.10));
  border-color: rgba(27,58,92,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* rank chips -> filled glowing medals (B gold / C teal match the result themes) */
#screen-start .rank-preview { gap: 10px; }
#screen-start .rank-chip {
  width: 54px; height: 54px;
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: filter 0.2s, box-shadow 0.2s;
}
#screen-start .rank-S { background: linear-gradient(150deg,#f2d27a,#c8962a); }
#screen-start .rank-A { background: linear-gradient(150deg,#8aa0b8,#56708c); }
#screen-start .rank-B { background: linear-gradient(150deg,#e8bb63,#b07a26); }
#screen-start .rank-C { background: linear-gradient(150deg,#5ba896,#2f7d6b); }
#screen-start .rank-D { background: linear-gradient(150deg,#9aa0c4,#5b5f86); }
#screen-start .rank-E { background: linear-gradient(150deg,#e88a8a,#b54a4a); }
#screen-start .rank-chip:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* CTA: pill, gradient, breathing glow, nudging arrow */
#screen-start #btn-start,
#screen-start #btn-start:hover:not(:disabled) {
  border-radius: 999px;
  /* !important needed: an earlier rule sets .btn-primary background navy !important */
  background: linear-gradient(135deg, #21476f 0%, #2f6db0 100%) !important;
  box-shadow: 0 10px 26px rgba(27,58,92,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing: 0.05em;
}
#screen-start #btn-start:hover:not(:disabled) {
  background: linear-gradient(135deg, #285a8c 0%, #3a7fc4 100%) !important;
  transform: translateY(-1px);
}
#screen-start #btn-start::after {
  content: "  \2192"; display: inline-block; transition: transform 0.2s;
}
#screen-start #btn-start:hover::after { transform: translateX(5px); }

/* meta -> subtle pills */
#screen-start .meta { gap: 10px; }
#screen-start .meta-item {
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--color-text-soft);
  box-shadow: var(--shadow-sm);
}

#screen-start .value-icon { background: linear-gradient(150deg,#2f6db0,#1b3a5c); }

@media (prefers-reduced-motion: no-preference) {
  #screen-start.active .brand,
  #screen-start.active .hero-title,
  #screen-start.active .hero-lead,
  #screen-start.active .rank-preview,
  #screen-start.active .type-preview,
  #screen-start.active #btn-start,
  #screen-start.active .meta,
  #screen-start.active .value-list { animation: ss-rise 0.6s both; }
  #screen-start.active .brand        { animation-delay: 0.02s; }
  #screen-start.active .hero-title   { animation-delay: 0.10s; }
  #screen-start.active .hero-lead    { animation-delay: 0.20s; }
  #screen-start.active .rank-preview { animation-delay: 0.30s; }
  #screen-start.active .type-preview { animation-delay: 0.40s; }
  #screen-start.active #btn-start    { animation-delay: 0.48s; }
  #screen-start.active .meta         { animation-delay: 0.58s; }
  #screen-start.active .value-list   { animation-delay: 0.66s; }

  #screen-start::before { animation: ss-drift 16s ease-in-out infinite alternate; }
  #screen-start #btn-start { animation: ss-rise 0.6s 0.48s both, ss-breathe 2.8s 1.1s ease-in-out infinite; }
}

@keyframes ss-rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ss-breathe {
  0%, 100% { box-shadow: 0 10px 26px rgba(27,58,92,0.34), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 12px 36px rgba(47,109,176,0.52), inset 0 1px 0 rgba(255,255,255,0.18); }
}
@keyframes ss-drift  { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-14px,0) scale(1.05); } }
/* =========================================================================
   START SCREEN v2 — GAME-SHOW / ARENA. Dark stage, spotlights, a glowing
   rank ladder, a big gold "challenge" button. Scoped to #screen-start so the
   rest of the app (light) is untouched. Supersedes the earlier glow-up block.
   ========================================================================= */
#screen-start {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f6efe0;
  background:
    radial-gradient(125% 75% at 50% -12%, #2c2213 0%, transparent 55%),
    radial-gradient(95% 60% at 50% 118%, #241a0d 0%, transparent 55%),
    #0d0b08;
}
/* spotlights */
#screen-start::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(36% 30% at 50% 4%, rgba(244,182,63,0.34), transparent 70%),
    radial-gradient(42% 52% at 10% 58%, rgba(56,123,196,0.16), transparent 72%),
    radial-gradient(42% 52% at 90% 62%, rgba(214,84,64,0.14), transparent 72%);
}
/* film grain so the dark isn't a flat sheet */
#screen-start::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#screen-start .container { padding-top: 64px; padding-bottom: 72px; }

#screen-start .brand { color: rgba(246,239,224,0.66); letter-spacing: 4px; }

/* eyebrow -> arena title plate */
#screen-start .hero-tag {
  background: rgba(244,182,63,0.08) !important;
  border: 1px solid rgba(244,182,63,0.42) !important;
  border-radius: 6px !important;
  color: #f4c45f !important;
  letter-spacing: 3px;
  font-size: 12px;
  text-transform: none;
  box-shadow: none;
}

/* headline -> sharp heavy gothic */
#screen-start .hero-main {
  font-family: "Zen Kaku Gothic New", var(--font-jp);
  font-weight: 900;
  font-size: clamp(38px, 8vw, 66px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #f7f1e4 !important;
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
}
#screen-start .hero-accent { color: #f4b63f; }

#screen-start .hero-lead {
  color: rgba(246,239,224,0.82);
  font-size: 16px;
}
#screen-start .hero-lead strong { color: #f4c45f; }

/* ===== the rank ladder (hero moment) ===== */
#screen-start .rank-preview { gap: 12px; margin-bottom: 28px; }
#screen-start .rank-chip {
  width: clamp(46px, 13vw, 62px);
  height: clamp(52px, 15vw, 70px);
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.14) !important;
  font-family: "Anton", var(--font-en);
  font-weight: 400;
  font-size: clamp(26px, 6.6vw, 36px);
  color: #fff !important;
  position: relative;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#screen-start .rank-chip span { transform: translateY(0); }
#screen-start .rank-S { background: linear-gradient(180deg,#3a2e10 0%,#1c1608 100%); color: #ffd766 !important; box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,102,0.5), inset 0 0 0 1px rgba(255,215,102,0.28); }
#screen-start .rank-A { background: linear-gradient(180deg,#22303f 0%,#10171f 100%); color: #acc4dc !important; box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(172,196,220,0.45), inset 0 0 0 1px rgba(172,196,220,0.24); }
#screen-start .rank-B { background: linear-gradient(180deg,#352713 0%,#1a1308 100%); color: #f0bf6a !important; box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(240,191,106,0.45), inset 0 0 0 1px rgba(240,191,106,0.26); }
#screen-start .rank-C { background: linear-gradient(180deg,#12342c 0%,#0a1b16 100%); color: #5fc4ab !important; box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(95,196,171,0.45), inset 0 0 0 1px rgba(95,196,171,0.26); }
#screen-start .rank-D { background: linear-gradient(180deg,#272a3e 0%,#13141f 100%); color: #aeb2dc !important; box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(174,178,220,0.42), inset 0 0 0 1px rgba(174,178,220,0.24); }
#screen-start .rank-E { background: linear-gradient(180deg,#3a1d1d 0%,#1c0d0d 100%); color: #f08a87 !important; box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(240,138,135,0.42), inset 0 0 0 1px rgba(240,138,135,0.26); }
#screen-start .rank-chip:hover { transform: translateY(-6px); filter: brightness(1.12); box-shadow: 0 14px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2); }

#screen-start .type-preview {
  color: rgba(246,239,224,0.72);
  margin-top: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#screen-start .type-preview strong { color: #f4c45f; }

/* ===== challenge button ===== */
#screen-start #btn-start,
#screen-start #btn-start:hover:not(:disabled) {
  font-family: "Zen Kaku Gothic New", var(--font-jp);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: #2a1c05 !important;
  border-radius: 10px;
  padding: 19px 58px;
  background: linear-gradient(135deg, #ffd166 0%, #e0991c 100%) !important;
  box-shadow: 0 14px 34px rgba(224,153,28,0.42), inset 0 1px 0 rgba(255,255,255,0.6);
  animation: none;
}
#screen-start #btn-start::after { content: "" !important; }
#screen-start #btn-start::before {
  content: "\25B6  "; font-size: 14px; vertical-align: middle;
}
#screen-start #btn-start:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 42px rgba(224,153,28,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ===== meta stats ===== */
#screen-start .meta { gap: 12px; margin-top: 28px; }
#screen-start .meta-item {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(246,239,224,0.18) !important;
  color: rgba(246,239,224,0.86) !important;
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: none !important;
}

/* ===== value list (dark) ===== */
#screen-start .value-list { border-top-color: rgba(246,239,224,0.14); }
#screen-start .value-item strong { color: #f6efe0; }
#screen-start .value-item p { color: rgba(246,239,224,0.66); }
#screen-start .value-icon { background: linear-gradient(150deg,#ffd166,#d8961f); color: #2a1c05; }

/* ===== motion ===== */
@media (prefers-reduced-motion: no-preference) {
  #screen-start .rank-chip { animation: arena-pop 0.5s backwards, arena-glow 3.6s ease-in-out infinite; }
  #screen-start.active .rank-chip:nth-child(1){ animation-delay: 0.30s, 1s; }
  #screen-start.active .rank-chip:nth-child(2){ animation-delay: 0.37s, 1.2s; }
  #screen-start.active .rank-chip:nth-child(3){ animation-delay: 0.44s, 1.4s; }
  #screen-start.active .rank-chip:nth-child(4){ animation-delay: 0.51s, 1.6s; }
  #screen-start.active .rank-chip:nth-child(5){ animation-delay: 0.58s, 1.8s; }
  #screen-start.active .rank-chip:nth-child(6){ animation-delay: 0.65s, 2s; }
  #screen-start #btn-start { animation: ss-rise 0.6s 0.5s both, arena-cta 2.6s 1.2s ease-in-out infinite !important; }
}
@keyframes arena-pop  { from { opacity:0; transform: translateY(18px) scale(0.8); } to { opacity:1; transform: none; } }
@keyframes arena-glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes arena-cta  {
  0%,100% { box-shadow: 0 14px 34px rgba(224,153,28,0.46), inset 0 1px 0 rgba(255,255,255,0.6); }
  50%     { box-shadow: 0 16px 46px rgba(255,200,90,0.72), inset 0 1px 0 rgba(255,255,255,0.6); }
}
/* =========================================================================
   START SCREEN v4 — NEAR-FUTURE / HUD. Deep blue-black + amber instrument
   readout, blueprint grid, corner brackets, tick baseline, scan sweep.
   Deliberately avoids the cyan-glow / purple-gradient AI cliche.
   Supersedes the arena block. Scoped to #screen-start.
   ========================================================================= */
#screen-start {
  background:
    radial-gradient(56% 38% at 50% -6%, rgba(245,182,63,0.10), transparent 62%),
    linear-gradient(180deg, #080b12 0%, #05070c 100%) !important;
  color: #e7edf5;
}
/* blueprint grid, faded toward edges */
#screen-start::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(110,150,190,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,150,190,0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(125% 78% at 50% 24%, #000 42%, transparent 84%);
          mask: radial-gradient(125% 78% at 50% 24%, #000 42%, transparent 84%);
}
/* scanning light sweep */
#screen-start::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(245,182,63,0.12), transparent 75%);
}

/* HUD corner brackets framing the hero column */
#screen-start .container::before,
#screen-start .container::after {
  content: ""; position: absolute; width: 38px; height: 38px;
  border-color: rgba(245,182,63,0.45); border-style: solid; pointer-events: none;
}
#screen-start .container::before { top: 22px; left: 16px; border-width: 2px 0 0 2px; }
#screen-start .container::after  { bottom: 22px; right: 16px; border-width: 0 2px 2px 0; }

/* technical eyebrow plate */
#screen-start .hero-tag {
  background: rgba(245,182,63,0.07) !important;
  border: 1px solid rgba(245,182,63,0.38) !important;
  border-radius: 2px !important;
  color: #f3c463 !important;
  letter-spacing: 3px; font-size: 11px; text-transform: none;
  box-shadow: none;
}
/* (start hero-tag "//" prefix removed per request) */

#screen-start .hero-main { color: #eef3f9 !important; }
#screen-start .hero-accent { color: #f5b63f; }
#screen-start .hero-lead { color: rgba(231,237,245,0.78); }
#screen-start .hero-lead strong { color: #f5b63f; }
#screen-start .brand { color: rgba(180,200,225,0.55); }

/* rank ladder as an instrument readout */
#screen-start .rank-preview { position: relative; gap: 14px; margin-top: 8px; margin-bottom: 40px; }
#screen-start .rank-preview::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 1px; z-index: -1;
  background:
    linear-gradient(90deg, transparent, rgba(110,150,190,0.35) 12%, rgba(110,150,190,0.35) 88%, transparent),
    repeating-linear-gradient(90deg, rgba(110,150,190,0.0) 0 22px, rgba(110,150,190,0.4) 22px 23px);
}
#screen-start .rank-chip {
  border-radius: 3px;
  border: 1px solid rgba(120,160,200,0.28) !important;
  overflow: visible;
}
#screen-start .rank-chip::before {
  position: absolute; top: -15px; left: 0; right: 0; text-align: center;
  font-family: "Anton", sans-serif; font-size: 10px; letter-spacing: 2px;
  color: rgba(150,180,210,0.5);
}
#screen-start .rank-S::before { content: "01"; }
#screen-start .rank-A::before { content: "02"; }
#screen-start .rank-B::before { content: "03"; }
#screen-start .rank-C::before { content: "04"; }
#screen-start .rank-D::before { content: "05"; }
#screen-start .rank-E::before { content: "06"; }

#screen-start .type-preview { color: rgba(180,200,225,0.6); }
#screen-start .type-preview strong { color: #f5b63f; }

/* angular amber CTA (notched corner) */
#screen-start #btn-start,
#screen-start #btn-start:hover:not(:disabled) {
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
  background: linear-gradient(135deg, #ffce5e 0%, #e5971a 100%) !important;
  color: #1a1205 !important;
  box-shadow: 0 0 0 1px rgba(245,182,63,0.5), 0 14px 38px rgba(229,151,26,0.34);
}

/* meta -> HUD readout with hairline separators */
#screen-start .meta { gap: 0; margin-top: 34px; border-top: 1px solid rgba(120,160,200,0.16); border-bottom: 1px solid rgba(120,160,200,0.16); padding: 12px 0; }
#screen-start .meta-item {
  background: transparent !important; border: none !important;
  border-radius: 0; box-shadow: none !important;
  color: rgba(231,237,245,0.82) !important;
  padding: 2px 22px; position: relative; font-size: 12px; letter-spacing: 1px;
}
#screen-start .meta-item + .meta-item::before {
  content: ""; position: absolute; left: 0; top: 10%; height: 80%; width: 1px;
  background: rgba(120,160,200,0.22);
}

/* value icons -> sharp amber */
#screen-start .value-icon { background: transparent; border: 1px solid rgba(245,182,63,0.6); color: #f5b63f; border-radius: 2px; }
#screen-start .value-list { border-top-color: rgba(120,160,200,0.16); }
#screen-start .value-item strong { color: #eef3f9; }
#screen-start .value-item p { color: rgba(231,237,245,0.6); }
/* =========================================================================
   QUIZ SCREEN — NEAR-FUTURE "OS SCAN". Dark instrument panel, a sticky top
   progress bar that fills + segments as you answer (gamified progression),
   amber HUD accents. Original work; genre conventions only. Scoped #screen-quiz.
   ========================================================================= */
#screen-quiz {
  position: relative;
  color: #e7edf5;
  background:
    radial-gradient(60% 26% at 50% 0%, rgba(245,182,63,0.06), transparent 62%),
    linear-gradient(180deg, #080b12 0%, #05070c 100%) !important;
}
#screen-quiz::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(110,150,190,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,150,190,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 60%);
          mask: linear-gradient(180deg, #000 0%, transparent 60%);
}
#screen-quiz .container { position: relative; z-index: 1; }

/* sticky OS scan bar */
#screen-quiz .quiz-header {
  position: sticky; top: 0; z-index: 30;
  margin: -56px -24px 34px; padding: 18px 24px 14px;
  background: linear-gradient(180deg, rgba(7,9,15,0.97) 60%, rgba(7,9,15,0.78));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(120,160,200,0.18);
}
#screen-quiz .progress-info { color: rgba(180,200,225,0.7); letter-spacing: 1px; margin-bottom: 12px; }
#screen-quiz #quiz-progress-text {
  font-family: "Anton", sans-serif; font-size: 16px; letter-spacing: 2px; color: #eef3f9;
}
#screen-quiz #quiz-progress-text::before { content: "SCAN  "; color: #f3c463; font-size: 11px; letter-spacing: 3px; }
#screen-quiz .part-tag {
  background: rgba(245,182,63,0.08); color: #f3c463; border-radius: 2px;
  font-family: var(--font-jp); font-weight: 700;
}
/* (quiz part-tag "//" prefix removed — read as a stray mark) */

#screen-quiz .progress-bar-wrap {
  height: 8px; border-radius: 0; overflow: visible;
  background-color: rgba(120,160,200,0.12);
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(6.6667% - 1.5px),
    rgba(7,9,15,0.9) calc(6.6667% - 1.5px), rgba(7,9,15,0.9) 6.6667%);
  box-shadow: inset 0 0 0 1px rgba(120,160,200,0.16);
}
#screen-quiz .progress-bar {
  border-radius: 0;
  background: linear-gradient(90deg, #e5971a, #ffce5e);
  box-shadow: 0 0 14px rgba(245,182,63,0.55);
  position: relative;
}
/* scanner head at the leading edge */
#screen-quiz .progress-bar::after {
  content: ""; position: absolute; right: -1px; top: -3px; bottom: -3px; width: 2px;
  background: #fff3d2; box-shadow: 0 0 12px 2px rgba(255,206,94,0.85);
}
#screen-quiz .quiz-header::after {
  content: "ANALYZING AI UTILIZATION"; display: block; margin-top: 8px;
  font-family: "Anton", sans-serif; font-size: 9px; letter-spacing: 3px;
  color: rgba(180,200,225,0.38); text-align: right;
}

/* encourage -> technical note (no side stripe) */
#screen-quiz .quiz-encourage {
  background: rgba(245,182,63,0.06) !important;
  border: 1px solid rgba(245,182,63,0.28) !important;
  border-radius: 2px !important;
  color: #f3c463 !important;
}

/* question + options */
#screen-quiz .question-text { color: #eef3f9; }
#screen-quiz .question-hint { color: rgba(180,200,225,0.6); }
#screen-quiz .option {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(120,160,200,0.2) !important;
  border-radius: 4px !important;
  color: rgba(231,237,245,0.86) !important;
  box-shadow: none !important;
}
#screen-quiz .option:hover {
  border-color: rgba(245,182,63,0.6) !important;
  background: rgba(245,182,63,0.05) !important;
  color: #ffffff !important;
  transform: translateX(3px);
}
#screen-quiz .option.selected {
  border-color: #f5b63f !important;
  background: rgba(245,182,63,0.1) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(245,182,63,0.5), 0 0 20px rgba(245,182,63,0.16) !important;
}
#screen-quiz .option-marker { border-color: rgba(120,160,200,0.4); border-radius: 3px; }
#screen-quiz .option.selected .option-marker { border-color: #f5b63f; background: #f5b63f; }
#screen-quiz .option.selected .option-marker::after { background: #1a1205; }

/* footer buttons */
#screen-quiz .btn-secondary {
  background: transparent; border: 1px solid rgba(120,160,200,0.3); color: rgba(231,237,245,0.8);
}
#screen-quiz .btn-secondary:hover:not(:disabled) { border-color: #f5b63f; color: #fff; }
#screen-quiz #btn-next {
  background: linear-gradient(135deg, #ffce5e, #e5971a) !important;
  color: #1a1205 !important; border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  box-shadow: 0 0 0 1px rgba(245,182,63,0.5);
}
/* =========================================================================
   START SCREEN v5 — "OS broadcast" flavor. Genre conventions only (dark OS
   shell, top status bar, vertical side rails, chromatic headline). All copy
   is original. Supersedes earlier start blocks. Scoped #screen-start.
   ========================================================================= */
#screen-start {
  background:
    radial-gradient(78% 46% at 50% 44%, rgba(255,255,255,0.045), transparent 72%),
    #060607 !important;
}
/* faint horizontal broadcast band behind the headline */
#screen-start::before {
  background-image: linear-gradient(180deg, transparent 30%, rgba(255,255,255,0.028) 41%, rgba(255,255,255,0.028) 60%, transparent 71%) !important;
  background-size: auto !important;
  -webkit-mask: none !important; mask: none !important;
}
#screen-start::after { display: none !important; }
#screen-start .brand { display: none; }
#screen-start .container { padding-top: 100px; position: relative; z-index: 2; }
/* corner brackets -> thin white */
#screen-start .container::before,
#screen-start .container::after { border-color: rgba(255,255,255,0.4) !important; }

/* top broadcast bar */
.hud-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 20px; font-family: var(--font-en);
  font-size: 11px; letter-spacing: 1.5px; color: rgba(232,238,245,0.58);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hud-bar-l { white-space: nowrap; }
.hud-bar-r { text-align: right; white-space: nowrap; }
.hud-bar-c {
  text-align: center; white-space: nowrap;
  color: rgba(232,238,245,0.46);
}
/* center group only when there's room for it */
@media (max-width: 1180px) {
  .hud-bar-c { display: none; }
}
.hud-sep { opacity: 0.42; margin: 0 8px; }
/* signal strength bars in center group */
.hud-signal {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 9px; margin-left: 7px; vertical-align: middle;
}
.hud-signal b {
  display: block; width: 2px; background: rgba(245,182,63,0.85);
  box-shadow: 0 0 5px rgba(245,182,63,0.55);
  animation: hud-signal-pulse 1.8s ease-in-out infinite;
}
.hud-signal b:nth-child(1) { height: 3px; animation-delay: 0s; }
.hud-signal b:nth-child(2) { height: 5px; animation-delay: 0.18s; }
.hud-signal b:nth-child(3) { height: 7px; animation-delay: 0.36s; }
.hud-signal b:nth-child(4) { height: 9px; animation-delay: 0.54s; }
@keyframes hud-signal-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.hud-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #f5b63f; box-shadow: 0 0 9px #f5b63f; margin-right: 9px; vertical-align: middle;
}
#hud-clock { color: rgba(232,238,245,0.82); }

/* vertical side rails */
.hud-rail {
  position: absolute; top: 50%; z-index: 15; writing-mode: vertical-rl;
  font-family: var(--font-en); font-size: 10px; letter-spacing: 5px;
  color: rgba(232,238,245,0.3); white-space: nowrap; pointer-events: none;
}
.hud-rail-l { left: 13px; transform: translateY(-50%) rotate(180deg); }
.hud-rail-r { right: 13px; transform: translateY(-50%); }

/* headline: white with chromatic offset (glitch / 3D extrude) */
#screen-start .hero-main {
  color: #f3f6fb !important;
  text-shadow:
    2px 0 0 rgba(92,140,255,0.42),
    -2px 0 0 rgba(255,108,68,0.34),
    5px 7px 0 rgba(0,0,0,0.62);
}
#screen-start .hero-accent {
  color: #f5b63f;
  text-shadow: 5px 7px 0 rgba(0,0,0,0.6);
}
/* italic latin sub-tagline */
#screen-start .hero-sub {
  display: block; margin-top: 12px;
  font-family: var(--font-en); font-style: italic; font-weight: 700;
  font-size: clamp(15px, 2.6vw, 22px); letter-spacing: 0.06em;
  color: rgba(232,238,245,0.6);
}

@media (max-width: 560px) {
  .hud-bar { font-size: 9px; letter-spacing: 1px; padding: 10px 14px; }
  .hud-bar-l, .hud-bar-r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-bar-c { display: none; }
  .hud-rail { display: none; }
}
/* =========================================================================
   START SCREEN v6 — MONOCHROME. Black / white only, with the same font
   FAMILIES the reference uses (Noto Sans JP 900 display, Bebas Neue Latin
   display, JetBrains Mono technical labels). Copy is original. Supersedes
   earlier accent colors on #screen-start.
   ========================================================================= */
#screen-start {
  background:
    radial-gradient(78% 46% at 50% 44%, rgba(255,255,255,0.045), transparent 72%),
    #050507 !important;
}

/* --- type --- */
#screen-start .hero-main,
#screen-start .hero-main .hero-accent {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 900 !important;
  color: #f2f4f8 !important;
}
#screen-start .hero-main {
  letter-spacing: 0.005em;
  text-shadow:
    2px 0 0 rgba(96,142,255,0.36),
    -2px 0 0 rgba(255,96,72,0.30),
    5px 7px 0 rgba(0,0,0,0.6) !important;
}
#screen-start .hero-accent { text-shadow: 5px 7px 0 rgba(0,0,0,0.6) !important; }
#screen-start .hero-sub {
  font-family: "Bebas Neue", sans-serif !important;
  font-style: normal !important; font-weight: 400 !important;
  letter-spacing: 0.16em !important; font-size: clamp(19px, 3.2vw, 28px) !important;
  color: rgba(232,234,238,0.55) !important;
}

/* technical labels in mono */
.hud-bar, #hud-clock, .hud-rail,
#screen-start .meta, #screen-start .meta-item,
#screen-start .rank-chip::before,
#screen-start .hero-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}
#screen-start .hero-tag {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  color: rgba(232,234,238,0.82) !important;
  border-radius: 0 !important; letter-spacing: 2px; font-size: 11px;
}
.hud-live { background: #e8eaee !important; box-shadow: 0 0 8px rgba(232,234,238,0.7) !important; }
#hud-clock { color: rgba(232,234,238,0.85) !important; }

/* --- monochrome rank ladder: brightness implies hierarchy --- */
#screen-start .rank-chip {
  background: #0c0d11 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
  font-family: "Bebas Neue", sans-serif !important;
  border-radius: 2px !important;
}
#screen-start .rank-S { color: #ffffff !important; }
#screen-start .rank-A { color: #dde1e8 !important; }
#screen-start .rank-B { color: #c0c5ce !important; }
#screen-start .rank-C { color: #a1a7b1 !important; }
#screen-start .rank-D { color: #828893 !important; }
#screen-start .rank-E { color: #656b75 !important; }
#screen-start .rank-chip::before { color: rgba(232,234,238,0.32) !important; }
#screen-start .rank-chip:hover {
  border-color: rgba(255,255,255,0.55) !important;
  filter: none !important; transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.6) !important;
}

#screen-start .type-preview { color: rgba(232,234,238,0.5) !important; }
#screen-start .type-preview strong { color: #f2f4f8 !important; }

/* --- CTA: solid white, black text, notched --- */
#screen-start #btn-start,
#screen-start #btn-start:hover:not(:disabled) {
  font-family: "Noto Sans JP", sans-serif !important; font-weight: 900 !important;
  background: #f2f4f8 !important; color: #0a0a0c !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22) !important;
}
#screen-start #btn-start:hover:not(:disabled) { background: #ffffff !important; transform: translateY(-2px); }

/* value list monochrome */
#screen-start .value-icon { background: transparent !important; border: 1px solid rgba(255,255,255,0.5) !important; color: #e8eaee !important; border-radius: 0; }
#screen-start .meta-item { color: rgba(232,234,238,0.78) !important; }
/* =========================================================================
   START SCREEN v7 — match the reference headline rendering + a monochrome
   "gorgeousness descends S->E" rank ladder.
   The reference headline stack is Latin-display-first, so Japanese falls back
   to the OS default gothic. We mirror that exactly so JP renders identically
   on the same machine. Copy stays original.
   ========================================================================= */
#screen-start .hero-main,
#screen-start .hero-main .hero-accent {
  font-family: "Bebas Neue", "Anybody", sans-serif !important;
  font-weight: 900 !important;
}

/* --- rank ladder: S = most gorgeous (platinum sheen + glow), fading to E = flat --- */
#screen-start .rank-chip { border-radius: 2px !important; font-family: "Bebas Neue", sans-serif !important; }

#screen-start .rank-S {
  background: linear-gradient(180deg, #4c505a 0%, #2b2e35 42%, #161719 100%) !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  color: #ffffff !important;
  box-shadow: 0 0 28px rgba(255,255,255,0.22), 0 8px 22px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.75) !important;
}
#screen-start .rank-A {
  background: linear-gradient(180deg, #393c44 0%, #1f2126 60%, #131418 100%) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: #e6e9ef !important;
  box-shadow: 0 0 16px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.46) !important;
}
#screen-start .rank-B {
  background: linear-gradient(180deg, #2a2c32 0%, #16171b 100%) !important;
  border: 1px solid rgba(255,255,255,0.27) !important;
  color: #c5cad2 !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.26) !important;
}
#screen-start .rank-C {
  background: linear-gradient(180deg, #1d1e23 0%, #121316 100%) !important;
  border: 1px solid rgba(255,255,255,0.17) !important;
  color: #a1a7b0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
#screen-start .rank-D {
  background: #131419 !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  color: #7d838f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
#screen-start .rank-E {
  background: #0b0c0f !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #595f69 !important;
  box-shadow: none !important;
}
#screen-start .rank-chip:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-6px) !important;
}
/* =========================================================================
   START SCREEN v8 — stage spotlight + smoke behind each rank letter.
   Two crossing beams + a glowing smoke pool, monochrome. Intensity (--lux)
   fades S->E so the "spotlit / gorgeous" feel descends with the rank.
   ::before = backdrop (behind letter), ::after = the 01-06 index.
   ========================================================================= */
#screen-start .rank-chip { position: relative; }
#screen-start .rank-chip > span { position: relative; z-index: 2; }

/* spotlight + smoke backdrop (repurposes ::before; sits behind the letter) */
#screen-start .rank-chip::before {
  content: "" !important;
  position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important;
  z-index: 1 !important; pointer-events: none; border-radius: inherit;
  text-align: initial;
  background:
    radial-gradient(78% 56% at 50% 102%,
      rgba(255,255,255, calc(0.6 * var(--lux,0.4))) 0%,
      rgba(255,255,255, calc(0.16 * var(--lux,0.4))) 34%,
      transparent 72%),
    linear-gradient(123deg, transparent 40%,
      rgba(255,255,255, calc(0.36 * var(--lux,0.4))) 47%, transparent 53%),
    linear-gradient(237deg, transparent 40%,
      rgba(255,255,255, calc(0.36 * var(--lux,0.4))) 47%, transparent 53%);
}

/* 01-06 index moves to ::after (above the tile) */
#screen-start .rank-chip::after {
  position: absolute; top: -15px; left: 0; right: 0; text-align: center; z-index: 3;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 2px;
  color: rgba(232,234,238,0.32);
}
#screen-start .rank-S::after { content: "01"; }
#screen-start .rank-A::after { content: "02"; }
#screen-start .rank-B::after { content: "03"; }
#screen-start .rank-C::after { content: "04"; }
#screen-start .rank-D::after { content: "05"; }
#screen-start .rank-E::after { content: "06"; }

/* spotlight intensity fades with rank */
#screen-start .rank-S { --lux: 1; }
#screen-start .rank-A { --lux: 0.72; }
#screen-start .rank-B { --lux: 0.5; }
#screen-start .rank-C { --lux: 0.34; }
#screen-start .rank-D { --lux: 0.2; }
#screen-start .rank-E { --lux: 0.1; }
/* =========================================================================
   START SCREEN v9 — real volumetric FOG behind each rank letter (replaces the
   beam backdrop). Fractal-noise smoke, lit from above, billowing from the
   lower-middle, screen-blended so it glows on the dark tile. --lux fades S->E.
   ========================================================================= */
#screen-start .rank-chip::before {
  content: "" !important;
  position: absolute !important; inset: 0 !important; z-index: 1 !important;
  border-radius: inherit; pointer-events: none;
  opacity: var(--lux, 0.4);
  mix-blend-mode: screen;
  background:
    radial-gradient(56% 40% at 50% 20%, rgba(255,255,255,0.20), transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.25 -0.42'/%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")
      center 74% / 180% 180% no-repeat;
  -webkit-mask: radial-gradient(130% 95% at 50% 88%, #000 0%, #000 48%, transparent 90%);
          mask: radial-gradient(130% 95% at 50% 88%, #000 0%, #000 48%, transparent 90%);
}
/* =========================================================================
   START SCREEN v10 — heavy-gothic headline with a solid 3D EXTRUDE shadow
   (stacked dark offsets) like a chunky stage title. Original copy.
   ========================================================================= */
#screen-start .hero-main {
  color: #f4f7fc !important;
  text-shadow:
    1px 0 0 rgba(120,160,255,0.22),
    -1px 0 0 rgba(255,120,90,0.20),
    1px 1px 0 #050507,
    2px 2px 0 #050507,
    3px 3px 0 #050507,
    4px 4px 0 #050507,
    5px 5px 0 #050507,
    6px 6px 0 #050507,
    7px 7px 0 rgba(5,5,7,0.92),
    10px 12px 18px rgba(0,0,0,0.5) !important;
}
#screen-start .hero-main .hero-accent {
  color: #f4f7fc !important;
  text-shadow:
    1px 1px 0 #050507,
    2px 2px 0 #050507,
    3px 3px 0 #050507,
    4px 4px 0 #050507,
    5px 5px 0 #050507,
    6px 6px 0 #050507,
    7px 7px 0 rgba(5,5,7,0.92),
    10px 12px 18px rgba(0,0,0,0.5) !important;
}
/* =========================================================================
   START SCREEN v11 — make the headline edgier: forward slant + tighter
   tracking + a crisper extrude. (Original copy.)
   ========================================================================= */
#screen-start .hero-title { overflow: visible; text-align: center; }
#screen-start .hero-main {
  transform: skewX(-9deg);
  transform-origin: center center;
  letter-spacing: -0.035em !important;
  display: block;
  text-align: center;
}
#screen-start .hero-main .hero-accent { display: inline; }
#screen-start .hero-main {
  text-shadow:
    1px 0 0 rgba(120,160,255,0.24),
    -1px 0 0 rgba(255,110,80,0.22),
    1px 1px 0 #050507,
    2px 2px 0 #050507,
    3px 3px 0 #050507,
    4px 4px 0 #050507,
    5px 5px 0 #050507,
    6px 6px 0 #050507,
    7px 7px 0 #050507,
    8px 9px 10px rgba(0,0,0,0.55) !important;
}
/* =========================================================================
   PC-WORK screen — minimize cursor travel:
   bigger hit targets + an always-reachable sticky action bar so the "next"
   button is never a long trip after selecting.
   ========================================================================= */
#screen-pc-work .pc-task-options {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}
#screen-pc-work .pc-task-chip {
  min-height: 56px;
  padding: 12px 18px;
  font-size: 14.5px;
}
#screen-pc-work .profile-footer {
  position: sticky;
  bottom: 0;
  margin-top: 28px;
  padding: 14px 0 20px;
  background: linear-gradient(180deg, rgba(247,246,242,0) 0%, var(--color-bg) 36%);
  z-index: 20;
}
#screen-pc-work .profile-footer .btn { max-width: none; min-height: 52px; font-size: 16px; }
/* =========================================================================
   PROFILE + PC-WORK — monochrome OS shell to match the start screen.
   ========================================================================= */
#screen-profile, #screen-pc-work {
  background:
    radial-gradient(82% 50% at 50% 0%, rgba(255,255,255,0.03), transparent 62%),
    #060607 !important;
  color: #e7edf5;
}
#screen-profile .profile-title, #screen-pc-work .profile-title { color: #f2f4f8; }
#screen-profile .profile-lead, #screen-pc-work .profile-lead { color: rgba(231,237,245,0.66); }
#screen-profile .profile-lead strong, #screen-pc-work .profile-lead strong { color: #f2f4f8; }
#screen-profile .profile-label, #screen-pc-work .profile-label { color: #e7edf5; }
#screen-pc-work .pc-task-note { color: rgba(231,237,245,0.55); }

/* step indicator */
#screen-profile .step, #screen-pc-work .step {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.16);
  color: rgba(231,237,245,0.62); border-radius: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
#screen-profile .step small, #screen-pc-work .step small { color: rgba(231,237,245,0.5); font-family: var(--font-jp); }
#screen-profile .step.active, #screen-pc-work .step.active { background: #f2f4f8; border-color: #f2f4f8; color: #0a0a0c; }
#screen-profile .step.active small, #screen-pc-work .step.active small { color: rgba(10,10,12,0.8); }
#screen-profile .step-divider, #screen-pc-work .step-divider { background: rgba(255,255,255,0.18); }

/* selectable chips */
#screen-profile .profile-chip, #screen-pc-work .profile-chip {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(231,237,245,0.82) !important;
  border-radius: 6px;
}
#screen-profile .profile-chip:hover, #screen-pc-work .profile-chip:hover {
  border-color: rgba(255,255,255,0.5) !important; color: #ffffff !important;
}
#screen-profile .profile-chip.selected, #screen-pc-work .profile-chip.selected {
  background: #f2f4f8 !important; border-color: #f2f4f8 !important; color: #0a0a0c !important;
}

/* footer buttons */
#screen-profile .btn-secondary, #screen-pc-work .btn-secondary {
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: rgba(231,237,245,0.82);
}
#screen-profile .btn-secondary:hover:not(:disabled), #screen-pc-work .btn-secondary:hover:not(:disabled) { border-color: #fff; color: #fff; }
#screen-profile .btn-primary, #screen-pc-work .btn-primary { background: #f2f4f8 !important; color: #0a0a0c !important; }
#screen-profile .btn-primary:hover:not(:disabled), #screen-pc-work .btn-primary:hover:not(:disabled) { background: #ffffff !important; }
#screen-pc-work .profile-footer { background: linear-gradient(180deg, rgba(6,6,7,0) 0%, #060607 38%) !important; }

/* inputs / textarea / selects */
#screen-profile input, #screen-profile select, #screen-profile textarea,
#screen-pc-work input, #screen-pc-work textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #e7edf5 !important;
}
#screen-pc-work .pc-task-other { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.12) !important; }

/* =========================================================================
   QUIZ — recolor the amber HUD to monochrome so it matches the start screen.
   ========================================================================= */
#screen-quiz #quiz-progress-text { color: #eef3f9 !important; }
#screen-quiz #quiz-progress-text::before { color: rgba(231,237,245,0.6) !important; }
#screen-quiz .part-tag { background: rgba(255,255,255,0.06) !important; color: #e7edf5 !important; }
#screen-quiz .progress-bar {
  background: linear-gradient(90deg, #aeb4bd, #f2f4f8) !important;
  box-shadow: 0 0 12px rgba(255,255,255,0.3) !important;
}
#screen-quiz .progress-bar::after { background: #ffffff !important; box-shadow: 0 0 10px 2px rgba(255,255,255,0.7) !important; }
#screen-quiz .quiz-header::after { color: rgba(231,237,245,0.4) !important; }
#screen-quiz .quiz-encourage {
  background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(231,237,245,0.85) !important;
}
#screen-quiz .option:hover { border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.05) !important; }
#screen-quiz .option.selected {
  border-color: #f2f4f8 !important; background: rgba(255,255,255,0.1) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 18px rgba(255,255,255,0.12) !important;
}
#screen-quiz .option.selected .option-marker { border-color: #f2f4f8 !important; background: #f2f4f8 !important; }
#screen-quiz .option.selected .option-marker::after { background: #0a0a0c !important; }
#screen-quiz #btn-next { background: #f2f4f8 !important; color: #0a0a0c !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.3) !important; }
/* =========================================================================
   PROFILE + PC-WORK — design pass: blueprint grid, corner brackets, and
   technical section dividers so the form screens feel "designed" like start.
   ========================================================================= */
#screen-profile, #screen-pc-work { position: relative; overflow: hidden; }
#screen-profile::before, #screen-pc-work::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120,160,200,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,200,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(128% 80% at 50% 10%, #000 40%, transparent 86%);
          mask: radial-gradient(128% 80% at 50% 10%, #000 40%, transparent 86%);
}
#screen-profile .container, #screen-pc-work .container { position: relative; z-index: 1; }

/* corner brackets framing the content column */
#screen-profile .container::before, #screen-pc-work .container::before,
#screen-profile .container::after,  #screen-pc-work .container::after {
  content: ""; position: absolute; width: 34px; height: 34px;
  border-color: rgba(255,255,255,0.32); border-style: solid; pointer-events: none; z-index: 2;
}
#screen-profile .container::before, #screen-pc-work .container::before { top: 16px; left: 12px; border-width: 2px 0 0 2px; }
#screen-profile .container::after,  #screen-pc-work .container::after  { bottom: 16px; right: 12px; border-width: 0 2px 2px 0; }

/* heavier title */
#screen-profile .profile-title, #screen-pc-work .profile-title {
  font-weight: 900; letter-spacing: -0.01em;
}

/* group labels -> technical section dividers */
#screen-profile .profile-label, #screen-pc-work .profile-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: 1px; color: #e7edf5; font-weight: 700;
}
#screen-profile .profile-label::before, #screen-pc-work .profile-label::before {
  content: "▸"; color: rgba(231,237,245,0.45);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400;
}
#screen-profile .profile-label::after, #screen-pc-work .profile-label::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.12);
}

/* sharper chips with a hover nudge */
#screen-profile .profile-chip, #screen-pc-work .profile-chip {
  border-radius: 4px; transition: transform 0.14s, border-color 0.15s, background 0.15s, color 0.15s;
}
#screen-profile .profile-chip:hover, #screen-pc-work .profile-chip:hover { transform: translateY(-2px); }

/* step indicator: sharper, mono codes */
#screen-profile .step, #screen-pc-work .step { border-radius: 2px; }
/* =========================================================================
   RESULT — monochrome OS "scan report" to match the start screen.
   Dark shell + grid + brackets, dark panels w/ hairlines, light text,
   white rank letter with a faint rank-colored aura (keeps rank identity).
   ========================================================================= */
/* page bg -> near-black + blueprint grid (drop the colored rank mesh) */
body[data-rank] { background: #060607 !important; }
body[data-rank]::before {
  background-image:
    linear-gradient(rgba(120,160,200,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,200,0.05) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  background-color: #060607 !important;
  opacity: 1 !important;
}
body[data-rank]::after { display: none !important; }

/* corner brackets */
body[data-rank] #screen-result .container { position: relative; }
body[data-rank] #screen-result .container::before,
body[data-rank] #screen-result .container::after {
  content: ""; position: absolute; width: 34px; height: 34px;
  border-color: rgba(255,255,255,0.3); border-style: solid; pointer-events: none; z-index: 3;
}
body[data-rank] #screen-result .container::before { top: 14px; left: 12px; border-width: 2px 0 0 2px; }
body[data-rank] #screen-result .container::after  { bottom: 14px; right: 12px; border-width: 0 2px 2px 0; }

/* cards -> dark panels */
body[data-rank] #screen-result .result-hero,
body[data-rank] #screen-result .type-section,
body[data-rank] #screen-result .chart-section,
body[data-rank] #screen-result .distribution-section,
body[data-rank] #screen-result .next-step-card,
body[data-rank] #screen-result .cta-card,
body[data-rank] #screen-result .result-visual-card,
body[data-rank] #screen-result .type-card,
body[data-rank] #screen-result .action-plan {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body[data-rank] #screen-result .result-character {
  background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.16) !important;
}

/* light text (overrides the earlier dark-ink readability fix) */
body[data-rank] #screen-result .result-headline,
body[data-rank] #screen-result .result-rank-title,
body[data-rank] #screen-result .type-name,
body[data-rank] #screen-result h3,
body[data-rank] #screen-result .section-label,
body[data-rank] #screen-result .axis-name,
body[data-rank] #screen-result .axis-score-value,
body[data-rank] #screen-result .chart-legend,
body[data-rank] #screen-result .chart-legend strong,
body[data-rank] #screen-result .distribution-headline,
body[data-rank] #screen-result .distribution-headline strong,
body[data-rank] #screen-result .dist-rank,
body[data-rank] #screen-result .dist-pct,
body[data-rank] #screen-result .type-card-label,
body[data-rank] #screen-result .action-plan-label,
body[data-rank] #screen-result #type-action-plan,
body[data-rank] #screen-result .result-visual-card strong,
body[data-rank] #screen-result .cta-card h4,
body[data-rank] #screen-result .next-step-card p,
body[data-rank] #screen-result .cta-section h3 {
  color: #eef3f9 !important; -webkit-text-fill-color: #eef3f9 !important;
}
body[data-rank] #screen-result .result-tag,
body[data-rank] #screen-result .result-description,
body[data-rank] #screen-result .type-tagline,
body[data-rank] #screen-result .type-description,
body[data-rank] #screen-result .cta-card p,
body[data-rank] #screen-result .result-visual-card span {
  color: rgba(231,237,245,0.66) !important; -webkit-text-fill-color: rgba(231,237,245,0.66) !important;
}
body[data-rank] #screen-result .axis-pole-left,
body[data-rank] #screen-result .axis-pole-right,
body[data-rank] #screen-result .distribution-note {
  color: rgba(231,237,245,0.5) !important; -webkit-text-fill-color: rgba(231,237,245,0.5) !important;
}

/* technical labels in mono */
body[data-rank] #screen-result .section-label,
body[data-rank] #screen-result .action-plan-label,
body[data-rank] #screen-result .type-card-label,
body[data-rank] #screen-result .result-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 2px !important;
}

/* rank hero */
body[data-rank] #screen-result .rank-letter {
  font-family: "Bebas Neue", sans-serif !important;
  color: #f4f7fc !important; -webkit-text-fill-color: #f4f7fc !important;
  background: none !important;
  text-shadow:
    0 0 26px color-mix(in srgb, var(--rank-accent) 62%, transparent),
    0 0 72px color-mix(in srgb, var(--rank-accent) 32%, transparent) !important;
}
body[data-rank] #screen-result #result-score {
  font-family: "Bebas Neue", sans-serif !important; letter-spacing: 1px; color: #eef3f9 !important;
}

/* bars & markers -> monochrome */
body[data-rank] #screen-result .axis-bar-fill,
body[data-rank] #screen-result .dist-col-you .dist-bar,
body[data-rank] #screen-result .axis-bar-marker {
  background: #f2f4f8 !important; border-color: #f2f4f8 !important;
}
body[data-rank] #screen-result .dist-marker { background: #f2f4f8 !important; color: #0a0a0c !important; }
body[data-rank] #screen-result .dist-marker::after { background: #f2f4f8 !important; }
body[data-rank] #screen-result .mini-illust { background: rgba(255,255,255,0.06) !important; }
body[data-rank] #screen-result .mini-illust span { background: rgba(255,255,255,0.55) !important; }

/* CTA buttons -> white fill */
body[data-rank] #screen-result .btn-primary { background: #f2f4f8 !important; color: #0a0a0c !important; }
/* ----- result: remaining cream sub-elements -> dark / transparent ----- */
body[data-rank] #screen-result .axis-bars,
body[data-rank] #screen-result .type-grid,
body[data-rank] #screen-result .distribution-bars,
body[data-rank] #screen-result .chart-wrap,
body[data-rank] #screen-result .result-rank-display,
body[data-rank] #screen-result .result-rank-info,
body[data-rank] #screen-result .result-visual-strip,
body[data-rank] #screen-result .result-rank-title {
  background: transparent !important;
}
body[data-rank] #screen-result .result-profile-bar,
body[data-rank] #screen-result .pc-task-impact,
body[data-rank] #screen-result .pc-impact-summary {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 6px !important;
}
body[data-rank] #screen-result .profile-bar-chip,
body[data-rank] #screen-result .pc-impact-count {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
/* light text inside profile bar + impact section */
body[data-rank] #screen-result .result-profile-bar,
body[data-rank] #screen-result .result-profile-bar span,
body[data-rank] #screen-result .pc-task-impact,
body[data-rank] #screen-result .pc-task-impact h3,
body[data-rank] #screen-result .pc-task-impact h4,
body[data-rank] #screen-result .pc-task-impact p,
body[data-rank] #screen-result .pc-task-impact li,
body[data-rank] #screen-result .pc-task-impact span,
body[data-rank] #screen-result .pc-task-impact strong {
  color: #eef3f9 !important; -webkit-text-fill-color: #eef3f9 !important;
}
/* distribution / axis tracks */
body[data-rank] #screen-result .dist-bar,
body[data-rank] #screen-result .axis-bar-track { background: rgba(255,255,255,0.1) !important; }
/* secondary + share buttons -> dark outline */
body[data-rank] #screen-result .btn-secondary,
body[data-rank] #screen-result .btn-share {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #eef3f9 !important; -webkit-text-fill-color: #eef3f9 !important;
}
/* ----- result: beat the earlier dark-ink rules + remaining cream chips ----- */
body[data-rank] #screen-result .type-section h3,
body[data-rank] #screen-result .chart-section h3,
body[data-rank] #screen-result .distribution-section h3,
body[data-rank] #screen-result .next-step-card h3,
body[data-rank] #screen-result .cta-section h3,
body[data-rank] #screen-result .dist-col-you .dist-rank {
  color: #eef3f9 !important; -webkit-text-fill-color: #eef3f9 !important;
}
body[data-rank] #screen-result .pc-impact-mini-map,
body[data-rank] #screen-result .pc-impact-mini-map > *,
body[data-rank] #screen-result .pc-impact-mini-map span {
  background: rgba(255,255,255,0.06) !important;
  color: #eef3f9 !important; -webkit-text-fill-color: #eef3f9 !important;
  border-color: rgba(255,255,255,0.16) !important;
}
/* =========================================================================
   SHARE — make it inviting within the monochrome result. Resting state is
   mono with a small brand-colored dot cue; hover lights up in brand color.
   ========================================================================= */
body[data-rank] #screen-result .share-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px; padding: 30px 20px;
}
body[data-rank] #screen-result .share-section h3 { color: #eef3f9 !important; font-size: 18px; }
body[data-rank] #screen-result .share-lead { color: rgba(231,237,245,0.7) !important; font-size: 14px; }
body[data-rank] #screen-result .share-tag {
  color: #f4f7fc; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.5px;
}
body[data-rank] #screen-result .share-buttons { gap: 10px; }
body[data-rank] #screen-result .btn-share {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #eef3f9 !important; -webkit-text-fill-color: #eef3f9 !important;
  padding: 13px 18px !important; font-size: 13px !important; font-weight: 700 !important;
  border-radius: 8px !important; min-width: 116px;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
body[data-rank] #screen-result .btn-share::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 9px; vertical-align: middle; flex: none;
}
body[data-rank] #screen-result .btn-x::before { background: #ffffff; }
body[data-rank] #screen-result .btn-line::before { background: #06C755; }
body[data-rank] #screen-result .btn-fb::before { background: #1877F2; }
body[data-rank] #screen-result .btn-instagram::before { background: linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045); }
body[data-rank] #screen-result .btn-copy::before { background: #9aa0a8; }

body[data-rank] #screen-result .btn-x:hover { background: #000 !important; border-color: #fff !important; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.55); }
body[data-rank] #screen-result .btn-line:hover { background: #06C755 !important; border-color: #06C755 !important; color: #fff !important; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(6,199,85,0.42); }
body[data-rank] #screen-result .btn-fb:hover { background: #1877F2 !important; border-color: #1877F2 !important; color: #fff !important; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24,119,242,0.42); }
body[data-rank] #screen-result .btn-instagram:hover { background: linear-gradient(135deg,#833ab4,#fd1d1d 50%,#fcb045) !important; border-color: transparent !important; color: #fff !important; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(253,29,29,0.38); }
body[data-rank] #screen-result .btn-copy:hover { background: #f2f4f8 !important; color: #0a0a0c !important; border-color: #f2f4f8 !important; transform: translateY(-3px); }
body[data-rank] #screen-result .btn-x:hover::before,
body[data-rank] #screen-result .btn-copy:hover::before { display: none; }
/* =========================================================================
   RESULT aura + sparkles — same world as the OGP card. Gold aurora and
   a starfield behind the (monochrome) content; intensity set per rank by JS.
   ========================================================================= */
#res-aura-spark { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
body[data-rank] #res-aura-spark { display: block; }
#res-aura-spark .s { position: absolute; background: #fff7d6; border-radius: 50%; box-shadow: 0 0 8px rgba(255,210,92,0.8); }
/* rank letter glow keyed to gold gorgeousness (matches card) */
body[data-rank] #screen-result .rank-letter {
  color: #fff7d6 !important; -webkit-text-fill-color: #fff7d6 !important; background: none !important;
  text-shadow:
    0 0 var(--res-lglow, 40px) rgba(var(--res-glow-rgb, 255,210,92), var(--res-glow-alpha, 0.6)),
    0 0 18px rgba(255,255,255,0.22) !important;
}
/* Hide the unlabeled AI/data/tool mini-map; it read as decorative bars. */
.pc-impact-mini-map,
body[data-rank] #screen-result .pc-impact-mini-map {
  display: none !important;
}
.pc-impact-mini-map::before,
body[data-rank] #screen-result .pc-impact-mini-map::before {
  content: none !important;
  display: none !important;
}
/* =========================================================================
   Result readability + share polish (Codex 2026-06-02)
   ========================================================================= */
body[data-rank] #screen-result .pc-impact-detail-btn,
body[data-rank] #screen-result .pc-task-impact .pc-impact-detail-btn,
body[data-rank] #screen-result .pc-task-impact a.pc-impact-detail-btn,
body[data-rank] #screen-result .pc-task-impact button.pc-impact-detail-btn {
  background: linear-gradient(135deg, #f6f8fc 0%, #fff7d6 100%) !important;
  border: 1px solid rgba(255, 247, 214, 0.82) !important;
  color: #080a0f !important;
  -webkit-text-fill-color: #080a0f !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(255, 210, 92, 0.24) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
body[data-rank] #screen-result .pc-impact-detail-btn:hover,
body[data-rank] #screen-result .pc-task-impact .pc-impact-detail-btn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #ffe99a 100%) !important;
  border-color: rgba(255, 232, 150, 0.96) !important;
  color: #080a0f !important;
  -webkit-text-fill-color: #080a0f !important;
  transform: translateY(-2px);
}
body[data-rank] #screen-result .pc-impact-detail-btn *,
body[data-rank] #screen-result .pc-task-impact .pc-impact-detail-btn * {
  color: #080a0f !important;
  -webkit-text-fill-color: #080a0f !important;
  text-shadow: none !important;
}

body[data-rank] #screen-result .axis-bars {
  background: rgba(6, 6, 7, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  padding: 18px !important;
}
body[data-rank] #screen-result .axis-name,
body[data-rank] #screen-result .axis-score-value,
body[data-rank] #screen-result .chart-legend,
body[data-rank] #screen-result .chart-legend > div,
body[data-rank] #screen-result .chart-legend strong {
  color: #f6f8fc !important;
  -webkit-text-fill-color: #f6f8fc !important;
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.86) !important;
}
body[data-rank] #screen-result .axis-name,
body[data-rank] #screen-result .chart-legend > div {
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}
body[data-rank] #screen-result .axis-score-value,
body[data-rank] #screen-result .chart-legend strong {
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
}
body[data-rank] #screen-result .axis-pole-left,
body[data-rank] #screen-result .axis-pole-right {
  color: rgba(244, 247, 252, 0.76) !important;
  -webkit-text-fill-color: rgba(244, 247, 252, 0.76) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
}
body[data-rank] #screen-result .axis-bar-track {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.42) !important;
}
body[data-rank] #screen-result .axis-bar-fill {
  background: linear-gradient(90deg, #fff7d6 0%, #f2f4f8 100%) !important;
  box-shadow: 0 0 18px rgba(255, 210, 92, 0.36) !important;
}
body[data-rank] #screen-result .axis-bar-marker {
  background: #fff7d6 !important;
  border-color: #080a0f !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.82),
    0 0 18px rgba(255, 210, 92, 0.48) !important;
}
body[data-rank] #screen-result .chart-legend {
  background: rgba(6, 6, 7, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}
body[data-rank] #screen-result .chart-legend .dot {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 0 12px rgba(255, 210, 92, 0.34) !important;
}

body[data-rank] #screen-result .share-section {
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 210, 92, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 210, 92, 0.08) 46%, rgba(255, 255, 255, 0.035)) !important;
  border: 1px solid rgba(255, 247, 214, 0.28) !important;
  border-radius: 10px !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}
body[data-rank] #screen-result .share-section::before {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -72px;
  width: 56%;
  height: 160px;
  background: radial-gradient(ellipse at center, rgba(255, 210, 92, 0.22), transparent 68%);
  pointer-events: none;
}
body[data-rank] #screen-result .share-section h3 {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  color: #f6f8fc !important;
  -webkit-text-fill-color: #f6f8fc !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.72) !important;
}
body[data-rank] #screen-result .share-section h3::before {
  content: "SHARE";
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 247, 214, 0.14);
  border: 1px solid rgba(255, 247, 214, 0.3);
  color: #fff7d6;
  -webkit-text-fill-color: #fff7d6;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-shadow: none;
}
body[data-rank] #screen-result .share-lead {
  position: relative !important;
  color: rgba(244, 247, 252, 0.78) !important;
  -webkit-text-fill-color: rgba(244, 247, 252, 0.78) !important;
  margin-bottom: 18px !important;
}
body[data-rank] #screen-result .share-tag {
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
}
body[data-rank] #screen-result .share-buttons {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}
body[data-rank] #screen-result .btn-share {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 58px !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f6f8fc !important;
  -webkit-text-fill-color: #f6f8fc !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
}
body[data-rank] #screen-result .btn-share::before {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 18px rgba(255, 210, 92, 0.12) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}
body[data-rank] #screen-result .btn-share::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.13) 48%, transparent 100%);
  transform: translateX(-130%);
  transition: transform 0.42s ease;
  pointer-events: none;
}
body[data-rank] #screen-result .btn-share:hover::after {
  transform: translateX(130%);
}
body[data-rank] #screen-result .btn-x::before {
  content: "X" !important;
  background: #ffffff !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}
body[data-rank] #screen-result .btn-line::before {
  content: "LINE" !important;
  background: #06c755 !important;
  font-size: 9px !important;
}
body[data-rank] #screen-result .btn-fb::before {
  content: "f" !important;
  background: #1877f2 !important;
  font-size: 24px !important;
  font-family: Arial, "Helvetica Neue", sans-serif !important;
}
body[data-rank] #screen-result .btn-instagram::before {
  content: "IG" !important;
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 54%, #fcb045 100%) !important;
  font-size: 11px !important;
}
body[data-rank] #screen-result .btn-copy::before {
  content: "URL" !important;
  background: #fff7d6 !important;
  color: #080a0f !important;
  -webkit-text-fill-color: #080a0f !important;
  font-size: 10px !important;
}
body[data-rank] #screen-result .btn-share:hover {
  transform: translateY(-3px) !important;
}
body[data-rank] #screen-result .btn-x:hover::before,
body[data-rank] #screen-result .btn-copy:hover::before {
  display: inline-grid !important;
}

@media (max-width: 600px) {
  body[data-rank] #screen-result .share-section {
    padding: 22px 16px !important;
  }
  body[data-rank] #screen-result .share-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* Keep share button labels crisp. */
body[data-rank] #screen-result .btn-share {
  white-space: nowrap !important;
}

/* =========================================================================
   Level scanning intro before result reveal (Codex 2026-06-02)
   ========================================================================= */
.level-scan-screen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #f6f8fc;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 210, 92, 0.22), transparent 34%),
    radial-gradient(circle at 18% 16%, rgba(255, 247, 214, 0.12), transparent 28%),
    linear-gradient(180deg, #050506 0%, #0b0906 52%, #030303 100%) !important;
}
.level-scan-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 247, 214, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 247, 214, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
}
.level-scan-screen::after {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 247, 214, 0.12), transparent);
  animation: levelScanSweep 2.2s linear infinite;
  mix-blend-mode: screen;
}
.level-scan-bg span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff7d6;
  box-shadow: 0 0 14px rgba(255, 210, 92, 0.72);
  animation: levelStarDrift 3.8s ease-in-out infinite alternate;
}
.level-scan-bg span:nth-child(1) { left: 16%; top: 18%; animation-delay: -0.4s; }
.level-scan-bg span:nth-child(2) { left: 78%; top: 20%; animation-delay: -1.1s; }
.level-scan-bg span:nth-child(3) { left: 22%; top: 70%; animation-delay: -1.8s; }
.level-scan-bg span:nth-child(4) { left: 86%; top: 68%; animation-delay: -2.4s; }
.level-scan-bg span:nth-child(5) { left: 47%; top: 12%; animation-delay: -0.9s; }
.level-scan-bg span:nth-child(6) { left: 58%; top: 82%; animation-delay: -1.5s; }
.level-scan-shell {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100% - 32px));
  margin: 0 auto;
  padding: 82px 22px 52px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.level-scan-eyebrow {
  margin-bottom: 22px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 247, 214, 0.22);
  border-radius: 999px;
  color: rgba(255, 247, 214, 0.72);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  background: rgba(255, 255, 255, 0.035);
}
.level-scan-core {
  position: relative;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.level-scan-ring,
.level-scan-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.level-scan-ring {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 210, 92, 0.92) 62deg, transparent 104deg, rgba(255, 255, 255, 0.48) 162deg, transparent 212deg, rgba(201, 126, 32, 0.78) 300deg, transparent 360deg);
  animation: levelSpin 1.7s linear infinite;
  filter: drop-shadow(0 0 22px rgba(255, 210, 92, 0.36));
}
.level-scan-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #060607;
  box-shadow: inset 0 0 34px rgba(255, 210, 92, 0.14);
}
.level-scan-orbit {
  inset: 28px;
  border: 1px solid rgba(255, 247, 214, 0.2);
  box-shadow: 0 0 28px rgba(255, 210, 92, 0.16);
  animation: levelPulse 1.4s ease-in-out infinite alternate;
}
.level-scan-core-label {
  position: relative;
  z-index: 1;
  color: #fff7d6;
  -webkit-text-fill-color: #fff7d6;
  font-family: "Bebas Neue", sans-serif;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0 28px rgba(255, 210, 92, 0.7);
}
.level-scan-title {
  margin: 0 0 12px;
  color: #f6f8fc;
  -webkit-text-fill-color: #f6f8fc;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.08em;
  line-height: 0.95;
}
.level-scan-title span {
  display: block;
  font-size: clamp(52px, 11vw, 104px);
  text-shadow: 0 0 32px rgba(255, 210, 92, 0.34);
}
.level-scan-title small {
  display: block;
  margin-top: 12px;
  color: #fff7d6;
  -webkit-text-fill-color: #fff7d6;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
}
.level-scan-copy {
  margin: 0 0 22px;
  color: rgba(244, 247, 252, 0.72);
  -webkit-text-fill-color: rgba(244, 247, 252, 0.72);
  font-size: 14px;
}
.level-scan-meter {
  width: min(460px, 100%);
  height: 10px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 247, 214, 0.24);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}
.level-scan-meter span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c97e20, #fff7d6 72%, #ffffff);
  box-shadow: 0 0 18px rgba(255, 210, 92, 0.58);
  transition: width 0.16s linear;
}
.level-scan-percent {
  margin-top: 10px;
  color: #fff7d6;
  -webkit-text-fill-color: #fff7d6;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
}
.level-scan-status {
  min-height: 22px;
  margin-top: 10px;
  color: rgba(246, 248, 252, 0.82);
  -webkit-text-fill-color: rgba(246, 248, 252, 0.82);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.level-scan-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(620px, 100%);
  margin-top: 22px;
}
.level-scan-steps span {
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(246, 248, 252, 0.7);
  -webkit-text-fill-color: rgba(246, 248, 252, 0.7);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  animation: levelStepGlow 1.8s ease-in-out infinite;
}
.level-scan-steps span:nth-child(2) { animation-delay: 0.25s; }
.level-scan-steps span:nth-child(3) { animation-delay: 0.5s; }
.level-scan-steps span:nth-child(4) { animation-delay: 0.75s; }
.level-scan-screen.scan-complete .level-scan-shell {
  animation: levelScanExit 0.34s ease forwards;
}
@keyframes levelSpin { to { transform: rotate(360deg); } }
@keyframes levelPulse { from { transform: scale(0.94); opacity: 0.58; } to { transform: scale(1.04); opacity: 1; } }
@keyframes levelScanSweep { from { transform: translateY(-20%); } to { transform: translateY(310%); } }
@keyframes levelStarDrift { from { transform: translateY(-8px); opacity: 0.38; } to { transform: translateY(9px); opacity: 1; } }
@keyframes levelStepGlow {
  0%, 100% { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
  45% { border-color: rgba(255, 247, 214, 0.44); box-shadow: 0 0 18px rgba(255, 210, 92, 0.14); color: #fff7d6; -webkit-text-fill-color: #fff7d6; }
}
@keyframes levelScanExit { to { opacity: 0; transform: scale(1.025); filter: blur(6px); } }
@media (max-width: 600px) {
  .level-scan-core { width: 150px; height: 150px; }
  .level-scan-core-label { font-size: 52px; }
  .level-scan-steps { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .level-scan-screen::after,
  .level-scan-bg span,
  .level-scan-ring,
  .level-scan-orbit,
  .level-scan-steps span,
  .level-scan-screen.scan-complete .level-scan-shell {
    animation: none !important;
  }
}

/* =========================================================================
   Result rework: clearer rank, solution flow, CTA emphasis (Codex 2026-06-02)
   ========================================================================= */
#screen-result .result-profile-bar,
body[data-rank] #screen-result .result-profile-bar {
  display: none !important;
}
body[data-rank] #screen-result .result-hero {
  padding-top: 52px !important;
}
body[data-rank] #screen-result .result-rank-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px auto 12px !important;
  padding: 12px 18px !important;
  min-width: 220px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 247, 214, 0.36) !important;
  background: linear-gradient(135deg, rgba(255, 247, 214, 0.16), rgba(255, 255, 255, 0.04)) !important;
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
  font-size: clamp(20px, 3.4vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 22px rgba(255, 210, 92, 0.42), 0 2px 10px rgba(0,0,0,0.76) !important;
  box-shadow: 0 0 34px rgba(255, 210, 92, 0.14), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}
body[data-rank] #screen-result .result-headline {
  max-width: 680px !important;
  margin-top: 26px !important;
  font-size: clamp(28px, 5vw, 46px) !important;
  line-height: 1.18 !important;
  text-shadow: 0 0 26px rgba(255,210,92,0.22), 0 2px 12px rgba(0,0,0,0.8) !important;
}
body[data-rank] #screen-result .result-visual-strip {
  position: relative !important;
  margin-top: 22px !important;
}
body[data-rank] #screen-result .result-visual-strip::before {
  content: "RESULT FLOW";
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 12px;
  color: rgba(255, 247, 214, 0.72);
  -webkit-text-fill-color: rgba(255, 247, 214, 0.72);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}
body[data-rank] #screen-result .result-visual-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,210,92,0.055)) !important;
  border-color: rgba(255,247,214,0.18) !important;
}
body[data-rank] #screen-result .pc-task-impact,
body[data-rank] #screen-pc-detail .pc-task-detail {
  background: linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,210,92,0.045)) !important;
  border: 1px solid rgba(255,247,214,0.22) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,255,255,0.04) !important;
}
body[data-rank] #screen-result .pc-impact-label,
body[data-rank] #screen-pc-detail .pc-impact-label {
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
}
body[data-rank] #screen-result .pc-impact-detail-btn {
  min-height: 58px !important;
  font-size: 16px !important;
}
body[data-rank] #screen-result .pc-impact-detail-btn::after {
  content: "  >";
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
body[data-rank] #screen-result .cta-section {
  position: relative !important;
  margin-top: 52px !important;
}
body[data-rank] #screen-result .cta-section h3 {
  text-align: center !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
  text-shadow: 0 0 30px rgba(255,210,92,0.34) !important;
}
body[data-rank] #screen-result .cta-grid {
  grid-template-columns: 1.28fr 0.72fr !important;
  align-items: stretch !important;
}
body[data-rank] #screen-result .cta-card-consult {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,247,214,0.46) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,210,92,0.24), transparent 30%),
    linear-gradient(135deg, rgba(255,247,214,0.18), rgba(255,255,255,0.055)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 26px 70px rgba(255,210,92,0.18), 0 22px 60px rgba(0,0,0,0.42) !important;
  transform: translateY(-8px) !important;
}
body[data-rank] #screen-result .cta-card-consult::before {
  content: "最優先";
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7d6;
  color: #080a0f;
  -webkit-text-fill-color: #080a0f;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
/* Move the 無料 tag to the top-left so it no longer clips the 最優先 badge. */
body[data-rank] #screen-result .cta-card-consult .cta-card-tag {
  left: 16px;
  right: auto;
  background: rgba(255,210,92,0.18) !important;
  border: 1px solid rgba(255,247,214,0.34) !important;
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
}
body[data-rank] #screen-result .cta-card-consult h4 {
  margin-top: 18px !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
  text-shadow: 0 0 24px rgba(255,210,92,0.34) !important;
}
body[data-rank] #screen-result .cta-punch {
  margin: -4px 0 14px;
  color: #f6f8fc;
  -webkit-text-fill-color: #f6f8fc;
  font-weight: 900;
  font-size: 15px;
}
body[data-rank] #screen-result .cta-card-consult .btn-primary {
  min-height: 62px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #fff7d6, #ffffff) !important;
  color: #080a0f !important;
  -webkit-text-fill-color: #080a0f !important;
  box-shadow: 0 0 28px rgba(255,210,92,0.32) !important;
}
body[data-rank] #screen-result .btn-instagram::before {
  content: "" !important;
  background:
    radial-gradient(circle at 72% 28%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 50% 54%, transparent 0 22%, #fff 23% 31%, transparent 32%),
    linear-gradient(135deg, #405de6 0%, #833ab4 28%, #c13584 48%, #e1306c 62%, #fd1d1d 78%, #fcb045 100%) !important;
  border-radius: 10px !important;
}
@media (max-width: 760px) {
  body[data-rank] #screen-result .cta-grid {
    grid-template-columns: 1fr !important;
  }
  body[data-rank] #screen-result .cta-card-consult {
    transform: none !important;
  }
}

/* Ensure the main rank phrase reads as the hero message. */
body[data-rank] #screen-result .result-headline,
body[data-rank="D"] #screen-result .result-headline,
body[data-rank="E"] #screen-result .result-headline {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 0 28px rgba(255, 210, 92, 0.34), 0 2px 14px rgba(0,0,0,0.88) !important;
}
body[data-rank="D"] #screen-result .result-rank-title,
body[data-rank="E"] #screen-result .result-rank-title {
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
}

/* =========================================================================
   PC DETAIL SCREEN — match the black/gold result tone.
   Earlier rules (body[data-rank] .pc-detail-visual-card …) paint these inner
   cards cream/white, which clashes with the dark result aesthetic. The #id
   scope below outranks them so the detail screen reads as one dark gold panel.
   ========================================================================= */
body[data-rank] #screen-pc-detail .pc-impact-item,
body[data-rank] #screen-pc-detail .pc-impact-other,
body[data-rank] #screen-pc-detail .pc-detail-visual-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,247,214,0.18) !important;
  border-radius: 8px !important;
  color: #e7edf5 !important;
  -webkit-text-fill-color: #e7edf5 !important;
}
body[data-rank] #screen-pc-detail .pc-impact-summary {
  background: rgba(255,210,92,0.08) !important;
  border: 1px solid rgba(255,210,92,0.24) !important;
  border-radius: 8px !important;
}
body[data-rank] #screen-pc-detail .pc-impact-consult {
  background: rgba(255,210,92,0.10) !important;
  border: 1px solid rgba(255,210,92,0.30) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-top: 18px !important;
}
/* chips / pills */
body[data-rank] #screen-pc-detail .pc-impact-count,
body[data-rank] #screen-pc-detail .pc-impact-bucket-title,
body[data-rank] #screen-pc-detail .pc-impact-tag,
body[data-rank] #screen-pc-detail .pc-detail-visual-card b {
  background: rgba(255,210,92,0.16) !important;
  border: 1px solid rgba(255,247,214,0.28) !important;
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
}
/* headings + emphasis -> gold */
body[data-rank] #screen-pc-detail .pc-impact-head h3,
body[data-rank] #screen-pc-detail .pc-impact-summary,
body[data-rank] #screen-pc-detail .pc-impact-consult,
body[data-rank] #screen-pc-detail .pc-impact-item strong,
body[data-rank] #screen-pc-detail .pc-impact-other strong,
body[data-rank] #screen-pc-detail .pc-detail-visual-card strong {
  color: #fff7d6 !important;
  -webkit-text-fill-color: #fff7d6 !important;
}
/* body copy -> soft light */
body[data-rank] #screen-pc-detail .pc-impact-item span,
body[data-rank] #screen-pc-detail .pc-impact-other span,
body[data-rank] #screen-pc-detail .pc-detail-visual-card span {
  color: rgba(231,237,245,0.82) !important;
  -webkit-text-fill-color: rgba(231,237,245,0.82) !important;
}
/* icon tiles */
body[data-rank] #screen-pc-detail .pc-detail-icon {
  background: rgba(255,255,255,0.10) !important;
}
body[data-rank] #screen-pc-detail .pc-detail-icon span {
  background: #fff7d6 !important;
}
/* back button -> dark outline like the result screen */
body[data-rank] #screen-pc-detail .btn-secondary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #eef3f9 !important;
  -webkit-text-fill-color: #eef3f9 !important;
}

/* =========================================================================
   DETAIL SCREEN — pure black backdrop. The gold aura/mesh glow lowers the
   contrast of the dark glass cards here, so drop it to flat black behind the
   解決策 screen (set via body[data-screen] in showScreen()).
   ========================================================================= */
body[data-screen="screen-pc-detail"] {
  background: #000 !important;
}
body[data-screen="screen-pc-detail"]::before,
body[data-screen="screen-pc-detail"]::after,
body[data-screen="screen-pc-detail"] #res-aura-spark {
  display: none !important;
}

/* =========================================================================
   PREVIEW BAR FIX — earlier theme rules turned the dev rank-switcher into a
   full-width cream strip (position:relative + cream bg), which leaked as a
   white band at the bottom/left in preview mode. Restore the dark floating
   pill regardless of the active rank theme.
   ========================================================================= */
body[data-rank] #preview-bar {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 9999 !important;
  background: rgba(17, 24, 39, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 99px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}