/* styles.css - simple responsive design */
:root{
  --accent:#0b7285;
  --dark:#0f1724;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
  --radius:12px;
  --max-width:900px;
}
*{box-sizing:border-box}
body{font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:var(--dark); line-height:1.5}
.container{max-width:var(--max-width); margin:28px auto; padding:20px;}
.header{display:flex; align-items:center; gap:18px; background:linear-gradient(90deg, rgba(11,114,133,0.08), rgba(11,114,133,0.02)); padding:18px; border-radius:var(--radius)}
.avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #D4AF37; /* Gold border */
}
.title h1{margin:0; font-size:20px}
.title p{margin:4px 0 0 0; color:var(--muted); font-size:14px}
.nav{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.nav a{padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--accent); background:transparent; border:1px solid transparent}
.nav a:hover{background:var(--card); box-shadow:0 1px 6px rgba(15,23,36,0.06)}

.card{background:var(--card); padding:16px; border-radius:12px; box-shadow:0 4px 18px rgba(15,23,36,0.04); margin-top:16px}
.section-title{display:flex; align-items:center; justify-content:space-between}
.grid{display:grid; gap:12px}
@media(min-width:720px){ .grid-2{grid-template-columns:1fr 1fr} .nav{margin-top:0} .header{justify-content:space-between} }

.footer{margin:28px 0; text-align:center; color:var(--muted); font-size:14px}

/* Buttons */
.btn{display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; background:var(--accent); color:white; font-weight:600}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; background:#e6f5f7; color:var(--accent); font-weight:600; font-size:13px}