@import url('https://fonts.googleapis.com/css2?family=Anton&family=Prompt:wght@300;400;600;700&display=swap');

/* AGI — Source Reliability signal · live demo. Palette matched to index.html */
:root {
  --ground:#0a0010; --panel:#12001f; --panel-2:#180430; --line:#2a0d45;
  --purple:#8b00ff; --purple-light:#a855f7; --pink:#ff006e; --cyan:#00f5ff;
  --amber:#ff6b00; --green:#00ff9f; --text:#f4ecff; --muted:#cdbce6; --faint:#8a7aa8;
  --bg:var(--ground); --brand:var(--cyan); --brand2:var(--purple);
  --display:"Anton",system-ui,sans-serif; --body:"Prompt",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --grad:linear-gradient(135deg,var(--purple),var(--pink));
  --grad-cyan:linear-gradient(135deg,var(--cyan),var(--purple));
  --shadow:0 26px 64px -34px rgba(139,0,255,.55);
}
/* Light mode — crisp, cool, no purple haze; accents darkened for legibility on white */
[data-theme="light"]{
  --ground:#f7f9fc; --panel:#ffffff; --panel-2:#eef2f8; --line:#e2e8f0;
  --text:#131a2b; --muted:#4d5a72; --faint:#8794aa;
  --cyan:#0e7490; --purple:#6d28d9; --purple-light:#6d28d9; --pink:#be1558; --green:#047857; --amber:#b45309;
  --brand:var(--cyan); --brand2:var(--purple);
  --shadow:0 10px 26px rgba(30,45,80,.10);
}
[data-theme="light"] body{ background:linear-gradient(180deg,#ffffff,#f4f7fb) fixed; }
[data-theme="light"] header{ background:linear-gradient(135deg,#f8f6ff,#eef4fc); }
[data-theme="light"] .notice{ background:linear-gradient(180deg,#fff7ed,#ffffff); }
[data-theme="light"] .score,[data-theme="light"] .bigscore,[data-theme="light"] .metric strong{ text-shadow:none; }
[data-theme="light"] .brand::after{ color:#fff; }
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 84% -10%, rgba(139,0,255,.20), transparent 56%),
    radial-gradient(90% 60% at -8% 106%, rgba(0,245,255,.10), transparent 54%),
    var(--ground);
  color:var(--text); font-family:var(--body); font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan)}
.wrap{width:min(1180px,92vw);margin:auto}

/* Header */
header{background:linear-gradient(135deg,rgba(139,0,255,.18),rgba(255,0,110,.10)),var(--panel);border-bottom:1px solid var(--line);padding:22px 0 46px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:18px}
.brand{font-family:var(--mono);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:600;display:flex;align-items:center;gap:.6rem}
.brand::after{content:"LIVE DEMO";font-size:.62rem;letter-spacing:.16em;color:var(--ground);background:var(--grad-cyan);padding:.2rem .5rem;border-radius:999px;font-weight:700}
.navlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:.9rem;letter-spacing:.02em}
.nav a:hover{color:var(--text)}
.nav button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:7px 14px;cursor:pointer;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em}
.nav button:hover{color:var(--cyan);border-color:var(--purple)}
.hero{padding-top:40px;max-width:900px}
.hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(2rem,5vw,3.6rem);line-height:1.0;margin:0 0 18px;text-wrap:balance}
.hero p{font-size:1.1rem;color:var(--muted);max-width:760px}
.notice{margin-top:-22px;background:linear-gradient(180deg,rgba(255,107,0,.14),rgba(18,0,31,.9));border:1px solid var(--line);border-left:3px solid var(--amber);padding:14px 18px;border-radius:14px;color:var(--muted);box-shadow:var(--shadow)}
.notice strong{color:var(--amber)}

/* Layout */
main{padding:34px 0 60px}
.grid{display:grid;grid-template-columns:330px 1fr;gap:24px}
.panel{background:linear-gradient(180deg,var(--panel),var(--ground));border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.15}
h2{font-size:clamp(1.2rem,2.4vw,1.7rem)}h3{font-size:1.02rem;color:var(--purple-light)}
.small{font-size:.9rem;color:var(--faint);font-family:var(--mono);letter-spacing:.02em}

/* Weights panel */
.weight{margin:15px 0}
.weight label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--muted)}
.weight label span{color:var(--cyan)}
.weight input{width:100%;accent-color:var(--purple)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{border:1px solid var(--line);background:transparent;color:var(--text);padding:10px 15px;border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em}
.btn:hover{border-color:var(--purple)}
.btn.primary{background:var(--grad-cyan);color:var(--ground);border:none;font-weight:700;box-shadow:0 0 26px -8px rgba(0,245,255,.6)}

/* Add-a-source panel */
.addbox{margin-top:22px;padding-top:20px;border-top:1px dashed var(--line)}
.addbox h3{margin:0 0 4px;display:flex;align-items:center;gap:.5rem}
.tagmini{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--ground);background:var(--grad-cyan);padding:.15rem .45rem;border-radius:999px;font-weight:700}
.fld{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:11px 0}
.fld input,.fld select{width:100%;margin-top:5px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--ground);color:var(--text);font-family:var(--body)}
.addgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin:12px 0}
.addgrid label{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;gap:4px}
.addgrid input{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--text);font-family:var(--body)}
/* just-added row highlight */
@keyframes flashnew{0%{background:rgba(0,245,255,.16)}100%{background:transparent}}
tbody tr.justadded{animation:rowin .4s cubic-bezier(.2,.7,.2,1) both,flashnew 1.8s ease .4s both}

