/* ============================================ JWT 解码器样式 ============================================ */ /* 页面头部 */
.jwt-page-header { margin-bottom: 24px;
} .jwt-page-title { font-size: 28px; font-weight: 700; color: #111827; margin: 0 0 8px 0; letter-spacing: -0.5px;
} .jwt-page-desc { font-size: 15px; color: #6b7280; margin: 0 0 12px 0;
} .jwt-feature-tags { display: flex; flex-wrap: wrap; gap: 6px;
} .jwt-tag { display: inline-block; padding: 3px 10px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 12px; color: #4b5563; font-family: 'SF Mono', Monaco, monospace;
} /* 输入区域 */
.jwt-input-card { margin-bottom: 20px;
} .jwt-input-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
} .jwt-section-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0;
} .jwt-input-actions { display: flex; gap: 8px;
} .jwt-btn-danger { color: #ef4444;
} .jwt-btn-danger:hover { background: #fef2f2;
} .jwt-input-wrapper { position: relative; margin-bottom: 16px;
} .jwt-textarea { width: 100%; min-height: 120px; padding: 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 13px; line-height: 1.6; resize: vertical; transition: all 0.2s ease; background: #ffffff; color: #111827;
} .jwt-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
} .jwt-textarea::placeholder { color: #9ca3af;
} .jwt-textarea.error { border-color: #ef4444;
} .jwt-textarea.success { border-color: #10b981;
} .jwt-input-status { position: absolute; bottom: 8px; right: 12px; font-size: 12px; padding: 4px 10px; border-radius: 6px; background: #f3f4f6; color: #6b7280; display: none;
} .jwt-input-status.show { display: block;
} .jwt-input-status.error { background: #fef2f2; color: #ef4444;
} .jwt-input-status.success { background: #ecfdf5; color: #10b981;
} .jwt-decode-actions { display: flex; justify-content: center;
} .jwt-icon { width: 18px; height: 18px; margin-right: 6px; vertical-align: middle;
} /* 解析结果区域 */
.jwt-results { animation: fadeIn 0.3s ease;
} @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }
} /* 验证状态卡片 */
.jwt-verify-card { margin-bottom: 20px; border-left: 4px solid #e5e7eb;
} .jwt-verify-card.valid { border-left-color: #10b981;
} .jwt-verify-card.invalid { border-left-color: #ef4444;
} .jwt-verify-card.warning { border-left-color: #f59e0b;
} .jwt-verify-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
} .jwt-verify-title { font-size: 16px; font-weight: 600; color: #111827; margin: 0;
} .jwt-verify-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;
} .jwt-verify-badge.pending { background: #f3f4f6; color: #6b7283;
} .jwt-verify-badge.valid { background: #ecfdf5; color: #10b981;
} .jwt-verify-badge.invalid { background: #fef2f2; color: #ef4444;
} .jwt-verify-badge.expired { background: #fef3c7; color: #f59e0b;
} .jwt-verify-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
} .jwt-verify-item { display: flex; align-items: center; gap: 8px;
} .jwt-verify-label { font-size: 13px; color: #6b7280; min-width: 70px;
} .jwt-verify-value { font-size: 13px; color: #111827; font-weight: 500;
} .jwt-verify-value.valid { color: #10b981;
} .jwt-verify-value.invalid { color: #ef4444;
} .jwt-verify-value.warning { color: #f59e0b;
} /* 三部分网格 */
.jwt-parts-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px;
} @media (min-width: 768px) { .jwt-parts-grid { grid-template-columns: 1fr 1fr; } .jwt-part-large { grid-column: span 2; }
} @media (min-width: 1024px) { .jwt-parts-grid { grid-template-columns: 1fr 1.5fr 1fr; } .jwt-part-large { grid-column: span 1; }
} /* Part 卡片 */
.jwt-part-card { display: flex; flex-direction: column;
} .jwt-part-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6;
} .jwt-part-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #111827; margin: 0;
} .jwt-part-dot { width: 10px; height: 10px; border-radius: 50%;
} .jwt-copy-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #e5e7eb; border-radius: 6px; background: #ffffff; cursor: pointer; transition: all 0.2s ease;
} .jwt-copy-btn:hover { background: #f9fafb; border-color: #d1d5db;
} .jwt-copy-btn:active { transform: scale(0.95);
} .jwt-copy-btn svg { width: 16px; height: 16px; color: #6b7280;
} .jwt-copy-btn:hover svg { color: #111827;
} .jwt-copy-btn.copied { background: #ecfdf5; border-color: #10b981;
} .jwt-copy-btn.copied svg { color: #10b981;
} .jwt-part-content { flex: 1;
} .jwt-section-label { display: block; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
} .jwt-raw-section { margin-bottom: 16px;
} .jwt-raw-code { display: block; padding: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: #6b7280; word-break: break-all; line-height: 1.5; max-height: 80px; overflow-y: auto;
} .jwt-raw-signature { font-size: 10px; max-height: 60px;
} .jwt-decoded-section { flex: 1;
} .jwt-code-block { margin: 0; padding: 16px; background: #1f2937; border-radius: 8px; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; line-height: 1.6; color: #e5e7eb; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
} /* Signature 特殊样式 */
.jwt-signature-info { margin-bottom: 16px;
} .jwt-signature-desc { font-size: 13px; color: #6b7280; margin: 0;
} /* 使用说明 */
.jwt-guide-content { font-size: 14px; line-height: 1.8; color: #374151;
} .jwt-guide-content h4 { font-size: 15px; font-weight: 600; color: #111827; margin: 20px 0 12px 0;
} .jwt-guide-content p { margin: 0 0 12px 0;
} .jwt-guide-list { margin: 0 0 16px 0; padding-left: 20px;
} .jwt-guide-list li { margin-bottom: 8px;
} .jwt-guide-list code { display: inline-block; padding: 2px 6px; background: #f3f4f6; border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; color: #ef4444;
} .jwt-guide-list strong { color: #111827;
} /* FAQ */
.jwt-faq-list { display: flex; flex-direction: column; gap: 12px;
} .jwt-faq-item { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; transition: all 0.2s ease;
} .jwt-faq-item:hover { border-color: #d1d5db;
} .jwt-faq-item[open] { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6;
} .jwt-faq-question { padding: 16px 20px; font-size: 14px; font-weight: 500; color: #111827; cursor: pointer; list-style: none; position: relative; user-select: none;
} .jwt-faq-question::-webkit-details-marker { display: none;
} .jwt-faq-question::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9ca3af; transition: transform 0.2s ease;
} .jwt-faq-item[open] .jwt-faq-question::after { content: '−'; color: #3b82f6;
} .jwt-faq-answer { padding: 0 20px 16px 20px; font-size: 14px; line-height: 1.7; color: #6b7280;
} .jwt-faq-answer p { margin: 0;
} .jwt-faq-answer code { display: inline-block; padding: 2px 6px; background: #f3f4f6; border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; color: #111827;
} /* 响应式调整 */
@media (max-width: 640px) { .jwt-page-title { font-size: 22px; } .jwt-input-header { flex-direction: column; align-items: flex-start; } .jwt-verify-content { grid-template-columns: 1fr; } .jwt-code-block { font-size: 11px; padding: 12px; } .jwt-raw-code { font-size: 10px; }
} /* 暗色主题适配 */
@media (prefers-color-scheme: dark) { .jwt-tag { background: #374151; border-color: #4b5563; color: #d1d5db; } .jwt-textarea { background: #1f2937; border-color: #374151; color: #f9fafb; } .jwt-textarea::placeholder { color: #6b7280; } .jwt-raw-code { background: #1f2937; border-color: #374151; color: #9ca3af; } .jwt-copy-btn { background: #1f2937; border-color: #374151; } .jwt-copy-btn:hover { background: #374151; } .jwt-copy-btn svg { color: #9ca3af; } .jwt-faq-item { border-color: #374151; } .jwt-faq-item:hover { border-color: #4b5563; }
}