:root{
      --bg:#0f1724; /* deep blue/gray */
      --card:#0b1220;
      --accent:#f3c26b;
      --muted:#9aa4b2;
      --btn:#ffffff;
      --radius:14px;
      font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }

    html,body{height:100%;}
    body{
      margin:0;display:grid;place-items:center;padding:32px;background:linear-gradient(180deg,#c37423  0%, #0f1724 100%);
      color:oklch(97.116% 0.00761 207.892);
    }

    .card{
      width:100%;max-width:420px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:20px;padding:28px 22px;box-shadow:0 10px 30px rgba(2,6,23,0.6);backdrop-filter: blur(6px);
      border:1px solid rgba(255,255,255,0.03);
    }

    .profile{
      display:flex;align-items:center;gap:16px;margin-bottom:18px;
    }

    .avatar{
      width:78px;height:78px;border-radius:18px;flex:0 0 78px;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,0.6);
      border:2px solid rgba(255,255,255,0.04);
    }
    .avatar img{width:100%;height:100%;object-fit:cover;display:block}

    .title{
      line-height:1; 
    }
    .title h1{font-size:20px;margin:0 0 6px 0;letter-spacing:0.2px}
    .title p{margin:0;color:var(--muted);font-size:13px}

    .links{display:flex;flex-direction:column;gap:12px;margin-top:6px}

    .link-btn{
      display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      text-decoration:none;color:var(--btn);font-weight:600;border:1px solid rgba(255,255,255,0.03);transition:transform .12s ease, box-shadow .12s ease;
    }
    .link-btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(2,6,23,0.45)}

    .link-icon{
      width:38px;height:38px;border-radius:10px;display:inline-grid;place-items:center;background:rgba(255,255,255,0.03);flex:0 0 38px
    }

    .small{font-size:13px;color:var(--muted);font-weight:500}

    .footer{margin-top:16px;text-align:center;color:var(--muted);font-size:12px}

    /* responsive tweaks */
    @media (max-width:420px){
      .card{padding:20px}
      .avatar{width:70px;height:70px}
    }