:root{
  --bg:#0b0b0d; --card:#16161a; --card2:#1d1d22; --line:#2a2a31;
  --text:#f2f2f4; --dim:#9a9aa5; --accent:#e11d2a;
  --war:#ef4444; --politics:#f59e0b; --rcp:#3b82f6; --mine:#a855f7; --ai:#10b981;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px calc(10px + env(safe-area-inset-top)); padding-top:max(10px,env(safe-area-inset-top));
  background:#0b0b0d; border-bottom:2px solid var(--accent);
}
.brand{display:flex; flex-direction:column; line-height:1}
.brand-bb{font-weight:900; font-size:20px; letter-spacing:.5px}
.brand-bb::first-letter{color:var(--accent)}
.brand-sub{font-size:9px; letter-spacing:3px; color:var(--dim); margin-top:3px}
.actions{display:flex; gap:6px}
.icon-btn{
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  width:38px; height:38px; border-radius:10px; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{transform:scale(.94)}
#bell.on{background:var(--accent); border-color:var(--accent)}
#refreshBtn.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- ticker ---------- */
.ticker{
  display:flex; gap:8px; overflow-x:auto; padding:8px 12px; background:#101014;
  border-bottom:1px solid var(--line); scrollbar-width:none;
}
.ticker::-webkit-scrollbar{display:none}
.tile{
  flex:0 0 auto; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:7px 11px; min-width:84px;
}
.tile .t-label{font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px}
.tile .t-value{font-size:16px; font-weight:800; margin-top:2px}
.tile .t-chg{font-size:11px; margin-top:1px}
.up{color:#34d399}.down{color:#f87171}

/* ---------- tabs ---------- */
.tabs{
  position:sticky; top:60px; z-index:20; display:flex; gap:6px; overflow-x:auto;
  padding:9px 12px; background:#0b0b0d; border-bottom:1px solid var(--line); scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; background:var(--card2); border:1px solid var(--line); color:var(--dim);
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.tab .badge{font-size:10px; color:var(--dim); margin-left:5px}
.tab.push-right{margin-left:auto}
.tab.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.tab.active .badge{color:#fff}

/* ---------- feed ---------- */
.feed{padding:10px 12px 30px; max-width:680px; margin:0 auto}
.loading,.empty{color:var(--dim); text-align:center; padding:40px 0}
.card{
  display:block; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:12px; padding:12px 13px; margin-bottom:10px; text-decoration:none; color:inherit;
}
.card:active{background:var(--card2)}
.card.s-War{border-left-color:var(--war)}
.card.s-Politics{border-left-color:var(--politics)}
.card.s-Mine{border-left-color:var(--mine)}
.card.s-AI{border-left-color:var(--ai)}
.meta{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--dim); margin-bottom:6px}
.dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--dim)}
.src-War .dot{background:var(--war)} .src-Breitbart .dot{background:var(--politics)}
.src-RealClearPolitics .dot{background:var(--rcp)} .src-MyChannel .dot{background:var(--mine)}
.src-Fable .dot{background:var(--ai)}
.src-name{font-weight:700; color:#cfcfd6}
.time{margin-left:auto}
.breaking{background:var(--accent); color:#fff; font-weight:800; font-size:9px; padding:2px 6px;
  border-radius:4px; letter-spacing:.5px}
.title{font-size:15.5px; font-weight:700; line-height:1.3; margin:0 0 4px; overflow-wrap:anywhere}
.summary{font-size:13px; color:var(--dim); line-height:1.4; margin:0; overflow-wrap:anywhere}
.thumb{width:100%; border-radius:8px; margin-top:9px; display:block}
/* read state */
.card.read{opacity:.5}
.card.read .title{font-weight:600; color:var(--dim)}

/* settings panel */
.settings{
  position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:50;
  background:#101014; border-left:1px solid var(--line); padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateX(105%); transition:transform .22s ease; overflow-y:auto;
  box-shadow:-8px 0 24px rgba(0,0,0,.4);
}
.settings.open{transform:translateX(0)}
.settings-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.settings-label{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--dim); margin:14px 0 6px}
.toggle{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
.toggle input{width:20px; height:20px; accent-color:var(--accent)}
.settings-action{
  width:100%; margin-top:16px; padding:11px; background:var(--card2); color:var(--text);
  border:1px solid var(--line); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer;
}
.settings-note{font-size:12px; color:var(--dim); line-height:1.5; margin-top:16px}
.foot{color:var(--dim); font-size:11px; text-align:center; padding:16px 0 26px}