:root {
  --bg:#0b0e14; --bg2:#0e1320; --card:#151a24; --card2:#1a2130; --line:#222b3a;
  --txt:#e6edf3; --mut:#8b98a9; --dim:#5d6b7d;
  --left:#3b82f6; --right:#ef4444; --center:#a78bfa;
  --good:#22c55e; --bad:#ef4444; --warn:#f59e0b; --accent:#2563eb; --sky:#7dd3fc;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; }
body {
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -200px,#141b2e 0%,var(--bg) 55%) fixed;
  color:var(--txt); min-height:100vh; -webkit-font-smoothing:antialiased;
  padding:calc(20px + var(--safe-t)) 16px calc(40px + var(--safe-b));
}
.wrap { max-width:760px; margin:0 auto; }
header { text-align:center; margin-bottom:22px; }
h1 { font-size:clamp(24px,6vw,32px); margin:0 0 6px; letter-spacing:-.02em; font-weight:800; }
h1 .logo { filter:drop-shadow(0 2px 8px rgba(37,99,235,.5)); }
.sub { color:var(--mut); margin:0 auto; font-size:clamp(13px,3.4vw,15px); max-width:520px; }

.searchbar {
  position:sticky; top:calc(8px + var(--safe-t)); z-index:20;
  display:flex; gap:8px; margin:0 auto 8px; max-width:680px;
  background:rgba(11,14,20,.72); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:8px; border-radius:16px; border:1px solid var(--line);
}
input {
  flex:1; min-width:0; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--txt); font-size:16px; outline:none; transition:border-color .15s;
}
input:focus { border-color:var(--accent); }
button#go {
  padding:0 22px; border:0; border-radius:12px; background:var(--accent); color:#fff;
  font-weight:700; cursor:pointer; font-size:15px; white-space:nowrap; transition:filter .15s,transform .05s;
}
button#go:hover { filter:brightness(1.1); }
button#go:active { transform:scale(.97); }
button#go:disabled { opacity:.5; cursor:not-allowed; }

.examples { text-align:center; margin:0 0 8px; font-size:12.5px; color:var(--dim); }
.examples b { color:var(--mut); font-weight:600; }

.spin { display:none; margin:24px auto 0; max-width:680px; }
.spin.show { display:block; }
.skel-line { height:14px; border-radius:8px; margin:10px 0;
  background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);
  background-size:200% 100%; animation:sh 1.3s infinite; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.spin .lbl { color:var(--mut); font-size:14px; text-align:center; margin-bottom:14px; }
