/* ============================================================
   情报查询页（/trace）— 复用 style.css 的 Ember 设计令牌
   ============================================================ */

.trace-page { padding-bottom: var(--sp-12); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.brand--link { text-decoration: none; color: inherit; }
.brand--link:hover { color: inherit; }
.brand--link:hover .brand__mark { box-shadow: 0 0 0 1px var(--brand-line), 0 8px 22px rgba(255, 140, 60, .22); }

.trace-main { padding-block: var(--sp-8) var(--sp-10); }

/* ---------------- Hero ---------------- */
.trace-hero { position: relative; max-width: 880px; }
.trace-title { font-size: clamp(28px, 4.4vw, 42px); letter-spacing: -.035em; }
.trace-title__bracket { color: var(--brand); font-weight: 500; opacity: .85; }
.trace-title__sep { color: var(--text-3); font-weight: 400; margin-inline: 2px; }

.trace-form { margin-top: var(--sp-6); }

.trace-input {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 6px 6px var(--sp-4);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.trace-input:focus-within {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, .12), 0 10px 34px rgba(0,0,0,.45);
}
.trace-input__icon { color: var(--brand); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.trace-input__field {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  padding-block: 12px;
  font-size: var(--fs-md); font-family: var(--mono);
}
.trace-input__field::placeholder { color: var(--text-3); font-family: var(--font); }
.trace-input__type {
  flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: var(--r-full);
  padding: 4px 9px;
}
.trace-input__btn { flex: 0 0 auto; min-height: 44px; }

@media (max-width: 640px) {
  .trace-input { flex-wrap: wrap; padding: var(--sp-3); }
  .trace-input__field { flex: 1 1 100%; order: 3; padding-block: 8px; }
  .trace-input__btn { flex: 1 1 100%; order: 4; }
}

.trace-form__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  margin-top: var(--sp-3);
}
.trace-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trace-examples__label { font-size: var(--fs-xs); color: var(--text-3); margin-right: 2px; }
.trace-chip {
  font-size: var(--fs-xs); color: var(--text-2);
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 3px 9px; cursor: pointer;
  font-family: var(--mono);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.trace-chip:hover { color: var(--text); border-color: var(--brand-line); background: var(--brand-soft); }

.trace-types { display: flex; flex-wrap: wrap; gap: 6px; }
.trace-types__item {
  font-size: var(--fs-xs); color: var(--text-3);
  border: 1px dashed var(--border-strong); border-radius: var(--r-full);
  padding: 3px 9px;
  transition: all var(--t-fast);
}
.trace-types__item.is-active {
  color: var(--brand-ink); background: var(--grad); border-color: transparent;
  font-weight: 700;
}

/* ---------------- 提示 / 进度 ---------------- */
.trace-alert {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255, 92, 92, .35);
  background: var(--danger-soft);
  color: #ffd2d2;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.trace-alert[hidden] { display: none; }

.trace-progress { margin-top: var(--sp-6); }
.trace-progress[hidden] { display: none; }
.trace-progress__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.trace-progress__badge {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: var(--r-full);
  padding: 4px 10px; white-space: nowrap;
}
.trace-progress__badge.is-done { color: var(--success); background: var(--success-soft); border-color: rgba(61,220,151,.35); }
.trace-progress__badge.is-error { color: var(--danger); background: var(--danger-soft); border-color: rgba(255,92,92,.35); }

.trace-bar {
  height: 6px; margin-top: var(--sp-4);
  background: var(--surface-3); border-radius: var(--r-full); overflow: hidden;
}
.trace-bar__fill {
  display: block; height: 100%; width: 8%;
  background: var(--grad); border-radius: inherit;
  transition: width var(--t-slow);
}
.trace-bar__fill.is-indeterminate {
  animation: traceSlide 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
  background-size: 60% 100%; background-repeat: no-repeat;
}
@keyframes traceSlide {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

.trace-progress__stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-2);
}
.trace-progress__stats b { color: var(--text); font-family: var(--mono); }

.trace-progress__log {
  margin-top: var(--sp-4);
  max-height: 190px; overflow: auto;
  background: #070910; border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.7;
  color: var(--text-2); white-space: pre-wrap; word-break: break-all;
}

/* ---------------- 结果 ---------------- */
.trace-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3); margin-block: var(--sp-6) var(--sp-4);
}
@media (max-width: 780px) { .trace-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.trace-metric {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.trace-metric__label { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .04em; }
.trace-metric__value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.trace-metric__value.is-brand { color: var(--brand); }
.trace-metric__value.is-success { color: var(--success); }
.trace-metric__value.is-info { color: var(--info); }
.trace-metric__hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

.trace-result-card { padding-top: var(--sp-5); }
.trace-result-head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; justify-content: space-between; }
.trace-toolbar { display: flex; gap: var(--sp-2); }

.trace-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-block: var(--sp-4) var(--sp-3); }
.trace-filter {
  font-size: var(--fs-xs); color: var(--text-2);
  background: rgba(255,255,255,.02); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 4px 10px; cursor: pointer;
  transition: all var(--t-fast);
}
.trace-filter:hover { color: var(--text); border-color: var(--border-strong); }
.trace-filter.is-active { color: var(--brand-ink); background: var(--grad); border-color: transparent; font-weight: 700; }

.entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }

.entity {
  --type-color: var(--text-3);
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 3px);
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.entity::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--type-color); opacity: .85;
}
.entity:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.entity.is-note { background: rgba(255,255,255,.015); }

.entity__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.entity__type {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--type-color);
  background: color-mix(in srgb, var(--type-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-color) 34%, transparent);
  border-radius: var(--r-full); padding: 2px 7px;
  white-space: nowrap;
}
.entity__conf {
  margin-left: auto; font-size: 10px; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.entity__conf::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3);
}
.entity__conf.is-high::before { background: var(--success); }
.entity__conf.is-medium::before { background: var(--warn); }
.entity__conf.is-low::before { background: var(--text-3); }

.entity__value {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm); line-height: 1.6;
  word-break: break-word;
  white-space: pre-line;   /* 支持多行备注：模块返回 \n 即换行 */
  color: var(--text);
}
.entity__value.is-mono { font-family: var(--mono); font-size: var(--fs-xs); }
.entity__value a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
.entity__value a:hover { color: var(--brand); }

.entity__meta {
  margin-top: 6px; font-size: 11px; color: var(--text-3);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.entity__meta b { color: var(--text-2); font-weight: 600; }
.entity__actions { margin-top: var(--sp-2); }

.ai-copy {
  font-size: 11px; color: var(--text-3); background: none; border: 0;
  cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.ai-copy:hover { color: var(--brand); }

/* 类型配色 */
.entity[data-type="IP"], .entity[data-type="URL"] { --type-color: #56b6ff; }
.entity[data-type="DOMAIN"], .entity[data-type="SUBDOMAIN"] { --type-color: #ffb020; }
.entity[data-type="DNS"] { --type-color: #7dd3fc; }
.entity[data-type="EMAIL"], .entity[data-type="PROFILE"] { --type-color: #c084fc; }
.entity[data-type="PHONE"] { --type-color: #3ddc97; }
.entity[data-type="USERNAME"] { --type-color: #f472b6; }
.entity[data-type="ORG"], .entity[data-type="ASN"] { --type-color: #fbbf24; }
.entity[data-type="COUNTRY"], .entity[data-type="CITY"], .entity[data-type="GEO"] { --type-color: #34d399; }
.entity[data-type="RISK"] { --type-color: #ff5c5c; }
.entity[data-type="NOTE"] { --type-color: #7a8399; }

.trace-logs { margin-top: var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.trace-logs summary {
  cursor: pointer; font-size: var(--fs-sm); color: var(--text-2);
  list-style: none; display: flex; align-items: center; gap: var(--sp-2);
}
.trace-logs summary::-webkit-details-marker { display: none; }
.trace-logs summary::before { content: '▸'; color: var(--brand); transition: transform var(--t-fast); }
.trace-logs[open] summary::before { transform: rotate(90deg); }
.trace-logs__hint { font-size: var(--fs-xs); color: var(--text-3); }
.trace-logs__body {
  margin-top: var(--sp-3); max-height: 260px; overflow: auto;
  background: #070910; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); font-family: var(--mono); font-size: 11px; line-height: 1.75;
  color: var(--text-2); white-space: pre-wrap; word-break: break-all;
}

/* ---------------- 空态 / 能力 ---------------- */
.trace-empty-head { margin-block: var(--sp-8) var(--sp-4); }
.trace-empty-head .section-head__title { font-size: var(--fs-xl); }
.trace-empty-head .section-head__sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }

.trace-caps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3);
}
.trace-cap {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.trace-cap:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.trace-cap__icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand);
  font-size: 16px; margin-bottom: var(--sp-3);
}
.trace-cap__title { font-size: var(--fs-md); }
.trace-cap__text { font-size: var(--fs-xs); color: var(--text-2); margin-top: 6px; line-height: 1.65; }
.trace-cap__tag {
  display: inline-block; margin-top: var(--sp-3);
  font-size: 10px; letter-spacing: .04em; color: var(--text-3);
  border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px 8px;
}

.trace-scope { margin-top: var(--sp-6); }

/* ---------------- 移动端 ---------------- */
@media (max-width: 640px) {
  .trace-main { padding-block: var(--sp-5) var(--sp-8); }
  .trace-form__foot { flex-direction: column; align-items: flex-start; }
  .entity-grid { grid-template-columns: minmax(0, 1fr); }
  .trace-toolbar { width: 100%; }
  .trace-toolbar .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .trace-bar__fill.is-indeterminate { animation: none; width: 100%; opacity: .5; }
  .entity, .trace-cap { transition: none; }
}