@keyframes _si{from{opacity:0}to{opacity:1}}

.legacy-content .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.legacy-content .card {
  border-radius: var(--radius); padding: 16px 18px; border: 2px solid;
  cursor: pointer; transition: all 0.25s; display: flex; flex-direction: column; gap: 6px;
}.legacy-content .card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }.legacy-content .card.active { box-shadow: 0 6px 24px rgba(0,0,0,0.12); }.legacy-content .card-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 7px; font-size: 11px; font-weight: 800; width: fit-content;
}.legacy-content .card-title { font-size: 15px; font-weight: 800; line-height: 1.3; }.legacy-content .card-hint { font-size: 12px; opacity: 0.75; line-height: 1.4; }.legacy-content .c-data { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.25); color: #991b1b; }.legacy-content .c-data.active { border-color: #dc2626; background: rgba(220,38,38,0.12); }.legacy-content .c-data .card-badge { background: rgba(220,38,38,0.18); color: #991b1b; }.legacy-content .c-key { background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.25); color: #92400e; }.legacy-content .c-key.active { border-color: #d97706; background: rgba(217,119,6,0.12); }.legacy-content .c-key .card-badge { background: rgba(217,119,6,0.18); color: #92400e; }.legacy-content .c-ctrl { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.25); color: #1e40af; }.legacy-content .c-ctrl.active { border-color: #2563eb; background: rgba(37,99,235,0.12); }.legacy-content .c-ctrl .card-badge { background: rgba(37,99,235,0.18); color: #1e40af; }.legacy-content .c-rule { background: rgba(107,114,128,0.06); border-color: rgba(107,114,128,0.25); color: #4b5563; }.legacy-content .c-rule.active { border-color: #6b7280; background: rgba(107,114,128,0.12); }.legacy-content .c-rule .card-badge { background: rgba(107,114,128,0.18); color: #4b5563; }.legacy-content .detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }.legacy-content .detail-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}.legacy-content .detail-title { font-size: 20px; font-weight: 800; color: var(--text); }.legacy-content .detail-sub { font-size: 13px; margin-top: 2px; }.legacy-content .detail-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card);
}.legacy-content .dc-label { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 8px; }.legacy-content .dc-body { font-size: 14px; color: var(--sub); line-height: 1.75; }.legacy-content .dc-body strong { color: var(--text); }.legacy-content .example-list { display: flex; flex-direction: column; gap: 8px; }.legacy-content .example-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--sub); line-height: 1.55; }.legacy-content .example-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 8px; }.legacy-content .strategy-box { border-radius: var(--radius); padding: 16px 18px; font-size: 14px; line-height: 1.75; }.legacy-content .strategy-box strong { font-weight: 800; }.legacy-content .tip-box { display: flex; gap: 8px; padding: 14px 16px; border-radius: var(--radius); font-size: 14px; line-height: 1.55; }.legacy-content .tip-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }.legacy-content .detail-panel { display: flex; flex-direction: column; gap: 12px; }