.spin .dots::after { content:''; animation:dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

.err { display:none; margin:20px auto 0; max-width:680px; padding:14px 16px; border-radius:12px;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; font-size:14.5px; }
.err.show { display:block; }

.card { display:none; margin:18px auto 0; max-width:680px;
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px;
  box-shadow:0 10px 40px rgba(0,0,0,.3); animation:rise .35s ease; }
.card.show { display:block; }
@keyframes rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.verdict-hero { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.vchip { font-size:clamp(18px,5vw,22px); font-weight:800; padding:8px 16px; border-radius:14px; letter-spacing:-.01em; }
.verdict-real { background:rgba(34,197,94,.16); color:var(--good); box-shadow:inset 0 0 0 1px rgba(34,197,94,.3); }
.verdict-fake { background:rgba(239,68,68,.16); color:var(--bad); box-shadow:inset 0 0 0 1px rgba(239,68,68,.3); }
.verdict-mis  { background:rgba(245,158,11,.16); color:var(--warn); box-shadow:inset 0 0 0 1px rgba(245,158,11,.3); }
.verdict-unv  { background:rgba(139,152,169,.16); color:var(--mut); box-shadow:inset 0 0 0 1px rgba(139,152,169,.25); }
.conf-ring { margin-left:auto; font-size:12px; color:var(--mut); text-align:center; }
.conf-ring b { display:block; font-size:18px; color:var(--txt); font-weight:700; }

.badges { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 16px; }
.badge { padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid var(--line); background:var(--card2); color:var(--mut); }
.badge.live { background:rgba(34,197,94,.12); color:var(--good); border-color:rgba(34,197,94,.3); }
.lean-left { background:rgba(59,130,246,.15); color:var(--left); border-color:rgba(59,130,246,.3); }
.lean-right { background:rgba(239,68,68,.15); color:var(--right); border-color:rgba(239,68,68,.3); }
.lean-center { background:rgba(167,139,250,.15); color:var(--center); border-color:rgba(167,139,250,.3); }

.summary { font-size:clamp(15px,4vw,17px); margin:0 0 18px; color:var(--txt); }
/* CA-49: low-confidence / unverifiable explainer (muted, non-alarming) */
.why-unv { margin:-6px 0 18px; padding:10px 13px; border-radius:11px;
  background:rgba(139,152,169,.08); border:1px solid var(--line); }
.why-head { font-size:13px; color:var(--mut); line-height:1.5; }
.why-head .why-ico { margin-right:5px; }
.why-head span:nth-child(2) { color:var(--txt); font-weight:600; }
.why-sugg { margin:7px 0 0; padding:0 0 0 18px; }
.why-sugg li { font-size:12.5px; color:var(--dim); line-height:1.6; }
/* CA-51: verdict change-tracking line */
.verdict-delta { margin:-6px 0 16px; padding:9px 13px; border-radius:11px; font-size:13px;
  line-height:1.5; color:var(--mut); background:rgba(139,152,169,.08); border:1px solid var(--line); }
.verdict-delta strong { color:var(--txt); font-weight:700; }
.verdict-delta .vd-ico { margin-right:5px; }
.verdict-delta .vd-ago { color:var(--dim); }
.verdict-delta.up { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22); }
.verdict-delta.down { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22); }

.section-h { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut);
  margin:18px 0 8px; display:flex; align-items:center; gap:8px; }
.section-h .n { background:var(--card2); border:1px solid var(--line); border-radius:999px;
  padding:1px 8px; font-size:11px; color:var(--dim); }

.claim { border:1px solid var(--line); border-radius:12px; margin:8px 0; overflow:hidden; background:var(--bg2); }
.claim summary { list-style:none; cursor:pointer; padding:13px 15px; display:flex; align-items:flex-start; gap:10px;
  font-weight:600; font-size:14.5px; user-select:none; }
