@charset "UTF-8"; /* ======================================== 全局样式和变量 ======================================== */
:root { --primary-color: #2563eb; --primary-hover: #1d4ed8; --secondary-color: #64748b; --success-color: #10b981; --error-color: #ef4444; --warning-color: #f59e0b; --bg-color: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --border-color: #e2e8f0; --text-primary: #0f172a; --text-secondary: #64748b; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --transition: all 0.2s ease; --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} * { margin: 0; padding: 0; box-sizing: border-box;
} body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif; background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column;
} /* ======================================== 容器和布局 ======================================== */
.container { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem; width: 100%;
} /* ======================================== 头部区域 ======================================== */
.header { text-align: center; margin-bottom: 3rem; animation: fadeInDown 0.6s ease;
} .title { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem;
} .title .icon { width: 3rem; height: 3rem; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.2)); animation: iconFloat 3s ease-in-out infinite;
} @keyframes iconFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); }
} .subtitle { font-size: 1.125rem; color: var(--text-secondary); font-weight: 400;
} /* ======================================== 主内容区域 ======================================== */
.main-content { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; animation: fadeInUp 0.6s ease;
} .input-panel { grid-column: 1; align-self: stretch;
} .converter-section { grid-column: 2; align-self: center;
} .output-panel { grid-column: 3; align-self: stretch;
} .panel { background: var(--bg-color); border: 2px solid var(--border-color); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-smooth); display: flex; flex-direction: column; height: 100%; position: relative;
} .panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb); background-size: 200% 100%; opacity: 0; transition: opacity 0.3s ease;
} .panel:hover { box-shadow: var(--shadow-lg); border-color: #cbd5e1;
} .panel:hover::before { opacity: 1; animation: shimmer 2s linear infinite;
} @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; }
} .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-color)); border-bottom: 2px solid var(--border-color); position: relative; z-index: 1;
} .panel-header h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem;
} .panel-header h2::before { content: ''; width: 4px; height: 1.25rem; background: var(--primary-color); border-radius: 2px;
} .textarea { width: 100%; min-height: 400px; padding: 1.5rem; border: none; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.9375rem; line-height: 1.6; resize: vertical; outline: none; background: var(--bg-color); color: var(--text-primary); transition: var(--transition-smooth); flex: 1;
} .textarea:focus { background: linear-gradient(to bottom, #ffffff, #fafbfc);
} .textarea::-webkit-input-placeholder { opacity: 0.6;
} .textarea:focus::-webkit-input-placeholder { opacity: 0.8;
} .textarea::placeholder { color: #94a3b8;
} .panel-footer { padding: 0.875rem 1.5rem; background: linear-gradient(to top, var(--bg-secondary), var(--bg-color)); border-top: 1px solid var(--border-color);
} .info-text { font-size: 0.875rem; color: var(--text-secondary); font-family: 'Consolas', 'Monaco', monospace; display: flex; align-items: center; gap: 0.25rem;
} /* ======================================== 转换按钮区域 ======================================== */
.converter-section { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem; min-width: 180px; gap: 0.5rem;
} .options { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; width: 100%;
} .checkbox-label { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary); transition: var(--transition); white-space: nowrap; padding: 0.375rem 0.625rem; border-radius: var(--radius-sm); background: transparent;
} .checkbox-label:hover { color: var(--text-primary); background: var(--bg-secondary);
} .checkbox-label span { user-select: none;
} .checkbox-label input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--primary-color); flex-shrink: 0;
} /* ======================================== 按钮样式 ======================================== */
.button-group { display: flex; gap: 0.5rem;
} .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; font-size: 0.9375rem; font-weight: 500; border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); font-family: inherit; white-space: nowrap;
} .btn-icon { width: 1.125rem; height: 1.125rem;
} .btn-primary { background: var(--primary-color); color: white; box-shadow: var(--shadow-sm);
} .btn-primary:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md);
} .btn-primary:active:not(:disabled) { transform: translateY(0);
} .btn-convert { padding: 1.5rem 2rem; font-size: 1.125rem; border-radius: 1rem; box-shadow: var(--shadow-lg); font-weight: 600; flex-direction: row; gap: 0.75rem; min-height: auto; width: 100%; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); align-items: center; justify-content: center;
} .btn-convert:hover:not(:disabled) { box-shadow: var(--shadow-xl); background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); transform: translateX(3px);
} .btn-convert .convert-icon { width: 1.5rem; height: 1.5rem; transform: rotate(0deg); transition: var(--transition); order: 2;
} .btn-convert:hover:not(:disabled) .convert-icon { transform: translateX(5px); animation: slideRight 0.6s ease-in-out;
} .convert-text { font-size: 1.125rem; writing-mode: horizontal-tb; letter-spacing: 0.05em; order: 1;
} .btn-secondary { background: white; color: var(--secondary-color); border: 1.5px solid var(--border-color); position: relative; overflow: hidden;
} .btn-secondary::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: var(--bg-secondary); transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease;
} .btn-secondary:hover:not(:disabled)::before { width: 300px; height: 300px;
} .btn-secondary:hover:not(:disabled) { border-color: #cbd5e1; color: var(--text-primary);
} .btn-secondary span,
.btn-secondary svg { position: relative; z-index: 1;
} .btn:disabled { opacity: 0.5; cursor: not-allowed;
} /* ======================================== Toast 提示 ======================================== */
.toast { position: fixed; top: 2rem; right: 2rem; padding: 1rem 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); font-size: 0.9375rem; font-weight: 500; opacity: 0; transform: translateX(400px); transition: all 0.3s ease; z-index: 1000; max-width: 400px;
} .toast.show { opacity: 1; transform: translateX(0);
} .toast.success { background: var(--success-color); color: white;
} .toast.error { background: var(--error-color); color: white;
} .toast.info { background: var(--primary-color); color: white;
} /* ======================================== 页脚 ======================================== */
.footer { text-align: center; margin-top: 3rem; padding: 2rem 0; color: var(--text-secondary); font-size: 0.9375rem; position: relative;
} .footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); border-radius: 2px;
} /* ======================================== 工具说明 / 文档区域 ======================================== */
.info-section { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: 1.75rem; margin-top: 2.5rem; align-items: flex-start;
} .info-main { min-width: 0;
} .info-side { min-width: 0;
} .info-card { background: var(--bg-color); border-radius: var(--radius-xl); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); padding: 1.5rem 1.75rem;
} .info-card + .info-card { margin-top: 1.25rem;
} .info-card-header { margin-bottom: 1.25rem;
} .info-card-header h2 { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.35rem;
} .info-card-header p { font-size: 0.95rem; color: var(--text-secondary);
} .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem;
} .info-block { margin-bottom: 1.25rem;
} .info-block h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; position: relative; padding-left: 0.75rem;
} .info-block h3::before { content: ''; position: absolute; left: 0; top: 0.45rem; width: 4px; height: 0.9rem; border-radius: 999px; background: var(--primary-color); opacity: 0.85;
} .info-card ul,
.info-card ol { padding-left: 1.25rem; font-size: 0.9rem; color: var(--text-secondary);
} .info-card li { margin-bottom: 0.35rem;
} .info-steps { margin-top: 0.5rem;
} .info-steps li + li { margin-top: 0.15rem;
} .info-steps code { font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.85em; padding: 0.05rem 0.35rem; border-radius: 0.25rem; background: var(--bg-tertiary); border: 1px solid var(--border-color);
} .code-example { margin-top: 0.75rem; border-radius: var(--radius-md); background: #0f172a; color: #e5e7eb; font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; overflow: hidden; border: 1px solid #020617;
} .code-example + .code-example { margin-top: 0.75rem;
} .code-example-title { padding: 0.4rem 0.9rem; font-size: 0.8rem; color: #e5e7eb; background: linear-gradient(to right, #1e293b, #0f172a); border-bottom: 1px solid #020617;
} .code-example pre { margin: 0; padding: 0.9rem 1rem; font-size: 0.8rem; line-height: 1.7; overflow-x: auto;
} .code-example code { white-space: pre;
} .faq-list { margin-top: 0.5rem; font-size: 0.9rem;
} .faq-list dt { font-weight: 600; color: var(--text-primary); margin-top: 0.5rem;
} .faq-list dd { margin-left: 0; margin-bottom: 0.4rem; color: var(--text-secondary);
} .link-list { list-style: none; padding-left: 0; margin: 0.25rem 0 0; font-size: 0.9rem;
} .link-list li + li { margin-top: 0.3rem;
} .link-list a { color: var(--primary-color); text-decoration: none; position: relative;
} .link-list a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--primary-color); transition: width 0.2s ease;
} .link-list a:hover::after { width: 100%;
} .info-list { padding-left: 1.25rem; font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.5rem;
} /* ======================================== 动画 ======================================== */
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }
} @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }
} @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); }
} @keyframes bounce { 0%, 100% { transform: rotate(90deg) translateY(0); } 50% { transform: rotate(90deg) translateY(6px); }
} @keyframes slideRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); }
} /* ======================================== 响应式设计 ======================================== */
@media (max-width: 1200px) { .main-content { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .input-panel { grid-column: 1; grid-row: 1; } .converter-section { grid-column: 1; grid-row: 2; padding: 1.5rem 0; min-width: auto; } .output-panel { grid-column: 1; grid-row: 3; } .btn-convert { flex-direction: row; min-height: auto; padding: 1rem 2rem; gap: 0.75rem; } .btn-convert .convert-icon { width: 1.25rem; height: 1.25rem; transform: rotate(0deg); } .btn-convert:hover:not(:disabled) .convert-icon { transform: translateX(3px); } .options { flex-direction: row; justify-content: center; gap: 2rem; } .info-section { grid-template-columns: 1fr; }
} @media (max-width: 768px) { .container { padding: 1.5rem 1rem; } .title { font-size: 1.875rem; flex-direction: column; gap: 0.5rem; } .subtitle { font-size: 1rem; } .panel-header { flex-direction: column; gap: 1rem; align-items: stretch; } .button-group { justify-content: center; } .options { flex-direction: column; gap: 0.75rem; align-items: center; } .textarea { min-height: 250px; font-size: 0.875rem; } .toast { right: 1rem; left: 1rem; max-width: calc(100% - 2rem); } .info-card { padding: 1.25rem 1.25rem; } .info-grid { grid-template-columns: 1fr; }
} /* ======================================== 滚动条美化 ======================================== */
.textarea::-webkit-scrollbar { width: 12px;
} .textarea::-webkit-scrollbar-track { background: var(--bg-secondary);
} .textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px;
} .textarea::-webkit-scrollbar-thumb:hover { background: #94a3b8;
}