:root{
  --primary:#FF7EB9; --secondary:#7AF3FF; --accent:#FFF8FC; --dark-bg:#2C2F44;
  --ink:#232637; --card:#FFFFFF; --muted:#6b7280; --radius:18px; --shadow:0 10px 30px rgba(35,38,55,0.08); --blur:saturate(180%) blur(12px);
}
*{box-sizing:border-box}body{font-family:'Nunito Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0;color:var(--ink);background:linear-gradient(120deg,#fff,var(--accent))}
/* Nav */
.cv-nav{position:sticky;top:0;z-index:50;backdrop-filter:var(--blur);background:linear-gradient(135deg,rgba(0,0,0,.02),rgba(255,255,255,.6));border-bottom:1px solid rgba(0,0,0,.06)}
.cv-nav-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 16px}
.brand{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;text-decoration:none;font-weight:800;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.cv-menu{display:flex;gap:10px;justify-self:center;align-items:center}
.menu-link{text-decoration:none;color:var(--ink);font-weight:700;padding:8px 12px;border-radius:10px}
.menu-link:hover{background:rgba(255,255,255,.8);box-shadow:var(--shadow);transform:translateY(-1px);transition:all .2s}
.nav-actions{display:flex;gap:8px}
.menu-btn,.mode-btn{border:none;background:#fff;border-radius:12px;height:40px;cursor:pointer;font-size:18px;box-shadow:var(--shadow);padding:0 12px}
/* Layout */
.layout{max-width:1200px;margin:24px auto;padding:0 16px;display:grid;grid-template-columns:320px 1fr;gap:24px}
.sidebar{position:sticky;top:84px;align-self:start;background:radial-gradient(1000px 200px at 50% -400px, rgba(0,0,0,.04), transparent);border-radius:var(--radius);padding:22px}
.avatar__frame{border-radius:50%;overflow:hidden;margin:8px auto 12px;box-shadow:0 15px 30px rgba(0,0,0,.08)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.identity .name{text-align:center;font-size:clamp(1.3rem,2.4vw,1.8rem);margin:6px 0 2px}
.identity .name span{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.identity .tagline{text-align:center;color:var(--muted);margin:0 0 8px}
.identity .lead{text-align:center;color:#4b5563;margin:0 0 12px}
/* Cards */
.content{display:grid;gap:22px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:0;border:1px solid rgba(0,0,0,.06);overflow:hidden}
.card__title{margin:0;padding:16px 20px;font-size:1.1rem;font-weight:800;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.card__body{padding:18px 20px;border-top:1px solid rgba(0,0,0,.06);transition:max-height .35s ease, opacity .25s ease}
/* Collapsed by default */
.card__body{max-height:0;opacity:.0;padding-top:0;padding-bottom:0;overflow:hidden}
.card__body.is-open{max-height:2000px;opacity:1;padding-top:18px;padding-bottom:18px}
.toggle-ind{font-weight:800;color:#94a3b8}
.item{padding:16px;border:1px dashed rgba(0,0,0,.08);border-radius:14px;margin:12px 0;background:#fff}
.item__head{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.item__title{margin:0;font-size:1.05rem}.item__date{font-weight:700;color:#6b7280}.item__desc{margin:8px 0 0}
.footer{text-align:center;color:#6b7280;padding:10px 0 0;font-size:.95rem}

/* Night mode fixes */
@media (prefers-color-scheme: dark){
  body:not(.force-light){background:var(--dark-bg);color:#E9EAF3}
  body:not(.force-light) .card{background:#2C2F44;color:#E9EAF3;border-color:rgba(255,255,255,.08)}
  body:not(.force-light) .card__title{color:#F7F7FA;background:none}
  body:not(.force-light) .card__body{border-top-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
  body:not(.force-light) .toggle-ind{color:#B8BECD}
  body:not(.force-light) .item{background:#303355;border-color:rgba(255,255,255,.1)}
  body:not(.force-light) .menu-link{color:#E9EAF3}
  body:not(.force-light) .menu-btn, body:not(.force-light) .mode-btn{background:#2C2F44;color:#fff}
  body:not(.force-light) .identity .lead{color:#E5E7EB;opacity:.9}
}

/* Mobile */
@media (max-width:980px){
  .layout{grid-template-columns:1fr}.sidebar{position:relative;top:0}
  .cv-menu{display:none}.cv-menu.open{display:flex;position:fixed;top:70px;right:16px;left:16px;flex-direction:column;background:rgba(255,255,255,.96);border-radius:14px;padding:12px;border:1px solid rgba(0,0,0,.08)}
  .menu-link{padding:12px 14px;border-radius:10px}
  body:not(.force-light) .cv-menu.open{background:rgba(44,47,68,.98)}
}
/* Compact */
.jsf-compact .item{margin:8px 0;padding:12px}


/* JSF QR styled card */
.jsf-cv-qr-block,
.cv-qr-section .cv-qr-wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  margin-top:18px;
}
.jsf-qr-wrapper {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px 12px 10px;
  border-radius:18px;
  border:3px solid #000;
  background:#fff;
}
.jsf-qr-wrapper img.jsf-qr-img {
  display:block;
  max-width:160px;
  height:auto;
}
.jsf-qr-label {
  margin-top:6px;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
}
.jsf-qr-label::before {
  content:"\1F4F1";
  font-size:14px;
}

body:not(.jsf-preview) .jsf-cv-qr-block { display:none!important; }