:root{
    --bg:#0f1222; --text:#eef2ff; --muted:#b9c0d4; --soft:#17223a; --card:#121a33; --line:#263055;
    --accent:#7c5cff; --accent-2:#00d4ff; --shadow:rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    background:#0f1222;
  }
  
  /* Corner geometric graphics */
  body::before,
  body::after{
    content:"";
    position:fixed;
    z-index:-1;
    width:clamp(180px, 28vw, 360px);
    height:clamp(180px, 28vw, 360px);
    background-repeat:no-repeat;
    background-size:contain;
    pointer-events:none;
    opacity:.95;
    filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));
  }
  body::before{ top:.75rem; left:.75rem; background-image:url("assets/bg-corner-left.svg"); }
  body::after{ right:.75rem; bottom:.75rem; background-image:url("assets/bg-corner-right.svg"); }
  
  .shell{max-width:1100px;margin:0 auto;padding:20px}
  .hero{
    display:flex;justify-content:space-between;align-items:center;
    background:var(--card);border:1px solid var(--line);
    border-radius:14px;padding:18px 20px;box-shadow:0 10px 30px var(--shadow);
    position:sticky;top:10px;z-index:5
  }
  .hero__left{display:flex;gap:16px;align-items:center}
  .avatar{width:68px;height:68px;border-radius:12px;border:1px solid var(--line)}
  h1{margin:0 0 2px;font-size:26px}
  .muted{color:var(--muted)}
  .btn{background:var(--accent);padding:10px 16px;border-radius:10px;text-decoration:none;border:0;display:inline-block}
  .btn:hover{filter:brightness(1.1)}
  
  /* Chips: uniform white pills */
  .chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:999px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    font-size: 12px; font-weight: 600;
  }
  .chip:hover { background:#1a2442; border-color:#3a4a86; }
  
  /* Iconic sidebar buttons */
  .sidenav { position: fixed; left: 30px; top: 140px; }
  .nav { display:flex; flex-direction:column; gap:12px; }
  .nav a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    width:112px; height:72px; text-decoration:none; font-weight:700; letter-spacing:.3px;
    border-radius:14px; border:1px solid var(--line);
    background: linear-gradient(180deg, rgba(23,34,58,.65), rgba(18,26,51,.65));
    color:#8fb0ff; box-shadow:0 6px 16px var(--shadow);
    transition: transform .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
  }
  .nav a .ico{ width:22px; height:22px; color:#9ec2ff; }
  .nav a .label{ font-size:12px; }
  .nav a:hover{ transform:translateY(-1px); border-color:#3a4a86; color:#cfe0ff; }
  .nav a.active{
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:#0b1020; border-color:transparent;
  }
  .nav a.active .ico{ color:#0b1020; }
  
  main{margin-top:20px;margin-left:150px}
  section{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:18px 0;padding:18px}
  h2{margin:0 0 12px}
  .badges .badge{display:inline-block;background:var(--soft);border:1px solid var(--line);
    padding:6px 10px;border-radius:999px;margin:0 6px 6px 0}
  .tags .tag{display:inline-block;background:var(--soft);border:1px solid var(--line);
    padding:6px 10px;border-radius:8px;margin:0 6px 6px 0}
  
  .resume-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
  .card{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px}
  .small{font-size:14px}
  .list{padding-left:18px}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
  .label{font-size:12px;color:var(--muted)}
  .filters{display:flex;gap:8px;margin-bottom:10px}
  .pill{background:transparent;border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:var(--text)}
  .pill.active,.pill:hover{background:var(--accent-2);border-color:var(--accent-2);color:#0b1020}
  .bloglist .post{display:block;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px}
  .bloglist time{font-size:12px;color:var(--muted)}
  footer{opacity:.8;margin:24px 0;text-align:center}
  
  /* Contact form layout & styles */
  .form-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
  }
  #contact input[type="text"],
  #contact input[type="email"],
  #contact textarea{
    width:100%; background:var(--soft); border:1px solid var(--line); color:var(--text);
    border-radius:10px; padding:10px 12px; font:inherit;
  }
  #contact textarea{ grid-column:1 / -1; min-height:140px; resize:vertical; }
  #contact button.btn{ grid-column:1 / 2; justify-self:start; margin-top:4px; }
  #contact .small{ grid-column:1 / -1; margin-top:6px; }
  #contact input:focus,#contact textarea:focus{ outline:2px solid var(--accent-2); outline-offset:2px; border-color:var(--accent-2); }
  .alert{background:#12203a;border:1px solid #263055;border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:14px}
  .alert--ok{border-color:#00d4ff}
  .alert--err{border-color:#ef3b2c}
  .hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
  
  @media (max-width:900px){
    .sidenav{ position:static; margin:10px 0; }
    .nav{ flex-direction:row; flex-wrap:wrap; }
    .nav a{ width:96px; height:68px; }
    main{ margin-left:0; }
    .hero{ position:static; flex-wrap:wrap; }
    .resume-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:560px){
    body::before, body::after{ display:none; }
  }