:root{ --bg:#f4f6f8; --card:#ffffff; --accent:#0f6efd; --muted:#6b7280; --text:#0f1724; --sidebar:#0b1b2b; } *{box-sizing:border-box} body{ font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--text); margin:0; padding:28px; } .container{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns: 260px 1fr; gap:28px; } .sidebar{ background:linear-gradient(180deg, rgba(11,27,43,0.98), rgba(11,27,43,0.95)); color:white; padding:22px; border-radius:10px; min-height:320px; } .photo{ width:64px;height:64px;border-radius:8px; background:rgba(255,255,255,0.08); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:20px;margin:0 auto 12px; } .name{font-size:18px;margin:0;text-align:center} .role{font-size:13px;color:rgba(255,255,255,0.75);text-align:center;margin:6px 0 14px} .sidebar h4{margin:12px 0 6px;font-size:13px;color:rgba(255,255,255,0.9)} .sidebar p,a{font-size:13px;color:rgba(255,255,255,0.85);margin:4px 0} .sidebar a{color:var(--accent);text-decoration:none} .main{ background:var(--card); padding:24px; border-radius:10px; box-shadow:0 8px 30px rgba(12,24,40,0.06); } .section{margin-bottom:18px} .summary h2, .experience h2, .projects h2, .education h2, .certs h2{ font-size:16px;margin:0 0 10px 0;color:var(--text); border-bottom:1px solid #eef2f6;padding-bottom:8px; } .summary p{color:var(--muted);line-height:1.5} .job{margin-bottom:14px} .job h3{margin:0;font-size:15px} .job .meta{font-size:13px;color:var(--muted);margin:6px 0} .job ul{margin:8px 0 0 18px;color:var(--text)} .projects ul, .certs ul{margin:6px 0 0 18px} @media (max-width:880px){ .container{grid-template-columns:1fr; padding:12px} .sidebar{order:2;margin-top:12px} .main{order:1} }