.tool-header { margin-bottom: 1rem; }
.kicker { margin: 0 0 0.35rem; color: var(--primary); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tool-link { margin-top: 0.8rem; }
.lead { margin-top: 0.45rem; color: var(--muted); max-width: 70ch; }
.trust-line { margin-bottom: 1rem; padding: 0.8rem 0.95rem; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%); font-weight: 600; }
.trust-line.danger { border-color: color-mix(in srgb, #ff5f6d 40%, var(--border) 60%); background: color-mix(in srgb, var(--surface) 88%, #ff5f6d 12%); }

.layout-grid { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 1rem; align-items: stretch; }
.panel { padding: 1rem; display: flex; flex-direction: column; min-width: 0; }
.panel-span-2 { grid-column: 1 / -1; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.panel-head h2 { margin: 0; font-size: 1.08rem; }

.hero { position: sticky; top: 88px; z-index: 5; margin-bottom: 1rem; }
.identity-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 0.4rem 0.9rem; }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; }
.kv-grid .k { color: var(--muted); font-weight: 600; }
.kv-grid .v { word-break: break-word; }
.flag-emoji {
  font-size: 1.35rem;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.hint { color: var(--muted); font-size: 0.86rem; margin-top: 0.4rem; }

.badge { border-radius: 999px; padding: 0.22rem 0.65rem; border: 1px solid var(--border); font-weight: 700; font-size: 0.78rem; }
.badge.warn { border-color: #ffaf55; color: #ffaf55; }
.badge.ok { border-color: #13d3c6; color: #13d3c6; }
.badge.muted { border-color: color-mix(in srgb, var(--muted) 45%, var(--border) 55%); color: var(--muted); }

.button-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.button-row .btn { flex: 1 1 150px; min-width: 140px; }
.identity-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.meter-wrap { margin-bottom: 0.6rem; }
.meter-track { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface-muted) 75%, var(--border) 25%); overflow: hidden; border: 1px solid var(--border); }
.meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff5f6d 0%, #ffb347 45%, #13d3c6 100%); transition: width 180ms ease; }

.score-badge { font: 700 2rem/1 "JetBrains Mono", "Fira Code", monospace; color: var(--text); margin-bottom: 0.4rem; }
.score-badge.low { color: #13d3c6; }
.score-badge.moderate { color: #ffb347; }
.score-badge.high { color: #ff5f6d; }

.compare-result { border: 1px dashed var(--border); border-radius: 10px; min-height: 72px; padding: 0.72rem; color: var(--text); }
.edu-list { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.edu-list li { margin: 0.25rem 0; }

@media (max-width: 1100px) {
  .hero { position: static; }
}

@media (max-width: 980px) {
  .layout-grid { grid-template-columns: 1fr; }
  .panel-span-2 { grid-column: auto; }
  .identity-grid, .kv-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .tool-header h1 { font-size: 1.42rem; line-height: 1.25; }
  .panel { padding: 0.82rem; }
  .panel-head { flex-wrap: wrap; align-items: flex-start; }
  .button-row .btn { width: 100%; min-width: 0; }
  .score-badge { font-size: 1.55rem; }
}

@media (max-width: 479px) {
  .panel { padding: 0.72rem; }
  .panel-head h2 { font-size: 0.98rem; }
  .lead, .trust-line { font-size: 0.92rem; }
}