/* investment-psychology-test — styles.css (WordPress embed version)
   All rules are scoped under .site-shell so they can't leak into the
   theme's global styles. A handful of properties use !important because
   the theme forces its own background/box-shadow/box-sizing/white-space/
   grid-template-columns/padding on generic elements (buttons, divs) with
   equal-or-higher specificity — confirmed by direct inspection on the
   live site. Everything else follows the normal cascade. */
.site-shell {
  --navy:#152331;
  --navy-2:#213546;
  --blue:#526f84;
  --blue-soft:#dce6ec;
  --ink:#1d2730;
  --muted:#65727d;
  --line:#d7dfe4;
  --paper:#ffffff;
  --bg:#eef2f4;
  --bg-2:#f6f8f9;
  --low:#e8eef1;
  --mid:#b9c8d1;
  --high:#6f8999;
  --shadow:0 18px 45px rgba(24,40,52,.09);
  --radius:18px;
}
.site-shell,
.site-shell * {
  box-sizing:border-box;
}
.site-shell {
  margin:0;
  background:linear-gradient(180deg,#edf2f4 0,#f8fafb 55%,#edf2f4 100%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  line-height:1.7;
}
.site-shell #startCard {
  scroll-margin-top:24px;
}
.site-shell button {
  font:inherit;
  cursor:pointer;
  box-sizing:border-box !important;
}
.site-shell {
  min-height:100vh;
}
.site-shell .site-header {
  height:68px;
  max-width:1160px;
  margin:auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-shell .brand {
  font-size:13px;
  letter-spacing:.16em;
  font-weight:800;
  color:var(--navy);
}
.site-shell .brand span {
  color:var(--blue);
}
.site-shell .header-note {
  font-size:12px;
  color:var(--muted);
}
.site-shell .app {
  max-width:1160px;
  margin:auto;
  padding:24px 24px 72px;
}
.site-shell .screen {
  display:none;
}
.site-shell .screen.active {
  display:block;
}
.site-shell .hero-card,
.site-shell .setup-card {
  max-width:760px;
  margin:48px auto 0;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:24px;
  padding:58px !important;
  box-shadow:var(--shadow);
}
.site-shell .eyebrow {
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--blue);
  margin-bottom:12px;
}
.site-shell .hero-card h1,
.site-shell .result-head h1 {
  font-size:clamp(30px,5vw,48px);
  line-height:1.25;
  margin:0 0 20px;
  color:var(--navy);
}
.site-shell .lead {
  font-size:18px;
  color:#46535d;
}
.site-shell .nisa-article {
  max-width:760px;
  margin:48px auto 0;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:24px;
  padding:56px 58px !important;
  box-shadow:var(--shadow);
  color:#3a464e;
}
.site-shell .nisa-article h2 {
  font-size:clamp(23px,3.6vw,30px);
  line-height:1.45;
  color:var(--navy);
  margin:0 0 22px;
}
.site-shell .nisa-article h3 {
  font-size:17px;
  color:var(--navy);
  margin:32px 0 14px;
}
.site-shell .nisa-article p {
  font-size:15px;
  line-height:1.9;
  margin:0 0 16px;
  color:#3a464e;
}
.site-shell .nisa-section-intro p {
  font-size:16px;
}
.site-shell .nisa-article ul {
  margin:0 0 20px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.site-shell .nisa-article ul li {
  position:relative;
  padding-left:22px;
  font-size:14px;
  color:#3d525c;
  line-height:1.75;
}
.site-shell .nisa-article ul li::before {
  content:"・";
  position:absolute;
  left:0;
  color:var(--blue);
  font-weight:800;
}
.site-shell .nisa-cta-wrap {
  text-align:center;
  margin:32px 0 4px;
}
.site-shell .nisa-cta-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--navy) !important;
  color:#fff !important;
  font-weight:700;
  font-size:1.05rem;
  padding:16px 36px;
  border-radius:12px;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(21,35,49,.18) !important;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  letter-spacing:.02em;
}
.site-shell .nisa-cta-btn:hover {
  background:#22394b !important;
  transform:translateY(-1px);
}
.site-shell .nisa-cta-btn .nisa-cta-arrow {
  display:inline-block;
  transition:transform .25s ease;
}
.site-shell .nisa-cta-btn:hover .nisa-cta-arrow {
  transform:translateX(4px);
}
.site-shell .nisa-cta-sub {
  display:block;
  margin-top:10px;
  font-size:.8rem;
  color:var(--muted);
}
.site-shell .time-note {
  font-size:12px;
  color:var(--muted);
  margin:18px 0 0;
  text-align:center;
}
.site-shell .feature-grid {
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:12px;
  margin:24px 0 0;
}
.site-shell .feature-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
  text-align:left;
  transition:.2s;
}
.site-shell .feature-card:hover {
  border-color:var(--blue);
  background:#f5f8f9;
}
.site-shell .feature-card b {
  display:block;
  color:var(--navy);
  font-size:14px;
  margin-bottom:5px;
}
.site-shell .feature-card span {
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.65;
}
.site-shell .metric-row {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  margin:30px 0;
}
.site-shell .metric-row div {
  background:#f8fafb;
  padding:18px;
  text-align:center;
}
.site-shell .metric-row strong {
  display:block;
  font-size:25px;
  color:var(--navy);
  line-height:1;
}
.site-shell .metric-row span {
  display:block;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--muted);
  margin-top:6px;
}
.site-shell .notice {
  background:#f1f5f7;
  border-left:3px solid var(--blue);
  padding:16px 18px;
  font-size:14px;
  margin-bottom:24px;
}
.site-shell .primary-btn,
.site-shell .secondary-btn {
  border:0;
  border-radius:12px;
  padding:15px 22px;
  font-weight:800;
  transition:.2s;
}
.site-shell .primary-btn {
  background:var(--navy) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(21,35,49,.18) !important;
}
.site-shell .primary-btn:hover {
  background:#22394b !important;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(21,35,49,.18) !important;
}
.site-shell .primary-btn.large {
  width:100%;
  font-size:16px;
}
.site-shell .primary-btn span {
  margin-left:8px;
}
.site-shell .secondary-btn {
  background:#e7edf0 !important;
  color:var(--navy) !important;
  box-shadow:none !important;
}
.site-shell .text-btn {
  border:0;
  background:transparent !important;
  color:var(--blue) !important;
  padding:12px 0;
  font-weight:700;
}
.site-shell .small-note {
  font-size:12px;
  color:var(--muted);
  margin:16px 0 0;
}
.site-shell .setup-card {
  max-width:700px;
}
.site-shell .setup-card h2 {
  color:var(--navy);
  margin-top:0;
}
.site-shell .experience-options {
  display:grid;
  gap:12px;
  margin:28px 0;
}
.site-shell .experience-options button {
  background:#fff !important;
  border:1px solid var(--line) !important;
  padding:20px;
  text-align:left;
  border-radius:14px;
  transition:.2s;
  color:var(--ink) !important;
  width:100% !important;
  max-width:100% !important;
  white-space:normal !important;
  box-shadow:none !important;
}
.site-shell .experience-options button:hover {
  border-color:var(--blue) !important;
  background:#f5f8f9 !important;
}
.site-shell .experience-options b,
.site-shell .experience-options span {
  display:block;
}
.site-shell .experience-options span {
  font-size:13px;
  color:var(--muted);
}
.site-shell .length-options {
  display:grid;
  gap:12px;
  margin:28px 0;
}
.site-shell .length-options button {
  position:relative;
  background:#fff !important;
  border:1px solid var(--line) !important;
  padding:20px;
  text-align:left;
  border-radius:14px;
  transition:.2s;
  color:var(--ink) !important;
  width:100% !important;
  max-width:100% !important;
  white-space:normal !important;
  box-shadow:none !important;
}
.site-shell .length-options button:hover {
  border-color:var(--blue) !important;
  background:#f5f8f9 !important;
}
.site-shell .length-options b {
  display:block;
  font-size:16px;
  color:var(--navy);
}
.site-shell .length-options span {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}
.site-shell .length-options em {
  display:block;
  font-size:12px;
  color:#7a8a94;
  font-style:normal;
  margin-top:6px;
}
.site-shell .length-includes {
  list-style:none;
  margin:12px 0 0;
  padding:10px 12px;
  background:#f5f8f9;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.site-shell .length-includes li {
  font-size:12px;
  color:#3d525c;
  padding-left:16px;
  position:relative;
  line-height:1.5;
}
.site-shell .length-includes li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--blue);
  font-weight:800;
}
.site-shell .length-options button.recommended .length-includes {
  background:#e9f1f4;
}
.site-shell .length-options button.recommended {
  border:2px solid var(--blue) !important;
  background:linear-gradient(180deg,#f7fafb,#eef5f7) !important;
  box-shadow:0 10px 26px rgba(56,87,107,.16) !important;
  padding-top:26px;
}
.site-shell .length-options button *,
.site-shell .experience-options button * {
  white-space:normal !important;
}
.site-shell .length-options .recommended-badge {
  position:absolute;
  top:-13px;
  left:16px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#2e4a5a;
  color:#ffffff;
  font-size:12px;
  font-weight:800;
  padding:5px 14px;
  border-radius:20px;
  letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(46,74,90,.35);
  white-space:nowrap;
}
.site-shell .length-options .recommended-badge::before {
  content:"★";
  font-size:11px;
  color:#ffd76a;
}
.site-shell .quiz-top {
  max-width:1050px;
  margin:20px auto;
}
.site-shell .progress-meta {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.05em;
}
.site-shell .progress-track {
  height:8px;
  background:#dce4e8;
  border-radius:20px;
  overflow:hidden;
  margin-top:9px;
}
.site-shell .progress-track div {
  height:100%;
  width:0;
  background:var(--navy);
  transition:width .35s ease;
}
.site-shell .milestone {
  max-width:1050px;
  margin:0 auto 18px;
  background:#e9f0f3;
  border:1px solid #d2dde3;
  padding:12px 16px;
  border-radius:12px;
  font-size:14px;
  color:#425563;
}
.site-shell .hidden {
  display:none !important;
}
.site-shell .question-grid {
  max-width:1050px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.site-shell .question-grid.single {
  grid-template-columns:1fr;
  max-width:640px;
}
.site-shell .question-card {
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 8px 24px rgba(22,38,49,.045);
}
.site-shell .q-num {
  font-size:11px;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--blue);
}
.site-shell .q-text {
  font-size:16px;
  font-weight:700;
  line-height:1.65;
  margin:10px 0 18px;
}
.site-shell .answers {
  display:grid;
  gap:8px;
}
.site-shell .answer-btn {
  width:100%;
  text-align:left;
  background:#f7f9fa !important;
  border:1px solid #e1e7ea !important;
  border-radius:10px;
  padding:10px 12px;
  color:#43515b !important;
  font-size:13px;
  transition:.15s;
  box-shadow:none !important;
}
.site-shell .answer-btn:hover {
  border-color:#91a5b2 !important;
}
.site-shell .answer-btn.selected {
  background:#e3ecef !important;
  border-color:var(--blue) !important;
  color:var(--navy) !important;
  font-weight:800;
}
.site-shell .answer-btn:disabled {
  cursor:default;
  opacity:.85;
}
.site-shell .quiz-actions {
  max-width:640px;
  margin:26px auto;
  display:flex;
  justify-content:flex-start;
  gap:12px;
}
.site-shell .quiz-actions button {
  min-width:150px;
}
.site-shell .result-head {
  text-align:center;
  margin:28px auto 30px;
}
.site-shell .result-head p {
  color:var(--muted);
}
.site-shell .length-notice {
  max-width:700px;
  margin:0 auto 20px;
  background:#fbf3e6;
  border:1px solid #e8d3a8;
  color:#7a5a2f;
  font-size:13px;
  line-height:1.7;
  padding:14px 18px;
  border-radius:12px;
  text-align:center;
}
.site-shell .result-card {
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 10px 28px rgba(22,38,49,.05);
}
.site-shell .type-card {
  text-align:center;
  max-width:760px;
  margin:0 auto 24px;
  background:linear-gradient(145deg,#fff,#edf3f5);
}
.site-shell .type-label,
.site-shell .type-sub {
  color:var(--muted);
  font-size:14px;
}
.site-shell .type-card h2 {
  font-size:clamp(27px,4vw,40px);
  line-height:1.25;
  margin:5px 0;
  color:var(--navy);
}
.site-shell .type-card p {
  max-width:600px;
  margin:16px auto 0;
  color:#52606a;
}
.site-shell .dashboard-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  margin-bottom:20px;
}
.site-shell .dashboard-grid.single {
  grid-template-columns:1fr;
}
.site-shell .result-card h3 {
  color:var(--navy);
  margin:0 0 18px;
  font-size:18px;
}
.site-shell .chart-card {
  text-align:center;
}
.site-shell .chart-caption {
  font-size:12px;
  color:var(--muted);
}
.site-shell .bars {
  display:grid;
  gap:16px;
}
.site-shell .bar-row .bar-top {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}
.site-shell .bar-track {
  height:10px;
  background:#e7edf0;
  border-radius:20px;
  overflow:hidden;
}
.site-shell .bar-fill {
  height:100%;
  background:var(--blue);
  border-radius:20px;
  box-sizing:border-box;
}
.site-shell .control-box {
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.site-shell .control-box>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.site-shell .control-box strong {
  font-size:38px;
  color:var(--navy);
}
.site-shell .control-box p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:0;
}
.site-shell .control-box-head {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:14px;
}
.site-shell .control-box-head>span:first-child {
  font-size:13px;
  font-weight:800;
  color:var(--navy);
}
.site-shell .control-box-note {
  font-size:12px;
  color:var(--muted);
}
.site-shell .insights {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.site-shell .insight {
  border:1px solid var(--line);
  background:#f7f9fa;
  border-radius:13px;
  padding:16px;
}
.site-shell .insight strong {
  display:block;
  color:var(--navy);
  font-size:14px;
  margin-bottom:5px;
}
.site-shell .insight p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}
.site-shell .section-desc {
  font-size:13px;
  color:var(--muted);
  margin-top:-10px;
}
.site-shell .heatmap {
  display:grid;
  grid-template-columns:160px repeat(4,1fr);
  gap:4px;
  font-size:12px;
}
.site-shell .heat-cell {
  min-height:52px;
  border-radius:7px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.site-shell .heat-head {
  background:#eef3f5;
  font-weight:700;
  color:#51606a;
}
.site-shell .heat-label {
  background:#f5f7f8;
  justify-content:flex-start;
  font-weight:700;
  color:#51606a;
}
.site-shell .level-1 {
  background:#edf2f4;
}
.site-shell .level-2 {
  background:#d5e0e5;
}
.site-shell .level-3 {
  background:#b4c5ce;
}
.site-shell .level-4 {
  background:#8ca4b1;
  color:#fff;
}
.site-shell .share-actions {
  display:flex;
  gap:10px;
}
.site-shell .share-actions .primary-btn {
  background:#22201d !important;
  box-shadow:0 8px 18px rgba(0,0,0,.16) !important;
}
.site-shell .share-actions .primary-btn:hover {
  background:#000 !important;
}
.site-shell .share-actions .secondary-btn {
  background:transparent !important;
  border:1.5px solid #b8974a !important;
  color:#6b5a3f !important;
}
.site-shell .share-actions .secondary-btn:hover {
  background:#faf3d8 !important;
}
.site-shell .disclaimer {
  max-width:900px;
  margin:24px auto 0;
  padding:24px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.site-shell .disclaimer h3 {
  color:var(--navy);
}
.site-shell .restart-btn {
  display:block;
  margin:0 auto;
}
.site-shell .radar-svg {
  width:100%;
  max-width:560px;
  height:auto;
}
.site-shell .radar-grid {
  fill:none;
  stroke:#aebac2;
  stroke-width:1.2;
}
.site-shell .radar-axis {
  stroke:#c3cdd3;
  stroke-width:1;
}
.site-shell .radar-area {
  fill:#6f8999;
  fill-opacity:.22;
  stroke:#38576b;
  stroke-width:2;
}
.site-shell .radar-dot {
  fill:#38576b;
}
.site-shell .radar-label {
  font-size:12px;
  font-weight:700;
  fill:#2b3944;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
@media(max-width:760px) {
  .site-shell .site-header {
    height:56px;
    padding:0 16px;
  }
  .site-shell .app {
    padding:12px 14px 48px;
  }
  .site-shell .hero-card,
  .site-shell .setup-card {
    margin-top:18px;
    padding:32px 22px !important;
    border-radius:18px;
  }
  .site-shell .lead {
    font-size:15px;
  }
  .site-shell .metric-row strong {
    font-size:21px;
  }
  .site-shell .question-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .site-shell .question-card {
    padding:19px;
  }
  .site-shell .q-text {
    font-size:15px;
  }
  .site-shell .quiz-actions {
    position:sticky;
    bottom:8px;
    background:rgba(238,242,244,.92);
    padding:10px 0;
    margin:8px auto 0;
    backdrop-filter:blur(8px);
  }
  .site-shell .quiz-actions button {
    min-width:0;
    flex:1;
  }
  .site-shell .dashboard-grid {
    grid-template-columns:1fr;
  }
  .site-shell .insights {
    grid-template-columns:1fr;
  }
  .site-shell .heatmap {
    grid-template-columns:104px repeat(4,1fr);
    overflow-x:auto;
  }
  .site-shell .heat-cell {
    font-size:10px;
    padding:5px;
    min-height:46px;
  }
  .site-shell .result-card {
    padding:20px;
  }
  .site-shell .share-actions {
    flex-direction:column;
  }
  .site-shell .share-actions button {
    width:100%;
  }
}
/* ===== Added: per-category mini radar charts ===== */
.site-shell .mini-radar-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:820px;
  margin:0 auto;
}
.site-shell .mini-radar {
  background:#f7f9fa;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 14px 12px;
}
.site-shell .mini-radar-title {
  font-size:13px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:2px;
  text-align:left;
}
.site-shell .mini-radar-catbar {
  margin-top:8px;
  text-align:left;
}
.site-shell .mini-radar-catbar .bar-top {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:700;
  margin-bottom:5px;
}
.site-shell .mini-radar-caption {
  font-size:11px;
  color:var(--muted);
  text-align:left;
  margin:8px 4px 0;
  line-height:1.6;
}
.site-shell .mini-radar-svg {
  width:100%;
  max-width:300px;
  height:auto;
  overflow:visible;
}
/* ===== Added: bar captions + strength badges (category / control / insight bars) ===== */
.site-shell .bar-caption {
  font-size:12px;
  color:var(--muted);
  margin:6px 0 0;
}
.site-shell .bar-analysis,
.site-shell .mini-radar-analysis {
  margin-top:8px;
}
.site-shell .score-chip {
  display:inline-block;
  font-size:12px;
  font-weight:800;
  padding:4px 12px;
  border-radius:20px;
  margin-bottom:6px;
  letter-spacing:.01em;
}
.site-shell .score-chip.strong1 {
  background:#e9eff1;
  color:#3a5568;
}
.site-shell .score-chip.strong2 {
  background:#d3e0e6;
  color:#2e4a5a;
}
.site-shell .score-chip.strong3 {
  background:#b4c9d2;
  color:#1f3a48;
}
.site-shell .score-chip.mid {
  background:#eef1ee;
  color:#4a5a3a;
}
.site-shell .score-chip.weak1 {
  background:#f2ece8;
  color:#7a6250;
}
.site-shell .score-chip.weak2 {
  background:#ece2dc;
  color:#6b4f3f;
}
.site-shell .score-chip.weak3 {
  background:#e2d2c8;
  color:#5a3f2f;
}
.site-shell .info-tip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  margin-left:5px;
  border:none;
  background:#e4eaed !important;
  color:#4a5a63 !important;
  font-size:10px;
  line-height:1;
  border-radius:50%;
  cursor:pointer;
  vertical-align:middle;
  padding:0;
  box-shadow:none !important;
}
.site-shell .info-tip:hover,
.site-shell .info-tip:focus-visible {
  background:var(--blue) !important;
  color:#fff !important;
}
.site-shell text.info-tip-svg {
  cursor:pointer;
}
.site-shell .glossary-popover {
  position:fixed !important;
  z-index:99999 !important;
  max-width:260px;
  background:#2c3a42;
  color:#fff;
  font-size:12px;
  line-height:1.6;
  padding:10px 12px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:50;
}
.site-shell .bar-top-right {
  display:flex;
  align-items:center;
  gap:8px;
}
.site-shell .bar-top-right b {
  font-size:13px;
}
.site-shell .level-badge {
  font-size:10px;
  font-weight:800;
  padding:2px 8px;
  border-radius:20px;
  letter-spacing:.02em;
}
.site-shell .level-badge.strong1 {
  background:#e9eff1;
  color:#3a5568;
}
.site-shell .level-badge.strong2 {
  background:#d3e0e6;
  color:#2e4a5a;
}
.site-shell .level-badge.strong3 {
  background:#b4c9d2;
  color:#1f3a48;
}
.site-shell .level-badge.mid {
  background:#eef1ee;
  color:#4a5a3a;
}
.site-shell .level-badge.weak1 {
  background:#f2ece8;
  color:#7a6250;
}
.site-shell .level-badge.weak2 {
  background:#ece2dc;
  color:#6b4f3f;
}
.site-shell .level-badge.weak3 {
  background:#e2d2c8;
  color:#5a3f2f;
}
/* Insight card render via the shared .bars/.bar-row bar-chart style instead of a
   3-column card grid, so remove the old fixed-column layout. */
.site-shell .insight-card .bars {
  display:grid;
  gap:16px;
}
.site-shell .bars-subhead {
  font-size:12px;
  font-weight:800;
  color:var(--navy);
  margin:18px 0 8px;
}
.site-shell #insightsHighWrap:first-of-type .bars-subhead {
  margin-top:4px;
}
/* ===== Added: closing summary paragraph ===== */
.site-shell .summary-text p {
  margin:0 0 14px;
  font-size:14px;
  color:#3a464e;
  line-height:1.85;
}
.site-shell .summary-text p:last-child {
  margin-bottom:0;
  font-size:12px;
  color:var(--muted);
}
/* ===== Share preview: mirrors the certificate-style X share image exactly
   (same cream/gold background, double border, and serif typography) so the
   preview itself looks like something worth posting. ===== */
.site-shell .cert-preview {
  position:relative;
  background:linear-gradient(180deg,#faf3d8,#f1e7c4);
  border:3px solid #b8974a;
  border-radius:6px;
  padding:30px 28px 26px;
  text-align:center;
  overflow:hidden;
  margin-bottom:14px;
}
.site-shell .cert-preview::before {
  content:"";
  position:absolute;
  inset:10px;
  border:1.2px solid #e4d29c;
  pointer-events:none;
  border-radius:2px;
}
.site-shell .cert-label {
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  color:#8d7c5c;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
.site-shell .cert-icon {
  margin:14px 0 6px;
}
.site-shell .cert-icon svg {
  display:block;
  margin:0 auto;
}
.site-shell .cert-typename {
  font-size:28px;
  font-weight:700;
  color:#3b2b18;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;
  margin:2px 0;
  line-height:1.3;
}
.site-shell .cert-catch {
  font-size:14px;
  color:#6b5a3f;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;
  margin-bottom:14px;
}
.site-shell .cert-divider {
  width:70px;
  height:1.5px;
  background:#b8974a;
  margin:0 auto 12px;
}
.site-shell .cert-trait-row {
  display:grid;
  grid-template-columns:1fr 2fr auto;
  align-items:center;
  gap:10px;
  max-width:380px;
  margin:0 auto 10px;
  text-align:left;
}
.site-shell .cert-trait-name {
  font-size:13px;
  font-weight:700;
  color:#3b2b18;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;
  text-align:right;
}
.site-shell .cert-trait-track {
  height:9px;
  background:rgba(184,151,74,.16);
  border-radius:5px;
  overflow:hidden;
}
.site-shell .cert-trait-fill {
  height:100%;
}
.site-shell .cert-trait-score {
  font-size:12px;
  font-weight:700;
  color:#6b5a3f;
  min-width:24px;
}
.site-shell .cert-url {
  margin-top:16px;
  font-size:11px;
  color:#8d7c5c;
}
.site-shell .cert-tweet-text {
  font-size:12px;
  color:var(--muted);
  white-space:pre-line;
  line-height:1.6;
  margin:0 0 16px;
}
/* ===== Added: scenario bar panels replacing the old heatmap number grid ===== */
.site-shell .scenario-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.site-shell .scenario-panel {
  background:#f7f9fa;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}
.site-shell .scenario-intro {
  font-size:11px;
  color:var(--muted);
  margin:2px 0 10px;
  line-height:1.6;
}
.site-shell .scenario-analysis {
  font-size:12px;
  color:var(--navy);
  margin:10px 0 0;
  line-height:1.6;
}
.site-shell .scenario-title {
  font-size:13px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:10px;
}
.site-shell .scenario-row {
  display:grid;
  grid-template-columns:84px 1fr 30px;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.site-shell .scenario-row:last-child {
  margin-bottom:0;
}
.site-shell .scenario-dim {
  font-size:11px;
  color:#51606a;
}
.site-shell .scenario-track {
  height:8px;
  background:#e7edf0;
  border-radius:20px;
  overflow:hidden;
}
.site-shell .scenario-fill {
  height:100%;
  border-radius:20px;
  box-sizing:border-box;
}
.site-shell .scenario-val {
  font-size:11px;
  font-weight:700;
  color:#3d4a53;
  text-align:right;
}
.site-shell .scenario-legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:14px;
  font-size:11px;
  color:var(--muted);
}
.site-shell .legend-item {
  display:flex;
  align-items:center;
  gap:6px;
}
.site-shell .legend-item i {
  width:10px;
  height:10px;
  border-radius:3px;
  display:inline-block;
}
/* ===== Added: share status line ===== */
.site-shell .share-status {
  font-size:13px;
  color:var(--navy);
  background:#eef3f5;
  border-radius:10px;
  padding:10px 12px;
  margin:0 0 12px;
}
@media(max-width:760px) {
  .site-shell .mini-radar-grid {
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .site-shell .scenario-grid {
    grid-template-columns:1fr;
  }
  .site-shell .scenario-row {
    grid-template-columns:66px 1fr 26px;
  }
  .site-shell .feature-grid {
    grid-template-columns:1fr;
  }
  .site-shell .nisa-article {
    padding:32px 22px;
  }
}

@media(max-width:760px) {

  /* アプリ全体の左右余白を 15px に指定 */
  .site-shell .app {
    padding: 12px 15px 48px !important;
  }

  /* 一番外側のカードデザイン（枠線・影・背景）を削除 */
  .site-shell .hero-card,
  .site-shell .setup-card,
  .site-shell .nisa-article {
    margin-top: 18px;
    padding: 0 !important;          /* カード自体の内側余白をリセット */
    background: transparent !important; /* 背景を透明化 */
    border: none !important;            /* 枠線を削除 */
    box-shadow: none !important;        /* 影を削除 */
    border-radius: 0 !important;
  }

}