/* Dark is the default */
:root {
  --bg:#0b0f19; --fg:#e6e8ee; --muted:#9aa3b2; --card:#0f1627; --border:#20293a; --accent:#60a5fa; --accent2:#22d3ee;
  --link:#93c5fd; --link-hover:#ffffff;
}

/* Light overrides ONLY when explicitly set */
html[data-theme="light"] {
  --bg:#ffffff; --fg:#0b1220; --muted:#5b6476; --card:#f7f9fc; --border:#e5e7eb; --accent:#2563eb; --accent2:#06b6d4;
  --link:#1d4ed8; --link-hover:#0b1220;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:24px}
header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 92%, transparent), color-mix(in srgb,var(--bg) 70%, transparent) 60%, transparent);backdrop-filter:blur(8px)}
nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.3px}
.nav a{margin-left:16px;color:var(--muted)}
.nav a:hover{color:var(--fg)}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#071426;font-weight:700}
.btn:hover{filter:brightness(1.05)}
.ghost{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg)}

/* Theme toggle button */
.toggle{margin-left:12px; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:10px; padding:8px 10px; cursor:pointer}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}

/* Two-column hero with grid areas */
.hero .grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:40px;
  align-items:center;
  grid-template-areas:
    "left right"
    "intro intro";
}
.hero .left{grid-area:left}
.hero .right{grid-area:right}
.hero .intro-wide{grid-area:intro}

.title{font-size:34px;line-height:1.15;margin:0 0 8px}
.subtitle{color:var(--muted);margin:0 0 18px}

.avatarWrap{display:flex;justify-content:center}
.avatar{width:100%;max-width:360px;height:auto;border-radius:28px;object-fit:cover;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* Animated background blobs */
.blob{position:absolute;filter:blur(40px);opacity:.5;z-index:-1}
.b1{width:420px;height:420px;background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);top:-60px;left:-80px;animation:float1 12s ease-in-out infinite}
.b2{width:380px;height:380px;background:radial-gradient(circle at 70% 70%, var(--accent2), transparent 60%);bottom:-80px;right:-60px;animation:float2 13s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,18px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-10px)}}

section{padding:36px 0;border-bottom:1px solid var(--border)}
h2{font-size:22px;margin:0 0 12px}

.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
@media(min-width:900px){.card.half{grid-column:span 6}}

.pub li{margin-bottom:12px}

footer{padding:28px 0;color:#7c869a}

/* Back to top */
.toTop{position:fixed;right:16px;bottom:16px;border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:12px;padding:10px 12px;cursor:pointer;opacity:0;pointer-events:none;transition:all .25s ease;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toTop.show{opacity:1;pointer-events:auto}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(16px);transition:all .6s ease}
.reveal.show{opacity:1;transform:none}

/* Active Research Panels */
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:16px}
.panel h3{margin-top:0}
.panel .summary{color:var(--fg)}
.figure-card{border:1px dashed var(--border);border-radius:12px;padding:10px;text-align:center;background:color-mix(in srgb, var(--card) 80%, transparent)}
.figure-card img{max-width:100%;border-radius:10px}
.figure-card .caption{color:var(--muted);font-size:.9rem;margin-top:6px}

/* Panels: summary + per-article rows with their own figures */
.panel .summary{color:var(--fg); margin-bottom:12px}

.panel-items{
  display:grid;
  gap:16px;
}

/* Each paper row: text left, figure right */
.paper{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
}

/* Title/link area */
.paper .meta ul{margin:6px 0 0 18px}
.paper .meta li{margin:8px 0}

/* Figure card reused */
.figure-card{border:1px dashed var(--border);border-radius:10px;padding:10px;text-align:center;background:color-mix(in srgb, var(--card) 80%, transparent)}
.figure-card img{max-width:100%;border-radius:8px}
.figure-card .caption{color:var(--muted);font-size:.9rem;margin-top:6px}

/* Mobile: stack text over figure */
@media (max-width:900px){
  .paper{grid-template-columns:1fr}
  .hero .grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "right"
      "intro";
  }
  .title{font-size:28px}
  .avatar{max-width:320px}
}

/* Force true centering inside software cards */
.soft-media{
  display:grid;
  place-items:center;
  text-align:center;
}
.soft-media img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain;
  object-position:center center;
  margin:0 auto;
}

/* ===== Domain link (globe spins continuously while hovered) ===== */
.domain-link{
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.domain-text{
  text-decoration: underline;
}

@keyframes spin360 {
  to { transform: rotate(360deg); }
}
.globe-svg{
  display: inline-block;
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
.domain-link:hover .globe-svg{
  animation: spin360 1.5s linear infinite; /* continuous spin while hovered */
}