/* Controls + table */
.controls{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.controls input,.controls select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ground);color:var(--text);font-family:var(--body)}
.controls input::placeholder{color:var(--faint)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);cursor:pointer;font-weight:400}
.score{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--cyan);text-shadow:0 0 20px rgba(0,245,255,.3)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border:1px solid var(--line)}
.publisher{background:rgba(0,245,255,.12);color:var(--cyan)}
.platform{background:rgba(255,0,110,.14);color:var(--pink)}
.reference{background:rgba(0,255,159,.12);color:var(--green)}
.factcheck,.factchecker{background:rgba(255,107,0,.14);color:var(--amber)}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;min-width:80px}
.bar span{display:block;height:100%;background:var(--grad-cyan)}
.source-link{text-decoration:none;font-weight:600;color:var(--text)}
.source-link:hover{color:var(--cyan)}
.rank{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--faint);transition:color .3s ease}
/* Live-demo motion: rows animate in on every re-rank, bars glide */
@keyframes rowin{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
tbody tr{animation:rowin .4s cubic-bezier(.2,.7,.2,1) both}
.score{transition:color .3s ease}
.bar span{transition:width .55s cubic-bezier(.2,.7,.2,1)}
/* "Playing" state — pulse the live badge while the auto-demo runs */
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(0,245,255,.5)}50%{box-shadow:0 0 0 6px rgba(0,245,255,0)}}
.brand.playing::after{animation:livepulse 1.1s ease-in-out infinite}

/* Source detail */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.metric{display:grid;grid-template-columns:150px 1fr 38px;gap:10px;align-items:center;margin:10px 0;font-size:.9rem;color:var(--muted)}
.metric strong{color:var(--cyan);font-family:var(--display);font-weight:400}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.source-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.bigscore{font-family:var(--display);font-weight:400;font-size:3.2rem;color:var(--cyan);text-shadow:0 0 34px rgba(0,245,255,.4)}
footer{padding:28px 0;color:var(--faint);border-top:1px solid var(--line);font-family:var(--mono);font-size:.78rem;letter-spacing:.03em}
footer a{color:var(--cyan)}

@media(max-width:850px){.grid,.two{grid-template-columns:1fr}.nav{align-items:flex-start}.table-wrap{overflow:auto}.metric{grid-template-columns:120px 1fr 34px}}