:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary-color: #2563eb;--primary-dark: #1d4ed8;--secondary-color: #f59e0b;--text-primary: #1f2937;--text-secondary: #6b7280;--text-light: #9ca3af;--background: #ffffff;--background-alt: #f9fafb;--border-color: #e5e7eb;--success-color: #10b981;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}*{margin:0;padding:0;box-sizing:border-box}html{width:100%;height:100%}#root{width:100%;min-height:100vh}body{font-family:Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.6;color:var(--text-primary);background:var(--background);margin:0;padding:0;width:100%;min-height:100vh}.App{min-height:100vh;width:100%;display:flex;flex-direction:column}.App main{flex:1;width:100%}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-color);padding:1rem 0}.header-content{display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;color:var(--primary-color);text-decoration:none;display:flex;align-items:center;gap:.5rem}.nav-links{display:flex;gap:2rem}.nav-links a{text-decoration:none;color:var(--text-primary);font-weight:500;transition:color .3s ease;position:relative}.nav-links a:hover,.nav-links a.active{color:var(--primary-color)}.nav-links a.active:after{content:"";position:absolute;bottom:-.5rem;left:0;right:0;height:2px;background:var(--primary-color)}.language-selector{position:relative}.language-dropdown{background:var(--background);border:1px solid var(--border-color);border-radius:6px;padding:.5rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.language-dropdown:hover{border-color:var(--primary-color)}.dropdown-content{position:absolute;top:100%;right:0;background:var(--background);border:1px solid var(--border-color);border-radius:6px;box-shadow:var(--shadow-lg);min-width:150px;z-index:200;margin-top:.25rem}.dropdown-content button{width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;transition:background .2s}.dropdown-content button:hover,.dropdown-content button.active{background:var(--background-alt)}.hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4rem 0;text-align:center}.hero-content h1{font-size:3rem;font-weight:700;margin-bottom:1rem}.hero-compact{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2.5rem 0;text-align:center}.hero-compact .hero-content h1{font-size:2.2rem;font-weight:700;margin-bottom:.75rem}.hero-compact .subtitle{font-size:1.1rem;margin-bottom:0;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.subtitle{font-size:1.25rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.hero-buttons{display:flex;gap:1rem;justify-content:center}.btn-primary{background:var(--primary-color);color:#fff;padding:.75rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s ease;border:none;cursor:pointer;font-size:1rem}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.articles-section{padding:4rem 0;background:var(--background-alt)}.section-header{text-align:center;margin-bottom:3rem}.section-title{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.section-subtitle{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.articles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-bottom:2rem}@media (min-width: 1400px){.articles-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width: 1024px) and (max-width: 1399px){.articles-grid{grid-template-columns:repeat(2,1fr)}}.article-card{background:var(--background);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-sm);transition:all .3s ease;border:1px solid var(--border-color);text-decoration:none;color:inherit;cursor:pointer}.article-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.article-card-link{display:block;text-decoration:none;color:inherit}.article-card-link:hover{text-decoration:none;color:inherit}.article-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.article-source{background:var(--primary-color);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500;margin-right:8px}.article-date{color:var(--text-light);font-size:.9rem}.article-title{font-size:1.2rem;font-weight:600;margin-bottom:.75rem;line-height:1.4}.article-summary,.article-excerpt{color:var(--text-secondary);margin-bottom:1rem;line-height:1.5}.article-meta{display:flex;justify-content:flex-start;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border-color)}.article-meta-item{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text-secondary)}.difficulty-badge{padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500}.difficulty-beginner{background:#dcfce7;color:#166534}.difficulty-intermediate{background:#fef3c7;color:#92400e}.difficulty-advanced{background:#fee2e2;color:#991b1b}.reading-time{color:var(--text-light);font-size:.9rem;display:flex;align-items:center;gap:.25rem}.article-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.tag{background:var(--background-alt);color:var(--text-secondary);padding:.25rem .5rem;border-radius:6px;font-size:.8rem}.vocabulary-preview{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.vocabulary-title{font-size:.9rem;font-weight:600;margin-bottom:.5rem;color:var(--text-secondary)}.vocabulary-words{display:flex;gap:.5rem;flex-wrap:wrap}.vocabulary-word{background:var(--primary-color);color:#fff;padding:.2rem .5rem;border-radius:4px;font-size:.8rem}.read-more{color:var(--primary-color);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:.25rem;font-size:.9rem}.article-footer{display:flex;justify-content:space-between;align-items:center}.page-header{text-align:center;margin:2rem 0}.page-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.page-subtitle{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto}.filters{background:var(--background);padding:1.5rem;border-radius:12px;margin-bottom:2rem;box-shadow:var(--shadow-sm)}.filters-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}.search-box{flex:1;min-width:250px;position:relative}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-light)}.search-input{width:100%;padding:.75rem .75rem .75rem 3rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem}.filter-select{padding:.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--background);color:var(--text-primary);cursor:pointer;min-width:150px}.loading{text-align:center;padding:3rem;color:var(--text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-placeholder,.error-container{text-align:center;padding:3rem;color:var(--text-secondary)}.error-message{font-size:1.1rem;margin-bottom:1.5rem}.retry-button{padding:.75rem 1.5rem;background:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;gap:.5rem}.no-results{text-align:center;padding:3rem;color:var(--text-secondary)}.no-results svg{color:var(--text-light);margin-bottom:1rem}.article-detail-page{padding:2rem 0}.article-nav{margin-bottom:2rem}.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-secondary);text-decoration:none;transition:color .3s}.back-link:hover{color:var(--primary-color)}.article-content{max-width:85%;width:100%;margin:0 auto;padding:0 1rem}.article-body-isolated{all:initial!important;font-family:Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;display:block!important}.article-body-isolated *{box-sizing:border-box!important}.coming-soon-notice{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:12px;text-align:center;margin:2rem 0}.coming-soon-notice h3{font-size:1.5rem;margin-bottom:.5rem}.external-link{text-align:center;margin:2rem 0}.media-section{margin:2rem 0;padding:1.5rem;background:var(--background-alt);border-radius:12px}.media-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}.media-link{padding:.75rem 1rem;background:var(--background);border:1px solid var(--border-color);border-radius:8px;text-decoration:none;color:var(--text-primary);transition:all .3s}.media-link:hover{border-color:var(--primary-color);color:var(--primary-color)}.category-tag{background:var(--primary-color);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;margin-right:.5rem}.article-categories{margin-bottom:1rem}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem}.nav-links{order:2;gap:1rem}.language-selector{order:1}.hero-content h1{font-size:2rem}.hero-compact .hero-content h1{font-size:1.8rem}.hero-compact .subtitle{font-size:1rem}.articles-grid{grid-template-columns:1fr}.filters-row{flex-direction:column;align-items:stretch}.search-box{min-width:unset}.article-meta{flex-direction:column;align-items:flex-start;gap:.75rem}.article-meta-item{font-size:.85rem}.article-footer{flex-direction:column;align-items:flex-start;gap:.5rem}.article-stats{flex-direction:column;gap:.5rem}.vocabulary-tags{justify-content:flex-start}.article-content{max-width:95%;padding:0 .5rem}.article-body{padding:1.5rem 1rem;font-size:1rem}}.article-stats{display:flex;gap:1rem;margin-bottom:1rem;font-size:.8rem;color:var(--text-light)}.stat-item{display:flex;align-items:center;gap:.3rem}.vocabulary-preview{margin-bottom:1.5rem}.vocabulary-tags{display:flex;flex-wrap:wrap;gap:.5rem}.vocab-tag{background:#2563eb1a;color:var(--primary-color);padding:.3rem .6rem;border-radius:12px;font-size:.75rem;font-weight:500;border:1px solid rgba(37,99,235,.2)}.article-date{display:flex;align-items:center;gap:.3rem;font-weight:500}.article-main-content{background:#fff;border-radius:12px;margin:2rem 0}.content-loading{padding:4rem 2rem;text-align:center;color:var(--text-secondary)}.article-body{padding:2rem;line-height:1.8;font-size:1.1rem;display:flex;flex-direction:column}.article-body .vocabulary-section,.article-body .key-vocabulary,.article-body .vocabulary-list,.article-body [class*=vocab]{order:999;margin-top:2rem;padding-top:2rem;border-top:2px solid var(--border-color)}.article-body>*:not(.vocabulary-section):not(.key-vocabulary):not(.vocabulary-list):not([class*=vocab]){order:1}.article-body h1,.article-body h2,.article-body h3{color:var(--text-primary);margin:1.5rem 0 1rem;line-height:1.3}.article-body p{margin:1rem 0;line-height:1.8}.article-body .vocabulary-highlight{background:#2563eb1a;color:var(--primary-color);padding:.1rem .2rem;border-radius:3px;cursor:pointer;border-bottom:1px dotted var(--primary-color)}.article-body .cultural-context{background:#f59e0b1a;border-left:4px solid var(--secondary-color);padding:1rem;margin:1rem 0;border-radius:0 8px 8px 0}.article-body blockquote{border-left:4px solid var(--primary-color);padding-left:1rem;margin:1rem 0;font-style:italic;color:var(--text-secondary)}.external-link{text-align:center;padding:2rem}.external-link p{margin-bottom:1rem;color:var(--text-secondary)}.enhanced-preview{background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border:1px solid rgba(37,99,235,.1);border-radius:16px;padding:1.75rem;box-shadow:0 4px 20px #00000014;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.enhanced-preview:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-color) 0%,var(--secondary-color) 100%);transform:scaleX(0);transition:transform .4s ease}.enhanced-preview:hover:before{transform:scaleX(1)}.enhanced-preview:hover{transform:translateY(-6px);box-shadow:0 12px 40px #2563eb26;border-color:#2563eb33}.enhanced-preview .article-header{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid rgba(229,231,235,.5)}.source-and-date{display:flex;justify-content:space-between;align-items:center}.enhanced-preview .article-source{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;padding:.4rem 1rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px #2563eb4d}.enhanced-preview .article-date{color:var(--text-light);font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:.4rem}.stats-info{display:flex;gap:1rem;font-size:.8rem;color:var(--text-secondary)}.word-count{background:#10b9811a;color:#059669;padding:.3rem .75rem;border-radius:12px;font-weight:500;border:1px solid rgba(16,185,129,.2)}.stats-info .reading-time{background:#f59e0b1a;color:#d97706;padding:.3rem .75rem;border-radius:12px;font-weight:500;border:1px solid rgba(245,158,11,.2);display:flex;align-items:center;gap:.3rem}.article-titles{margin-bottom:1rem}.article-title-english{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;line-height:1.4;color:var(--text-primary);transition:color .3s ease}.enhanced-preview:hover .article-title-english{color:var(--primary-color)}.article-title-chinese{font-size:1.1rem;font-weight:600;color:var(--text-secondary);margin-bottom:0;line-height:1.3;opacity:.9}.enhanced-preview .article-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(229,231,235,.5)}.category-and-difficulty{display:flex;gap:.75rem;align-items:center}.category-badge{background:linear-gradient(135deg,#8b5cf61a,#6366f11a);color:#7c3aed;padding:.3rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;border:1px solid rgba(139,92,246,.2)}.enhanced-preview .difficulty-badge{font-weight:600;letter-spacing:.3px;border:1px solid}.enhanced-preview .difficulty-beginner{background:linear-gradient(135deg,#d1fae5,#ecfdf5);color:#065f46;border-color:#10b9814d}.enhanced-preview .difficulty-intermediate{background:linear-gradient(135deg,#fef3c7,#fffbeb);color:#92400e;border-color:#f59e0b4d}.enhanced-preview .difficulty-advanced{background:linear-gradient(135deg,#fee2e2,#fef2f2);color:#991b1b;border-color:#ef44444d}.enhanced-preview .read-more{color:var(--primary-color);font-weight:600;display:flex;align-items:center;gap:.4rem;font-size:.9rem;transition:all .3s ease;padding:.4rem .8rem;border-radius:8px;background:#2563eb0d;border:1px solid rgba(37,99,235,.1)}.enhanced-preview:hover .read-more{background:#2563eb1a;transform:translate(4px)}.enhanced-preview .vocabulary-preview{margin:1rem 0;padding:1rem;background:linear-gradient(135deg,#2563eb08,#8b5cf608);border-radius:12px;border:1px solid rgba(37,99,235,.1)}.enhanced-preview .vocabulary-tags{justify-content:flex-start}.enhanced-preview .vocab-tag{background:linear-gradient(135deg,#2563eb1a,#6366f11a);color:var(--primary-color);padding:.4rem .8rem;border-radius:16px;font-size:.75rem;font-weight:600;border:1px solid rgba(37,99,235,.2);transition:all .3s ease}.enhanced-preview .vocab-tag:hover{background:linear-gradient(135deg,#2563eb26,#6366f126);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb33}.enhanced-preview .article-excerpt{color:var(--text-secondary);line-height:1.6;margin-bottom:1.25rem;font-size:.95rem;opacity:.9}.articles-page .enhanced-preview .article-header{flex-direction:column;gap:.75rem}.articles-page .enhanced-preview .source-and-date{display:flex;justify-content:space-between;align-items:center}.articles-page .enhanced-preview .stats-info{display:flex;justify-content:flex-start;gap:1rem;margin-top:.5rem}.cookie-consent-overlay{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#0000001a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.cookie-consent-banner{background:#fff;border-top:3px solid var(--primary-color);box-shadow:0 -4px 20px #00000026;padding:1.5rem;max-height:80vh;overflow-y:auto}.cookie-content h3{margin:0 0 .75rem;color:var(--text-primary);font-size:1.2rem}.cookie-content p{margin:0 0 1.5rem;color:var(--text-secondary);line-height:1.5}.cookie-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.btn-accept{background:var(--primary-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s}.btn-accept:hover{background:var(--primary-dark)}.btn-reject{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);padding:.75rem 1.5rem;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s}.btn-reject:hover{border-color:var(--text-secondary);color:var(--text-primary)}.btn-customize{background:transparent;color:var(--primary-color);border:1px solid var(--primary-color);padding:.75rem 1.5rem;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s}.btn-customize:hover{background:var(--primary-color);color:#fff}.btn-save{background:var(--success-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s}.btn-save:hover{background:#059669}.btn-back{background:transparent;color:var(--text-secondary);border:none;padding:.75rem 1rem;border-radius:6px;cursor:pointer;transition:all .3s}.btn-back:hover{background:var(--background-alt)}.cookie-details{margin-top:1rem}.cookie-details h4{margin:0 0 1rem;font-size:1rem;color:var(--text-primary)}.cookie-category{margin-bottom:1rem;padding:1rem;background:var(--background-alt);border-radius:8px}.category-header{display:flex;align-items:flex-start;gap:.75rem}.category-header input[type=checkbox]{margin-top:.25rem;cursor:pointer}.category-header input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}.category-header label{flex:1;cursor:pointer;line-height:1.4}.category-header label strong{display:block;margin-bottom:.25rem;color:var(--text-primary)}.category-desc{color:var(--text-secondary);font-size:.9rem}@media (max-width: 768px){.enhanced-preview{padding:1.5rem}.cookie-consent-banner{padding:1rem}.cookie-buttons{flex-direction:column}.cookie-buttons button{width:100%;justify-content:center}.category-header{flex-direction:column;gap:.5rem}.category-header input[type=checkbox]{margin-top:0;align-self:flex-start}.enhanced-preview .article-header{gap:.5rem}.source-and-date{flex-direction:column;align-items:flex-start;gap:.5rem}.stats-info{flex-direction:column;gap:.5rem}.category-and-difficulty{flex-direction:column;align-items:flex-start;gap:.5rem}.enhanced-preview .article-footer{flex-direction:column;align-items:flex-start;gap:1rem}.article-title-english{font-size:1.1rem}.article-title-chinese{font-size:1rem}}