:root{
  --bg: #0f172a;
  --card: #0b1220;
  --accent: #7c3aed;
  --muted: #94a3b8;
  --avatar-size: clamp(72px, 12vw, 110px);
  --glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html{
  background:#071029;
  height: 100%;
  overflow-x: hidden;
}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#071029 0%, #0b1220 100%);
  color:#e6eef8;
  min-height:100vh;
  min-height:100dvh;
  display:block;
  padding:1rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.container{
  width:100%;
  max-width:720px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  background-color: var(--card);
  border-radius:16px;
  padding: 2rem;
  min-height: auto;
  position:relative;
  overflow:visible;
  box-shadow:0 10px 30px rgba(2,6,23,0.6);
  border:1px solid rgba(255,255,255,0.03);
}
.topbar{display:flex;justify-content:flex-end;gap:.5rem;margin-bottom:.5rem}
.manage{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:.35rem .6rem;border-radius:8px;cursor:pointer}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(rgba(2,6,23,0.6),rgba(2,6,23,0.6));}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;width:320px;max-width:90%;display:flex;flex-direction:column;gap:.5rem}
.muted{color:var(--muted);font-size:0.85rem}
.profile{display:flex;flex-direction:column;align-items:center;text-align:center}
.profile{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding-top:0}
.avatar-wrapper{
  position:relative;
  display:block;
  margin: 0 auto 0.5rem auto;
  cursor:pointer;
  width:var(--avatar-size);
  height:var(--avatar-size);
  z-index: 10;
}
.avatar-wrapper img{width:100%;height:100%;border-radius:999px;object-fit:cover;border:4px solid var(--glass);background:linear-gradient(90deg,var(--card), rgba(255,255,255,0.02));position:relative;z-index:6;box-shadow:0 6px 18px rgba(2,6,23,0.45);display:block;transform:none}

.avatar-wrapper .avatar-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--avatar-size) + 12px);height:calc(var(--avatar-size) + 12px);border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));z-index:4;box-shadow:0 2px 8px rgba(0,0,0,0.6);}

/* Ensure profile content sits below the avatar but is pushed down by padding */
.profile > *{position:relative;z-index:2}
.edit-overlay{position:absolute;inset:auto 0 0 0;background:linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));height:28px;border-bottom-left-radius:999px;border-bottom-right-radius:999px;color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:center;width:100%}
h1{margin:0.7rem 0 0.2rem;font-size:1.5rem}
.position{margin:0;margin-top:0.15rem;color:var(--muted);font-size:1.02rem;font-weight:700;opacity:0.95}
.desc{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.45}

.certifications{margin-top:1rem;display:grid;grid-template-columns:1fr;gap:0.5rem;align-items:stretch;grid-auto-rows:1fr;width:100%}
.cert-badge{display:flex;gap:0.5rem;align-items:center;justify-content:flex-start;background:rgba(255,255,255,0.02);padding:.8rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.04);font-size:0.95rem;color:var(--muted);height:100%;min-height:56px;box-sizing:border-box;width:100%}
.cert-badge .cert-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cert-badge .cert-icon svg{width:26px;height:26px;display:block}
.cert-badge .cert-label{flex:1;display:block;text-align:center;line-height:1.2}
.cert-badge .cert-icon img{width:24px;height:24px;display:block;object-fit:contain}

.links{margin-top:1.2rem;display:flex;flex-direction:column;gap:0.75rem}
.link-btn{display:flex;justify-content:space-between;align-items:center;padding:0.8rem 1rem;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,0.03);transition:transform .12s ease, box-shadow .12s ease;width:100%;box-sizing:border-box}
.link-btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(2,6,23,0.6)}
.link-btn .label{font-weight:600}
.link-btn .icon{opacity:0.7}
.link-btn .left{display:flex;align-items:center;gap:0.6rem}
.svc-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.svc-icon svg{width:18px;height:18px;display:block}

.add{display:block;margin:1rem auto 0;padding:0.6rem 1rem;border-radius:999px;background:transparent;border:1px dashed rgba(255,255,255,0.06);color:var(--muted);cursor:pointer}

.editor{margin-top:1rem;background:rgba(255,255,255,0.02);padding:1rem;border-radius:10px;display:none;flex-direction:column;gap:0.5rem}
.editor label{display:flex;flex-direction:column;font-size:0.85rem;color:var(--muted)}
.editor input{margin-top:0.35rem;padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit}
.editor-actions{display:flex;gap:.5rem;justify-content:flex-end}
.editor button{padding:0.5rem 0.85rem;border-radius:8px;border:none;background:var(--accent);color:white;cursor:pointer}
.editor .secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.footer{margin-top:1.25rem;font-size:0.8rem;color:var(--muted);text-align:center}

.site-footer-band{
  display:block;
  width:100%;
  background:transparent;
  padding:4px 0 calc(env(safe-area-inset-bottom, 6px) + 6px);
  border-radius:0 0 12px 12px;
  margin-top:1.25rem;
  text-align:center;color:var(--muted);font-size:0.82rem;
}

@media (max-width:420px){
  :root{--avatar-size:80px}
  
  /* Force background attachment for mobile */
  html, body {
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    -webkit-background-size: cover !important;
  }
  
  body{
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
  }
  
  .container{
    margin: 0.5rem;
    margin-top: max(2rem, env(safe-area-inset-top) + 1rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem 1rem 1rem 1rem;
    min-height: calc(100vh - 3rem);
    min-height: calc(100dvh - 3rem);
  }
  
  .avatar-wrapper{
    margin: 0 auto 1rem auto;
    flex-shrink: 0;
  }
  
  .profile{
    padding: 0;
    flex-shrink: 0;
  }
  
  .links {
    flex: 1;
    margin-top: 1rem;
  }
  
  .site-footer-band {
    margin-top: auto;
    padding-top: 1rem;
  }
}

@media (min-width:800px){
  .certifications{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem}
  .cert-badge .cert-label{text-align:left}
}

[contenteditable]{outline:none;border-bottom:1px dashed transparent;padding:2px}
[contenteditable]:focus{border-bottom-color:rgba(255,255,255,0.06)}