:root{
  --dark:#202020; --dark2:#2b2b2b; --red:#c00c00; --ink:#1a1a1a; --muted:#666;
  --line:#e6e6e6; --bg:#f4f4f5; --card:#ffffff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  padding-top:calc(76px + env(safe-area-inset-top));
}
.topbar{
  position:fixed; top:0; left:0; right:0; height:calc(76px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:var(--dark); display:flex; align-items:center; gap:10px; padding-left:12px; padding-right:12px;
  z-index:50; box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.brand{height:60px; width:auto; max-width:86vw; display:block; margin:0 auto; object-fit:contain}
.iconbtn{background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:6px 8px;border-radius:8px}
.iconbtn:active{background:rgba(255,255,255,.12)}
.installbtn{
  background:var(--red); color:#fff; border:none; font-weight:700; font-size:13px;
  padding:7px 12px; border-radius:20px; cursor:pointer; white-space:nowrap;
}
.offlinebar{background:#3a3a3a;color:#fff;text-align:center;font-size:13px;padding:6px}
.searchwrap{position:sticky; top:0; background:var(--bg); padding:12px 14px 6px; z-index:10; display:flex; gap:8px; align-items:center}
#search{
  flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line); border-radius:24px;
  font-size:15px; background:#fff; outline:none;
}
#search:focus{border-color:var(--red)}
.foibtn{
  flex:0 0 auto; background:var(--red); color:#fff; border:none; font-weight:700; font-size:12.5px;
  padding:11px 14px; border-radius:24px; cursor:pointer; white-space:nowrap; letter-spacing:.02em;
}
.foibtn:active{background:#a00a00}
/* in-app PDF document viewer */
.pdfoverlay{position:fixed; inset:0; z-index:100; background:#2a2a2a; display:flex; flex-direction:column}
.pdfbar{
  flex:0 0 auto; height:calc(52px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
  background:var(--dark); color:#fff; display:flex; align-items:center; gap:8px; padding-left:6px; padding-right:12px;
}
.pdftitle{flex:1; min-width:0; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdfopen{flex:0 0 auto; color:#fff; background:var(--red); border-radius:16px; padding:6px 13px; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap}
.pdfpages{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px; display:flex; flex-direction:column; align-items:center; gap:10px}
.pdfpage{width:100%; max-width:900px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.45); border-radius:2px; display:block; min-height:180px}
.pdfpages .spinner{border-top-color:#fff}
.pdfpages .status{color:#eee}
.pdfpages .status a{color:#ff8a8a}
.app{max-width:760px; margin:0 auto; padding:8px 14px 30px}
.list{display:flex; flex-direction:column; gap:12px}
.notifybar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--dark); color:#fff; border-radius:12px; padding:11px 14px; margin-bottom:12px; font-size:13.5px;
}
.notifybar span{line-height:1.3}
.notifybtn{
  background:var(--red); color:#fff; border:none; font-weight:700; font-size:13px;
  padding:8px 16px; border-radius:20px; cursor:pointer; white-space:nowrap;
}
.notifybtn:disabled{opacity:.6; cursor:default}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; cursor:pointer; transition:transform .08s ease, box-shadow .15s ease;
}
.card:active{transform:scale(.99)}
.card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.card .thumb{width:110px; min-width:110px; height:110px; object-fit:cover; background:#eee}
.card .body{padding:11px 13px; min-width:0}
.card .cat{color:var(--red); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.card .title{font-size:15.5px; font-weight:700; line-height:1.25; margin:3px 0 5px; color:var(--ink)}
.card .excerpt{font-size:13px; color:var(--muted); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .date{font-size:11.5px; color:#999; margin-top:6px}
.morebtn{
  display:block; margin:20px auto 0; background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:11px 26px; border-radius:24px; font-size:14px; font-weight:600; cursor:pointer;
}
.morebtn:active{background:#f0f0f0}
.status{text-align:center; color:var(--muted); font-size:14px; padding:24px 0}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;
  animation:spin .8s linear infinite; margin:24px auto}
@keyframes spin{to{transform:rotate(360deg)}}
/* article view */
.article{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 18px 26px; margin-top:8px}
.article .cat{color:var(--red); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.article h1{font-size:23px; line-height:1.25; margin:6px 0 8px; color:var(--ink)}
.article .meta{color:#999; font-size:13px; margin-bottom:14px}
.article .hero{width:100%; height:auto; border-radius:10px; margin:0 0 16px}
.article .content{font-size:16px; line-height:1.7; color:#222}
.article .content p{margin:0 0 1.1em}
.article .content img{max-width:100%; height:auto; border-radius:8px}
.article .content a{color:var(--red)}
.article .content h2,.article .content h3{line-height:1.3}
.savedchip{display:inline-block;margin-top:16px;font-size:12px;color:#2e7d32;background:#eaf6ea;border-radius:20px;padding:4px 10px}
.foot{max-width:760px;margin:24px auto 0;padding:18px 14px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:#888}
.foot a{color:var(--red); text-decoration:none}