:root { --bg:#f5f6f8; --paper:#fff; --ink:#262c34; --muted:#7b8593; --accent:#e8576d; --rule:#edf0f3; --blue:#4278b3; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:85px; } body { margin:0;background:var(--bg);color:var(--ink);font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; } a { color:inherit;text-decoration:none; } a:hover { color:var(--accent); } button,input,select,textarea { font:inherit; } button,select { cursor:pointer; } button { color:#536071;border:1px solid #dfe4ea;border-radius:6px;background:#fff;padding:8px 12px; } button:hover { border-color:var(--accent);color:var(--accent); } button:disabled { opacity:.55;cursor:wait; } button.primary { background:var(--accent);color:white;border-color:var(--accent); } :focus-visible { outline:2px solid var(--blue);outline-offset:3px; } h1,h2,h3,p { margin:0; } [hidden] { display:none!important; }
.masthead { background:#fff;border-bottom:1px solid #e5e9ee;position:sticky;top:0;z-index:5; } .header-inner { max-width:1380px;padding:0 28px;margin:auto;height:65px;display:flex;align-items:center;gap:42px; } .brand { display:flex;align-items:center;gap:10px;font-size:23px;font-weight:750;letter-spacing:-1px;white-space:nowrap; } .brand-mark { display:grid;place-items:center;width:34px;height:36px;background:var(--accent);color:#fff;border-radius:9px;font-size:26px; } .brand-caption { margin-left:10px;color:#707986;font-size:11px;font-weight:400;letter-spacing:0; } .main-nav { display:flex;height:100%;gap:28px;align-items:center;font-size:13px; } .main-nav a { height:100%;display:flex;align-items:center;position:relative;white-space:nowrap; } .main-nav .nav-active { color:var(--accent);font-weight:650; } .nav-active::after { content:'';position:absolute;height:3px;background:var(--accent);bottom:0;left:5px;right:5px;border-radius:3px; } .edition { margin-left:auto;color:#85909b;font-size:11px;white-space:nowrap; } .edition-dot,.local-dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:#54a28b;margin-right:5px; }
.page { max-width:1336px;padding:0 28px;margin:auto; } .intro { display:flex;align-items:center;justify-content:space-between;padding:27px 0 20px; } .eyebrow { color:#a0a7b1;font-size:9px;letter-spacing:1.8px;font-weight:600;margin-bottom:5px; } h1 { font-size:25px;font-weight:700;letter-spacing:.5px; } .intro-copy { font-size:12px;color:var(--muted);margin-top:4px; } .schedule { color:var(--muted);text-align:right;font-size:10px; } .schedule p { margin-top:5px;letter-spacing:.6px; }
.source-shortcuts { margin-bottom:16px; } .shortcut-list { display:flex;gap:26px;overflow-x:auto;padding:7px 3px 9px;scrollbar-width:thin; } .source-shortcut { display:flex;flex-direction:column;align-items:center;gap:4px;border:none;background:none;min-width:94px;padding:0;font-size:11px;white-space:nowrap; } .source-tile { display:grid;place-items:center;color:white;width:46px;height:46px;border-radius:13px;font-weight:750;font-size:18px;margin-bottom:3px; } .source-shortcut.active .source-tile { outline:2px solid var(--accent);outline-offset:3px; } .source-shortcut.active { color:var(--accent); } .shortcut-subtitle { font-size:9px;color:#939ca8; } .tile-all { background:#ed8b63; }.tile-reuters { background:#e78b3f; }.tile-bbc { background:#373d47; }.tile-npr { background:#b94c56; }.tile-cnbc { background:#4d7faf;font-size:10px; }.tile-voa { background:#527d95;font-size:13px; }
.run-status { color:#617896;background:#edf2f9;font-size:11px;padding:9px 13px;border-radius:5px; }.run-status.warning { color:#9c7745;background:#fff3e3; }.toolbar { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:17px 0 23px; }.toolbar-fields { display:flex;gap:22px; }.toolbar-fields label { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted); }select { border:1px solid #dfe4ea;border-radius:5px;background:#fff;padding:7px 23px 7px 10px;color:#536071;font-size:11px;max-width:100%; }.local-pill { border:1px solid #dce9e3;background:#f3faf6;color:#54836d;border-radius:20px;padding:5px 10px;font-size:10px;white-space:nowrap; }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px; }.heading-group { display:flex;align-items:center;gap:11px; }.section-icon { display:grid;place-items:center;background:var(--accent);color:white;width:33px;height:33px;font-size:17px;font-weight:650;border-radius:9px; }.section-icon.subtle { color:#6e7e92;background:#e7edf5; }.section-icon.green { color:#60917b;background:#e7f2eb; }h2 { font-size:17px;font-weight:650; }.heading-group p { color:var(--muted);font-size:11px;margin-top:2px; }.count-label { color:var(--muted);font-size:11px;white-space:nowrap; }.board-section { margin-bottom:30px; }.board-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border:1px solid #e8ebf0;border-radius:9px;padding:4px 22px;column-gap:32px; }.board-list .article { border-bottom:1px solid var(--rule); }.board-list .article-index { font-size:18px; }.board-list .featured .article-index { color:#fff;background:var(--accent);width:23px;height:23px;font-size:14px;display:grid;place-items:center;border-radius:50%;margin-top:3px; }.ranking-note { font-size:10px;color:var(--muted);margin-top:9px; }.ranking-note summary { cursor:pointer; }.ranking-note p { margin-top:6px;max-width:960px; }
.news-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start; }.source-card { background:#fff;border:1px solid #e8ebf0;border-radius:8px;overflow:hidden;min-width:0; }.source-card-header { padding:15px 17px;display:flex;gap:9px;align-items:center;border-bottom:1px solid var(--rule); }.source-card-icon { display:grid;place-items:center;width:26px;height:26px;color:white;font-size:8px;border-radius:7px;flex-shrink:0; }.source-card-header h3 { font-size:14px;line-height:1.4; }.source-card-count { margin-left:auto;color:var(--muted);font-size:10px;white-space:nowrap; }.source-card-list { padding:0 17px; }.source-card-footer { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding:12px 17px;color:#8993a0;font-size:10px;background:#fdfdfe; }.source-card-footer button { font-size:11px; }
.article { display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;padding:15px 0;border-bottom:1px solid var(--rule); }.article:last-child { border-bottom:0; }.article-index { color:#9aa2ad;font-size:12px;font-weight:600;line-height:1.8; }.article:nth-child(1)>.article-index { color:#e45767; }.article:nth-child(2)>.article-index { color:#e99055; }.article:nth-child(3)>.article-index { color:#cbb45c; }.article-body { min-width:0; }.article-title { font-size:14px;line-height:1.65;font-weight:500;overflow-wrap:anywhere; }.featured .article-title { font-size:20px;line-height:1.45;font-weight:650;letter-spacing:-.2px; }.article-summary { font-size:12px;line-height:1.85;color:#687484;margin-top:8px;overflow-wrap:anywhere; }.summary-missing { font-size:10px;color:#98a0ab;margin-top:7px; }.article-meta { display:flex;flex-wrap:wrap;gap:7px;color:#9199a5;font-size:9px;margin-top:9px; }.article-meta a { color:#6d7f94; }.article:not(.featured) .article-meta { display:none; }.cross-source { color:#bd6373; }.article-actions { display:flex;align-items:center;gap:13px;margin-top:8px;color:#8b95a2;font-size:10px; }.selection-label { display:flex;align-items:center;gap:4px;cursor:pointer; }.selection-label input { width:11px;height:11px;margin:0;accent-color:var(--accent); }.text-button { border:0;background:none;padding:0;font-size:10px;color:#8995a5; }.text-button:hover { color:var(--accent); }.translated-text { border-left:2px solid #edbdc6;background:#fff8fa;padding:8px 10px;margin-top:8px;color:#71505c;font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere; }.empty-state { padding:24px 0;color:#8a94a2;font-size:12px; }
.local-tools { margin-top:30px;border:1px solid #e4e9ed;background:#fff;border-radius:8px;padding:20px; }.local-badge { font-size:9px;letter-spacing:1px;color:#71a18a; }.translation-controls { display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; }.translation-controls label { display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--muted); }.translation-controls button { font-size:11px; }.translation-controls select { min-width:230px; }.translation-status { font-size:11px;color:#6a7b8a;margin-top:15px; }.local-footnote { display:flex;gap:20px;flex-wrap:wrap;font-size:10px;color:#929ba7;margin-top:8px; }.local-footnote a { color:#527caa; }.reading-dock { position:fixed;bottom:20px;right:24px;display:flex;align-items:center;gap:9px;z-index:8;padding:7px;background:#ffffffee;border:1px solid #e6e9ef;border-radius:10px;box-shadow:0 3px 20px #26344e14; }.reading-dock button { font-size:12px; }.reading-dock>a { font-size:10px;color:#8290a2;padding-right:3px; }#translation-toast { position:absolute;bottom:58px;right:0;background:#fff;border:1px solid #e6e9ef;border-radius:8px;padding:12px;color:#6e7a8a;font-size:11px;width:310px;box-shadow:0 4px 20px #26344e10; }
.bottom-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px; }.dictionary-panel,.archive-note { background:#fff;border:1px solid #e8ebf0;border-radius:8px;padding:20px; }.dictionary-panel p,.archive-note p { font-size:11px;color:var(--muted);margin-top:6px; }.dictionary-panel h2,.archive-note h2 { font-size:14px; }.dictionary-panel form { display:flex;gap:8px;margin-top:12px; }.dictionary-panel input { padding:8px 10px;border:1px solid #dde3e9;border-radius:5px;min-width:0;flex:1;font-size:12px; }.dictionary-panel button { font-size:11px; }.dictionary-credit { font-size:9px!important; }.archive-label { display:block;color:#a0a8b2;font-size:9px;letter-spacing:1px;margin-bottom:6px; }#dictionary-links { font-size:12px;margin-top:10px;color:var(--blue); }.source-section { margin:24px 0;color:#7f8a99;font-size:11px; }.source-section summary { cursor:pointer; }.source-section summary>span { font-size:10px;color:#a1a8b2;margin-left:10px; }#sources-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:16px; }.source-item { padding:15px;background:white;border:1px solid #e7ebf0;border-radius:7px; }.source-item p { margin-top:7px;font-size:10px; }.source-state { float:right;font-size:10px;color:#689b85; }.source-state.error { color:#ce6d59; }footer { display:flex;align-items:center;gap:22px;border-top:1px solid #e3e7ed;padding:24px 0 95px;color:#98a2ae; }.footer-brand { font-size:18px;font-weight:650;color:#7d8897; }.accent { color:var(--accent); }footer p { flex:1;font-size:10px; }footer p span { display:block;font-size:9px;margin-top:3px; }.footer-time { font-size:10px; }
dialog { width:min(760px,calc(100% - 28px));max-height:90vh;overflow:auto;border:1px solid #e2e7ed;border-radius:12px;padding:25px;color:var(--ink); }dialog::backdrop { background:#18233366; }.dialog-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:15px; }.dialog-header>button { border:none;font-size:23px;padding:0 8px; }.fulltext-article { font-size:17px;line-height:1.5;margin-bottom:8px; }dialog>p { color:#7c8796;font-size:12px; }.fulltext-actions { display:flex;align-items:center;gap:15px;margin:14px 0;font-size:12px; }.fulltext-actions>a { color:var(--blue); }.file-button { position:relative;color:#657b94;cursor:pointer; }.file-button input { max-width:180px;font-size:10px;display:block; }dialog>label { font-size:11px;color:var(--muted); }textarea { display:block;width:100%;resize:vertical;border:1px solid #dae1e9;border-radius:6px;padding:12px;font-size:13px;margin-top:6px;line-height:1.8; }.fulltext-output { white-space:pre-wrap;background:#f8fafc;border-radius:7px;margin-top:17px;padding:18px;line-height:2;font-size:14px;overflow-wrap:anywhere; }.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.guide { max-width:850px;margin:35px auto;padding:28px;background:white;border-radius:10px; }.guide h2 { margin-top:25px; }.guide p,.guide li { margin-top:12px;color:#586577; }.guide pre { overflow:auto;background:#f3f5f8;padding:14px;border-radius:6px; }.guide a { color:var(--blue); }
@media(max-width:1100px) { .news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.header-inner { gap:25px; }.brand-caption { display:none; }.main-nav { gap:20px; }.shortcut-list { gap:20px; }.source-shortcut { min-width:90px; } }
@media(max-width:720px) { .header-inner { height:auto;min-height:62px;flex-wrap:wrap;gap:0;padding:0 16px; }.brand { height:61px;font-size:21px; }.brand-caption { display:inline; }.main-nav { width:100%;height:37px;gap:26px;margin-top:-8px;font-size:12px;overflow-x:auto; }.edition { display:none; }.page { padding:0 14px; }.intro { padding:22px 2px 16px; }.schedule { display:none; }h1 { font-size:22px; }.shortcut-list { gap:17px; }.source-shortcut { min-width:85px;font-size:10px; }.source-tile { width:41px;height:41px; }.toolbar { gap:9px;margin:15px 0 22px; }.toolbar-fields { gap:10px;min-width:0;flex:1; }.toolbar-fields label { display:block;font-size:10px;min-width:0; }.toolbar-fields label:first-child { flex:1; }.toolbar-fields select { display:block;margin-top:3px;width:100%;padding:6px;font-size:10px; }.local-pill { font-size:9px;padding:4px 6px; }.board-list { grid-template-columns:minmax(0,1fr);padding:3px 16px; }.board-section { margin-bottom:25px; }.news-grid { grid-template-columns:minmax(0,1fr);gap:17px; }.section-heading { gap:8px; }.heading-group { gap:8px; }h2 { font-size:16px; }.heading-group p { font-size:10px; }.featured .article-title { font-size:19px; }.article-summary { font-size:12px; }.article { padding:15px 0; }.bottom-grid { grid-template-columns:1fr;gap:15px; }.local-tools { padding:16px; }.local-tools .section-heading { align-items:flex-start; }.local-badge { display:none; }.translation-controls { gap:9px; }.translation-controls label { width:100%; }.translation-controls select { width:100%; }.reading-dock { bottom:12px;right:12px; }#translation-toast { width:280px; }#sources-list { grid-template-columns:1fr; }.footer-time { display:none; }footer { gap:16px; }dialog { padding:18px; }.guide { margin:15px;padding:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.board-list .featured>.article-index { color:white; }