:root{
  --primary:hwb(280 27% 53%);
  --bg:#f7f9fc;
  --card:#ffffff;
  --text:#222;
  --muted:#555;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
.nav{position:fixed;left:0;top:0;width:220px;height:100vh;background:var(--primary);color:white;padding:24px;display:flex;flex-direction:column;align-items:center}
.img-profile{width:120px;height:120px;border-radius:50%;background:#fff;padding:10px}
.brand{margin-bottom:18px;text-align:center}
.nav-list{list-style:none;padding:0;margin:0;width:100%}
.nav-list li{width:100%;margin:8px 0}
.nav-list a{color:white;text-decoration:none;display:block;padding:8px;border-radius:6px}
.container{margin-left:240px;padding:28px;max-width:900px}
.card{background:var(--card);padding:18px;margin-bottom:18px;border-radius:10px;box-shadow:0 6px 18px rgba(31,111,235,0.08)}
.primary{color:var(--primary)}
.muted{color:var(--muted)}
.date{font-size:0.9rem;color:var(--muted)}
.cta a{display:inline-block;margin-top:8px;padding:10px 14px;background:var(--primary);color:white;text-decoration:none;border-radius:6px}
ul{padding-left:18px}
@media (max-width:800px){
  .nav{position:relative;width:100%;height:auto;flex-direction:row;padding:12px;justify-content:space-between}
  .container{margin-left:0;padding:12px}
  .img-profile{
    width: 250px;
    float:left}
}