:root{--bg:#0b1020;--card:#121a33;--muted:#7f8bb3;--text:#e6ebff;--accent:#5ac8fa;--accent2:#8b5cf6;--danger:#ef4444;--border:rgba(255,255,255,.08)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; background: radial-gradient(1200px 600px at 50% 0%, rgba(90,200,250,.20), transparent 60%), var(--bg); color:var(--text)}
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);backdrop-filter: blur(8px);position:sticky;top:0;background:rgba(11,16,32,.7);z-index:10}
.brand-title{font-weight:700;font-size:18px;letter-spacing:.2px}
.brand-subtitle{color:var(--muted);font-size:12px;margin-top:2px}
.auth{display:flex;gap:8px;align-items:center}
.tabs{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
.tab{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
.tab.active{border-color:rgba(90,200,250,.6);box-shadow:0 0 0 2px rgba(90,200,250,.15) inset}
.tabs-spacer{flex:1}
.status{color:var(--muted);font-size:12px}
.main{flex:1;padding:14px}
.panel{display:none}
.panel.active{display:block}
.panel-grid{display:grid;grid-template-columns: 1.1fr .9fr;gap:14px}
@media (max-width: 980px){.panel-grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:14px}
.card-title{font-weight:650;margin-bottom:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.input,.textarea{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;color:var(--text);padding:10px 12px;min-height:40px;outline:none}
.input{min-width:220px}
.textarea{width:100%;min-height:120px;resize:vertical}
.btn{background:linear-gradient(180deg, rgba(90,200,250,.95), rgba(90,200,250,.65));border:0;color:#04101c;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:650}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
.canvas{width:100%;max-width:520px;aspect-ratio:1/1;border-radius:16px;border:1px solid var(--border);background:#050914;display:block}
.hint{color:var(--muted);font-size:12px;margin-top:10px;line-height:1.35}
.text{color:var(--text);line-height:1.45}
.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;padding:12px 14px;border-top:1px solid var(--border)}
.map-card{min-height:520px}
.map{height:520px;border-radius:14px;border:1px solid var(--border);overflow:hidden}
.score{color:var(--text);font-weight:650}

 .sources{display:flex;flex-direction:column;gap:6px}
 .sources a{color:var(--accent);text-decoration:none;word-break:break-word}
 .sources a:hover{text-decoration:underline}
 .source-meta{color:var(--muted);font-size:11px;word-break:break-word;margin-bottom:6px}

 .toggle{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}
 .toggle input{transform:translateY(1px)}


/* =========================
   VYRE BLUE FACE SYNC
   (image overlay bound to facial engine)
========================= */

.face-wrap{
  position:relative;
  width:100%;
  max-width:520px;
}
.face-wrap .canvas{
  position:relative;
  z-index:1;
}
#vyreBlueFace{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:2;
  filter: drop-shadow(0 0 28px rgba(90,200,250,.55));
  transition: transform .15s ease, filter .15s ease;
}
#vyreBlueFace.talking{
  animation: vyreTalk 0.9s ease-in-out infinite;
}
@keyframes vyreTalk{
  0%{transform:scale(1);}
  50%{transform:scale(1.045);}
  100%{transform:scale(1);}
}