.claim summary::-webkit-details-marker { display:none; }
.claim summary .ico { flex-shrink:0; width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  font-size:12px; font-weight:800; margin-top:1px; }
.claim summary .chev { margin-left:auto; color:var(--dim); transition:transform .2s; flex-shrink:0; }
.claim[open] summary .chev { transform:rotate(180deg); }
.ico.true { background:rgba(34,197,94,.18); color:var(--good); }
.ico.false,.ico.misleading { background:rgba(239,68,68,.18); color:var(--bad); }
.ico.unverifiable,.ico.partly { background:rgba(245,158,11,.18); color:var(--warn); }
.claim .body { padding:0 15px 14px 45px; }
.claim .assess { font-size:13px; font-weight:600; margin-bottom:5px; text-transform:capitalize; }
.assess.true { color:var(--good); } .assess.false,.assess.misleading { color:var(--bad); }
.assess.unverifiable,.assess.partly { color:var(--warn); }
.claim .why { font-size:13.5px; color:var(--mut); }
.claim .cites { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; }
.claim .cites a { font-size:11px; background:var(--card2); color:var(--sky); padding:3px 9px;
  border-radius:999px; text-decoration:none; border:1px solid #334155; }
.claim .cites a:active { background:#334155; }

.panel { margin-top:10px; padding:14px 16px; border-radius:12px; font-size:14px; }
.panel h4 { margin:0 0 7px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.panel.news { background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.22); }
.panel.news h4 { color:var(--good); }
.panel.web { background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.25); }
.panel.web h4 { color:#60a5fa; }
.panel.brave { background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.22); }
.panel.brave h4 { color:var(--warn); }
/* CA-36: visual analysis (deepfake / AI-generated) panel */
.panel.vision { background:rgba(168,85,247,.08); border:1px solid rgba(168,85,247,.26); }
.panel.vision h4 { color:#c084fc; }
.vis-meter { margin:4px 0 10px; }
.vis-meter-label { font-size:12.5px; color:var(--mut); margin-bottom:5px; display:flex; justify-content:space-between; }
.vis-meter-label span { color:var(--txt); font-weight:700; }
.vis-bar { height:8px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.vis-bar span { display:block; height:100%; border-radius:999px; transition:width .4s ease; }
.vis-bar span.lo { background:var(--good); }
.vis-bar span.mid { background:var(--warn); }
.vis-bar span.hi { background:var(--bad); }
.vis-mismatch { font-size:13px; color:var(--warn); margin:8px 0; padding:8px 11px; border-radius:9px;
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.28); line-height:1.5; }
.vis-mismatch .vis-ico { margin-right:4px; }
.vis-flags { margin:8px 0 0; padding:0 0 0 18px; }
.vis-flags li { font-size:12.5px; color:#e9b8ff; line-height:1.6; }
.vis-foot { margin-top:9px; font-size:11px; color:var(--dim); }
.freshtag { font-size:11px; background:rgba(34,197,94,.18); color:var(--good); padding:2px 8px;
  border-radius:999px; margin-left:6px; font-weight:600; }
/* CA-50: freshest-source recency line */
.newsfresh { display:inline-flex; align-items:center; gap:6px; margin:2px 0 9px;
  padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(34,197,94,.14); color:var(--good); border:1px solid rgba(34,197,94,.3); }
.newsfresh strong { font-weight:700; }

.news-list a, .src-list a { display:flex; gap:8px; align-items:baseline; color:var(--sky); text-decoration:none;
  font-size:13px; padding:7px 0; border-top:1px solid var(--line); }
.news-list a:first-child, .src-list a:first-child { border-top:0; }
.news-list a .age { flex-shrink:0; font-size:11px; color:var(--good); font-weight:600; min-width:62px; }
.src-list a .h { flex-shrink:0; font-size:11px; color:var(--dim); min-width:0; max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-list a span.t, .src-list a span.t { color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.flags { margin:10px 0 0; padding:0; list-style:none; }
.flags li { color:var(--warn); font-size:13.5px; padding:4px 0 4px 22px; position:relative; }
.flags li::before { content:'\26A0'; position:absolute; left:0; }

.footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; color:var(--dim);
  font-size:12.5px; margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.footer .cost { color:var(--good); font-weight:600; }
.footer .copy { background:var(--card2); border:1px solid var(--line); color:var(--mut);
  padding:6px 12px; border-radius:9px; cursor:pointer; font-size:12.5px; font-weight:600; transition:all .15s; }
.footer .copy:active { background:#334155; }
.footer .copy.done { color:var(--good); border-color:rgba(34,197,94,.4); }
/* CA-34: cache-age line + one-tap Refresh */
.footer .push { margin-left:auto; }
.footer .cacheage { display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600;
  background:rgba(56,189,248,.12); color:#7dd3fc; border:1px solid rgba(56,189,248,.28); }
.footer .refresh { background:var(--card2); border:1px solid var(--line); color:var(--mut);
  padding:6px 12px; border-radius:9px; cursor:pointer; font-size:12.5px; font-weight:600; transition:all .15s; }
.footer .refresh:hover { border-color:rgba(56,189,248,.45); color:#bae6fd; }
.footer .refresh:active { background:#334155; }
.footer .refresh.loading { opacity:.65; cursor:progress; }

.pwa-hint { display:none; margin:14px auto 0; max-width:680px; text-align:center; font-size:12px; color:var(--dim); }
@media (max-width:480px) {
  body { padding-left:12px; padding-right:12px; }
  .card { padding:18px 16px; border-radius:16px; }
  .verdict-hero { flex-wrap:wrap; }
  .conf-ring { margin-left:0; }
  button#go { padding:0 16px; }
}