:root{
  /* Default theme: dark (keep close to labcraft-site) */
  --bg:#000;
  --bg2:#0b0b0f;
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.72);
  --faint:rgba(255,255,255,0.52);

  --card:rgba(255,255,255,0.06);
  --card2:rgba(255,255,255,0.08);
  --stroke:rgba(255,255,255,0.12);
  --stroke2:rgba(255,255,255,0.18);

  --accent:#0a84ff;
  --accent2:#7ee787;

  --bgGlowBlue:rgba(10,132,255,0.22);
  --bgGlowGreen:rgba(126,231,135,0.10);

  --navBg:rgba(0,0,0,0.40);
  --navBorder:rgba(255,255,255,0.10);

  /* Workbench aliases (old naming) */
  --panel:var(--card);
  --border:var(--stroke);
}

:root[data-theme="light"]{
  --bg:#f7f8fb;
  --bg2:#ffffff;
  --text:rgba(10,12,18,0.92);
  --muted:rgba(10,12,18,0.72);
  --faint:rgba(10,12,18,0.52);

  --card:rgba(10,12,18,0.05);
  --card2:rgba(10,12,18,0.07);
  --stroke:rgba(10,12,18,0.12);
  --stroke2:rgba(10,12,18,0.18);

  --accent:#0a84ff;
  --accent2:#2ecc71;

  --bgGlowBlue:rgba(10,132,255,0.14);
  --bgGlowGreen:rgba(46,204,113,0.08);

  --navBg:rgba(255,255,255,0.55);
  --navBorder:rgba(10,12,18,0.10);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);

  /* Background base: glow + gradient */
  background:
    radial-gradient(1400px 900px at 50% -200px, var(--bgGlowBlue), transparent 60%),
    radial-gradient(900px 700px at 10% 0%, var(--bgGlowGreen), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 60%, rgba(5,5,7,0.85) 100%);

  transition: background 320ms ease, color 200ms ease;

  /* Apple-ish font stack */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui,
    ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans", sans-serif;
  letter-spacing:-0.01em;
}

:root[data-theme="light"] body{
  background:
    radial-gradient(1400px 900px at 50% -200px, var(--bgGlowBlue), transparent 60%),
    radial-gradient(900px 700px at 10% 0%, var(--bgGlowGreen), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, rgba(247,248,251,1) 100%);
}

a{color:inherit;text-decoration:none}

/* Fixed background layers (photo + animated glow) */
.wbBg,
.wbGlow{
  position:fixed;
  pointer-events:none;
  z-index:0;
}

.wbBg{
  inset:-10%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(1.02) contrast(1.06);
  opacity:0.35;

  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.74) 100%),
    url("./assets/Lab_bg_dark_themed.jpg");
}

:root[data-theme="light"] .wbBg{
  filter:saturate(1.06) contrast(1.04);
  opacity:0.42;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.62) 55%, rgba(255,255,255,0.78) 100%),
    url("./assets/Lab_bg_light_themed.jpg");
}

.wbGlow{
  inset:-30%;
  opacity:0.46;
  mix-blend-mode:screen;
  will-change:transform,filter,opacity;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(30px) saturate(1.15);
}

.wbGlow::before,
.wbGlow::after{
  content:"";
  position:absolute;
  inset:0;
}

.wbGlow::before{
  background:
    radial-gradient(closest-side at 26% 28%, rgba(10,132,255,0.44), transparent 62%),
    radial-gradient(closest-side at 72% 46%, rgba(126,231,135,0.26), transparent 66%),
    radial-gradient(closest-side at 52% 16%, rgba(170,120,255,0.18), transparent 62%);
  animation: wbDrift 9.6s ease-in-out infinite alternate;
  animation-delay:-1.7s;
}

.wbGlow::after{
  background:
    radial-gradient(closest-side at 64% 62%, rgba(10,132,255,0.24), transparent 60%),
    radial-gradient(closest-side at 22% 68%, rgba(126,231,135,0.16), transparent 62%);
  opacity:0.32;
  animation: wbPulse 7.8s cubic-bezier(0.4,0,0.2,1) infinite alternate-reverse;
  animation-delay:-0.9s;
}

:root[data-theme="light"] .wbGlow{
  mix-blend-mode:multiply;
  opacity:0.18;
}

@media (prefers-reduced-motion: reduce){
  .wbGlow::before,
  .wbGlow::after{animation:none}
}

@keyframes wbDrift{
  0%{transform:translate3d(-3.5%,-2.5%,0) scale(0.99) rotate(-0.6deg);filter:blur(28px) saturate(1.10) hue-rotate(0deg);opacity:0.56}
  50%{transform:translate3d(1.2%,0.8%,0) scale(1.04) rotate(0.35deg);filter:blur(26px) saturate(1.20) hue-rotate(10deg);opacity:0.68}
  100%{transform:translate3d(4%,3%,0) scale(1.07) rotate(0.85deg);filter:blur(29px) saturate(1.14) hue-rotate(18deg);opacity:0.60}
}

@keyframes wbPulse{
  0%{transform:translate3d(2.5%,2%,0) scale(1.03);filter:blur(32px) saturate(1.05) hue-rotate(0deg);opacity:0.50}
  100%{transform:translate3d(-2%,-1.5%,0) scale(1.10);filter:blur(28px) saturate(1.20) hue-rotate(-12deg);opacity:0.58}
}

/* Bring content above background layers */
.topbar,
.container{position:relative;z-index:1}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--navBorder);
  background:var(--navBg);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-weight:900;
  box-shadow:0 12px 30px rgba(0,0,0,0.22);
}
:root[data-theme="light"] .logo{box-shadow:0 12px 30px rgba(0,0,0,0.12)}
.brand-title{font-weight:800;font-size:16px;letter-spacing:0}
.brand-sub{font-size:12px;color:var(--muted)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.btn{
  border:1px solid var(--stroke);
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  color:var(--text);
  cursor:pointer;
  transition:transform 160ms ease, border-color 160ms ease, background 160ms ease, filter 160ms ease;
}

:root[data-theme="light"] .btn{
  background:rgba(10,12,18,0.04);
}

.btn:hover{border-color:var(--stroke2);transform:translateY(-1px)}
.btn:active{transform:translateY(0px) scale(0.99)}

.btn-primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
.btn-primary:hover{filter:brightness(1.05)}

.btn-ghost{
  background:transparent;
}

.themeBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.container{max-width:1000px;margin:0 auto;padding:22px}
.hero{display:grid;grid-template-columns: 1fr 1.2fr;gap:18px;align-items:start}
@media (max-width: 900px){.hero{grid-template-columns:1fr}}

.hero-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:18px;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.hero-card.secondary{background:var(--card2)}
.hero-title{font-size:18px;font-weight:900}
.hero-desc{margin-top:8px;color:var(--muted);line-height:1.5}
.hero-meta{margin-top:10px;font-size:12px;color:var(--muted)}

.grid{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:14px;
  background:var(--card);
  transition:transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.card:hover{border-color:var(--stroke2);transform:translateY(-1px)}
.card-title{font-weight:800}
.card-desc{margin-top:6px;font-size:12px;color:var(--muted)}

.section{margin-top:18px}
.section-title{font-weight:800;margin:0 0 10px 0}
.panel{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
  margin:0;
}

.footer{margin-top:20px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.muted{color:var(--muted)}