/* TextCounter Pro - 专业级文本统计工具样式 */ /* CSS变量定义 */
:root { /* 颜色系统 */ --primary-50: #f0f9ff; --primary-100: #e0f2fe; --primary-200: #bae6fd; --primary-300: #7dd3fc; --primary-400: #38bdf8; --primary-500: #0ea5e9; --primary-600: #0284c7; --primary-700: #0369a1; --primary-800: #075985; --primary-900: #0c4a6e; --secondary-50: #fdf4ff; --secondary-100: #fae8ff; --secondary-200: #f3d4ff; --secondary-300: #e9b3ff; --secondary-400: #d946ef; --secondary-500: #c026d3; --secondary-600: #a21caf; --secondary-700: #86198f; --secondary-800: #701a75; --secondary-900: #581c87; /* 中性色 */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* 语义色彩 */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: var(--primary-500); /* 间距系统 */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* 圆角系统 */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; /* 阴影系统 */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* 字体系统 */ --font-mono: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; /* 动画时长 */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 350ms; /* 主题相关 */ --bg-base: #ffffff; --bg-subtle: var(--gray-50); --bg-muted: var(--gray-100); --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --border-color: var(--gray-200); --border-hover: var(--gray-300);
} /* 暗色主题 */
[data-theme="dark"] { --bg-base: #0f1419; --bg-subtle: #1a1f29; --bg-muted: #242b38; --text-primary: #ffffff; --text-secondary: #c9d1d9; --text-muted: #8b949e; --border-color: #30363d; --border-hover: #484f58;
} /* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box;
} html { scroll-behavior: smooth;
} body { font-family: var(--font-sans); line-height: 1.6; color: var(--text-primary); background: var(--bg-base); font-size: 16px; overflow-x: hidden; transition: background-color var(--duration-normal), color var(--duration-normal);
} /* 加载屏幕 */
.loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-600), var(--secondary-600)); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 0.5s ease;
} .loading-screen.hidden { opacity: 0; pointer-events: none;
} .loading-content { text-align: center; color: white;
} .loading-logo { margin-bottom: var(--space-4); animation: loadingBounce 1.5s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
} .loading-logo svg { stroke: white; width: 64px; height: 64px;
} .loading-text { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--space-6); letter-spacing: 0.05em; animation: loadingTextGlow 2s ease-in-out infinite;
} @keyframes loadingTextGlow { 0%, 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6); }
} .loading-bar { width: 240px; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: var(--radius-sm); overflow: hidden; position: relative;
} .loading-bar::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: loadingShine 1.5s ease-in-out infinite;
} .loading-progress { height: 100%; background: linear-gradient(90deg, #ffffff, #f0f8ff, #ffffff); border-radius: var(--radius-sm); animation: loadingProgress 2.5s ease-in-out infinite; position: relative;
} @keyframes loadingBounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.1); }
} @keyframes loadingRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
} @keyframes loadingProgress { 0% { width: 0%; opacity: 0.5; } 25% { width: 30%; opacity: 1; } 50% { width: 70%; opacity: 0.8; } 75% { width: 90%; opacity: 1; } 100% { width: 100%; opacity: 0.9; }
} @keyframes loadingShine { 0% { left: -100%; } 100% { left: 100%; }
} /* 主题切换按钮 */
.theme-toggle { position: fixed; top: var(--space-6); right: var(--space-6); width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--bg-muted); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); cursor: pointer; z-index: 1000; transition: all var(--duration-normal); display: flex; align-items: center; justify-content: center;
} .theme-toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-xl);
} .theme-icon { display: flex; align-items: center; justify-content: center; transition: transform var(--duration-normal);
} .theme-icon svg { stroke: var(--text-primary); transition: stroke 0.3s ease;
} [data-theme="dark"] .theme-icon .icon-moon { display: none;
} [data-theme="dark"] .theme-icon .icon-sun { display: block !important;
} [data-theme="light"] .theme-icon .icon-moon { display: block;
} [data-theme="light"] .theme-icon .icon-sun { display: none;
} .theme-toggle:hover .theme-icon { transform: rotate(20deg);
} /* 主容器 */
.container { max-width: 1200px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column;
} /* 导航栏 */
.navbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-8); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100;
} .nav-brand { display: flex; align-items: center; gap: var(--space-3);
} .brand-logo { display: flex; align-items: center; justify-content: center; animation: logoFloat 3s ease-in-out infinite; transition: all 0.3s ease; cursor: pointer;
} .brand-logo svg { stroke: var(--primary-600); transition: all 0.3s ease;
} @keyframes logoFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-5px) rotate(5deg); }
} @keyframes logoRotate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); }
} .brand-logo:hover { transform: scale(1.2) rotate(15deg); animation-play-state: paused;
} .brand-text { display: flex; flex-direction: column; line-height: 1.2;
} .brand-name { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); transition: all 0.3s ease;
} .brand-suffix { font-size: 0.75rem; font-weight: 500; color: var(--primary-600); text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; animation: suffixGlow 2s ease-in-out infinite;
} @keyframes suffixGlow { 0%, 100% { text-shadow: 0 0 5px rgba(var(--primary-500), 0.3); } 50% { text-shadow: 0 0 10px rgba(var(--primary-500), 0.6); }
} .nav-brand:hover .brand-name { color: var(--primary-600);
} .nav-brand:hover .brand-suffix { letter-spacing: 0.15em; color: var(--secondary-600);
} .nav-actions { display: flex; gap: var(--space-2);
} .nav-btn { width: 40px; height: 40px; border: none; border-radius: var(--radius-lg); background: transparent; cursor: pointer; transition: all var(--duration-normal); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
} .nav-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, var(--primary-200), transparent); transition: all var(--duration-normal); transform: translate(-50%, -50%); border-radius: 50%;
} .nav-btn:hover { background: var(--bg-muted); transform: translateY(-2px) scale(1.1);
} .nav-btn:hover::before { width: 100%; height: 100%;
} .nav-btn:active { transform: translateY(0) scale(0.95);
} .nav-icon { display: flex; align-items: center; justify-content: center;
} .nav-icon svg { stroke: var(--text-secondary); transition: stroke 0.3s ease;
} .nav-btn:hover .nav-icon svg { stroke: var(--primary-600);
} /* 英雄区域 */
.hero-section { padding: var(--space-10) var(--space-6); text-align: center; background: linear-gradient(135deg, var(--primary-50), var(--secondary-50)); position: relative; overflow: hidden;
} .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e5e7eb" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); opacity: 0.5;
} .hero-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 70%); animation: gradientPulse 4s ease-in-out infinite;
} @keyframes gradientPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); }
} .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto;
} .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-6); background: linear-gradient(135deg, var(--primary-600), var(--secondary-600), var(--primary-500)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: titleGradientShift 3s ease-in-out infinite, titleSlideIn 1s ease-out; position: relative; overflow: hidden;
} .hero-title::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: titleShine 3s ease-in-out infinite 1s;
} @keyframes titleGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; }
} @keyframes titleShine { 0% { left: -100%; } 100% { left: 100%; }
} @keyframes titleSlideIn { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); }
} .hero-title:hover { animation-play-state: paused; transform: scale(1.02); transition: transform 0.3s ease;
} .hero-highlight { display: block; font-weight: 800; background: linear-gradient(135deg, var(--secondary-500), var(--primary-500), var(--secondary-600)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: highlightTypewriter 2s ease-out 0.5s both, highlightGlow 2s ease-in-out infinite 2.5s; position: relative; white-space: nowrap; border-right: 3px solid transparent;
} .hero-highlight::after { content: '|'; color: var(--primary-500); animation: blink 1s infinite 2.5s; opacity: 0;
} @keyframes highlightTypewriter { 0% { width: 0; opacity: 0; } 1% { opacity: 1; } 100% { width: 100%; opacity: 1; }
} @keyframes highlightGlow { 0%, 100% { text-shadow: 0 0 10px rgba(var(--primary-500), 0.3); } 50% { text-shadow: 0 0 20px rgba(var(--primary-500), 0.6), 0 0 30px rgba(var(--secondary-500), 0.4); }
} @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; }
} .hero-description { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: var(--space-8); line-height: 1.6; animation: descriptionFadeIn 1.5s ease-out 1s both; opacity: 0;
} @keyframes descriptionFadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); }
} .hero-features { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-8);
} .feature-tag { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: white; border-radius: var(--radius-xl); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); box-shadow: var(--shadow-sm); transition: all var(--duration-normal); animation: featureSlideUp 0.8s ease-out both; opacity: 0; transform: translateY(20px);
} .feature-tag svg { stroke: var(--primary-500); flex-shrink: 0;
} .feature-tag:nth-child(1) { animation-delay: 1.8s; }
.feature-tag:nth-child(2) { animation-delay: 2.0s; }
.feature-tag:nth-child(3) { animation-delay: 2.2s; }
.feature-tag:nth-child(4) { animation-delay: 2.4s; } @keyframes featureSlideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); }
} .feature-tag:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--primary-50), white); color: var(--primary-600);
} /* 工作区域 */
.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-6); flex: 1;
} .workspace > * { animation: workspaceSlideIn 0.8s ease-out both; opacity: 0; transform: translateY(30px);
} .workspace > *:nth-child(1) { animation-delay: 0.2s; }
.workspace > *:nth-child(2) { animation-delay: 0.4s; } @keyframes workspaceSlideIn { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); }
} /* 面板样式 */
.input-panel,
.stats-panel { background: white; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; transition: all var(--duration-normal); position: relative;
} .input-panel::before,
.stats-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); transform: scaleX(0); transition: transform var(--duration-normal);
} .input-panel:hover,
.stats-panel:hover { box-shadow: var(--shadow-xl); transform: translateY(-2px);
} .input-panel:hover::before,
.stats-panel:hover::before { transform: scaleX(1);
} .panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); background: var(--bg-subtle); border-bottom: 1px solid var(--border-color);
} .panel-title { display: flex; align-items: center; gap: var(--space-2); font-size: 1.1rem; font-weight: 600; color: var(--text-primary);
} .panel-icon { display: flex; align-items: center; justify-content: center;
} .panel-icon svg { stroke: var(--primary-600);
} .panel-actions { display: flex; gap: var(--space-2);
} .tool-btn { width: 36px; height: 36px; border: none; border-radius: var(--radius-md); background: transparent; cursor: pointer; transition: all var(--duration-normal); display: flex; align-items: center; justify-content: center;
} .tool-btn svg { stroke: var(--text-secondary); transition: stroke 0.3s ease;
} .tool-btn:hover svg { stroke: var(--primary-600);
} .tool-btn.danger:hover svg { stroke: white;
} .tool-btn:hover { background: var(--bg-muted); transform: scale(1.1);
} .tool-btn.danger:hover { background: var(--error); color: white;
} /* 输入区域 */
.input-container { padding: var(--space-4); position: relative;
} .input-container .input-tools { position: absolute; bottom: var(--space-6); right: var(--space-6); display: flex; gap: var(--space-2);
} .text-editor { width: 100%; height: 420px; padding: var(--space-4); border: 2px solid var(--border-color); border-radius: var(--radius-xl); font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.6; resize: vertical; transition: all var(--duration-normal); background: var(--bg-base); color: var(--text-primary);
} .text-editor:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(var(--primary-500), 0.1);
} .text-editor::placeholder { color: var(--text-muted); line-height: 1.5;
} /* 底部工具栏 */
.bottom-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); background: var(--bg-subtle); border-top: 1px solid var(--border-color); margin: 0 var(--space-6) var(--space-4); border-radius: var(--radius-lg);
} .quick-stats { display: flex; align-items: center; gap: var(--space-3); font-size: 0.875rem; color: var(--text-secondary);
} .separator { color: var(--text-muted);
} .input-tools { display: flex; gap: var(--space-2);
} .mini-btn { padding: var(--space-1) var(--space-2); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-base); font-size: 0.75rem; cursor: pointer; transition: all var(--duration-fast);
} .mini-btn:hover { border-color: var(--primary-500); color: var(--primary-600);
} /* 统计网格 */
.stats-grid { display: grid; gap: var(--space-3); padding: var(--space-4);
} .stats-grid.primary { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
} .stats-grid.secondary { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
} /* 统计卡片 */
.stat-card { background: var(--bg-base); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-4); transition: all var(--duration-normal); position: relative; overflow: hidden;
} .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); transform: scaleX(0); transition: transform var(--duration-normal);
} .stat-card:hover::before { transform: scaleX(1);
} .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-200);
} .stat-card.featured { background: linear-gradient(135deg, var(--primary-50), var(--secondary-50)); border-color: var(--primary-200);
} .stat-card.featured .stat-number { background: linear-gradient(135deg, var(--primary-600), var(--secondary-600)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
} .stat-icon { margin-bottom: var(--space-2); display: flex; align-items: center; justify-content: center;
} .stat-icon svg { stroke: var(--primary-500);
} .stat-card.featured .stat-icon svg { stroke: var(--primary-600);
} .stat-content { flex: 1;
} .stat-number { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: var(--space-1); transition: all var(--duration-normal);
} .stat-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500;
} .stat-trend { position: absolute; top: var(--space-4); right: var(--space-4);
} .trend-indicator { font-size: 0.75rem; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-muted);
} /* 进度指示器 */
.progress-section { padding: var(--space-6); border-top: 1px solid var(--border-color);
} .progress-item { display: flex; align-items: center; gap: var(--space-4);
} .progress-item label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); min-width: 80px;
} .progress-bar { flex: 1; height: 8px; background: var(--bg-muted); border-radius: var(--radius-sm); overflow: hidden;
} .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); border-radius: var(--radius-sm); transition: width var(--duration-slow);
} .progress-text { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); min-width: 60px; text-align: right;
} /* 快速操作栏 */
.quick-actions { display: flex; gap: var(--space-3); padding: var(--space-6); justify-content: center; flex-wrap: wrap;
} .action-btn { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-6); border: none; border-radius: var(--radius-xl); font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--duration-normal); text-decoration: none; position: relative; overflow: hidden;
} .action-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left var(--duration-slow);
} .action-btn:hover::before { left: 100%;
} .action-btn.primary { background: linear-gradient(135deg, var(--primary-600), var(--secondary-600)); color: white; box-shadow: var(--shadow-lg);
} .action-btn.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl);
} .action-btn.secondary { background: var(--bg-muted); color: var(--text-primary); border: 1px solid var(--border-color);
} .action-btn.secondary:hover { background: var(--bg-subtle); border-color: var(--border-hover); transform: translateY(-1px);
} .action-btn.outline { background: transparent; color: var(--text-secondary); border: 2px solid var(--border-color);
} .action-btn.outline:hover { border-color: var(--primary-500); color: var(--primary-600);
} .btn-icon { display: flex; align-items: center; justify-content: center;
} .btn-icon svg { stroke: currentColor;
} /* 页脚 */
.footer { background: var(--bg-subtle); border-top: 1px solid var(--border-color); padding: var(--space-8); margin-top: auto;
} .footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto;
} .footer-left { display: flex; align-items: center; gap: var(--space-3); font-size: 0.875rem; color: var(--text-secondary);
} .footer-separator { color: var(--text-muted);
} .footer-right { display: flex; gap: var(--space-6);
} .footer-link { font-size: 0.875rem; color: var(--text-secondary); text-decoration: none; transition: color var(--duration-fast);
} .footer-link:hover { color: var(--primary-600);
} /* 通知系统 */
.notification-container { position: fixed; top: var(--space-6); right: var(--space-6); z-index: 1000; display: flex; flex-direction: column; gap: var(--space-3);
} .notification { background: white; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border-left: 4px solid var(--success); transform: translateX(100%); transition: transform var(--duration-normal); max-width: 400px;
} .notification.show { transform: translateX(0);
} .notification.error { border-left-color: var(--error);
} .notification.warning { border-left-color: var(--warning);
} /* 响应式设计 */
@media (max-width: 1024px) { .workspace { grid-template-columns: 1fr; gap: var(--space-6); } .quick-actions { padding: var(--space-6); }
} @media (max-width: 768px) { .navbar { padding: var(--space-4) var(--space-6); } .hero-section { padding: var(--space-12) var(--space-6); } .workspace { padding: var(--space-6); } .stats-grid.primary, .stats-grid.secondary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .footer-content { flex-direction: column; gap: var(--space-4); text-align: center; } .quick-actions { flex-direction: column; align-items: stretch; } .action-btn { justify-content: center; }
} @media (max-width: 480px) { .theme-toggle { top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; } .navbar { padding: var(--space-3) var(--space-4); } .brand-name { font-size: 1.25rem; } .hero-section { padding: var(--space-8) var(--space-4); } .workspace { padding: var(--space-4); } .text-editor { height: 300px; } .stats-grid.primary, .stats-grid.secondary { grid-template-columns: repeat(2, 1fr); } .stat-number { font-size: 2rem; }
} /* 滚动条样式 */
::-webkit-scrollbar { width: 8px; height: 8px;
} ::-webkit-scrollbar-track { background: var(--bg-muted);
} ::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: var(--radius-sm);
} ::-webkit-scrollbar-thumb:hover { background: var(--gray-500);
} /* 选择文本样式 */
::selection { background: var(--primary-200); color: var(--primary-800);
} /* 焦点可见性 */
.focus-visible:focus { outline: 2px solid var(--primary-500); outline-offset: 2px;
} /* 打印样式 */
@media print { .theme-toggle, .navbar, .hero-section, .quick-actions, .footer { display: none; } .workspace { grid-template-columns: 1fr; gap: var(--space-4); } .input-panel, .stats-panel { box-shadow: none; border: 1px solid var(--border-color); }
}